Since that post Google have updated Web toolkit, currently version 2.0.3 and has now made it easier to make cross site requests through the use of their new JsonpRequestBuilder object and the Javascript object overlay types for result encapsulation.

This is a quick tutorial update on how to make use of the object overlay types. The application contacts the Geonames webservice. For the example I shall use the ‘Placename lookup with postalcode (JSON)’ function by making the following call:

http://ws.geonames.org/postalCodeLookupJSON?postalcode=M1&country=GB&maxRows=4

This returns location details for places matching the M1 post code so central Manchester in the United Kingdom.

The results this request return are as follows:

{"postalcodes":[
{"adminCode3":"BN","adminName3":"Manchester District (B)","adminCode2":"00","postalcode":"M1 1AD","adminCode1":"ENG","countryCode":"GB","lng":-2.24521599415295,"placeName":"City Centre Ward","lat":53.4838491117407,"adminName1":"England"},
{"adminCode3":"BN","adminName3":"Manchester District (B)","adminCode2":"00","postalcode":"M1 1AE","adminCode1":"ENG","countryCode":"GB","lng":-2.23116928236428,"placeName":"Ancoats and Clayton Ward","lat":53.4834816441844,"adminName1":"England"}
]}

If you look at the previous JSON data it seems we have a list of ‘postalcodes‘ and each postal code has various fields such as adminName3, placeName etc.

Using GWT Javascript object overlays we can represent this structure. Within your GWT client directory create a new class called PostcodeEntry and add the following:

import com.google.gwt.core.client.JavaScriptObject;
 
public class PostcodeEntry extends JavaScriptObject {
 
	protected PostcodeEntry() {}
 
	public final native String getAdminCode3() /*-{
		return this.adminCode3;
	}-*/;
 
	public final native void setNumberPlaceHolderId(String adminCode3) /*-{
		this.adminCode3 = adminCode3;
	}-*/;
 
	public final native String getAdminName3() /*-{
		return this.adminName3;
	}-*/;
 
	public final native void setAdminName3(String adminName3) /*-{
		this.adminName3 = adminName3;
	}-*/;
 
	public final native String getPostalcode() /*-{
		return this.postalcode;
	}-*/;
 
	public final native void setPostalcode(String postalcode) /*-{
		this.postalcode = postalcode;
	}-*/;
 
	public final native String getPlaceName() /*-{
		return this.placeName;
	}-*/;
 
	public final native void setPlaceName(String placeName) /*-{
		this.placeName = placeName;
	}-*/;
}

Each PostcodeEntry represents one postalcode as you can see we have the functions for the various properties of a postalcode. Also note we extend the GWT JavascriptObject. In the above example you’ll notice I haven’t implemented every property. This is by choice I have only implemented a few of the properties.

Now we need to build an object that maintains the collection of PostcodeEntry object. Essentially the object that represents the postalcodes array. Create a new Java object called ‘PostalCodes‘. Add the following content:

import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.core.client.JsArray;
 
 
public class PostalCodes extends JavaScriptObject {
 
	protected PostalCodes() {}
 
	public final native JsArray<PostcodeEntry> getPostalCodes() /*-{
    	return this.postalcodes;
  	}-*/;
 
}

The object quite simply has one method called getPostalCodes which you’ll notice is a collection of PostcodeEntry objects and the native method simply called this.postalcodes which if you remember was the name of the array in the JSON response.

Those two objects wrap up the Geonames JSON response.

Finally we just need to write the code that invokes the service using the JsonpRequestBuilder object.

Locate your GWT entry point and add the following code.

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.jsonp.client.JsonpRequestBuilder;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
 
/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class JsonpExample implements EntryPoint {
    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {
        //
	// http://ws.geonames.org/postalCodeLookupJSON?postalcode=M1&country=GB&maxRows=4
	//
	JsonpRequestBuilder jsonp = new JsonpRequestBuilder();
 
        String url = "http://ws.geonames.org/postalCodeLookupJSON?postalcode=M1&country=GB&maxRows=4";
 
	jsonp.requestObject(url, new AsyncCallback<PostalCodes>() {
	    @Override
	    public void onFailure(Throwable caught) {
                Window.alert("Failure:" + caught.getMessage());
            }
 
            @Override
            public void onSuccess(PostalCodes result) {
                VerticalPanel vp = new VerticalPanel();
		if(result.getPostalCodes() != null ) {
                    for( int count = 0; count < result.getPostalCodes().length(); count++) {
			PostcodeEntry entry = result.getPostalCodes().get(count);
			HorizontalPanel hp = new HorizontalPanel();
			hp.setSpacing(10);
			hp.add(new Label(entry.getPostalcode()));
			hp.add(new Label(entry.getPlaceName()));
			vp.add(hp);
		   }
               }
               RootPanel.get().add(vp);
           }
       });
    }
}

