Imagine a bacon-wrapped Ferrari. Still not better than our free technical reports.

The Curious Coder’s Guide to Java Web Frameworks: GWT

Get the full report

Psst! Want to see the 8 most popular Java Web Frameworks compared? Since this post here, we’ve made The Curious Coder’s Java Web Frameworks Comparison: Spring MVC, Grails, Vaadin, GWT, Wicket, Play, Struts and JSF. Grab the complete report in HTML and/or PDF. Win!

See how *GWT* ranks in the Full Report

This is our fifth post in the Rebel Labs review of Java web frameworks, having already covered Vaadin, Grails, Spring MVC and Wicket. Today we look at GWT (Google Web Toolkit), which Google announced back in 2006 at JavaOne and has been worked on actively since then. In our Developer Productivity Report, GWT maintained a 14% market share, falling into 4th place behind Spring MVC, JSF and Struts. So let’s take a deeper look and see what it has to offer.

Framework Description/Goals


GWT is a versatile SDK with a full set of core Java APIs and Widgets: pre-canned and pretty much anything else that would otherwise work with the browser’s DOM and JavaScript.

Here’s a snippet, or elevator pitch if you will, from the official website:

“Google Web Toolkit (GWT) is a development toolkit for building and optimizing complex browser-based applications. Its goal is to enable productive development of high-performance web applications without the developer having to be an expert in browser quirks, XMLHttpRequest, and JavaScript. GWT is used by many products at Google, including Google Wave and the new version of AdWords.”

I want it! How do I get it?

On the GWT site! Or, rather, on a small, somewhat hidden piece of the Google Developers website. My suggestion is you just run a Google search on “GWT” and click the first link.

After you make your way to the GWT section, to download you can just click on the “Download” hypertext with the big, green arrow next to it, so it’s nice and easy. You now have a couple choices. If you’re not coding in Eclipse, or any IDE at all, you can download the standalone SDK and tools. If you are using Eclipse, there is GWT plugin available through the Eclipse Marketplace and their update site. You can also download GWT Designer, which is a powerful and easy-to-use bi-directional Java GUI designer that lets you create user interfaces in minutes with tools for intelligent layout assist, drag-and-drop, and automatic code generation.

I downloaded the newest version (2.5.1) for Eclipse Indigo plus the GWT Designer (I was curious and it was listed as a recommended download). More on that to come!

GWT in Action

GWT came with a number of sample applications, all of which run on an embedded Jetty. The sample applications that come with the bundle are fairly straightforward visually but complicated and extensive on the backend because of the nature of GWT itself. So, instead of spending pages and pages delving into the inner workings of the stock apps, I found this StockWatcher application instead. Google uses it as their main “Build a Sample GWT App” example, but strangely does not include it in the GWT download. If the mood strikes you to play with it, you can download it here.

After you import StockWatcher into Eclipse, you can run it immediately with Run as -> Web Application. The Development Mode tab will then populate with a URL which, when clicked, will open up the application in your default browser. If you haven’t used GWT before this launch, you’ll be prompted with a GWT Developer Plugin download for your browser. Download, navigate back to the designated URL, and StockWatcher pops up, magic.

The application itself has a fairly simple layout. If you run the application you can see for yourself, but what’s more interesting is what’s behind the scenes. Every GWT application has to have an entry point; in this instance the entry point is – designated in the StockWatcher.gwt.xml file that inherits the core Web Toolkit and the default GWT style sheet.

GWT uses a component like structure as you can see below. You create various components by declaring them as fields and then assigning those fields to various parent objects.

private static final int REFRESH_INTERVAL = 5000; // ms
private VerticalPanel mainPanel = new VerticalPanel();
private FlexTable stocksFlexTable = new FlexTable();
private HorizontalPanel addPanel = new HorizontalPanel();
private TextBox newSymbolTextBox = new TextBox();
private Button addStockButton = new Button("Add");
private Label lastUpdatedLabel = new Label();

Every component needs to be added to a parent object in order for it to appear in the UI. This is done in the main onModuleLoad() method in

// Create table for stock data.
stocksFlexTable.setText(0, 0, "Symbol");
stocksFlexTable.setText(0, 1, "Price");
stocksFlexTable.setText(0, 2, "Change");
stocksFlexTable.setText(0, 3, "Remove");
// Add styles to elements in the stock list table.
stocksFlexTable.getRowFormatter().addStyleName(0, "watchListHeader");
stocksFlexTable.getCellFormatter().addStyleName(0, 1, "watchListNumericColumn");
stocksFlexTable.getCellFormatter().addStyleName(0, 2, "watchListNumericColumn");
stocksFlexTable.getCellFormatter().addStyleName(0, 3, "watchListRemoveColumn");
// Assemble Add Stock panel.
// Assemble Main panel.

Pretty simple (although quite verbose), really efficient, also incredibly similar to JavaScript, which was the intention. Farther down in the onModuleLoad() method you’ll also see a timer set to automatically refresh the list of stocks, an addClickHandler for the add button, and a addKeyPressHandler for the text. The click and key press handlers allow the application to listen for user input and respond accordingly. Very easy and useful especially with a small application, but with a bigger application in order to avoid having a large amount of separate event handler objects you’re better off taking advantage of the included event handler interface.

Here’s a screenshot of the UI:


The GWT data model includes a vast number of available components that can be easily initialized and customized, and, the code is easy to read and navigate through. The model includes two abstractions: the UI written in Java and then compiled to JavaScript (hence the similarities); and the native JavaScript, SmartGWT, GXT and Errai that provide more helpers and components.

