Google Releases GWT Designer

Last week, Google released the GWT 2.2 update. While this was a relatively minor update, at least compared to previous version updates, there was one new feature mentioned in the release notes that was much needed: GWT Designer.

UiBinder’s Missing Cousin

The GWT 2.0 version saw the release of the UiBinder framework, a technique for creating GWT components in HTML, analogous to building applications in MXML over ActionScript in Flash/Flex. For example, the following UiBinder snippet creates a GWT panel and list box in an HTML-based template:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'    xmlns:g='urn:import:com.google.gwt.user.client.ui'>
       <g:HTMLPanel>
              Hello, <g:ListBox ui:field='listBox' visibleItemCount='1'/>.
       </g:HTMLPanel>
</ui:UiBinder>

What was severely lacking in the GWT 2.0, though, was the ability to edit this layout using a visual tool. There was really no compelling reason to switch to UiBinder, since it required learning a new syntax with limited benefits over writing it directly in Java.

Enter GWT Designer, now included in the Eclipse GWT 2.2 plugin, which allows you to create UiBinder components directly using a visual editor! Below is a sample screen-shot from a UiBinder class created in GWT Designer:

GWT Designer

But wait, there’s more!

GWT Designer is actually part of the WindowBuilder Pro family of graphical editors that includes SWT Designer and Swing Designer. Google offers the option of downloading the full stand-alone application, which includes support for 3rd party GWT add-ons such as GWT-Ext, GXT and SmartGWT.

With the GWT 2.2 release, Google also added support for HTML5, although it is marked as experimental/beta for the time being. To some surprise, they also deprecated support for Java 1.5 so if you have not upgraded to Java 1.6 yet, you will now get warnings in your application. Overall, the GWT 2.2 release helps to round out the GWT feature set leading to more powerful and easier to use tools.

I'm Speaking at TheServerSide Java Symposium Reminder: Jeanne and I are both presenting at TheServerSide Java Symposium next month. My lecture is entitled “GWT Roundup: An Overview of Google’s Web Toolkit and Hybrid Integration” and Jeanne’s presentation is called “Throw Away All The Rules. Now What Process Do You Follow?“. The conference is being held in Las Vegas and it’s not too late to register to attend!

TSS Symposium Preview – GWT Roundup

I'm Speaking at TheServerSide Java Symposium Google Web Toolkit As previously mentioned, Jeanne and I will both be presenting talks at TheServerSide Java Symposium exactly one month from now. Here is a preview of two of the topics I will be discussing at my talk “GWT Roundup: An Overview of Google’s Web Toolkit and Hybrid Integration” : GWT Image Bundles and Speed Tracer.

1. GWT Image Bundles

One of the more interesting features that GWT offers, beyond what most developers using indirect Ajax frameworks could build on their own, is the concept of Image Bundles. Even GWT developers who use Image Bundles may not have any notion of what is going on under the covers because the implementation details are so well abstracted. The idea is to take a large group of images and combine them into a single image with an interface for accessing each image. This may sound like a strange notion, but the performance advantages of doing so are manyfold:

  • More responsive UI since all images are downloaded together
  • Faster than downloading them individually since they are not downloaded in serial (HTTP 1.1 limits number of outgoing connections to 2 per domain)
  • Bundles use less bandwidth than separate images since multiple image headers are reduced to a single header

2. Speed Tracer

New to GWT 2.0 is the ability to validate such non-functional requirements as user interface performance, using the Speed Tracer tool, a Google Chrome extension. For example, if a particular asynchronous RPC call is causing delays in the user experience, Speed Tracer will help you identify it. Speed Tracer provides two graphs that show user response information and offers “hints” of spikes in response time that could be causing problems in your application.

  • Sluggishness Graph: Shows UI responsiveness
    GWT Speed Tracer - Sluggishness Graph
  • Network Graph: Network activity and latency
    GWT Speed Tracer - Network Graph

See you in Las Vegas!

I hope you enjoyed this preview of the talk I will giving next month. I will also be taking part in a panel hosted by Cameron McKenzie called “Client Side Development Smackdown” . Oh, and it’s not too late to register for TheServerSide Java Symposium 2011. We hope to see you there!