6.470 Day 5
Google Web Toolkit (GWT)
The Big Picture:
Why GWT?

Similar to all web application frameworks, you can consider GWT apps in terms of its client-side and server-side components: the UI components being on the client side, and the business logic on the server side.

GWT apps uses the Java Servlet API to provide server interactions. You do not need to know too much about Java Servlets for this lecture, other than knowing that the servlets are where the server-side processing happens.

Getting started

You may use any editor to work with GWT, but my personal choice is Eclipse, especially since Google created a plugin that makes working with GWT so much easier.
(Optionally, for the emac/vim/etc hackers, you may download the command-line version here.)

After you are done installing the plugin, you may now create a new GWT application by going to File -> New -> Project; then Google > Web Application Project. Arbitrarily pick a name for your project and a package name, make sure "Use Google Web Toolkit" is selected (optionally, you should enable "Use Google App Engine" if you anticipate deploying to Google App Engine later.)

To run a project, right click on it in the Package Explorer and go to Run as -> Web Application.

Basic architecture

All the Java sources reside in "src/". In the package that you selected when you are creating the app, you should find a "client" folder storing all the classes on the client side; and a "server" folder containing all the classes for the server side code.

There should also be a "[name].gwt.xml" file in your package. This file specifies what class to load first (the app's "entry-point") when your app starts up; plus other configurations we usually don't care about.

The "war/" folder contains files that get uploaded to the web server. See this wiki entry for more info about what "war" stands for.

The "war/WEB-INF" folder contains configuration files (e.g. servlet mappings, logging, etc.). The most interesting one is probably "web.xml", which we will talk about later.

Creating a new Servlet/Service

There are basically three things you need to make:

Be sure to add a mapping to the servlet you implemented into "war/WEB-INF/web.xml". Between the <web-app> tags add a declaration and mapping for the servlet -- it must take the same path as the one you picked for the service interface.


Building your UI

In the "src/[package-name]/[project-name].gwt.xml" file, the entry-point specifies which class in client/ to run. The method "onModuleLoad" will be invoked when the page loads. You may declare UI widgets such as panels like VerticalPanel, FlowPanel, Button, TextBox, etc. in that class and add them to RootPanel when "onModuleLoad" is called.

The "war/[project-name].html" is the container for the gwt application. RootPanel refers to this page. You may declare elements in the html page like "<div id='some-div'>" and refer to it in your GWT app by calling "RootPanel.get" and add UI widgets to it by something like:

Talking to the server

You may declare an object with the asynchronous interface by calling "GWT.create([service-interface].class)". For example:

HelloServiceAsync helloService = GWT.create(HelloService.class);

You can then call any of the service's methods just like any method call.

Creating a new UI module

You may create new UI widgets by creating new classes in "client/" that extend "Composite". Make sure that, in your constructor, you call "initWidget(element)" to specify which element to set as the container.

Adding CSS styles

To specify a CSS style name for a widget, you can call its "addStyleName()" method, with the CSS class name as the argument. The stylesheet resides in "war/[project-name].css".

Using JavaScript

You can also make native JavaScript calls (e.g. if you want to use a javascript library's methods). You may do so by writing a method with the "native" tag and writing the code like this:

public native String someFunction() /*-{
  // this is JavaScript code!
  var someString = "hello";
  return someString;