There are few important areas of this code to take note.

First of all note the use of the JsonpRequestBuilder object. We simply give this a Url which in this case is the Geoname service url. Those who are familiar with cross site requests will notice that the URL I specified doesn’t contain the ‘callback’ parameter. The JsonpRequestBuilder automatically appends this to the end of the URL for us so we have &callback=gwt_IOSucess appended to the request. It defaults the parameter name to ‘callback’ but if the service requires a different parameter name you can change this by calling setCallbackParam.

Next we simply call requestObject that takes an Async callback which is of our Postalcodes type. This clears up why we use object overlays.

Finally the onSuccess method takes in the Postalcodes as an argument and we are then free to pick away at the response and the various postalcode entries in the result.

I hope this has helped people to start making use of the new GWT JSONP functions and object overlays.

You can also download the source code for this example.

Please any comments welcome…..

The project includes declarative interfaces and method binding. It also includes the original GWT RPC example code so the application acts exactly the same as the GWT created example

Project Download

This means that simply by adding a few Java annotations we can bind methods to interface objects. In the past we would have to add a new ClickHandler to our code and set the click handler in the widget. Now we can easily bind method.

Using the code we worked on last time within the WebApplication class we’re going to add a method binding to our sendButton go ahead and add the following method:

void onSendButton(ClickEvent event) 
{
    Window.alert('You clicked the sendButton');
}

The intention of this method is to display an typical Javascript alert to the web page visitor saying ‘You clicked the sendButton’. (Basic I know)

Next we can add our binding annotations before the method declaration add the following annotation:

@UiHandler("sendButton")

So the complete method looks like this:

@UiHandler("sendButton")
void onSendButton(ClickEvent event) 
{
    Window.alert('You clicked the sendButton');
}

And thats it! Now we have bound the onSendButton method to our sendButton. If you test the application you should be able to click the button and see the alert

That are a variety of method bindings possible such as KeyHandlers, for more information please see the UiBinding Wiki

This is the sample web application that GWT creates and it demonstrates some of the properties of GWT including Remote Procedure Calls (RPC). Clicking on the send button sends the name entered to the server and the server responds.

We’ll convert this example to use Declarative User Interfaces.

Editing the GWT Module defintion

Your application will have associated with it a gwt.xml module defintion we need to edit this to include the Ui Binder utilities

It can be found under the src directory and in the folder com/webapplication folder.

Simply add the following line

<inherits name="com.google.gwt.uibinder.UiBinder" />

Editing the application HTML

Using Eclipse expand the war folder and you should have a HTML file which will be the same name as you had entered when creating the project. In my case WebApplication.html

We’ll strip out most of the code on the HTML page as its not needed and we can simplify things

Make your HTML the same as the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="WebApplication.css">
    <title>Web Application Starter Project</title>
    <script type="text/javascript" language="javascript" src="webapplication/webapplication.nocache.js"></script>
  </head>
  <body>
 
    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>
 
    <h1>Web Application Starter Project</h1>
  </body>
</html>

So that simplifies the HTML of the application we can now simplify the code of the main application.

Editing the EntryPoint and binding Widgets

Depending on your chosen names when creating the project the GWT plugin will have created a package similar to com.webapplication.client. Under this package you should have a couple of Interfaces (they’re for the RPC calls) and a class which is the main application point. Using my package name as the example the class is called WebApplication.java

This class is the main entry point for the application. You can think of this as similar to the main method for a Java native application

There should be a method called

onModuleLoad

This is the Main method.

In this method right at the start we declare two interface objects – sendButton and nameField. We’re going to use declarative interfaces for these buttons so they can be removed from the module load. Remove the folllowing lines:

final Button sendButton = new Button("Send");
final TextBox nameField = new TextBox();
nameField.setText("GWT User");

We can now move those two objects and make them class variables. You’ll notice the declaration of the GreetingService. Under this add the following lines

@UiField Button sendButton;
@UiField TextBox nameField;

This will make sure your code compiles again. Notice the use of a new Java annotation @UiField. This is a key feature to UiBinding and GWT declarative interfaces.

Also notice we do not declare the variables as private to the class, they need to be visible so protected at a minimum

Any UI object that your declare can be bound in this way. When we create the declarative interface file for the application you will see where the UI objects are defined and how the bounding happens

Next we need to bind the template file to the class. Just under your class defintion add the following lines:

