Dr. Dobb's Journal - January 2008 - (Page 26) d01burn_p4ma 11/9/07 10:39 AM Page 26 Core Technology by Ed Burnette and Adam Houghton Hands-On Google Web Toolkit GWT is an open-source framework created by Google to make Ajax easier 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. tages. 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. projectCreator and applicationCreator programs supplied with the toolkit. Then select a web page where you want to insert the GWT component or application. This is known as the “host page” in GWT lingo. Listing One is the page we used in this article. To inject the GWTFlow component into the page, we include our compiled JavaScript file (more on that later) and an HTML placeholder element. Because GWTFlow needs to use special effects and support browser history, we also include a thirdparty JavaScript library and an element. Listing Two is the resulting host page, with newly added elements in boldface. 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. Hosted versus Web Mode While developing and debugging your application, you’ll be using GWT in hosted mode. When in production however, your application will be running in web mode. Think of hosted mode as training wheels for your GWT program. It’s a hybrid environment unique to GWT that lets you run and debug the real Java code, while still inside a browser. The simplest way to launch hosted mode is to run the script file created by applicationCreator. In the example, we called the project “GWTFlow,” so the script to run Getting Started After downloading and installing GWT, make sure you are running a recent version of Java (Java 5 or higher is recommended; see the sidebar “Java 1.4 Versus Java 5”). Create a GWT project using your IDE or the Why GWT? GWT unifies the client and server parts of an application into a single program written in one language—Java. This has many advan26 Dr. Dobb’s Journal l www.ddj.com l January 2008 http://www.apple.com/itunes/jukebox/coverflow.html http://www.apple.com/itunes/jukebox/coverflow.html http://www.adamhoughton.com/GWTFlow http://www.ddj.com
For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.