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!
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.
Here’s a snippet, or elevator pitch if you will, from the official website:
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
StockWatcher.java – 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.setCellPadding(6); stocksFlexTable.getRowFormatter().addStyleName(0, "watchListHeader"); stocksFlexTable.addStyleName("watchList"); stocksFlexTable.getCellFormatter().addStyleName(0, 1, "watchListNumericColumn"); stocksFlexTable.getCellFormatter().addStyleName(0, 2, "watchListNumericColumn"); stocksFlexTable.getCellFormatter().addStyleName(0, 3, "watchListRemoveColumn"); // Assemble Add Stock panel. addPanel.add(newSymbolTextBox); addPanel.add(addStockButton); addPanel.addStyleName("addPanel"); // Assemble Main panel. mainPanel.add(stocksFlexTable); mainPanel.add(addPanel); mainPanel.add(lastUpdatedLabel);
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:
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.
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.
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
<!-- <inherits name="com.google.gwt.user.theme.chrome.Standard"/> --> <!-- <inherits name="com.google.gwt.user.theme.chrome.Chrome"/> --> <inherits name="com.google.gwt.user.theme.chrome.Dark"/>
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:
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.
My Feelings About It?
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.
Straight up coding: A+. Design mode: B-. Mixing the two: D.
How Can I Contribute?
There’s a link for that! https://developers.google.com/web-toolkit/makinggwtbetter. 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 :-)