Google Web Toolkit Tutorial

Introduction to the Google Web Toolkit What will be covered in this tutorial: An introduction to the toolkit and its uses. The construction of a simple demo program. Deployment to a tomcat web server.

What is the Google Web Toolkit?(GWT) GWT is a tool for developing web application using (relatively) standard java code. Converts client-side java code into AJAX script that can be run on a browser.

Why Use GWT? Java allows for an Object-oriented approch. GWT GUI's are build very much like java Swing apps Requires very little knowledge of other web languages like html or javascript. Tools provided make it easy to test during development. Integrates easily with IDEs.

The Demo App: Address Finder Address Finder is a simple web application with two basic functions. Creates a profile with the user's name and address on a server. Retrieves a profile from the server when given a name. Client Profile Servlet User Name

Getting Started Download GWT from Google at: http://code.google.com/webtoolkit/download.html Download GWT plugin for Eclipse: http://code.google.com/eclipse/ The plugin for eclipse is very helpful, but not necessary For the purpose of this tutorial it is assumed that the plugin is used.

Creating the Project The project can be created easily in eclipse from the new project list by selecting new “Web Application Project” GWT automatically creates appropriate files (Including an example program)

Project Organization src war Contains the source files for the project. Also contains gwt module file. war Contains compiled javascript pages for deployment. Also contains the entry page (AddressFinder.html) and its style sheet (AddressFinder.css)

Creating the Client The web application is embedded in the page AddressFinder.html. When the application is loaded, GWT activates the EntryPoint.onModuleLoad() method in each EntryPoint. AddressFinder.java AddressFinder.onModuleLoad() AddressFinder.HTML

Creating the Starting Page Almost all client-side code is contained in javascript The project EntryPoint is embedded in the page by an id tag in the script, “finderTag”.

Building the GUI Very similar to the java Swing API. All graphical objects based off Widget class. The root panel adds the main panel to tag “finderTag”, embedding the application in the html page. Styling names can be attached to the Widgets for use in the CSS style sheet.

Applying Style Styles codded in the CSS file can be attached directly to graphical elements. CSS styles can be used dynamically and are automatically updated when an object changes styles.

Talking to the Server: The RPC Mechanism = Class = Interface Async Call Interface (ProfileServiceAsync) Client (AddressFinder) RemoteServiceServlet (ProfileServiceImpl) RemoteService (ProfileService)

RPC Continued... GWT handles all the low-level network communication and serialization. GWT compiler uses naming standards to link the various RPC interfaces. (ProfileService, ProfileServiceAsync, ProfileServiceImpl) Calls from client are asynchronous; the client does not wait for a response.

Implementing RPC Both interfaces must contain methods of the same names. The AsyncCallback argument of client side interface is essentially a wrapper for the function the server calls to answer the client.

Implementing RPC: Profile class Profile class simply packages the name and address together. Profile must implement Serializable for GWT to send it between the server and client.

Implementing RPC: Client side Creates an implementation of the async interface by making a call to GWT. AsyncCallback class forms a wrapper around the server return function. Client calls server through async interface and sends callback function that is notified when the call completes.

Implementing RPC: Server side Server side code is not converted and so may us any java library. The servlet has the ability to access files on the server. Throwing exceptions back to the client is also supported.

Mapping the service for GWT The tag defined here in the servlet mapping is connected to the service. web.xml also points to the starting html page for the web application

Hosted mode and Deployment GWT provides hosted mode for application testing staight out of the IDE. After compilation, deployment to the servlet consists of moving the war folder, which contains all the necessary files, to the webapps folder in the tomcat directory

Conclusion GWT makes it easy for a java developer to quickly write web applications without having to extensivly know web languages like html and javascript. This tutorial is ment to go with the AddressFinder souce and only examines significant sections of the code.