Dr. Dobb's is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.

Channels ▼

Web Development

Hands-On Google Web Toolkit

Source Code Accompanies This Article. Download It Now.

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 [email protected] Adam is a senior software developer at the SAS Advanced Computing Lab and specializes in all things Java. He can be contacted at [email protected]

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.

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

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.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.