Google Web ToolkitGoogle Web Toolkit(GWT)(GWT)

by Do Hoang Khiem

(Collaboration Team)

2

Agenda

What is & Why GWT?

Building User Interface

GWT Widgets

Event handling

Apply styles

Remote Procedure Call (RPC)

GWT RPC

Serializable type

Handling Exception

3

Agenda

History management

Internationalization

JUnit Testing

Javascript Native Interface (JSNI)

4

What's and Why GWT?

5

What is GWT?

Java software development framework that makes writing AJAX applications easy

Google announced GWT at the JavaOne 2006

Latest version: 2.2.0 February 11, 2011

Let you develop and debug AJAX applications in the Java language using Java development tools

Eclipse, Netbeans, IntelliJ, …

Provides Java-to-Javascript compiler and development mode that helps you debug your GWT applications

6

GWT SDK & Tools

GWT SDK: contains Java API libraries, compiler, development server and tools

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

Some other tools:

GWT Designer

Speed Tracker

Maven plugins

7

Two modes of running GWT App

Development mode (hosted mode)

GWT application is run as Java bytecode within JVM

Take advantage of Java debugging

Production mode (web mode)

Your GWT application is run as pure Javascript and HTML compiled from original Java source code

End user will only see the web mode version of your application

8

Why GWT?

Static type checking in Java language boots productivity while reducing errors

Easily caught common Javascript errors

typos, type mismatches, ...

Take advantage of Java refactoring, code completion, ...

Java-based Object-Oriented designs are easier to communicate and understand.

9

Why GWT?

No need to write “excellent” Javascript code

Leverage your Java programming knowledge

No need to take care of browser incompatibilities and quirks

GWT compiler handles them

Support browser history, backward, forward

Use Java API to manipulate DOM

Take advantage from rich built-in Widgets

10

Why GWT?

Leverage various tools of Java programming for writing, debugging, testing

Ex: Eclipse, IntelliJ, Netbeans

JUnit integration

Internationalization

11

GWT Architecture Overview

12

GWT Architecture Overview

GWT Java-to-Javascript compiler

Translates Java source code to Javascript code

GWT Hosted Web Browser

Let you run and debug your GWT application in development mode, where your code run as Java bytecode within JVM

JRE emulation library

A small subset of JRE to handle the Java to Javascript conversion. This of the JRE emulation library as representing the Javascript capabilities

GWT Web UI class library

A set of custom interfaces and classes for creating widgets.

13

Building User Interface

14

GWT User Interface

GWT user interface classes are similar to those in existing UI frameworks such as Swing and SWT.

GWT widgets are rendered using dynamically-created HTML rather than pixel-oriented graphics

While GWT provides access to the browser's DOM directly using the DOM package, it is far easier to use classes from the Widget hierarchy

The Widget classes make it easier to quickly build interfaces that will work correctly on all browsers.

15

Widgets Library

Widgets Library Images

16

Widgets Library

17

Widgets Library

Widgets Library Images

18

Event Handler

Events in GWT use the handler model similar to other user interface frameworks

A handler interface defines one or more methods that the widget calls to announce an event

A class wishing to receive events of a particular type implements the associated handler interface and then passes a reference to itself to the widget to subscribe to a set of events.

19

Event Handler

Example

public void anonClickHandlerExample() {

Button b = new Button("Click Me");

b.addClickHandler(new ClickHandler() {

public void onClick(ClickEvent event) {

// handle the click event

}

});

}

20

Apply styles

GWT applications use CSS for visual styling

Update styles dynamically in Java code

Associate style sheets with the project

Using a <link> tag in the host HTML page.

Using the <stylesheet> element in the module XML file.

Remote Procedure Call (RPC)

22

GWT Remote Procedure Call

Mechanism for interacting with server by invoking a method

Ex: fetching data from server

GWT RPC makes it easy for the client and server to pass Java objects back and forth over HTTP

GWT provides serialization mechanism to bridge between client and server

Any object that needs to send is a GWT Serialization type

Proper use of GWT RPC can allow you to develop an application where all the UI logic resides on the client, leaving business logic on the server)

Resulting in an application with greatly improved performance, reduced bandwidth, and reduced web server load

23

GWT RPC plumbing architecture

24

Implementing GWT RPC

Define an interface for your service that extends RemoteService and lists all RPC method

called “Synchronous Interface”

Implement the service at server-side

This class extends RemoteServiceServlet and implement the created interface

Define an asynchronous interface to your service to be called from the client-side code

Based on original service interface

Require caller to pass callback object that can be notified when async call completes.

25

Serializable Types

GWT RPC method parameters and return types must be serializable

These values will be transmitted across network between client and server

Java data types are already serializable

Primitive, such as char, byte, short, int, long, boolean, float, or double.

String, Date or primitive wrapper: Character, Integer, Byte, Double, …

Array of serializable types

Serializable user-defined class

The type has at least one serializable subclass

26

Handling Exception

Making RPCs opens up the possibility of a variety of errors

Networks fail, servers crash, and problems occur while processing a server call.

GWT lets you handle these conditions in terms of Java exceptions

Caller should implement AsyncCallBack.onFailure(Throwable) to handle exception

History management

28

GWT History Mechanism

GWT applications use “history token” to help Ajax developer activate browser history

The token will be saved in browser history as a URL fragment

Ex: http://www.example.com/historyexample/HistoryExample.html#page1

To enable history to your Ajax

Add a history token to the history stack when you want to enable history event

Create an object that implements the ValueChangeHandler interface, parses new token and changes the application state to match

29

GWT History

GWT history demo

Internationalization

31

Internationalization

GWT offers multiple internationalization techniques

Static String Internationalization

Dynamic String Internationalization

Static String Internationalization

Extends Constants Interface

Extends Message Interface

Use properties files

Dynamic String Internationalization

32

Internationalization

Demo

JUnit Testing

34

JUnit Testing

GWT provides integration with the popular JUnit unit testing framework

GWT allows JUnit test cases to run in either development mode or production mode.

35

JUnit Testing

Demo.

Javascript Native Interface (JSNI)

37

Why JSNI?

Sometimes it's very useful to mix handwritten Javascript to Java source code

Ex: access low-level browser functionality not exposed by the GWT API

You can use JSNI to:

Implement a Java method directly in JavaScript

Wrap type-safe Java method signatures around existing JavaScript

Call from JavaScript code into Java code and vice-versa

Throw exceptions across Java/JavaScript boundaries

Read and write Java fields from JavaScript

Use development mode to debug both Java source (with a Java debugger) and JavaScript (with a script debugger)

38

JSNI

Demo

39

Resources

http://code.google.com/webtoolkit/

Main site for GWT

http://googlewebtoolkit.blogspot.com/

http://developerlife.com

Question & Answer