@UiTemplate("WebApplication.ui.xml")
interface Binder extends UiBinder<VerticalPanel, WebApplication> { }
private static final Binder binder = GWT.create(Binder.class);

In the above code we declare the template file we are going to use (This can be any name you like) and we bind a widget using the UiBinder. In my case I’m using a simple VerticalPanel for my layout

Now we need to get this VerticalPanel and add it to our layout

Within your onModuleLoad method add the following code as the first line of the method:

VerticalPanel vp = binder.createAndBindUi(this);

Below that you will have a lot of code that declares styles, click handlers, a dialog box and the adding of widgets to in layout. For now we’ll remove most of this code. We’ll reintroduce it when we need it

We’ll just add a line that adds our declared panel to the layout.

RootPanel.get().add(vp);

Your onModuleLoad method should now be simpler and look like the following:

/**
 * This is the entry point method.
 */
 public void onModuleLoad()
 {
     VerticalPanel vp = binder.createAndBindUi(this);
     // We can add style names to widgets
     sendButton.addStyleName("sendButton");
 
     // Focus the cursor on the name field when the app loads
     nameField.setFocus(true);
     nameField.selectAll();
 
     RootPanel.get().add(vp);
}

The whole class should look like this:

package com.WebApplication.client;
 
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiTemplate;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
 
/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class WebApplication implements EntryPoint
{
	@UiTemplate("WebApplication.ui.xml")
	interface Binder extends UiBinder<VerticalPanel, WebApplication> { }
	private static final Binder binder = GWT.create(Binder.class);
	/**
	 * The message displayed to the user when the server cannot be reached or
	 * returns an error.
	 */
	private static final String SERVER_ERROR = "An error occurred while "
						 + "attempting to contact the server. Please check your network "
						 + "connection and try again.";
 
	/**
	 * Create a remote service proxy to talk to the server-side Greeting
	 * service.
	 */
	private final GreetingServiceAsync greetingService = GWT.create(GreetingService.class);
 
	@UiField Button sendButton;
	@UiField TextBox nameField;
 
 
	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad()
	{
		VerticalPanel vp = binder.createAndBindUi(this);
		// We can add style names to widgets
		sendButton.addStyleName("sendButton");
 
		// Focus the cursor on the name field when the app loads
		nameField.setFocus(true);
		nameField.selectAll();
 
		RootPanel.get().add(vp);
	}
}

For now thats it on the Java side

Declaring the interface

Remember we added a line that used the @UiTemplate annotation and we declared a ui.xml template. (In my example WebApplication.ui.xml). We can now go ahead and create this file

In the same location as your Entry Point (WebApplication class) add a new file of the same name of your template. In my case I created a file called WebApplication.ui.xml

Add the following contents to your ui.xml file

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:webapplication='urn:import:com.WebApplication.client'>
 
 
 
</ui:UiBinder>

Notice we declare add the uiBinder tags with XML namespaces. The final namespace must match your client package name and application. If you are unsure of your application name you can check this in the GWT module definition file.(WebApplication.gwt.xml)

Within those tags we can add the declaration of our VerticalPanel

<g:VerticalPanel>
</g:VerticalPanel>

Ok now we can add in the contents of the VerticalPanel which include our sendButton and nameField that will be bound

Add the contents shown below to your VerticalPanel definition:

<g:VerticalPanel>
    <g:Label text="Please enter your name:" />
    <g:HorizontalPanel>
        <g:TextBox text='GWT User' ui:field='nameField' />
	<g:Button text='Send' ui:field='sendButton' />
    </g:HorizontalPanel>
</g:VerticalPanel>

The whole file should like similar to the following:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:webapplication='urn:import:com.WebApplication.client'>
 
	 <g:VerticalPanel>
	 	<g:Label text="Please enter your name:" />
	 	<g:HorizontalPanel>
	 		<g:TextBox text='GWT User' ui:field='nameField' />
	 		<g:Button text='Send' ui:field='sendButton' />
	 	</g:HorizontalPanel>
	 </g:VerticalPanel>
 
</ui:UiBinder>

At this stage you should be able to run the application

Coming next method binding…..

GWT 2.0 is currently on Milestone release so I thought I’d give it a try. I especially want to try out the GWT declarative UI features

I’ll go through the steps I have made to start the project. (I’m assuming you are using Eclipse as your IDE)

Step 1

If you haven’t already download and install the GWT and GAE (Google App Engine) plugins for Eclipse.

Step 2

Download the GWT 2.0 latest release candidate

Step 3

Add the new GWT 2.0 SDK to your IDE.

To do so go to your Eclipse Settings/Preferences window and choose Google from the menu on the left hand side.

You’ll see different versions of GWT listed. Click the ‘Add’ button to add the 2.0 SDK

