Get to Know 'AJAX With Ease'
To get the show on the road, download the Google Web Toolkit
. This tutorial uses
, downloaded on July 10, 2006. Unzipping this file creates all the GWT files under the
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
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
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
# tomcat webapps directory
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
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).