PROGRAMMING Google Web Toolkit www.fotolia.de, Timothy Large Large Timothy www.fotolia.de, Creating dynamic web applications with the Google Web Toolkit GOOGLE TOOLS The Google Web Toolkit lets you develop complex web applications and Javascript implementations of Java in Java and automatically converts them to AJAX apps. standard classes such as java.lang, and java.util. Besides this, the framework BY RAMON WARTALA modifies the Javascript code to suit pop- ular web browsers like Mozilla, Firefox, Internet Explorer, Opera, and Safari. oogle is more than just a search with some help from Javascript and engine. This vast and rapidly ex- XML, are currently the buzzwords Getting Started Gpanding company is also a major among web developers. AJAX toolkits The 22 Mbyte gwt-linux-1.0.21.tar.gz center for software development. Be- for programming languages such as Perl package includes documentation and sides programs such as Google Desktop [3], Ruby, and PHP are becoming ever- five sample applications, ranging from a and Google Earth, the company also re- more popular. But Google has ventured trivial Hello program, through a widget leases other web-based products once a into new territory with their Java-based overview, to a small email application quarter. While Google Mail is enjoying framework. Java simply serves as a gen- the limelight, new applications such as erator and test language, as AJAX uses Listing 1: Postgresql Table Google Reader, Google Calendar, or Javascript client-side. for MyAddress Google Spreadsheet have attracted very But why Java? The main reason is sim- 01 CREATE TABLE myaddress."names" little attention. These lesser known ap- ple bug hunting. GWT gives developers plications share the look and feel of their the ability to run and test an AJAX appli- 02 ( more popular counterparts, and they use cation in what’s known as hosted mode. 03 id serial NOT NULL, AJAX for quick and easy client access. This means running a Java version of 04 firstname varchar(50) NOT Although many suspected Google had the application within a standard Java NULL, its own framework running under the Virtual Machine. Programmers can use 05 lastname varchar(100) NOT hood, there was no way of knowing for their preferred development environ- NULL, sure until recently. But Google finally ments and debuggers. confirmed the suspicions at the Java One After the application is finished, it is 06 email varchar(128) NOT NULL, Fair in May of this year by putting the compiled into Javascript. The HTML and 07 CONSTRAINT id PRIMARY KEY Google Web Toolkit (GWT) up for grabs Javascript code created by this process (id) as a free download [1]. can be installed on a web server, where 08 ) it runs in web mode. The component ar- 09 WITHOUT OIDS; What’s in the Box? chitecture of the GWT framework com- 10 ALTER TABLE myaddress."names" AJAX [2], the asynchronous processing prises a special web browser, a widget OWNER TO myaddress; of HTTP requests and responses, along class library for AJAX-based interfaces, 68 ISSUE 74 JANUARY 2007 WWW.LINUX - MAGAZINE.COM Google Web Toolkit PROGRAMMING -eclipse specifies that we will be creating the project for the Eclipse IDE: projectCreator U -eclipse Myaddress_GWT -out U myaddress_gwt The applicationCreator command line tool creates the required classes, scripts, and configuration files: applicationCreator U -eclipse MyAddress_GWT -out U myaddress_gwt U de.wartala.client.MyAddress After making sure you have all the re- quired files, you can import the GWT project into Eclipse by selecting Import | Figure 1: This email program is one of the sample applications intended to demonstrate the Existing Projects into Workspace in the capabilities of the Google Web Toolkit. Package Manager (Figure 3). Within the project structure, I will be using the XML (see Figure 1). The applications can be The data exchange relies on the JSON configuration of a module as the entry launched using the shell scripts in the format (JavaScript Object Notation) [4]. point. applicationCreator has already application directories. In contrast to XML, JSON does not use created a module configuration with an The sample GWT application we will tagging, and thus generates less over- entry point, based on the required target be discussing in this article uses an ex- head. To retrieve the address for a family package (Listing 3). It references the isting server to query a simple address name from the database using Rails, and Java class, which the application will database. To keep things simple, the to package the address in the JSON for- call when launched in hosted mode, and server will be based on Ruby On Rails, mat, all we need is the 10 lines in Listing is also found in the HTML file, which as the implementation only takes a few 2. Line 6 reads the family name from an implements the framework for the client lines of code – this has no effect on the HTTP request and finds the matching GUI. The most important lines here are client, of course. The finished version address in the database in Line 7. Line 8 the references to the module class and to can be downloaded at [9]. The My- converts the address to JSON format. the GWT Framework’s Javascript library: Address service developed specially for The ruby script\server start command this purpose is a simple database (see calls the MyAddress service. The internal <meta name='gwt:module' U Listing 1) that manages first names, fam- Ruby On Rails developer server gets the content='de.wartala.MyAddress'> ily names, and email addresses. service to listen on port 3000 on local- <script language="javascript" U host. You could just as easily query the src="gwt.js"></script> Listing 2: NameController server by entering http://localhost:3000/ name/ in a browser. Another advantage When the application is launched, it first 01 class NameController < of Ruby On Rails is that you can manage calls the onModuleLoad() method, ApplicationController the database via a generated input form which generates the widgets provided by 02 scaffold :name (Figure 2). After entering a few records, the GUI library, before instantiating 03 def find_names_to_json query them in your browser at the fol- more classes: MyAddressRequester in our 04 # make sure not to send lowing URL: http://localhost:3000/name/ example. The application then sends re- html but text/plain find_names_to_json?lastname=Name. quests to the MyAddress service, re- Now let’s start 05 @headers["Content-Type"] = developing the "text/plain; charset=utf-8" GWT project that 06 search_name = uses the web ser- @params['lastname'] vice. We can type 07 names = Name.find(:all, : projectCreator on conditions => ['lastname like the command line ?', search_name]) to create the proj- 08 render_text names.to_json ect frame for an 09 end application. The -out specifies the Figure 2: The web service in our example can provide records directly 10 end target directory; to the browser. WWW.LINUX - MAGAZINE.COM ISSUE 74 JANUARY 2007 69 PROGRAMMING Google Web Toolkit asynchronous HTTP request to the ser- vice, which passes the result to a matching response handler. JSONRe- sponseTextHandler, another inner class, implements the onCompletion() method, which is called when the Figure 3: The Google Web Toolkit can option- asynchronous HTTP ally create Eclipse project files, giving pro- request returns any grammers the ability to import them into results. the IDE as a project. As the service re- Figure 4: Ajax applications can be debugged using a special web turns a JSON object, browser in hosted mode. ceives the responses, and fills the GUI we first need to de- elements with them. code the object and break it down into a family name, the data returned by the The initializeMainForm() method gen- its component parts. JSONParser.parse service appears in the table. erates the interface, which is comprised (responseText) handles the task of of a search button, an input box, and decoding the object, and the method Hunting Bugs aFlexTable. initializeMainForm() then displayJSONObject() handles the latter The advantage of hosted mode becomes sets attributes and events, just like an step, delegating the chore to the method apparent if a program error occurs; it is AWT or the Swing interface. updateAddressTable(). The method easier to find a bug in the Java code than Our example only requires a single updateAddressTable() renders the results in the compiled Javascript. Setting the ClickEvent to trigger a click on Search. as a table, entering the values from the -eclipse parameter when calling project- The response for this event is imple- JSON response in the corresponding Creator creates a file with a .launch mented by the inner class, SearchButton- rows and columns. suffix besides the project-specific data. ClickListener. Now for the MyAddress-shell.sh com- Thanks to the parameters configured An onClick() event triggers the AJAX mand line script. Figure 4 shows the here, the application can be executed in part of the application and sends an front-end in hosted mode. After entering Eclipse and debugged with a little help from breakpoints and other techniques Listing 3: Client Entry Point Class (Figure 5). 01 import com.google.gwt.core.client.EntryPoint; 02 import com.google.gwt.user.client.ui.RootPanel; INFO 03 import com.google.gwt.user.client.ui.TabPanel; [1] Google Web Toolkit: http:// code. google. com/ webtoolkit 04 [2] AJAX: http:// en. wikipedia. org/ wiki/ 05 /** Ajax_%28programming%29 06 * Entry point classes define <code>onModuleLoad()</code>. [3] AJAX and Perl: http:// www. linux-mag- 07 */ azine. com/ issue/ 62/ Perl_AJAX. pdf 08 public class MyAddress implements EntryPoint { [4] JSON: http:// www. json. org [5] GWT Widget Gallery: 09 http:// code. google. com/ webtoolkit/ 10 /** documentation/ com. google. gwt. doc.