Get to Know 'AJAX With Ease'
To get the show on the road,
download the Google Web Toolkit. This tutorial uses
gwt-windows-1.0.21.zip
, downloaded on July 10, 2006. Unzipping this file creates all the GWT files under the
gwt-windows-1.0.21
folder.
Now, download and unzip the source code for this article. The file contains source code, project- and application-creating scripts, and Apache Ant build files for the 'AJAX With Ease' application. To keep it simple, the application provides a self-contained example for each of the main GWT features. ("Sidebar 2. The AJAX With Ease Project Files" provides detailed information on the AJAX With Ease application, the project creation scripts, and the build.xml
and gwt-user-wo-javax.jar
(albeit a hack) files needed for Apache Tomcat deployments.)
Import the application into Eclipse from the menu as follows: File -> Import -> Existing Projects Into Workspace -> Select the ajaxwithease
folder -> Select ajaxwithease
project -> Click finish. Once it's imported, you will see folders and files in Eclipse as shown in Figure 1.
Figure 1. 'AJAX With Ease' Application Imported into Eclipse |
Now run the application in debug mode. The debug button (the one with a critter on it) will launch GWT Host Browser as shown in Figure 2. Your entire Web application is available in this host browser, which is integrated into Eclipse via JVM hooks. You can now place breakpoints in Eclipse and hit on them by running the application in the host browser.
Figure 2. Debug Button Launches GWT Host Browser |
Using the AJAX With Ease application is quite simple. The Styles tab shows how a style applied to a button at runtime changes its appearance; the RPC tab shows how the title and name entered in text boxes are received and responded to with a 'hello' greeting; and the History tab shows how tokens are added to a URL when the user enters any value in a text box and presses the Add to History button, to be retrieved only when the user clicks the browser's front and back buttons.
The GWT currently does not provide adequate support for Apache Ant and Tomcat deployments. The Ant file created by GWT's projectCreator.cmd
script is sparse. The build files contained in the AJAX With Ease application include additional tasks that you will need in order to perform Java-to-JavaScript compilation, Java compilation, and WAR file creation.
While Sidebar 2 does cover these tasks, you still need to modify build.properties
to suit your computer. Modify gwt.sdk.location
property to point to your GWT root installation folder and tomcat.webapps
to point to your Tomcat webapps
folder in build.properties
as follows:
# gwt install folder
gwt.sdk.location=c:/java/gwt/gwt-windows-1.0.21
# tomcat webapps directory
tomcat.webapps=c:/java/tomcat/Tomcat 5.5/webapps
That's it! To deploy the AJAX With Ease application, you can copy the ajaxwithease-0.1.war
file from the code download to Tomcat's webapps folder, or execute the deploy
task of build.xml
. The deploy
task meanders through init, prepare, gwt-compile, java-compile, javadoc, and dist tasks before finally deploying the ajaxwithease-0.1.war
file by copying it to Tomcat's webapps
folder. Now, point your browser to http://localhost:8080/ajaxwithease-0.1/Hello to access the application (assuming Tomcat is listening at port 8080 on your machine).