From here you can browse and choose the GWT 2.0 SDK folder and enter GWT 2.0 in the name field

Once you have done so click OK

Step 4

Create a new Web Application Project

Click File>New>Web Application Project…

After populating your Project and Package name under Google SDK’s – Google Web Toolkit choose ‘Use specific SDK’ and choose your GWT 2.0 from the drop down list. You can leave the Google App Engine version as it is. Click OK to create your project.

Step 5

Running the application

In Eclipse make sure you project is selected and choose ‘Run’ from the menu

Click on ‘Open Run dialog…’

Down the left side you will see ‘Web Application’ select that and click ‘Run’

You’ll then get an error similar to the following:

Using a browser with the GWT Development Plugin, please browse to
the following URL:
  http://localhost:8080/WebApplication.html?gwt.hosted=192.168.1.10:9997

If you then browse to the URL it gives you will see a page telling you that you need to download and install a plugin for your browser

Download and install the plugin for your chosen browser

Once you have done so – close and quit the browser

Also on Eclipse make sure and stop the current running ‘Web Application’.

Then restart ‘Web Application’ and when it gives you the same error navigate your browser to the URL given and this time you should see the GWT application correctly displayed

Coming next – GWT 2.0 Declarative Interfaces….

I believe the application should still work but….
As a result here is a summary of the changes you need to make to make the application to make it 1.5 compatible.

JAR Files

Firstly update the GWT jar files within the WEB-INF/lib folder. Make sure you update the gwt-servlet jar as well this MUST be the GWT 1.5 gwt-servlet.jar!

Compile, Launch and Shell Scripts

The compile launch and shell scripts should all point at your new GWT 1.5 location

@gwt.typeArgs Annotations

Although this only causes warnings you should remove all the @gwt.typeArgs annotations completely from your project. With GWT 1.5 you can use strongly typed sets such List<Object>

@RemoteServiceRelativePath and RPC

GWT 1.5 has made it easier to call and define RPC services. In my example the TeacherService should now be defined as:

package com.company.client.rpc;
 
import java.util.List;
import com.company.client.dto.PupilDTO;
import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;
 
@RemoteServiceRelativePath("teachers")
public interface TeacherService extends RemoteService
{
    public List<PupilDTO> getPupils(Integer teacherId);
}

Notice RemoteServiceRelativePath defintion that is our path.

You can then call the service much simpler:

TeacherServiceAsync teacherService = (TeacherServiceAsync) GWT.create(TeacherService.class);
teacherService.getPupils(teacherId, new AsyncCallback<List<PupilDTO>>()
{
    public void onFailure(Throwable caught)
    {
        // TODO Auto-generated method stub
    }
 
    public void onSuccess(List<PupilDTO> result)
    { 
        pupils = result;
        notifyObservers();
    }
 
});

I have also updated the project and this can be downloaded as a zip file.

Group Link

Secondly Dan Morill of Google who has wrote a very descriptive article on how to achieve this and much of this tutorial is based around his article.

Dans Article

And finally my boss Chris who after I implemented the code finally caused the light bulb that had been dwindling (due to high energy costs and the credit crunch )to flash on!

Ok on with the tutorial….

This tutorial aims to describe how to implement Cross Site Scripting using JSONP and GWT. This problem fell into my hands because I needed to make a GWT widget that could be hosted on anybodies web site that could communicate with our web server.

You can solve this in one of two ways – firstly host the widget on your server and then for the pages simply iFrame the page to load the content in on different websites. Thus getting over the XSS problem. This wasn’t an option for me, the ‘client’ in this case didn’t particularly want an iFrame and I cant say I blame them.

So the second way you do this is JSONP and some clever GWT native Javascript methods. I’ll take it as given that people understand JSON but if they don’t there are quite a few useful links from Dans article. Also I’ll assume that people are used to tuning their web.xml file so that URL’s are mapped to Servlets correctly.

Right now the first part of sample code. This is my sample servlet that produces some basic JSON javascript

public class MySampleServlet extends HttpServlet
{
    /* (non-Javadoc)
     * @see javax.servlet.http.HttpServlet#doGet(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)
     */
     @Override
     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
     {
         doPost(req, resp);
     }
 
     /* (non-Javadoc)
      * @see javax.servlet.http.HttpServlet#doPost(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)
      */
      @Override
      protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException    
      {
 
          String asyncCallback = req.getParameter("callback");
          String output = asyncCallback+"([{color: \"red\",value: \"#f00\"}])";
 
          resp.setContentType("text/javascript");
          resp.addHeader("Pragma", "no-cache");
          resp.setStatus(200);
 
          PrintWriter out = resp.getWriter();
 
          out.println(output);
      }
}

