Free tutorials for Java, Eclipse and Web programming



Follow me on twitter

GWT Tutorial

Lars Vogel

Version 2.1

03.02.2011

Revision History
Revision 0.103.04.2007Lars Vogel / Waldemar Geppart
Created with GWT 1.4
Revision 0.2 - 2.111.10.2008 - 03.02.2011 Lars Vogel
bugfixes and enhancements

GWT Tutorial

This tutorial describes how to develop a Web application with GWT and the Google Plugin for Eclipse. This article assumes basic Eclipse and Java knowledge. The tutorial was developed using JDK 1.6, GWT 2.1 and Eclipse 3.6.


Table of Contents

1. Overview
1.1. Google Web Toolkit
1.2. Modules, Entry Points and HTML pages
1.3. Using CSS
2. Installation of the Google Tools for Eclipse
3. Create your first GWT application
3.1. Project
3.2. GWT entry point
3.3. HTML page
3.4. web.xml
3.5. Modify CSS
3.6. Run
4. GWT Project Structure
4.1. Overview
4.2. Module Descriptor
4.3. Entry point
5. Debugging GWT applications
6. Client and Server Communication (RPC)
6.1. Overview
6.2. Create project and domain model
6.3. Interface
6.4. Create the server
6.5. Define servlet in web.xml
6.6. UI component - Table
6.7. Callback
6.8. Create your entry point
6.9. Run
7. UIBinder
8. Using external jars / Java projects in GWT
8.1. Overview
8.2. Create the module project
8.3. Use the module in another project
9. Build your own components
10. Thank you
11. Questions and Discussion
12. Links and Literature
12.1. GWT resources

1. Overview

1.1. Google Web Toolkit

The Google Web Toolkit (GWT) is a toolkit to develop Ajax web application with Java. Once the Java code is finished, the GWT compiler translates the Java code into HTML and Javascript. The compiler creates browser specific HTML and JavaScript to support all the major browsers correctly. GWT supports a standard set of UI widgets, has build in support for the browser back button and a JUnit based test framework.

GWT provides two modes

  • Development Mode: allows to debug the Java code of your application directly via the standard Java debugger.

  • Web mode: the application is translated into HTML and Javascript code and can be deployed on a webserver.

1.2. Modules, Entry Points and HTML pages

GWT applications are described as so-called modules. A module "modulename" is described by a configuration file "modulename.gwt.xml". Each module can define one or more Entry point classes. An entry point in GWT is the starting point for a GWT application similar to the main method in a standard Java program.

The module is connected with an HTML page, which is called "host page". The code for a GWT web application executes within this HTML document. The HTML page can define "div" containers to which the GWT application can assign UI components. Alternatively the GWT UI components can be assigned to the body of the HTML page.

1.3. Using CSS

The look and feel of a GWT application can be customized via CSS files. Each widget in GWT can be given a div container by using the method setStyle(String s); We will see later how this is used.