Summa

Nowadays, with higher compatibility between the recent browsers with JavaScript implementation and the focus of optimizing client/server access using AJAX, web applications are shifted closer to the client side making it a “chubbier” client.

AJAX development requires deeper knowledge in JavaScript and there is a slightly different set of features in different browsers. There are also technologies created out there called JavaScript libraries – such as Ext JS and Yahoo User Interface – and JavaScript toolkits – such as Google Web Toolkit (GWT) and DOJO – that can help you ease the burden. Basically, the libraries’ role is to speed up development for the client side and take care of the browser compatibility holdups. Further, the toolkits offer even more infrastructure providing support for the development and deployment phases.

Google Web Toolkit 1.6 is a unique and remarkable platform-independent Java to JavaScript cross-compiler. The whole application may be written using most of the Java 1.5 features for which there is much tooling and test support. Not only that, but it is also possible to follow the Model View Controller (MVC) approach separating user interface from business logic, reducing cost of maintenance and increasing development flexibility. DOJO, on the other hand, requires you to develop the client using only the JavaScript language. This can be much more time consuming and more difficult to work with.

GWT resolves browser compatibility issues by generating different JavaScript modules for most browsers and their respective versions with its wide variety of UI elements and capabilities: sliders, reflections, back-button support, drag-and-drop support, suggest boxes, data-bound tables and more. It is also Apache 2.0 open source licensed which means it is available for commercial and non-commercial use. Other libraries such as Ext JS 2.x have most of the same elements and capabilities as well but they are not commercially licensed.

GWT also offers a powerful debugging shell allowing you to test and debug Java code while interacting with the native browser – or what it is called hosted mode browser – on your platform. The Hosted Mode is a local development environment which enables you to run/debug your application. Even if you compile your code to JavaScript, you may go through the same run/debug on various browser and platform combinations. JUnit is also supported for Unit Testing. It offers the lightweight built-in web server and servlet container Jetty which runs in memory.

Here I will present you with some of the steps to develop and build a sample of a complete database-driven web application using the GWT plug-in for Eclipse. I will show you how simple and robust it is to develop with GWT 1.6. It is not my intention here to give you all the details for the necessary steps as you will be able to download the entire sample project. But before this I should mention something that will get your attention when downloading the GWT plug-in – something called Google App Engine.

Google App Engine helps you build scalable web applications close to the way you build your GWT applications with Java 5, JavaScript, Python 2.5 and even Ruby. The extra feature is that you are offered a sandbox environment where you can host your application as a service from Google’s cloud computing infrastructure. It means less headaches with regard to server maintenance. All of that by just registering the application into Google’s environment which ensures that it runs quickly, securely, and without interference from other apps on the system. All applications can be registered for free with limitations on storage, CPU, and bandwidth to support an efficient app serving approximately 5 million page views per month. When you enable billing for your application, your limits are raised, and you only pay for resources that you use above the free levels.

Now back to the GWT concept. Here is how it works:
When you run a GWT application, you start with an HTML page. This contains special elements necessary to activate the app by loading a nocache JavaScript file – also called bootstrap file – generated for your module. Then based on the browser and other factors, it detects the appropriate version of the application module and loads up the Entry Point class – the file from which your application begins executing. Figure 1 illustrates how it works.

Figure 1. GWT application execution flow

GWT offers the RPC approach for client and server side communication within the GWT web application.

RPC stands for Remote Procedure Call which is an Inter-process communication technology. This makes it possible for a computer program to call a subroutine or procedure in another address space (commonly on another computer on a shared network). Therefore, the programmer would write the same code whether the subroutine is local or remote to the executing program. The GWT plug-in RPC functionality allows for serialization and deserialization of Java objects from server-side implementations of remote services, which can then be called asynchronously from the client. The server implementation is able to compress the state of Java objects down to arrays of JavaScript primitives. This process of passing simple arrays permits even more concise data formatting than JavaScript Object Notation (JSON).

Here we will create a simple Agenda. You will be able to access a certain person’s appointments by submitting his or her user name from the browser. It can be run locally or remotely. We will use Remote Procedure Call framework for development since you will be able to compile your client package to JavaScript and the server package will be compiled to Java bytecode and then deployed to the servlet container.

First of all, we need to download the Google Plugin for Eclipse 3.3 and above. This will help increase flexibility and development speed. Be sure to include only the Google Web Toolkit 1.6.4 SDK plugin for this tutorial. If you enable GWT Toolkit and Google App Engine on your environment you might encounter many issues with compilation/execution of your code. For instance, you may have Java resource security access errors such as database connection.

Let’s start creating the new Web Application Project under File -> New or clicking on the icon on the top left of the workbench. Then insert name and package for the corresponding Entry class. This class is responsible for the starting application. As a reminder, we are not using the App Engine SDK, so uncheck that item. Figure 2 shows you how to fill out the wizard.

Figure 2. Creating a Web Application Project

The default and conventional layout for GWT 1.6 applications can be seen as the format shown by Figure 3.

Figure 3. Web Application Project layout

You may notice that the RPC client and server stubs were created for the application by default. Those will be used for communicating with the server to retrieve information from the database.

The GWTAgendaSample.html should be edited for title and other static information for presenting the User Interface. The starting point, as mentioned earlier, will be the Entry Class GWTAgendaSample.java - its entry point method onModuleLoad() is the one we focus on. You will be able to add panel, text fields and buttons to the Agenda application such as in Figure 4.

Figure 4. Entry point method onModuleLoad ()

When you run the web application by hitting the GWTAgendaSample class with the right button and choosing “Run as” -> “Web application” the following windows are rendered: The GWT shell running with the “log” in the background, and the Hosted browser on front of it. Figure 5 shows the screenshot.

Figure 5. GWT shell running

You do not need to restart the application every time you make modifications to the client code. Only by refreshing the hosted browser you will have the latest version of the compiled code. If the Compile/Browse button is pressed the whole Java client code will be compiled to JavaScript and the native browser will be open for its execution.

Debugging mode is an easy way to go through the code watching variable’s values and going step by step on the code. Again it is good to remind that it is also possible to debug it on the compiled JavaScript version of the application being accessed by the native browser.

In the downloadable sample project you will be able to understand how the server side implementation of the RPC service is done. It is a servlet. Therefore, you may use the well known approaches to servlets.

The GreetingServiceImpl servlet makes connection to the database to retrieve the user’s schedules for the day. These are going to be sent back to the client side to be rendered on the browser.

I have also taken the liberty to include a build.xml file for the developers who are familiarized with Apache Ant. It is able to cross-compile the client side code to JavaScript, compile the server side classes and build a WAR file for deploying the application to any servlet container.

So now you are able to develop more complex applications with Google Web Toolkit 1.6. With the help of Google App Engine there may be more interesting opportunities regarding high scalable services. It is something to be considered for future businesses.