Google Web Toolkit modules as Web Applications

Recently I tried using the Google Web Toolkit for leverging its rich client widgets and AJAX functionality. I use Eclipse a lot and luckily GWT comes with builtin support for creating Eclipse projects supporting GWT. I created the Eclipse project using the GWT command line utilities in a jiffy and imported it into Eclipse easily. Reading the documentation on GWT I was able to start coding my application immediately.

 I quickly put together a sample LiveSearch GWT module. This module, will present the users with a search text field, and will detect the users keypress events, and will asynchronously send the keystrokes to the server using the GWT framework. The server side code, will perform the search on these keystrokes and send the search results back to the client (browser). So you instantly see the search results without any page refreshes ( that is AJAX and you don't write any JavaScript, it is taken care for you by the GWT). Very cool indeed!.

In the first part of this blog entry I will show you how easy it is to develop the GWT module using the GWT toolkit. GWT Toolkit comes with an embedded browser and a light tomcat container on which you can test and debug your GWT module. I will talk about how to convert this GWT module app into a web application that you can deploy on a web container.

First step is to download and install the GWT.

Suppose the GWT is installed in GWT_HOME.

• GWT_HOME\projectCreator.cmd -out LiveSearch -eclipse LiveSearch
  
  This will create a directory called LiveSearch ( -out parameter ) and in this directory will create an Eclipse Project called LiveSearch ( -eclipse parameter ).


• GWT_HOME\applicationCreator.cmd -out LiveSearch -eclipse LiveSearch com.sun.portal.gwt.poc.client.LiveSearchPanel
  
  The above command will create the directory structure for GWT application module called com.sun.portal.gwt.poc.client.LiveSearchPanel in the directory called LiveSearch ( -out parameter ) and create a skeletal GWT module.


• Go ahead and create the GWT module and remote service as needed.


• Once you write your module code and write the remote service code, you can compile your application using the LiveSearchPanel-compile.cmd script and launch the module using the LiveSearchPanel-shell.cmd. Both these scripts are created by the applicationCreator.cmd script we ran in the steps above.


• Source code for this sample LiveSearch is available here.

What follows now are steps to convert this to a Web Application. I have included a ANT build file ( make-war-from-gwt.xml ) in the source code download which will convert the module into a Web Application and will allow you to deploy it to a Web Container. It includes a sample-web.xml in the root folder. The make-war-from-gwt.xml and the sample-web.xml should be pretty much usable across all the GWT modules you write and want to use them as a web applications. Just tweak the entries in these files as per needs of your new module. The entries needing modications are marked by appropriate comments.

 Now that we know how to write a GWT module and build a WAR file from it, we can easily deploy the module to a web container.