google web toolkits
DESCRIPTION
This talk will explain the Google Web Toolkit (GWT), GWT architecture, and why you would want to use GWT. In addition, it will include a demo of GWT and the recently released GWT Designer (a tool that makes GWT development easy and that makes it fast to generate a complicated UI).TRANSCRIPT
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 [email protected]