google web toolkits

Google Web Toolkit(GWT)

Yiguang Hu

yighu@yahoo.comyighu@twitter

yighu@facebook

Agenda

• Introduction to AJAX• What is & Why GWT?• Building User interface

o GWT Widgetso Event Handlingo Stylingo Designer

• Interaction With Server• Remote Procedural Call (RPC) • JSON, grails

Introduction to AJAX

AJAX=Async JavaScript + XML

What is GWT?

• Java dev framework for complex web• Java-to-JavaScript compiler• Designer (widget, event, styling, code gen)• Development mode• When app deploy to prod

• compiler translates Java application to browser-compliant JavaScript, CSS, and HTML

GWT setup

• Install Java/GWT• env: JAVA_HOME, GWT_HOME

• Use GWT commandline tool• IDE plugins: intellij, eclipse, Netbean etc• Install GWT plugin• Install gwt development plugin for browsers

• IE, Firefox, Safari.• -No chrome plugin yet

Demo

• In the beginning…

Why Use Java for AJAX Dev?

• Static type checking in the Java• JavaScript dynamic typing• JavaScript not compiled• Code prompting/completion• Automated Java refactoring• Java-based OO designs

Why GWT?• No need to:

JavaScripthandle browser incompatibilitiesDOM APIsbuild commonly used Widgets

• Java Tools• JUnit integration• Internationalization• Designer

GWT Architecture

JRE Emulation Library (java.lang and java.util)

GWT Web UI Class library

Class Libraries

Java-to-JavaScript Compiler

hosted web browserDesigner

Development tools

GWTApplication Development Process

• Design with Designer • Widgets• Event• Code generation

• Interact with Server (RPC, JSON)

GWT Widget Gallery

GWT Widget Gallery

GWT Widget Gallery

GWT Widget Gallery

GWT Application Development Process

• Design with Designer • Widgets• Event handling• Styling• Code auto generation

• Interact with Server (RPC, JSON)

Demo 2

• Do some simple UI design with widgets, event handling, Debugging

Events and Listeners

• Widgets are event listeners• Events in GWT use the "listener interface"

modelo Define listener interfaceo Event Listener implements listener interfaceo Event Listener subscribes to a event

by passing a reference to itself to the widget

Example: Event Listenerpublic class ListenerExample extends Composite implements ClickListener {private FlowPanel fp = new FlowPanel();private Button b1 = new Button("Button 1");

public ListenerExample() {setWidget(fp);fp.add(b1);b1.addClickListener(this);}

// Event listener method from the ClickListener interfacepublic void onClick(Widget sender) {// handle event: Read input, interact with server, update page

}

Remore Procedure Call(RPC)

GWT RPC Plumbing Architecture

Steps for Implementing GWT RPC

1.Write two service interface's (client & server)o Synchronous interfaceo Asynchronous interface – must pass async.

callback object 2.Implement the service at the server side

o Service class implements Service interface and extends RemoteServiceServlet class

3.Configure the servlet in the web.xml4.Make a call from the client

1. Write Two Service Interface Files

• Synchronous interface @RemoteServiceRelativePath(”gwtservice") public interface MyHelloService extends RemoteService { public String sayHello(String s); }

• Asynchronous interface

// Has to be named as <Synchronous-interface>Async. // Has to pass AsyncCallback object as the last parameter. // The return type is always void.

interface MyHelloServiceAsync { public void sayHello(String s, AsyncCallback callback); }

2. Implement the Service

• Extends RemoteServiceServlet and implements the service interface

public class MyHelloServiceImpl extends RemoteServiceServlet

implements MyHelloService { // Provide implementation logic. public String sayHello(String s) { return "Hello, " + s + "!"; } }

4. Make a call from Client

• Instantiate an client proxy (an object of the type of asynch. service interface) using GWT.create()

• Create an asynchronous callback object to be notified when the RPC has completed

• Make the call from the client

a. Instantiate Service Interface using GWT.create()

public void menuCommandsayHello(String msg) {

MyHelloServiceAsync myhelloService = GWT.create(MyHelloService.class);

b. Make the Call with an asynchronous callback object

public void menuCommandsayhello(String msg) {

...

// (d) Make the call. Control flow will continue immediately and later// 'callback' will be invoked when the RPC completes.

myhelloService.sayHello(msg, new AsyncCallback() {public void onSuccess(Object result) {// update page with server response data}

public void onFailure(Throwable caught) {// handle failure}});}

Demo 3

• Interacting with Server through RPC

Remote Procedure Call(RPC) Sub-topic: Serializable Types

Remote Procedure Call(RPC)

Sub-topic: Handling Exceptions

Handling Exceptions

• Making RPCs opens up various possible errorso Networks fail, servers crash, and problems

occur while processing a server call• GWT lets you handle these conditions in

terms of Java exceptions• RPC-related exceptions

o Checked exceptionso Unexpected exceptions

Checked Exceptions

• Service interface methods support throws declarations to indicate which exceptions may be thrown back to the client from a service implementation

• Callers should implement AsyncCallback.onFailure(Throwable) to check for any exceptions specified in the service interface

Unchecked Exceptions

• An RPC may not reach the service implementation at all. This can happen for many reasons: o the network may be disconnectedo a DNS server might not be availableo the HTTP server might not be listening

• InvocationException is passed to your implementation of AsyncCallback.onFailure(Throwable)

Other ways to interact with Server

JSON

Cross-site JSON

Grails integration

JSON-Creating overlay type

import com.google.gwt.core.client.JavaScriptObject;

class StockData extends JavaScriptObject { // [1]

// Overlay types always have protected, zero argument constructors.

protected StockData() {} // [2]

// JSNI methods to get stock data.

public final native String getSymbol() /*-{ return this.symbol; }-*/; // [3]

public final native double getPrice() /*-{ return this.price; }-*/;

public final native double getChange() /*-{ return this.change; }-*/;

// Non-JSNI method to return change percentage. // [4]

public final double getChangePercent() {

return 100.0 * getChange() / getPrice();

}

}

JSON-Convert JSON String into JavaScript object

import com.google.gwt.core.client.JsArray;

private final native JsArray<StockData> asArrayOfStockData(String json) /*-{

return eval(json);

}-*/;

JSON-Requesting JSON

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

import com.google.gwt.http.client.Request;

import com.google.gwt.http.client.RequestBuilder;

import com.google.gwt.http.client.RequestCallback;

import com.google.gwt.http.client.RequestException;

import com.google.gwt.http.client.Response;

// Send request to server and catch any errors.

private static final String JSON_URL = GWT.getModuleBaseURL() + "stockPrices?q=";

RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, url);

try {

Request request = builder.sendRequest(null, new RequestCallback() {

public void onError(Request request, Throwable exception) {

displayError("Couldn't retrieve JSON");

}

public void onResponseReceived(Request request, Response response) {

if (200 == response.getStatusCode()) {

updateTable(asArrayOfStockData(response.getText()));

} else {

displayError("Couldn't retrieve JSON (" + response.getStatusText()

+ ")");

}

}

});

} catch (RequestException e) {

displayError("Couldn't retrieve JSON");

}

? Yiguang Hu yighu@yahoo.com