Download Google Web Toolkit

Google Web Toolkit
Steve Wargolet
Abstract
With the advanced web applications of today such as Gmail, Twitter, and Facebook, it has
become harder to create your own web application which lives up to today’s standards. Google
Web Toolkit (GWT) is able to make this possible for an average Java developer. GWT is an
open source web development toolkit used for creating complex dynamic browser-based
applications. It allows the developer to code primarily using Java which is then translated into
HTML, JavaScript, and AJAX. This means more developers can create web applications even if
they lack knowledge in common web development tools and languages. GWT also offers an
easy to use designer to help build the client portion of the application which means the developer
will not need to learn CSS yet can still develop a fully functional and good-looking application.
Introduction
In the past, when there were only static webpages, if you wanted a client-server type application,
it would have to be desktop-based and not web-based as the technology had not yet evolved
enough. This meant that not only would the client portion have to be downloaded onto each
machine, but anytime there was an update to the client, it would have to be re-downloaded by all
users. Soon we were able to progress past the static-only webpages onto web applications which
remedied this problem. “A web application is an application utilizing web and [web] browser
technologies to accomplish one or more tasks over a network, typically through a [web]
browser.”[1]
With the introduction of more advanced interactive web applications from companies such as
Google, Yahoo, and MSN, it has become harder to develop a web application which will live up
to today’s standards. Many modern web applications have the feel of desktop applications but
they are difficult to develop if you don’t have extensive knowledge in AJAX, HTML, CSS,
JavaScript, or any of the other common languages/tools used to create a web application. This is
where Google Web Toolkit becomes extremely useful.
What is Google Web Toolkit?
GWT is a powerful web application development toolkit which allows developers to create rich
web applications using primarily Java. One of GWT’s main features is its ability to maintain
Page |2
compatibility between multiple browsers. After you write your code in Java, GWT will convert
it into equivalent standard-compliant JavaScript and HTML for each browser. GWT provides all
the common User Interface widgets which a web developer might use and there are many addons for GWT which can be downloaded that introduce other widgets if needed. You can even
combine widgets and panels to make a more complex widget such as two lists which support
drag and drop, and then you can use this new widget between across areas of your application
just like it is one of the default GWT widgets. I was able to accomplish a similar task with a
GWT application I wrote. I extended the GWT list box to support more advanced features such
as tooltips, multiple selections, and in-place editing. Without GWT, it would have taken quite a
bit of research and coding effort to figure out how this could be done with JavaScript.
GWT Designer
GWT Designer is a powerful and intuitive tool which integrates directly into GWT to allow you
to create a GUI for your application without spending a lot of time and effort creating and laying
out the webpage. If you have worked on a webpage before you know how time consuming it can
be to lay out elements on a webpage and make sure they work across multiple browsers and scale
correctly when the browser is resized. GWT designer handles all these issues without much
extra work from the developer. It has a very user friendly layout which can be seen in Figure 1
below.
Figure 1: User Interface View for GWT Designer [2]
Page |3
The designer offers a ‘Component Tree’ (1) which shows the hierarchical relationship between
all of the components in your current GUI design. A ‘Property Pane’ (2) which displays all the
available properties of your selected component. A ‘Palette’ (3) provides the user with quick
access to components, both default, add-ons, and custom. The ‘Design View’ (4) shows the
current design for your GUI. You can easily drag components from the ‘Palette’ and drop them
into the design view and the Designer will generate all the necessary code automatically. Any
needed events can be added by right clicking on a component and choosing one of many events.
If you would like to modify the GUI code yourself for whatever reason, you can switch to the
‘Source View’ using the tabs at the bottom (5). Once you would like to test your design to see
how it looks and behaves, you can click the ‘Preview’ button (6). This will bring up a preview
of your current GUI design without having to go through the lengthy compilation process in
which you can test the layout and resizing of your application, although it may not behave the
same as when you compile it due to information that may be loaded from the server.
Widgets and Panels
GWT Designer contains all the default widgets and panels that are a part of GWT. You can
easily add any of these widgets to a container by using drag-and-drop, similar to what Microsoft
Visual Studio offers. You can also easily add event handlers and change properties of the
widget.
Panels
There are many different panels available to you in GWT which each accomplish a different
layout. There are more than 15 different panels available to use, each with its own strengths and
weaknesses. The easiest panel to work with is the Absolute Panel which, just as its name
suggests, places components on the panel absolutely. This means that wherever you place a
component, it will stay there. This panel could work for small areas of your web application but
should not be used for the whole application as it does not resize with the browser; so if you
make the browser window smaller, it is likely that some of the components will go out of view.
There are also Horizontal and Vertical Panels. These two panels are also very easy to use and
will place components vertically or horizontally which makes it very easy to make columns or
rows. The problem with these panels is that they use tables to align the components. This makes
implementation of things such as scaling easier but makes readability extremely difficult when
looking through the generated HTML, especially when there are embedded vertical or horizontal
panels. Since these panels use standard table elements such as <td> and <tr>, GWT provides the
same properties as tables such as padding and spacing. GWT also offers a horizontal and
vertical panel which in which the columns and rows can be adjusted by dragging the edges,
which are called Split Panels.
Two other panels that use tables to provide a layout for the panel are Grid and Flex Table. Grid
lays out components on the panel in a rectangular grid. The container is divided up into multiple
equal-sized rectangles and one component can go into each rectangle. Flex Table follows the
Page |4
same template as grid by splitting up the container into equal-sized rectangles, but Flex Table
allows the components to span multiple rectangles.
If you are used to using ‘divs’ and then styling your web application with CSS, GWT offers the
Flow Panel which arranges components in sequential order, wrapping at the edge of the window.
So if a component will go off the screen it will put the component onto the next line. You are
then able to give the flow panel styling just like you would a div. The styling is applied directly
into the design window which also makes styling a lot easier. Due to how the flow panel
arranges components, GWT included a feature which shows where the component will be
dropped as can be seen in Figure 2.
Figure 2: Flow Panel; adding an element
There are many other more specific panels which can be used such as the Dock Panel which lays
out components in a North/South/East/West, Center fashion which is great for web applications
that use a header, footer, or side bar. GWT also offers a Tab Panel as a default panel, which is
extremely useful as writing your own tabs using JavaScript can become difficult. If you need a
nice looking popup which does not interfere with other components, then you can use a Popup
Panel. If you need a nice sidebar panel to show and hide components based on the header you
click, then a Stack Panel works great.
Google introduced all these panels to make your GUI development experience as painless as
possible. With conventional web pages setting up the page with CSS can be very tedious; with
GWT designer you can setup the layout of your web application in just a few hours.
Widgets
Widgets are components of a user interface in which the user can see information or interact.
GWT provides many useful widgets which makes your web application have the same feel as a
desktop application. The more basic widgets are text box, button, check box, radio button, and
text area, but GWT also provides many more complex widgets that could be used in any Web
Application. There is a Password Text Box which visually masks user input to prevent others
from seeing. A Date Picker, which brings up a small calendar and allows the user to easily
switch between months and pick an individual date. One very useful widget is the Suggest Box,
in which displays a pre-configured set of items that closely match the users input. Suggest
Page |5
Boxes are extremely common in modern web applications such as search engines, but are
complex to implement manually.
All of these provided widgets make development of your web application quite a bit easier as a
simple drag and drop will generate much of the necessary code for you for that widget. These
widgets also make your web application feel more desktop-like.
Project Structure
The structure of the code for your web application is important as it keeps your application
organized and tells GWT where to look for certain aspects of your program. GWT can create the
structure for you automatically if you start with their default application, otherwise you can
create it yourself. All your production Java code goes under a src directory which is then divided
into three more directories; client, shared, and server. The client directory contains code that
runs on the user’s browser, the shared directory contains code that both the client and server can
access, and the server directory contains code that runs only server-side. You can further divide
your program into more directories if needed. For testing, you may create a test directory in
which your JUnit tests will go into.
Once you compile your application, a ‘war’ directory will be created and all your output code
will be put into there. Within this directory you can find all your HTML, CSS, JavaScript, and
jar files. An .xml file will also be generated which contains the module definitions for your
project. It specifies the source, inheritance of basic GWT functionality and any other modules,
and the entry-point for your application.
The ‘Right’ Design Pattern
When designing your User Interface it is very important to apply the correct design pattern to
create a well-layered implementation. When Smalltalk was introduced in the 80s, the ModelView-Controller (MVC) pattern was used. The Model contains all the business logic such as
servlets or anything which runs server-side. The Controller handles the communication between
the client and server and can reside either client-side or server-side depending on the framework.
The View is the client-side portion of the program which is what runs on the user’s browser.
Figure 3 (left side) shows how the Model, View, and Controller relate to each other.
This pattern causes some issues with GWT development though, for a couple reasons. The
communication about changes between the Model and the View is complicated due to the
server/client separation and testing is more difficult due to the view having to send queries to the
model. A better pattern for GWT is the Model-View-Presenter pattern. The model and view
perform the same role but now only the only way to have communication between the View and
Model is through the Presenter. Figure 3 (right side) shows how the Model, View, and Presenter
relate to each other.
Page |6
In the Model-View-Presenter pattern, the view has no logic at all and only displays widgets and
sends events to the Presenter. Any validation (such as making sure a zip code is five digits long)
will be done in the Presenter. The Presenter is the main difference between MVP and MVC
patterns. It essentially acts as a bridge between the Model and the View. When the user does
something in the view that triggers an event, the Presenter will communicate with the model and
then update the view depending on how the model changes.
Figure 3: Shows relations in MVC (left) and relations in MVP (right) [3]
Remote Procedure Calls
Remote Procedure Calls (RPC) handle the communication between the server and client over
HTTP. This allows the developer to pretty much treat the server and client as being on the same
machine. One major difference with RPCs that many developers aren’t used to is that they are
asynchronous. This means that a caller can initiate a process and other processes can continue
even if a response has not been received. This is very different than what we are used to, since
usually you can make a call and right away return some data and use it. This means that the user
is able to continue accessing your web application although some things may not be loaded. To
handle this, it is best to implement some client side code which temporarily disables the
application until the data has been received from the server.
There are three components needed when defining the RPC interface, an interface for the service
which extends RemoteService and lists all the RPC methods (This looks similar to a C++ header
file). Next a class which extends RemoteServiceServlet is needed. This class implements the
interface which was created above. Finally an asynchronous interface which is based on the
original service interface needs to be defined which will be called from the client-side code.
This means that if you need to write a new function to return data to the client, then you will
Page |7
need to write code not only in your server and client side files, but also the three service files.
This takes quite a bit of extra work that most Java developers are not used to.
Serialization
“Serialization is the process of packaging the contents of an object so that it can (be) moved from
one application to another application or stored for later used.”[2] When an object is transferred
over the network with GWT RPC, it needs to be serialized. For an object to be serialized, every
parameter and return type must be serializable. For a type to be serializable it must satisfy at
least one of the following requirements.
 It is a primitive type (int, char, boolean, etc.) and the wrapper object is serializable by