One thing to keep in mind, that data is stored on the client side rather than the server side which means there is no way to re-render data that you don’t explicitly store and access. GWT uses an HTML5 storage spec that allows for large amounts of client side storage and the ability to partition session and locally persistent storage. Data events are generated and handled by interested listeners.

Code Maintenance

So your UI has gotten a little disorganized and you want to move some things around, maybe change a little something here or there? No problem! There are two ways to build your application using GWT: Design mode and, well, not Design mode (i.e. coding). If you’re a fan of the Design mode, modifying your UI is as simple as dragging and dropping new and existing panels and widgets. The component data model for your source code modification is fairly easy to modify as well. You already built your widgets so just change around what they’re added to, or add/delete new characteristics. The Javascript model is excellent for easy modification.

However, my recommendation is not to mix the two models. The Design mode is really fantastic if you’re staying solely in Design mode, and if you’re coding just stick to coding. When you start creating your UI using the design Palette, the automatically generated source code is a little chunky and your coded components are not particularly compatible. Both models work great on their own but mixing the two is a recipe for slow building frustration.


GWT is paired often with various IDE’s in order to help build richer applications. SpringSource Tool Suite (STS) pairs GWT with Spring Roo; MyEclipse takes advantage of built in scaffolding in order to generate full functioning, ready to run GWT applications that include database tables, JPA entities and Java Beans; the GWT plugins for IntelliJ IDEA, Netbeans and Eclipse provide the code generation and debugging tools necessary for rapid development. VistaFei is a visual IDE for GWT that essentially hosts the Design mode and provides the easy drag and drop interface.

In addition, Google provides open source API libraries that provide Java language support for incorporating Google JavaScript APIs in GWT web applications. Google also hosts a GWT Widget Library that provides developers with open-sourced widgets and support. They claim that anything you can do with the browser’s DOM and JavaScript can be done in GWT, including interacting with hand-written JavaScript.

GWT includes three built in CSS themes: standard, chrome and dark. Each application can only use one at a time, but, if you prefer to design from scratch or if you already have an existing style, you can just leave it out. You add this to the main GWT configuration file in your src folder (where you declare your entry class); in the StockWatcher application it is called StockWatcher.gwt.xml.

<!-- <inherits name=""/> --> 
<!-- <inherits name=""/> --> 
<inherits name=""/>

Note: GWT themes also come in RTL (right-to-left) versions to support languages written from right-to-left, such as Arabic. To use a right-to-left theme, append RTL to the theme name.

What’s Under the Covers?

From the Google GWT webpage:

The GWT SDK provides a set of core Java APIs and Widgets. These allow you to write AJAX applications in Java and then compile the source to highly optimized JavaScript that runs across all browsers, including mobile browsers for Android and the iPhone.

Constructing AJAX applications in this manner is more productive thanks to a higher level of abstraction on top of common concepts like DOM manipulation and XHR communication.

So, in the end, it’s just JavaScript. GWT handles all of the client-server communications for you, optimizes the scripts based on user profile, and lets you use the backend language of your choice, reuse UI components across projects, mix handwritten JavaScript and existing JavaScript APIs in with your Java source code, and test your code with JUnit (or, better yet, using JRebel).

My Feelings About It?

As a lover of Javascript, GWT is pretty great in my book. The components are easy to work with and it’s fairly easy to get an application up and running in a short amount of time if you’re already familiar with a component based structure. The code is easy to read and modify and if you are already familiar with client side storage that is easy to work with as well.

There are a couple ifs in that sentence – if you’ve done this, if you’ve done that. Luckily there’s good documentation that should answer most, if not all, of your questions. Oops, there’s another if!

As far as the Design mode is concerned, I’m personally not a fan. It’s a fantastic idea and the automatic code generation works OK for the components you do generate but the interface is hard to work with. Adding and modifying simple panels and widgets is pretty straightforward, but once you get into more complicated layouts it gets a little clunky. If they expanded, and better organized, the properties menu for added components it would be easier, and faster, to work with. In the end, you will probably spend less time adding new components by coding rather than by using the Design interface.

Also, important note, the components that you generate in the code cannot be modified in Design mode, as far as I can tell. Which I can understand from a developer’s perspective, but it makes it hard to work with.

The verdict:

Straight up coding: A+. Design mode: B-. Mixing the two: D.

How Can I Contribute?

There’s a link for that! This page details the reasons why GWT is open source, how to report bugs, where to discuss GWT, and how and where to contribute code.

Want to know more?

There are a lot of things Google does well and proper documentation is definitely one of them. At least as far as GWT is concerned.

There are more resources available for GWT users than available framework components (probably). On the GWT webpage, there are tutorials on everything from your basic sample app to client-server communication and internationalization. There is extensive documentation, articles, books, case studies, issue tracking and a blog, all with links that are easy to find (they’re on the main context menu). If you can’t find what you’re looking for you can just use the search box at the top, already populated with the Google Web Toolkit tag.

Well, that’s it from me. I hope you enjoyed this overview of GWT, please leave you comments below or tweet @ZeroTurnaround :-)

  • kanagaraj

    I somehow feel the author has not done a full analysis on GWT. Get designer is not the only way to design your Ui, also bit outdated. Now a days people mostly use Ui binder. Modifying you layouts are no more complex. So please learn the internals before writing a review article.

  • Mani Bognar

    Very nice and helpfull article. Thanks!