View All Articles

Like a lot of developers, I have been playing with AJAX (Asynchronous JavaScript and XML). However, for every sample project, I'd end up re-doing most of the standard functions such as setting up the XMLHttpRequest object. Also, being primarily a Java programmer I never enjoyed doing complex UI code with JavaScript because it never seemed clean. Thus, when Google released the Google Web Toolkit (GWT), I was quite thrilled. This toolkit allows a developer to write programs in Java, which are then compiled into the equivalent JavaScript. It contains most of the standard UI widgets and a RPC mechanism to invoke remote services asynchronously.

In GWT, the client code is written in Java. The server-side code can be written in any programming language. However, GWT provides support for making Remote Procedure Calls(RPCs) to Java Servlets. Thus, it becomes quite convenient to use Java Servlets on the server.

The Eclipse Connection

GWT reminds me a little of Eclipse SWT in the choosing of class names like Widget, Composite and not to mention the acronym of the toolkit itself. It also looks like GWT uses the Java parser available with the Eclipse Java Toolkit to parse Java code and convert it to JavaScript. This is quite an innovative use of the Eclipse code.

Sample Application

To learn this toolkit, I built a simple Documentum application. The application allows one to browse repositories, view properties of files and perform simple searches.

Data Exchange between Application Server and Client

The client side code makes calls to a remote service on the application server using the GWT RPC protocol. The remote service implementation is a Java servlet that extends from one of the standard GWT servlets. All remote service calls are done asynchronously. Behind the scenes, GWT is using the XMLHttpRequest object to make the HTTP request, which invokes the callback class (method) provided by the caller of the remote service upon response.

In the documentum application, most of the remote service methods return objects of type DocbaseItemData. This class represents a repository object - a repository, cabinet, folder or document. It stores the objectId, object_name, repository name and the icon path for the object. The client side widgets can use these objects to display data.

Login Dialog

Fig - Login Dialog

GWT provides a DialogBox widget that can be used for various purposes like the Login dialog or the Properties view dialog. A nifty little feature of this widget is that it can be dragged around just like a thick client dialog box. The default DialogBox widget does not contain much except for a title bar. A developer needs to extend the base class and add widgets specific to the new dialog box. The LoginDialog box is created by adding various login controls and a dropdown list to select repositories. This list of repositories is obtained asynchronously. When the list control is created a temporary entry is put into the list and a request is sent to the server to obtain the list of repositories. The response handler for this request populates the list once the request returns from the server.

Tree Control

Fig - Repository Navigation

The tree control displays contents of a repository. Every time a tree node is expanded, an asynchronous request is sent to the server to get the children of the node. The server returns back objects of type DocbaseItemData that are then displayed by the client. GWT handles the RPC protocol of exchanging this object between the client and server.

A tree node that is populated lazily (e.g. a folder) does not have any children when it is initially added to the tree. Unfortunately, there is no way to tell GWT that this node may have children in the future. Due to this drawback, GWT does not render the node as expandable. To overcome this a dummy node (blank text) was added to each folder or cabinet node so that the GWT tree control rendered the folder node as an expandable node (the + sign next to it).

Document List Control

Fig - Document List

The document list control takes a DQL query as input and calls the remote service to execute it. As mentioned earlier, this remote service call takes place asynchronously. The query results are returned as an array of DocbaseItemData objects that are displayed using a FlexTable widget. The list control only displays documents and not folders.

Properties Dialog

The properties of an object are also obtained using a remote service call. They are displayed in a Properties Dialog that extends the standard DialogBox GWT widget. The properties dialog accepts an object id as input.

Search Box

The search box implementation is quite straightforward. It creates a DQL query to search the object_name, title and keywords attributes of a document and feeds this query to the DocumentListPanel discussed earlier.

Things that did not work

Double click in the document list widget did not work because the IE version of GWT has a possible bug that prevents the double click event from firing. I was successful in getting a right-click menu (context menu) to show up in the DocumentList widget by creating a customized version of FlexTable. However, there was no way to easily select or determine the row upon which the right-click was activated. If you want to take a look at this implementation, take a look at the class TestFlexTable in the client package.

Download

gwtClient.zip

The download for the application contains two files -

• The Web Application (dmclient) - Unzip and drop this into your application server that has all the standard DFC files in its classpath.
• The Eclipse Project - You will need to download and reference the GWT libs and adjust the classpath in the project. You will also need to edit the DmClient-shell.cmd file to point to the DFC jars on your machine.

The app was created in about a week and thus has not been completely tested. The intention was not to create an exhaustive Documentum client but to learn more about GWT. However, if someone is interested in creating a more richer client feel free to use the code as a starting point or as a reference.

Running the Application

• Configure the webapp folder 'dmclient' in your application server. For example, if you are using Apache Tomcat, copy the folder to TOMCAT_HOME/webapps. Do not change the name of the folder (i.e. the virtual path of the webapp should be /dmclient).
• Make sure that the application server references all the DFC related jars in its classpath. If you are using an application server already configured for WDK/Webtop you don't need to worry about configuring the classpath.
• Start your application server and open the URL - http://YOUR_SERVER:PORT_NUM/dmclient/ui/DmClient.html (e.g. http://localhost:8080/dmclient/ui/DmClient.html)

Parting words

GWT can also be embedded into existing HTML pages. I have not tried this yet but it sounds interesting. I would still prefer using GWT to create a complete application instead of using it to plug a small piece of functionality into an existing site. It could be too much work depending on the kind of functionality being plugged in and raw JavaScript might be quicker.

Some widget libraries have developed around GWT like the GWT Widget library that also provides wrapper around the Scriptaculous JavaScript library for effects.

While creating this application, I stumbled across a similar project on sourceforge that compiles Java to JavaScript. In this case, the project compiles Eclipse SWT code to JavaScript. Here is the link to the project - http://j2s.sourceforge.net/.

In conclusion, GWT is a very useful tookit to create rich internet applications. One of its biggest advantages is that all code is in Java, which is much easier to maintain than JavaScript in large projects. The use of Java allows a developer to leverage some excellent Java IDEs with sophisticated debugging, something difficult to do with JavaScript. It is also much easier to translate an application design into Java code than JavaScript code.

GWT is still in its earlier versions and it will be intersting to watch how it and tools around it develop. Like other Google products it is in "Beta".

View All Articles