default.
 It is an array of serializable types
 A class is serializable if it meets these three requirements:
o It implements either Java Serializable or GWT’s ‘IsSerializable’ interface, either
directly, or because it derives from a superclass that does.
o It’s non-final, non-transient instance fields are themselves serializable, and
o It has a default (zero argument) constructor with any access modifier (e.g. private
Foo(){} will work) [2]
Browser History
One main problem that GWT encounters is handling when the user uses the ‘Back’ button.
GWT web applications use Ajax to create the page and modify individual elements on the page
instead of refreshing the whole page. This makes events update faster but due to the lack of a
URL changing, if the user hits back then he will be taken back to the previous page which he was
on before going to the GWT web application. Fortunately GWT developed a way to handle this:
a History class.
The History class manages all the Back and Forward events while being completely transparent
to the user. Whenever the user accesses a different part of the web application the URL will
change slightly. For instance if your base URL is www.mywebapp.com/myapp, and the user
accesses a registration form the URL would change to www.mywebapp.com/myapp#registration
in which registration; the string after the hash mark; is a token used to identify that specific
module of your web application.
Compiler
Page |8
One of the most advanced features of GWT is its Java-to-JavaScript compiler. It converts your
Java code into equivalent JavaScript which can be run on all supported browsers. The compiler
is extremely important because it does several code optimizing tasks when it runs, which often
times creates better code than what can be hand written by experienced programmers. One
feature of the compiler is the ability to choose one of the three output styles: Obfuscated, Pretty,
or Detailed. Obfuscating the code will make the code essentially unreadable both for security
purposes and to reduce the size of the JavaScript which needs to be downloaded. It does this by
removing all unnecessary white spaces and making all variable names as short as possible. This
allows the JavaScript code, which is client-side code, to be sent to the client faster. Pretty creates
output which is readable to a human, and Detailed expands upon Pretty with more detail such as
more verbose variable names.
Optimizations
Some of the more significant optimizations that GWT does are Dead Code Elimination, Constant
Folding, Copy Propagation, String Interning, and Code In-lining.