You just then need to map that servlet in your web.xml. For the user of this example mine is mapped to testServlet.

What that outputs is something like this:

 
_gwt__callback0([{
                    color: "red\",
                    value: "#f00"
               }]);

The crucial part of this output is the _gwt__callback0 this identifies the Javascript callback function and I’ll explain where that is used.

Now back to the client side code, this is taken a lot from Dan’s article and isn’t really covering any new ground that he hasn’t already covered. This code makes the XSS call when a button is clicked.

The code is below:

// Used to identify the particular callback
 protected HashMap<Integer, Object> callbacks = new HashMap<Integer, Object>();
 protected HashMap<String, Element> scriptTags = new HashMap<String, Element>();
 
 protected int curIndex = 0;
 
public void someMethod()
{
    but.addClickListener(new ClickListener()
    {
        public void onClick(Widget arg0)
        {
            String serverURL = "http://localhost:8080/myApp/testServlet?callback=";
            String callbackName = reserveCallback();
            setup(this, callbackName);
            addScript(callbackName, serverURL + callbackName);
        }
    });
}
 
 public String reserveCallback() 
 {
     while (true) 
     {
      if (!callbacks.containsKey(new Integer(curIndex))) 
      {
       callbacks.put(new Integer(curIndex), null);
       return "__gwt_callback" + curIndex++;
      }
     }
 }
 
 /**
  * <p>Adds the JSONP script to our widget so we can make XSS requests baby</p>
  * 
  * @param uniqueId The unique id of the call
  * @param url The URL of our Request
  */
 public native void addScript(String id, String url) 
 /*-{
     var elem = document.createElement("script");
     elem.setAttribute("language", "JavaScript");
     elem.setAttribute("src", url);
     elem.setAttribute("id", id);
     document.getElementsByTagName("body")[0].appendChild(elem);
 }-*/;
 
 public void handle(JavaScriptObject jso) 
 {
     if( jso != null )
     {
      Window.alert("Woohoo JSO is not null it bloody worked");
     }
 }
 
 
 
 
 /**
  * 
  * <p>Sets up our Javascript cross site JSON call</p>
  * 
  * @param model Handles our Cross Site JSON call
  * @param callback
  */
 public native static void setup(MyClass myClass, String callback) 
 /*-{
      window[callback] = function(someData) 
      {
         myClass.@com.myCompany.MyClass::handle(Lcom/google/gwt/core/client/JavaScriptObject;)(someData);
      }
   }-*/;

Right now this needs describing as the syntax is a bit confusing. I’ll go through the onClick method and what it does bit by bit. First the server URL this is obvious and can be any server URL as you would expect. I simply use my app name (in this example myApp) and the servlet mapping as we mentioned earlier to be testServlet. One final thing on the URL is the callback parameter this is very important. If you look at our servlet we extract that and put it in our JSON output.

What the parameter does is basically allow the code to idenitify which method to call on the way back. The callback.

Next we set up the callback name nothing to exciting there it basically sets up a callback name based upon the number of calls – first one being _gwt_callback0, second _gwt__callback1 etc etc. We add this to a callbacks hash map for reference later if required.

The next very important method is setup(). This sets up the Javascript function that will be called on the callback and assigns it to the window object. We assign the function handle to the callback name ( initially __gwt_callback0 ) and the function it will call is the handle method in that class.

The final method is the addScript method this basically does what it says and adds some <script> tags to our page.

Now because those tags get executed the browser sees that it needs to fetch some content from a server and it goes off and fetches that content. Thats a key point that the browser realises it must go off and make the call. Its basically like any web developer would do when they include script say in their head file the page/browser knows that it must go off and fetch that script so it does. In our case it goes off and fetches the script from our Java Servlet.

Ok the final part of the understanding is how the system knows what to do when coming back from the server. If we take a look at the setup method you can see that we assigned the window[callback] to a function the function actually calls our handle method.

Now that callback would have been something like __gwt_callback0 with the number incrementing for every callback. So when we send over our JSON content, as described above, it invokes the function matching the name __gwt_callback0 and that actually invokes our handle method. Thats why the function name is so important.

(At this stage its worth pointing out that I’m making a big thing about the function name because that was the key part I missed in my understanding and AdamT cleared that up so you may have already got that )

Thats pretty much it. You can then do what you like with the JavascriptObject that is passed back into the handle method. Dans article has a brief example of that.

Hope this all makes sense to people and will help describe JSONP and GWT somewhat. If people have questions please post as a comment so that everyone can see useful answers.

