Test msg Test msg Test msg Test msg Test msg Test msg Test msg Test msg Test msg Test msg Test msg Test msg Test msg Test msg Test msgTest msg

Web 2.0 Development with the Google Web Toolkit
There's much hype related to Web 2.0, and most people agree that software like Google Maps, Gmail and Flickr fall into that category. Wouldn't you like to develop similar programs allowing users to drag around maps or refresh their e-mail inboxes, all without ever needing to reload the screen?

Until recently, creating such highly interactive programs was, to say the least, difficult. Few development tools, little debugging help and browser incompatibilities all added up to a complex mix. Now, however, if you want to produce such cutting-edge applications, you can use modern software methodologies and tools, work with the high-level Java language, and forget about HTML, JavaScript and whether Firefox and Internet Explorer behave the same way. The Google Web Toolkit (GWT) makes it easy to do a better job and produce more modern Web 2.0 programs for your users.

What Is Web 2.0?
This question has several answers, including Sir Tim Berners-Lee's (the creator of the World Wide Web) view that it's just a reuse of components that were there already. It originally was coined by Tim O'Reilly, promoting “the Web as a platform”, with data as a driving force and technologies fostering innovation by assembling systems and sites that get information and features from distributed, different, independent developers and services.

This notion goes along with the idea of letting users run applications entirely through a browser, without installing anything on their machines. These new programs usually feature rich, user-friendly interfaces, akin to the ones you would get from an installed program, and they generally are achieved with AJAX (see the What Is AJAX? sidebar) to reduce download times and speed up display time.

Web 2.0 applications use the same infrastructure that developers are largely already familiar with: dynamic HTML, CSS and JavaScript. In addition, they often use XML or JSON for representing and communicating data between the server and browser. This data communication is often done using Web service requests via the DOM API XMLHttpRequest.

What Is AJAX?

The standard model for Web applications is something like this: you get a screenful of text and fields from a server, you fill in some fields, and when you click a button, the browser sends the data you typed to a server (wait), which processes it (wait), and sends back an answer (wait), which your browser displays, and then the cycle restarts. This is by far the most common way Web applications operate, and you must get used to the delays. Nothing happens immediately, because every answer that needs data from a server requires a round trip.

AJAX (Asynchronous JavaScript And XML) is a technique that lets a Web application communicate in the background (asynchronously) with a Web server to exchange (send or receive) data with it. This does away with the requirement to reload the whole page after every action or user click. Thus, using AJAX increases the level of interaction, does away with waiting for pages to reload and allows for enhanced functionality. A well-programmed application will send requests in the background, as you are doing other things, so you won't have to stare at a blank screen or a turning-hourglass cursor. This is the Asynchronous part of AJAX acronym.

The next part of the AJAX acronym is JavaScript. JavaScript allows a Web page to contain a program, and this program is what allows the Web page to connect to a server as previously described. However, it's not just a question of having JavaScript, but also of how it is implemented in the browser. Both Firefox and Internet Explorer both provide AJAX access, but with some differences, so programmers must take those differences into account when doing the connection. Data is usually retrieved using XMLHttpRequest, but other techniques are possible, such as using iframes.

Finally, the last part of the AJAX acronym is XML. XML is a standard markup language, used for sharing and passing information. As we've seen, the name of the DOM API for making Web service requests is named XMLHttpRequest, and most likely, the original intent was that XML be used as the protocol for exchanging data between browser and server. However, neither the X in AJAX nor the XML in XMLHttpRequest means that you have to use XML; any data protocol at all, including no protocol, can be used.

JSON (JavaScript Object Notation) often is used; it's more lightweight than XML, and as you might guess by its name, is often a better fit for JavaScript. See Figure 3 for some actual JSON code; remember, it's not meant to be clear to humans, but compact and easy to understand for machines.

AJAX comprises basic technologies that have been around for a while now, and the AJAX term itself was created in 2005 by Jesse Garrett. GWT uses AJAX to allow the client program to communicate with the server or execute procedures on it in a fully transparent way. Of course, you also can use AJAX explicitly for any special purposes you might have.

What Is the Google Web Toolkit?
The Google Web Toolkit (GWT—rhymes with “nitwit”) is a tool for Web programmers. Its first public appearance was in May 2006 at the JavaOne conference. Currently (at the time of this writing), version 1.5.3 has just been released. It is licensed mainly under the Apache 2.0 Open Source License, but some of its components are under different licenses. Don't confuse JavaScript with Java; despite the name, the languages are unrelated, and the similarities come from some common roots.

In short, GWT makes it easier to write high-performing, interactive, AJAX applications. Instead of using the JavaScript language (which is powerful, but lacking in areas like modularity and testing features, making the development of large-scale systems more difficult), you code using the Java language, which GWT compiles into optimized, tight JavaScript code. Moreover, plenty of software tools exist to help you write Java code, which you now will be able to use for testing, refactoring, documenting and reusing—all these things have become a reality for Web applications.