Dead Code Elimination: Eliminates code from the output that is never called. This
means, if you write five functions and only call three of them, then the compiler will
ignore the other two unused functions. One benefit of this is that you can write stub
functions for later use and you don’t have to worry about it being generated into excess
JavaScript code. It will even remove whole classes if the class is not used.

Constant Folding: If a value of an expression can be figured out at compile time, then
the compiler will calculate the result and will use the value directly instead of the
expression. If you write code to bring up an alert window to say ‘Hello World’ using
concatenation such as Window.alert(“Hello ” + “World”), the compiler will do the
concatenation at compile time and produce the following JavaScript code,
$wnd.alert(“Hello World”). [3]

Copy Propagation: If a variable is calculated during compile time using Constant
Folding and that variable is used later on to calculate another variable, then that second
variable will be calculated at compile time also and substitute the value directly. For
instance, if constant folding figured out that x = 20 and later on you have y = x + 10, then
‘y’ will be substituted with 30.

String Interning: Saves memory and increases performance by replacing multiple
references of string literals with global references.

Code In-Lining: If a called method is relatively short, it will replace the method call
with the actual method.
These are just five of the many optimizations the GWT does to try and speed up your JavaScript
code. Since GWT does many optimizations which rely on looking at the application as a whole,
the compiler must compile the whole application every time to properly optimize. This can be
Page |9
frustrating as the compilation process can become quite long depending on the size of your
application. I have had compilations take upwards of one and a half minutes, which can quickly
add up if you are testing a lot of small changes.
Debugging and Testing Your Application
An important part of the GWT development lifecycle is creating a good set of unit test cases.
With GWT you can use the JUnit testing framework to test your application as they have
integrated it well into GWT. GWT has created a special JUnit test case called GWTTestCase
which acts similar to a normal JUnit test but will launch an instance of GWTs browser which
emulates your application during test execution.
If you need to debug your program, you can use the same formal methods that have been used in
the past such as using breakpoints. If you are using eclipse as your IDE then when you set a
breakpoint and debug the program, the perspective will be changed to a debug mode, allowing
you to step through and step over just like a normal Java application. This means you can debug
your program as if the web application was a normal application, although it doesn’t seem to
work very well across the RPC calls. There is also a window to allow you to check variables and
their current value to verify it is correct. When correcting a bug, GWT offers a mode called
‘Hosted Mode’ which allows you to make a change and refresh the browser to view the fix. This
cuts out a long compilation process.
Deploying Your GWT Application
When deploying your GWT web application, a few more steps can be taken to try to speed up
the application even more. Large amounts of JavaScript will be generated with large
applications, all of which is usually downloaded when the user visits your page. This can cause
significant slowdowns in the application. GWT tries to remedy this by introducing Code
Splitting. This allows you to download only what is needed and then get other parts as needed.
This isn’t something GWT does automatically, so this means that some code needs to be written
to handle what code should be downloaded and when. All that is needed is a small bit of code
shown in Figure 4.
P a g e | 10
Figure 4: Code Splitting Example [2]
Now instead of having a call to Window.alert, there is a call to GWT.runAsync which downloads
the necessary code when the button click even happens. These runAsync calls can be very useful
for events such as tab clicks or switching between pages as there is a lot more code which is
downloaded than a simple Window.alert. In the end this will speed up the application overall as
the user will only need to download what is needed.
References
[1] Remick, J. (2011, January 30). What is a web app? Here’s our definition. Retrieved from
http://web.appstrom.net/general/opinion/what-is-a-web-app-heres-our-definition/
[2] Google. (2011) Google Web Toolkit. Retrieved from http://code.google.com/webtoolkit/
[3] Kereki, K.F. (2011). Essential GWT building for the web with Google Web Toolkit 2.0
Boston, MA : Perason Education, Inc.
[4] Gupta, I. (2009). Accelerated GWT, building enterprise Google Web Toolkit applications.
Berkeley, CA : Apress.
[5] Chaganti, R (2007). Google Web Toolkit: GWT Java Ajax programming. Birmingham, UK :
Packt Pub. Ltd.