So thought it time to pull my finger out of my … and get it done.

This tutorial is based upon the previous tutorials in this work and is performed using Tomcat version 5.5. I think other tomcat versions should matter but dont quote me on that.

Firstly my sample context is as follows:

<Context path="/theproject"
        docBase="/Users/james/Documents/workspace/TheProject"
        debug="0"
        workDir="/Users/james/Documents/workspace/TheProjectWorkDir"
        reloadable="true"
        crossContext="true" >
        <Logger className="org.apache.catalina.logger.FileLogger"
                prefix="localhost_theproject_log." suffix=".txt"
                timestamp="true" />
</Context>

Thats stuff most should be comfortable with. On my setup I place my context file in CATALINA_HOME/conf/Catalina/localhost/

The next step is to compile up our GWT it Javascript.

Run your GWT application in hosted mode.

Then when ready click ‘Compile’ on the GWT hosted mode browser. If you have the same launch/compile/shell scripts as the ones I defined in Part Two of the tutorial then you should get a new folder within your project titled ‘www’.

The next step is to make your web.xml and put it in the location /WEB-INF/web.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
 
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
   http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" >
 
 
    <display-name>The Project</display-name>
 
    <servlet>
        <servlet-name>theproject</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
 
    <servlet-mapping>
        <servlet-name>theproject</servlet-name>
        <url-pattern>*.page</url-pattern>
    </servlet-mapping>
 
    <!-- GWT Servlets   -->
    <servlet>
        <servlet-name>teachers</servlet-name>
        <servlet-class>com.company.server.gwt.TeacherServiceImpl</servlet-class>
    </servlet>  
 
 
 
    <servlet-mapping>
        <servlet-name>teachers</servlet-name>
        <url-pattern>/www/com.company.MyApplication/teachers</url-pattern>
    </servlet-mapping>
 
    <context-param>
        <param-name>webAppRootKey</param-name>
        <param-value>theproject.root</param-value>
    </context-param>
 
 
    <session-config>
        <session-timeout>45</session-timeout>
    </session-config>
 
 
    <!-- The Usual Welcome File List -->
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
 
 
</web-app>

A few important points in the web.xml are firtly notice the spring elements and I’m mapping anything with .page to go through my Spring controller.

Then also notice the GWT mappings – we’re using the url of teachers as defined in our RPC’s and pointing this at that www folder we made!! Easy so far!

Next we need to make the Spring servlet that handles the Spring controllers for sending back to the user a view. The name of the file is very important mine is called theproject-servlet.xml because this is the name used in my web.xml

<?xml version="1.0" encoding="UTF-8"?>
 
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="
       http://www.springframework.org/schema/beans classpath:spring-beans-2.0.xsd
       http://www.springframework.org/schema/tx classpath:spring-tx-2.0.xsd
       http://www.springframework.org/schema/aop classpath:spring-aop-2.0.xsd">
 
 <bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">
  <property name="definitions">
      <list>
        <value>/WEB-INF/tiles-defs/templates.xml</value>
      </list>
  </property>
 </bean>
 
    <!-- no 'id' required, HandlerMapping beans are automatically detected by the DispatcherServlet -->
    <bean id="handlerMapping" class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
        <property name="mappings">
            <value>
                 /**/help.page=simpleViewController
                 /home.page=homepageController                
            </value>
        </property>
    </bean>
 
    <!-- List of controllers for the application -->
 
    <bean id="simpleViewController" class="org.springframework.web.servlet.mvc.UrlFilenameViewController">
    </bean>
 
    <bean id="homepageController" class="com.company.server.web.controlle.HomepageController">
        <property name="successView" value="home.tile"/>
        <property name="exceptionView" value="exception.tile"/>
    </bean>
 
 
 <!-- Convention based ViewResolver for Tiles2 -->
 <bean id="viewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
  <property name="viewClass" value="org.springframework.web.servlet.view.tiles2.TilesView"/>
 </bean>
 
</beans>

A few more important parts here – firstly the definition of a tiles file. Those familar with tiles should understand this. This is where we shall define all our pages. Secondly you can see our mappings – in this case home.page. They are handled by controllers. Notice the controller homepageController we’ll go ahead and define that class now:

Firstly in good Object oriented design we can make an abstract controller that all our controllers can extends for ease.

package com.company.server.web.controller;
 
import org.springframework.web.servlet.mvc.BaseCommandController;
 
public abstract class ParameterisedViewCommandController extends BaseCommandController
{
 private String successView = null;
 private String exceptionView = null;
 
 /**
  * @return the successView
  */
 protected String getSuccessView ()
 {
  return successView;
 }
 
