CSC/ECE 517 Fall 2014/ch1a 6 bn

Google Web Toolkit

Google Web Toolkit(GWT) is a set of tools used to develop browser based RICH Web Applications(RIA). It is a free open source web framework released in 2006 under Apache 2.0 License. The focus of this toolkit is to provide great user experience by bringing the features and feel similar to that of a desktop application to the browser based web applications. GWT as a framework can be used to build large scale and high performance easy-to-maintain web appliations. GWT is used by many products at Google, including AdWords, AdSense, Flights, Hotel Finder, Offers, Wallet, Blogger, Maps.

The latest Version of GWT (GWT 2.6.1) was released on May 10, 2014.

GWT Features

1. Backend Language Support: Developers can use the language of their choice for developing the back-end code.
2. XHR Handling: GWT handles all the XHR calls for the developers irrespective of the method of communication(JSON, XML, or GWT's optimized Remote Procedure Call (RPC) system)
3. Dynamic Optimization: GWT creates a separate compiled version of your application that is optimized for a particular user's environment.
4. Re-usability of code: GWT supports packaging of the user generated UI components. These packages can be loaded into the other projects facilitating the reuse of UI components.
5. Support for Browser History: GWT adds state to the browser's back button history making the use of browsers "Back" button with the application easy.
6. Internationalization: GWT provides tools to create efficient internationalized applications and libraries, including bi-directionality.
7. Testing using JUnit: GWT supports testing of the code using JUnit in debugger, browser and even with asynchronous RPCs direct integration with JUnit lets us use unit test both in a debugger and in a browser and you can even unit test asynchronous RPCs.
8. Native Javascript Support: GWT supports and allows for embedding JavaScript within Java enabling the integration and use of pre-existing Javascript libraries.

Contents of the Toolkit

The Toolkit consists of a software development kit (GWT SDK) and an eclipse Plugin (Plugin for Eclipse).

GWT SDK

GWT SDK contains the Java API libraries, compiler, and development server. It lets you write client-side applications in Java and deploy them as JavaScript. The three major components of the SDK are:

GWT Java to JavaScript compiler

This is the most important part of GWT which makes it a powerful tool for building RIAs. The GWT compiler is used to translate all the application code written in Java into JavaScript.It also supports mixing of Java code with existing JavaScript code using JavaScript Native Interface (JSNI), which allows embedding of JavaScript code within Java classes in order to facilitate Java-to-JavaScript communication. An example of embedded javascript in java is shown below.

private native void nativeMethod()
/*-{
     $wnd.jsFunction = function(x) {
       alert(x);
     };
     alert("hello");
}-*/;

One key feature of the GWT compiler is that it generates multiple output JavaScript files from the input code, one per each browser to ensure cross browser compatibility of the application. The browsers currently supported by the compiler include

Firefox

Internet Explorer 8, 9, 10, 11

Safari 5, 6

Chromium and Google Chrome

Opera latest version

Compiler Modes

The compiler has three style modes that determine what the resulting Java-Script looks like. The default style is obfuscate, which makes the JavaScript look like alphabet soup. Everything is compressed and nearly impossible to decipher.An example of the obfuscated code is given below

function x(){return this.y + '#' + this.b();}

The second style is pretty which generates readable JavaScript as shown below.

function _toString(){
  return this._typeName + '#' + this._length();
}

The third style is detailed, which produces JavaScript code that looks like the pretty style with the addition of the full class name as part of the JavaScript method name. An Example would look like

function java_lang_Object_toString__(){
return this.java_lang_Object_typeName + '#' + this.length__();
}

Generally Obfuscate is used for production as it is the most optimized and compressed version of the output code and would result in faster pages. Using Obfuscate also provides a certain amount of security to the output code and can prevent code theft by making it difficult to read the output. Pretty and detailed modes are used mainly in development to aid in debugging.

JRE Emulation library

Google Web Toolkit includes a library that emulates a subset of the Java runtime library. The list includes java.lang, java.lang.annotation, java.math, java.io, java.sql, java.util and java.util.logging.

GWT UI building library

This part of GWT consists of many subparts which includes the actual UI components, RPC support, History management. GWT ships with a large set of widgets and panels for laying out UI.

Plugin for Eclipse

Plugin for Eclipse provides IDE support for GWT and App Engine web projects.

Contents of GWT Application

Every GWT application contains the following four parts

Module descriptors

In GWT application are segregated into modules. A GWT "module" is simply an encapsulation of functionality. A module is defined by an XML descriptor file ending with the extension ".gwt.xml", and the name of that file determines the name of the module. This xml file is known as module descriptor.

Typically module descriptors contain the following

inherited modules (A module can inherit the existing modules)

an entry point application class name; these are optional, although any module referred to in HTML must have at least one entry-point class specified

source path entries

public path entries

deferred binding rules, including property providers and class generators

Public resources

These are all files referenced by your GWT module, such as Host HTML page, CSS or images. The location of these resources can be configured using <public path="path" /> element in module descriptor file. By default, it is the public subdirectory underneath where the Module XML File is stored.

Client Side Code

This is the actual Java code written implementing the business logic of the application and that the GWT compiler translates into JavaScript, which will eventually run inside the browser. The location of these resources can be configured using

element in module configuration file.

Server Side Code

This is the server side part of your application and its very much optional. If you are not doing any backend processing with-in your application then you do not need this part, but if there is some processing required at backend and your client-side application interact with the server then you will have to develop these components.

Creating A Sample Application

For this sample GWT application we will be creating a module with one entry point and a host html page.

An entry point is the starting point for a GWT module, similar to the main method in a standard Java program. We define the code for Entry point through java classes and these java classes must implement com.google.gwt.core.client.EntryPoint and define method onModuleLoad().

In order to run a gwt module, it must be loaded from a web page of some sort. Any HTML page can include a GWT application via a SCRIPTtag. This HTML page is referred to as Host page from the GWT application's point of view

Creating GWT entry point

Define the following Java class "HelloGwt" which implements EntryPoint interface.

 public class HelloGwt implements com.google.gwt.core.client.EntryPoint {
   public void onModuleLoad() {
      Label label = new Label("Hello GWT !!!");
      Button button = new Button("Say something");
      button.addClickHandler(new ClickHandler() {
      @Override
      public void onClick(ClickEvent event) {
        Window.alert("Hello, again");
      }
    });
   RootPanel.get().add(label);
   RootPanel.get().add(button);
  }
 }

Creating Module Descriptor

Create the file "helloworld.gwt.xml" like as follows.

 <xml version="1.0" encoding="UTF-8"?>
 <module rename-to='helloworld'>
 <inherits name='com.google.gwt.user.User'/>
 <inherits name='com.google.gwt.user.theme.standard.Standard'/>
 <entry-point class='HelloGwt'/>
 </module>

Creating HTML Host Page

 <html>
 <head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <link type="text/css" rel="stylesheet" href="helloworld.css">
   <title>My First GWT applicaton</title>
   <script type="text/javascript" language="javascript" src="helloworld/ helloworld.nocache.js"></script>
 </head>
 </html>

Modify Web.xml

  <?xml version="1.0" encoding="UTF-8"?>
  <!DOCTYPE web-app
   PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
   "http://java.sun.com/dtd/web-app_2_3.dtd">
  <web-app>
  <welcome-file-list>
  <welcome-file>helloworld.html</welcome-file>
  </welcome-file-list>
  </web-app> 

Running the application

To run the application in development mode in GWT IDE, you can right-click the project and select Run As -> "Web application".

GWT RPC communication

A GWT based application is generally consists of both client side code and server side code. Client side code runs in browser and server side code runs in web server. Client side code has to make an HTTP request accross the network to access server side data.

RPC, Remote Procedure Call is the mechansim used by GWT in which client code can directly executes the server side methods. The implementation of GWT RPC is based on the servlet technology. The server side servlet is usually referred to as a "service".and the remote procedure call is referred to as "invoking a service.

GWT RPC Components

Following are the three components used in GWT RPC communication mechanism

1. A remote service (server-side servlet) that runs on the server.