1. Google Web Toolkit Tutorial

2. 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.

3. 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.

4. 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.

5. 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

6. Getting Started
Download GWT from Google at:
Download GWT plugin for 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.

7. 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)

8. 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)

9. 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

10. 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”.

11. 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.

12. 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.

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

14. 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.

15. 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.

16. 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.

17. 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.

18. 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.

19. 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

20. 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

21. 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.