 /**
  * @param successView the successView to set
  */
 public void setSuccessView ( String successView )
 {
  this.successView = successView;
 }
 
 /**
  * @return the exceptionView
  */
 protected String getExceptionView ()
 {
  return exceptionView;
 }
 
 /**
  * @param exceptionView the exceptionView to set
  */
 public void setExceptionView ( String exceptionView )
 {
  this.exceptionView = exceptionView;
 }
}

Notice the basic strings exception and success view that we defined in our servlet.xml file.

Next just the basic implementation of our defined HomepageController.

package com.company.server.web.controller;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.springframework.web.servlet.ModelAndView;
 
public class HomepageController extends ParameterisedViewCommandController
{
 
 @Override
 protected ModelAndView handleRequestInternal(HttpServletRequest request, HttpServletResponse response) throws Exception
 {
  return new ModelAndView(getSuccessView());
 }
 
}

In this case we just return a new view of the success view but you can obviously return various views. Also those familiar with struts actions the classes above are basically those.

Now go ahead and make the tiles files defined in the servlet. Create a file as specified in location /WEB-INF/tiles-def/templates.xml and in here we can define our templates. Mine if below:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_2_0.dtd">
 
<tiles-definitions>
 
 <definition name="home.tile" template="/pages/home.jsp">
  <put-attribute name="title" value="The Project" />
  <put-attribute name="gwtjs" value="/theproject/www/com.company.MyApplication/com.company.MyApplication.nocache.js" />
 </definition>
 
</tiles-definitions>

The tile definition probably needs some explaing. Firstly I’m using JSTL to do my various important inserts such as the title of the page and the insert of my GWT compiled up javascript. Again still referencing that www folder and our javascript.

Right the final step is to make that page so make a folder in the root of your project called pages and make a file called home.jsp.

My page is below:

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 
 <head>
  <title><tiles:getAsString name="title" /></title>
 
  <!-- Include the GWT Javascript -->
  <script language='javascript' src='<tiles:getAsString name="gwtjs" />'></script>
 </head>
 
 
 <body>
 
  <h1>MyApplication</h1>
 
  <p>
   Example GWT application calling RPC calls
  </p>
 
  <div id="database"></div>
 
 </body>
</html>

The important areas of the page are firstly the tiles inserts – where we insert of GWT javascript and also the content of the page between the body tags. The HTML is basically exactly the same as the hosted page. Our application looks for a “database” div to replace and such this element needs to be on the page!!

That should wrap everything up now! Also as I have migrated across to the latest versions of struts/spring/tiles etc you can download a copy of my lib directory so that the above tutorial should work.

Any questions please post a comment!

According to GWT’s official docs you can Associate DTO objects with SuggestBox suggestions but I struggled to find any guiding tutorials on how to achieve this.

Having said this I have to give credit to Lombardi who went someway to helping me to work out how to do this. Good explanations are posted on their blog.

First of all lets make a simple Data Transfer Object

 
import com.google.gwt.user.client.rpc.IsSerializable;
 
public class PersonDTO implements IsSerializable
{
    private int id = 0;
    private String firstname = null;
    private String lastname = null;
 
    /**
     * @return the firstname
     */
     public String getFirstname()
     {
         return firstname;
     }
 
    /**
     * @param firstname the firstname to set
     */
     public void setFirstname(String firstname)
     {
         this.firstname = firstname;
     }
 
     /**
      * @return the lastname
      */
      public String getLastname()
      {
          return lastname;
      }
 
     /**
      * @param lastname the lastname to set
      */
      public void setLastname(String lastname)
      {
          this.lastname = lastname;
      }
 
     /**
      * @return the id
      */
      public int getId()
      {
          return id;
      }
 
     /**
      * @param id the id to set
      */
      public void setId(int id)
      {
          this.id = id;
      }
}

Thats the DTO object I’ll use throughout the tutorial.

Now we can make our Suggestion object as the following:

import com.google.gwt.user.client.ui.MultiWordSuggestOracle.MultiWordSuggestion;
 
/**
 * @author James Heggs - jheggs@axonbirch.com
 *
 */
public class PersonMultiWordSuggestion extends MultiWordSuggestion
{
    private PersonDTO personDTO = null;
 
    public PersonMultiWordSuggestion(PersonDTO user)
    {
        super(user.getFirstname() + " " + user.getLastname(), 
              user.getFirstname() + " " + user.getLastname() );
 
        this.personDTO = user;
    }
 
 
    /**
     * @return the personDTO
     */
     public PersonDTO getPersonDTO()
     {
         return personDTO;
     }
}

The super() call sets up the first parameter as the replacement String and the second parameter as the display string. You can of course change these.

