CSC/ECE 517 Fall 2014/ch1a 6 rl

Google Web Toolkit (GWT) is an open source tool consisting of a set of Java libraries and API that allows web developers to create browser-based applications entirely in Java environment. Developers are not required to be familiar with JavaScript, HTML, or XMLHttpRequest. GWT emphasizes reusable approaches to common web development tasks, including asynchronous remote procedure calls, history management, bookmarking, UI abstraction, and internationalization. In addition to web application, GWT is also used to develop mobile and tablet applications.

Background

GWT Environment

GWT can be run in development mode and production mode. Under the development mode, application is run as Java bytecode on the Java Virtual Machine (JVM), and can be viewed and debugged directly on a browser via the Google Web Toolkit Developer Plugin. In production mode, application is run as JavaScript and HTML. This design allows developers to adopt object-oriented design for their applications and use Java language syntax and library without coding in JavaScript and XML. Since GWT is based on Java, it also supports full-featured Java debugging and unit testing. In addition, GWT allows developers to insert JavaScript in the code using GWT’s JavaScript Native Interface (JSNI) and is able to catch common JavaScript and CSS errors during compiling. The GWT complier performs comprehensive static analysis and optimizations on the entire GWT codebase and safely eliminates dead code, unused classes, methods and their parameters in order to minimize application size. The applications in general loads and runs faster than the hand-written JavaScript. The produced pure JavaScript codes are in general easy to read by other programmers. Because of this design, the compiling of JavaScript and HTML scripts can be tailored for different web browsers, which improves cross-browser compatibility.

Client-side application, such as AJAX, short for JavaScript+XML, can be developed on Eclipse IDE via Google plugin or using WebAppCreator, a command-line tool included in the GWT. The developing steps in general include 1. create a GWT application directory, 2. Analyze and design the application by examining the functional requirements and identifying the elements of the UI design. 3. Select GWT widgets and UI elements and layout the UI elements on GWT panels. 4. Manage the requirements for event handling (e.g., user events). 5. Add client-side codes to create data structure, tables, and functionalities. 6. Debug in GWT development mode. 7. Compile GWT code and run in production mode.

History

GWT was first released by Google at the JavaOne conference, 2006. Four years later, Google added GWT Designer, now part of Google Plugin for Eclipse. Since 2012 GWT has become an open sourced project. Until May of 2014, there have been 16 versions released. GWT is currently being used by Google to create many products, including AdWords, AdSense, Flights, Hotel Finder, Offers, Wallet, and Blogger. Other real world projects include GoGrid, Scenechronize, and Whirled.

Examples

GWT application is a client-side application, meaning the app will be run on viewers’ web browser as JavaScript. This client-side processing requires developers to follow libraries and Java language constructs.

• EntryPoint Class creation

EntryPoint is a public interface that allows a class to act as a module entry point in the application.

package com.example.foo.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;

/**
 * Entry point classes define onModuleLoad().
 */
public class Foo implements EntryPoint {

  /**
   * This is the entry point method. Initialize you GWT module here.
   */
  public void onModuleLoad() {

    // Writes Hello World to the module log window.
    GWT.log("Hello World!", null);
  }
}

• Creating a simple pop-up dialog and a clickable button on the browser

In the EntryPoint, several components can be created. For example, a Button widget can be created with the text “Click me” and a handler can be created to respond to user’s action. A dialog window is shown after the button is clicked.

public class Hello implements EntryPoint {

  public void onModuleLoad() {
    Button b = new Button("Click me", new ClickHandler() {
      public void onClick(ClickEvent event) {
        Window.alert("Hello, AJAX");
      }
    });

    RootPanel.get().add(b);
  }
}

• Writing native JavaScript in GWT

JSNI methods allows native JavaScript code in a formatted comment block to be inserted in the code. JSNI comment blocks begins with the exact token /*-{ and ends with }-*/ Here is the alter method signature :

public static native void alert(String msg) /*-{
  $wnd.alert(msg);
}-*/;

Here $wnd references the JavaScript window object.

• Calling Java method from embedded JavaScript

The JavaScript is able to communicate with Java methods using the following approach.

package mypackage;

public MyUtilityClass
{
    public static int computeLoanInterest(int amt, float interestRate,
                                          int term) { ... }
    public static native void exportStaticMethod() /*-{
       $wnd.computeLoanInterest =
          $entry(@mypackage.MyUtilityClass::computeLoanInterest(IFI));
    }-*/;
}

• Identifying browser type

For cross-browser compatibility, browser type can be identified using the following embedded JavaScript method.

public static native String getUserAgent() /*-{
     return navigator.userAgent.toLowerCase();
  }-*/

• Cascading Style Sheets (CSS)

GWT application may use CSS. Each class of GWT widget class has an associated style name for each CSS rule. For example, to assign a larger font size to button text, use

  .gwt-Button { font-size: 150%; } 

• To set an id for a GWT widget and set the id attribute for DOM element

Button b = new Button();
  DOM.setElementAttribute(b.getElement(), "id", "my-button-id")

GWT SDK

Features

GWT features dynamic and reusable UI components, browser history management, Asynchronous remote procedure calls, UI abstraction, and internationalization.

Widgets components

GWT offers a set of UI widgets and panels. Widgets include Button, PushButton, RadioButton, CheckBox, DatePicker, ToogleButton, TextBox, PasswordTextBox, TextArea, Hyperlink, ListBox, CellList, MenuBar, Tree, CellTree, SuggestBox, RichTextArea, FlexTable, Grid, CellBrowser, TabBar, DialogBox Panels include PopupPanel, StackPanel, StackLayoutPanel, HorizontalPanel, VerticalPanel, FlowPanel, VerticalSplitPanel, HorizontalSplitPanel, SplitLayoutPanel, DockPanel, DockLayoutPanel, TabPanel, TabLayoutPanel, DisclosurePanel

Components

Java to JavaScript Compiler GWT Web UI Class library JRE emulation library Hyperlinks to important terms