Macca Blog

My life experiences with code and design

Integrating GWT into an existing application

Posted on by Mark

How do you integrate GWT into an existing, AJAX based application???

This is the question that arose for me recently. I was working on a decent sized web application that used the popular Dojo JavaScript library. We simply wanted a far more stable environment to develop our application and chose GWT for this. The problem was that we certainly did not want to roll back and re-implement all of our features that had been developed using Dojo.

What we wanted was to use GWT for a whole new section of the website, and also integrate it into existing pages.

The following article explains how we went about doing this.

The primer…

For those of you who live under a rock, GWT is the Google Web Toolkit, it is a framework that allows developers to create rich Internet applications (RIA’s) in a Java environment, rather than a HTML/JavaScript world.

It does this by allowing the developers to write their web pages as Java, which then, through Google magic, compiles the Java code into cross browser, high performance HTML and JavaScript (and yes this certainly includes AJAX calls too).

You can find more info on the website: GWT

The problem:


When developing
in GWT, you typically develop in hosted mode which runs in the JVM allowing for full debugging etc…, then once you are happy, you compile and deploy into your web app for acceptance testing and the like.

Most (if not all) the documentation assumes that you have a replacement point in your HTML page (like a div with an id of “replaceMe”) that the compiled GWT JavaScript code uses as the initial insertion point that initialises all your GWT widgets and code when the page loads. This works beautifully out of the box…

Our problem was that the new dynamic widgets that we were developing did not need to get integrated into the website when the page initially loads, rather, during the callbacks of a few legacy AJAX calls.

How do you initiate GWT when you want it to? That was our key concern…

Our first port of call was to examine the generated JavaScript that was not obfuscated, and just see how it all worked, surprisingly this was actually pretty clear and we could see what it was doing. The main issue was that we did not want to just call some of their own generated, internal methods, because in production, we would be providing obfuscated JavaScript code and that would throw a significantly large spanner in the works (not to mention being quite hacky).

JSNI
The solution was JSNI (JavaScript Native Interface) which basically allows you to ‘expose’ your own methods in Java that can be called via your own custom JavaScript using a funky style of meta-style programming.

Here is an example of some JSNI:

public static native void jsniMethod() /*-{
//some javascript goes here
}-*/;

The logic behind the integration
Using the wonderful (and in my opinion, vastly underestimated) power of JavaScript, JSNI allowed us to register a method on the window object in the browser, that would allow us to call at any time in custom JavaScript, which then would invoke our GWT code.

Here is a bit more of an example:
(this example was taken and slightly re-written from the GWT doco)


package
mypackage;

public MyUtilityClass
{
public static int generateWidget(int intProp, String stringProp) {
...GWT code goes here...
}

public static native void exportStaticMethod() /*-{
$wnd.loadMyBusinessWidget =
@mypackage.MyUtilityClass::
generateWidget(Ijava/lang/String);
}-*/;
}

On the start up of the app, in the onModuleLoad() method of the entry point, (i.e. when the page loads through the *nocache.js file), we call the native method exportStaticMethod() which then exposes the method loadMyBusinesWidget() on the window page object that I can call anytime (and as you can see, pass in parameters too!) like so:

window.loadMyBusinessWidget(123, 'some string');

And that’s it!

I hope this helps anyone out there that is having the same issues, as always, please shoot me a comment or email if ANY of this is unclear and I will do my best to help out.

This entry was posted in Google, Gwt, Integration, Java, JavaScript, JSNI. Bookmark the permalink.

3 Responses to Integrating GWT into an existing application

  1. Dennis Gavrilov

    Thanks for sharing this approach! Your article saved my day.

  2. Mark

    Thanks Dennis, glad to hear it helped you out.

  3. Ana

    Hi,

    I’m new on GWT and i’m trying to do something but don´t know how…. My app has 2 panels (HorizontalSplitPanel and VerticalSplitPanel), in a way that i have my window divided in 3 parts. In each part i want 3 differents app to be runing. One of them is an open source web app, written in Java/JSP(no GWT), but i don´t know how to integrate it, in a way that i can access de events generated by it. I’m a little lost and any help would be very usefull.
    Thank in advance.
    Regards,
    Ana

Leave a Comment

Your email address will not be published. Required fields are marked *


*