Web Development

Hands-On Google Web Toolkit

Source Code Accompanies This Article. Download It Now.

Ed and Adam use the Google Web Toolkit—a free, open source framework created to make Ajax easier—to build a mash-up photo viewer that lets you browse any Flickr photo album.

Ed is a principal systems developer at the SAS Advanced Computing Lab and author of Google Web Toolkit: Taking the Pain Out of Ajax. He can be contacted at ed.burnette@sas.com.
Adam is a senior software developer at the SAS Advanced Computing Lab and specializes in all things Java. He can be contacted at adam.houghton@sas.com.

Most developers create Ajax applications using several different languages across two or more tiers. On the client side, you have HTML markup of course, plus some logic written in JavaScript to perform tasks such as client-side validation and manipulation of the HTML document object model (DOM). On the web server, you may have parts written in PHP, Perl, Java, or other languages.

Unfortunately, slight differences in JavaScript among browsers, along with major differences in the DOM, have conspired to make writing these types of applications more difficult. Libraries such as Dojo and Prototype help smooth out the rough edges, but substantial dynamic web applications are still much harder to write than the traditional desktop applications they're supposed to replace.

The Google Web Toolkit (code.google.com/webtoolkit) is a free, open-source framework created by Google to make Ajax easier. In this article, we present GWTFlow, a mash-up photo viewer that lets you browse any Flickr photo album. The UI was inspired by Apple's Cover Flow album viewer (www.apple.com/itunes/jukebox/coverflow.html) and the Carousel mode in the .Mac Web Gallery. The complete source code is available online (see "Resource Center," page 5 and at www.adamhoughton.com/GWTFlow). By studying this application, you will learn useful techniques for creating your own dynamic web pages using GWT.

Why GWT?

GWT unifies the client and server parts of an application into a single program written in one languageJava. This has many advantages. For one thing, more developers know Java than JavaScript or ActionScript (the language used by Flash). Another reason is that Java is blessed with an abundance of developer tools, such as Eclipse, NetBeans, and IDEA.

By standardizing on one language, you can share code on the client and server. For example, you can run the same validation codeonce on the client for immediate feedback, and once on the server for maximum security. You can even move code between tiers as you refactor applications to adapt to changing requirements.

Finally, GWT abstracts the browser's DOM, hiding differences between browsers behind easy to extend object-oriented UI patterns. This helps make code portable over every major web browser. While you may occasionally have to delve into CSS/DOM/JavaScript to address browser quirks in complex programs, GWT makes this the exception rather than the rule.

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task.
However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

This month's Dr. Dobb's Journal

This month,
Dr. Dobb's Journal is devoted to mobile programming. We introduce you to Apple's new Swift programming language, discuss the perils of being the third-most-popular mobile platform, revisit SQLite on Android
, and much more!