You also can forget about HTML and DHTML (Dynamic HTML, which implies changing the actual source code of the page you are seeing on the fly) and some additional subtle compatibility issues therein. You code using Java widgets (such as text fields, check boxes and more), and GWT takes care of converting them into basic HTML fields and controls. Don't worry about localization matters either; with GWT, it's easy to produce locale-specific versions of code.

There's another welcome bonus too. GWT takes care of the differences between browsers, so you don't have to spend time writing the same code in different ways to please the particular quirks of each browser. Typically, if you just code away and don't pay attention to those small details, your site will end up looking fine in, say, Mozilla Firefox, but won't work at all in Internet Explorer or Safari. This is a well-known classic Web development problem, and it's wise to plan for compatibility tests before releasing any site. GWT lets you forget about those problems and focus on the task instead.

According to its developers, GWT produces high-quality code that matches (and probably surpasses) the quality (size and speed) of handwritten JavaScript. The GWT Web page contains the motto “Faster AJAX than you can write by hand!”

GWT also endeavors to minimize the resulting code size to speed up transfers and shorten waiting time. By default, the end code is mostly unreadable (being geared toward the browser, not a snooping user), but if you have any problems, you can ask for more legible code so you can understand the relationship between your Java code and the produced JavaScript.

Getting Started with GWT
Before installing GWT, you should have a few things already installed on your machine:

Java Development Kit (JDK), so you can compile and test Java applications; several more tools also are included.

Java Runtime Environment (JRE), including the Java Virtual Machine (JVM) and all the class libraries required for production and development environments.

A development environment—Google's own developers use Eclipse, so you might want to follow suit. Or, you can install GWT4NB and do some tweaking and fudging and work with NetBeans, another popular development environment.

GWT itself weighs in at about 27MB; after downloading it, extract it anywhere you like with tar jxf ../gwt-linux-1.5.3.tar.bz2. No further installation steps are required. You can use GWT from any directory.

For this article, I used Eclipse. For more serious work, you probably also will require some other additions, such as the Data Tools Platform (DTP), Eclipse Java Development Tools (JDT), Eclipse Modeling Framework (EMF) and Graphical Editing Framework (GEF), but you easily can add those (and more) with Eclipse's own software update tool (you can find it on Eclipse's main menu, under Help—and no, I don't know why it is located there).

Before starting a project, you should understand the four components of GWT:

When you are developing an application, GWT runs in hosted mode and provides a Web browser (and an embedded Tomcat Web server), which allows you to test your Java application the same way your end users would see it. Note that you will be able to use the interactive debugging facilities of your development suite, so you can forget about placing alert() commands in JavaScript code.

To help you build an interface, there is a Web interface library, which lets you create and use Web browser widgets, such as labels, text boxes, radio buttons and so on. You will do your Java programming using those widgets, and the compilation process will transform them into HTML-equivalent ones.

Because what runs in the client's browser is JavaScript, there needs to be a Java emulation library, which provides JavaScript-equivalent implementations of the most common Java standard classes. Note that not all of Java is available, and there are restrictions as to which classes you can use. It's possible that you will have to roll your own code if you want to use an unavailable class. As of version 1.5, GWT covers much of the JRE. In addition, as of version 1.5, GWT supports using Java 5.

Finally, in order to deploy your application, there is a Java-to-JavaScript compiler (translator), which you will use to produce the final Web code. You will need to place the resulting code, the JavaScript, HTML and CSS on your Web server later, of course.

If you are like most programmers, you probably will be wondering about your converted application's performance. However, GWT generates ultra-compact code that can be compressed and cached further, so end users will download a few dozen kilobytes of end code, only once. Furthermore, with version 1.5, the quality of the generated code is approaching (and even surpassing) the quality of handwritten JavaScript, especially for larger projects. Finally, because you won't need to waste time doing debugging for every existing Web browser, you will have more time for application development itself, which lets you produce more features and better applications.

Packages

Using GWT requires learning about several packages. The most important ones are:

com.google.gwt.http.client: provides the client-side classes for making HTTP requests and processing the received responses. You will use it if you need to do some AJAX on your own, beyond the calls done by GWT itself.

com.google.gwt.i18n.client: provides internationalization support. You will need it if you are developing a system that will be available in several languages.

com.google.gwt.json.client and com.google.gwt.xml.client: used for parsing and reading XML and JSON data.

com.google.gwt.junit.client: used for building automated JUnit tests.

com.google.gwt.user.client.ui: provides panels, buttons, text boxes and all the other user-interface elements and classes. You certainly will use these.

com.google.gwt.user.client.rpc and com.google.gwt.user.server.rpc: these have to do with remote procedure calls (RPCs). GWT allows you to call server code transparently, as if the client were residing in the same machine as the server.