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.