Next we need to make our own Suggest Oracle. This is done relatively easy. My oracle is shown below:

 
import java.util.ArrayList;
import java.util.Collection;
import java.util.List;
 
import com.google.gwt.user.client.ui.SuggestOracle;
 
/**
 * @author James Heggs - jheggs@axonbirch.com
 *
 */
public class PersonNameSuggestOracle extends SuggestOracle
{
    private List<PersonMultiWordSuggestion> personSuggestions = null;
 
    @Override
    public void requestSuggestions(Request request, Callback callback)
    {
        Response resp = new Response( matchingPeople( request.getQuery(),
                                                      request.getLimit() ) );
 
        callback.onSuggestionsReady(request, resp);
    }
 
    /**
     * 
     * @param query The current text being entered into the suggest box
     * @param limit The maximum number of results to return 
     * @return A collection of people suggestions that match.
     */
     public Collection<PersonMultiWordSuggestion> matchingPeople(String query, int limit)
     {
         List<PersonMultiWordSuggestion> matchingPeople = new ArrayList<PersonMultiWordSuggestion>(limit);
 
         // only begin to search after the user has type two characters
         if ( query.length() >= 2 )
         {
             String prefixToMatch = query.toLowerCase();
 
             int i = 0;
             int s = personSuggestions.size();
 
             // Skip forward over all the names that don't match at the beginning of the array.
             while (i < s && !personSuggestions.get(i).getDisplayString().toLowerCase().startsWith(prefixToMatch) )
             {
                 i++;
             }
 
             // Now we are at the start of the block of matching names. Add matching names till we
             // run out of names, stop finding matches, or have enough matches.
             int count = 0;
 
             while (i < s && personSuggestions.get(i).getDisplayString().toLowerCase().startsWith(prefixToMatch) && count < limit) 
             {
                 matchingPeople.add( personSuggestions.get(i) );
                 i++;
                 count++;
             }
 
         }
 
             return matchingPeople;
     }
 
 
 
        /**
         * @param o 
         * @return
         * @see java.util.List#add(java.lang.Object)
         */
         public boolean add(PersonMultiWordSuggestion o)
         {
             if ( personSuggestions == null )
             {
                personSuggestions = new ArrayList<PersonMultiWordSuggestion>();
             }
 
             return personSuggestions.add(o);
         }
 
 
 
        /**
         * @param o
         * @return
         * @see java.util.List#remove(java.lang.Object)
         */
         public boolean remove(Object o)
         {
             if ( personSuggestions != null)
             {
                 return personSuggestions.remove(o);
             }
 
             return false;
          }
 
}

I think for most developers that enough code to get going but just to clear things up the following code snippets show the use of the DTO and SuggestBox as to how it could be used. Also in the code snippets I am assuming you are familar with GWT’s RPC architecture.

First an RPC call to fetch the DTO objects from a server (Production mode could ask for persistent objects from hibernate or something similar.)

 
PersonNameSuggestOracle oracle = new PersonNameSuggestOracle();
SuggestBox nameSuggestBox = new SuggestBox(oracle);
 
 
//fetch names
  MyServiceAsync serviceRPC = GWT.create(MyService.class);
  serviceRPC.fetchPeople(new AsyncCallback< List<PersonDTO> >()
  {
   public void onFailure(Throwable caught)
   {
    // TODO Auto-generated method stub
 
   }
 
   public void onSuccess(List<PersonDTO> results)
   {
    if ( results != null && results.size() > 0 )
    {
     for ( PersonDTO person : results )
     {
      oracle.add(new PersonMultiWordSuggestion(person) );
     }
    }
 
   }
  });

Then for those interest snippet code on how to handle the selected suggestion

nameSuggestBox.addEventHandler(new SuggestionHandler()
{
    public void onSuggestionSelected(SuggestionEvent event)
    {
        PersonMultiWordSuggestion suggestion = (PersonMultiWordSuggestion)event.getSelectedSuggestion();
 
        // Do what you want with the suggestion and DTO
        // suggestion.getPersonDTO
 
 
    }
});

Thats basically it. If people have any questions or ideas please post them as a comment in order to help others.

Firstly make a interface called TeacherService as listed below.

package com.company.client.rpc;
 
import java.util.List;
 
import com.google.gwt.user.client.rpc.RemoteService;
 
 
public interface TeacherService extends RemoteService
{
 /**
  * @gwt.typeArgs <com.company.client.dto.PupilDTO>
 */
 public List getPupils(Integer teacherId);
}

A few things to notice here are that the interface extends RemoteService which is a GWT class and is part of the RPC plumbing. Also you’ll note that the return type is not typed as in List