GWT In-depth

Explained by Rohit Ghatol(rohitsghatol@gmail.com)

http://pune-gtug.blogspot.com

Topics Covered

• Short Introduction to GWT• Architectural Overview• Simple Code Example• MVC Code Example• Server Communication using GWT – RPC• Open source Libraries

Introduction to GWT

Read more on GWT Overview Page

Key Features

Read more on GWT Overview Page

Key Features

Read more on GWT Overview Page

GWT Documentation Links

• Developer's Guideo Fundamentals o User Interfaces o Remote Procedure Calls o Unit Testing o Internationalization o JavaScript Native Interface (JSNI) o JRE Emulation o GWT Class API

Install GWT

E:\Work\GWT-Demo>set PATH=e:\worksoft\gwt-windows-1.4.60;%PATH%

E:\Work\GWT-Demo>projectCreator -eclipse SimpleDemoCreated directory E:\Work\GWT-Demo\srcCreated directory E:\Work\GWT-Demo\testCreated file E:\Work\GWT-Demo\.projectCreated file E:\Work\GWT-Demo\.classpath

E:\Work\GWT-Demo>applicationCreator -eclipse SimpleDemo com.gwt.demo.client.SimpleDemoCreated directory E:\Work\GWT-Demo\src\com\gwt\demoCreated directory E:\Work\GWT-Demo\src\com\gwt\demo\clientCreated directory E:\Work\GWT-Demo\src\com\gwt\demo\publicCreated file E:\Work\GWT-Demo\src\com\gwt\demo\SimpleDemo.gwt.xmlCreated file E:\Work\GWT-Demo\src\com\gwt\demo\public\SimpleDemo.htmlCreated file E:\Work\GWT-Demo\src\com\gwt\demo\client\SimpleDemo.javaCreated file E:\Work\GWT-Demo\SimpleDemo.launchCreated file E:\Work\GWT-Demo\SimpleDemo-shell.cmdCreated file E:\Work\GWT-Demo\SimpleDemo-compile.cmd

Demo GWT Project

• Site - http://code.google.com/p/gwt-simple-demo/• Download demo project from here

GWT Project Anatomy

GWT-Demo+src+com/gwt/demoSimpleDemo.gwt.xml- clientSimpleDemo.java- publicSimpleDemo.html

GWT Project Anatomy

SimpleDemo.gwt.xml

1. Module XML Definition File • Includes Project

Dependencies• Includes Entry Point• Includes RPC Servlet Entry

SimpleDemo.java

1. This is the Entry Point2. Entry Point is like Main Method3. Widgets are added to

RootPanel

SimpleDemo.html

1. This is the final deliverable HTML/JSP/ASP/PHP

• Includes JS file for SimpleDemo• Includes PlaceHolder Elements

Shuffle Box Example

Shuffle Box ExampleRootPanel

Shuffle Box Example

HorizontalPanel

Shuffle Box Example

VerticalPanel

Shuffle Box Example

Shuffle Box Example

Shuffle Box Examplenew ClickListener(){ public void onClick(Widget sender) {int leftIndex=leftListBox.getSelectedIndex();if(leftIndex==-1){Window.alert("Select an Item from Left List Box");}else{String item=leftListBox.getItemText(leftIndex);leftListBox.removeItem(leftIndex);rightListBox.addItem(item);}}}

Observable

# List observers+ addObserver(Observer observer)+ removeObserver(Observer observer)+ notifyObservers()

Observer<<Interface>>

+ update(Observable model)

Notify

Register/Unregister

View Source for Observable.java View Source for Observer.java

MVC Demo

MVC Demo

MVC Demo

# temperature+ setTemp(int temp)+int getTemp()

TempModel

# observers+ addObserver()+removeObserver()+ notifyObserver()

Observerable

FahrView CelsView ThermoView

update(Observable mode)

Observer

MVC Demo

# temperature+ setTemp(int temp)+int getTemp()

TempModel

# observers+ addObserver()+removeObserver()+ notifyObserver()

Observerable

FahrView CelsView ThermoView

update(Observable mode)

Observer

Renders

MVC Demo

# temperature+ setTemp(int temp)+int getTemp()

TempModel

# observers+ addObserver()+removeObserver()+ notifyObserver()

Observerable

FahrView CelsView ThermoView

update(Observable mode)

Observer

Register

MVC Demo

# temperature+ setTemp(int temp)+int getTemp()

TempModel

# observers+ addObserver()+removeObserver()+ notifyObserver()

Observerable

FahrView CelsView ThermoView

update(Observable mode)

Observer

User clicked increment button

Changes

MVC Demo

# temperature+ setTemp(int temp)+int getTemp()

TempModel

# observers+ addObserver()+removeObserver()+ notifyObserver()

Observerable

FahrView CelsView ThermoView

update(Observable mode)

Observer

Notifies

All the Views Update themselves using update() method

MVC Demo source files

• FahrView.java• CelsView.java• ThermoView.java• TempModel.java

RPC Demo

RPC Demo

RPC Demo

RPC Classes Explained

LocationService<<Interface>>

List getStates(String country)

LocationServiceImpl

List getStates(String country)

RemoteService<<Interface>>

RemoteServiceServlet

LocationServiceAsync<<Interface>>

Void getStates(String country, AsyncCallback callback)

LocationServiceUtil

public static LocationServiceAsync getInstance()

GWT

MagicGlue

GWT Classes

RPC Classes Explained

AsyncCallback<<Interface>>

void onSuccess(Object result);

void onFailure(Throwable caught);

LocationServiceUtil Code

• Use GWT Glue to link LocationService and LocationServiceAsync classes

LocationServiceAsync serviceAsync = (LocationServiceAsync) GWT.create(LocationService.class);

• Set the Service’s Entry point (aka url)((ServiceDefTarget) serviceAsync).setServiceEntryPoint(GWT.getModuleBaseURL()+"/LocationService");

LocationServiceUtil Code

public class LocationServiceUtil {public static LocationServiceAsync createService() {LocationServiceAsync serviceAsync = (LocationServiceAsync) GWT.create(LocationService.class);

((ServiceDefTarget) serviceAsync).setServiceEntryPoint(GWT.getModuleBaseURL()+"/LocationService");return serviceAsync;}}

RPC Client Code

LocationServiceAsync serviceAsync = LocationServiceUtil.createService();serviceAsync.getStates(country, new AsyncCallback() {

public void onFailure(Throwable caught) { Window.alert("System Error!"); }

public void onSuccess(Object result) { List list = (List) result; statesListBoxModel.setEntries(list);

}});

RPC related Links

• Complete source code• LocationService.java• LocationServiceAsync.java• LocationServiceImpl.java• LocationServiceUtil.java• Client Code• RPC Tutorial

Extending Widgets for more events

onBrowserEvent(Event event)

Widget

FocusWidget

ListBox

Extending Widgets for more events

• Some Facts about ListBox widgeto Following Listeners can be added

Change Focus Keyboard

o Extends FocusWidget which extends Widgeto ListBox does not receive a DoubleClick event

as it never sinks it.

Extending Widgets for more events

• Some Facts about Widget classo A Widget needs to sink events in its

constructor to receive ito Widget class has an important method

void onBrowserEvent(Event event) which handles all the events (eventually)

Extending Widgets for more events

• Some Facts about Widget classo If a Widget needs to receive a DoubleClick

event it needs to call sinkEvents(Event.ONDBLCLICK)

o If a Widget needs to handle this new DoubleClick event it needs to override onBrowserEvent method and handle this event

Extending Widgets for more events

# dblClickListenerCollection+ AdvListBox()# onBrowserEvent(Event event)

AdvListBox

ListBox

addDblClickListener()removeDblClickListener()fireDblClickEvent(Widget sender)

DblClickListenerCollection

ArrayList

Void onDoubleClick(Widget sender)

DblClickListener<<Interface>>

0..*

1

Extending Widgets for more events

public class AdvListBox extends ListBox {private DoubleClickListenerCollection dblClickListeners = new DoubleClickListenerCollection();

public AdvListBox() {this.sinkEvents(Event.ONDBLCLICK);}

public void onBrowserEvent(Event event) {super.onBrowserEvent(event);if(DOM.eventGetType(event)==Event.ONDBLCLICK){dblClickListeners.fireDoubleClickEvent(this);}}

public void add(DoubleClickListener listener) {dblClickListeners.add(listener);}

public void remove(DoubleClickListener listener) {dblClickListeners.remove(listener);}}

AdvListBox.java Source

Extending Widgets for more eventsSource files

• AdvListBox.java • AdvListBoxDemo.java • DoubleClickListener.java • DoubleClickListenerCollection.java

J2EE Components

• Components are JSP 2.0 Tag Files

• Components are configured using attributes

• Concept of ComponentLoader at GWT

Target Code

<widget:loader/>

<table><tr><td><widget:colorPicker id=“cp1” color=“red”/></td></tr><tr><td><widget:navTree id=“menu1=“ key=“menuTree” /></td></tr></table>

Data Provided to Components

• Simple and Static Datao Provided using attributes

• Complex and Dynamic Datao Provided using RPCo Key is used to identify context at Server sideo Key is provided to client as attribute

Complex and Dynamic Data

ServerBrowser

TreeRPCServlet

menu

roles

conf

menu

conf

roles

ComponentLoader@GWT

• Is an Entry Point• Keeps a map of widget name Vs widget

factories• Hunts for DOM elements with attribute

“widget” (placeholders)• Replaces place holder with instances of

Widget

Target Code

<widget:loader/>

<table><tr><td><widget:colorPicker id=“cp1” color=“red”/></td></tr><tr><td><widget:navTree id=“menu1” key=“menuTree” /></td></tr></table>

<script src=“com.xyz.ComponentLoader.nocachejs”/>

<div id=“cp1” widget=“ColorPicker” color=“${color}”></div>

<div widget=“Tree” id=“menu1” key=“${key}” readonly=“true”></div>

ComponentLoader

GWT’s ComponentLoader Script

Body

..

..div id=“cp1” widget=“ColorPicker”

div id=“menu1” widget=“Tree”

ColorPicker cpFactory

Tree treeFactory

RootPanel.get(“cp1”).add(cpFactory.getWidget());

RootPanel.get(“menu1”).add(treeFactory.getWidget());

Building Gadgets using GWT

• Download gwt-gadgets-0.0.290.zip• Add it your project path• Create your gadget by extending Gadget• Build • You will get <gadget>.xml instead of html

file• Load this on Igoogle

Refer HelloGadget sample in this zip

Wrapping JavaScript Frameworks

• Interface with legacy or 3rd party JavaScript frameworkso E. g Google Gadgets, OpenSocial (Orkut

apps)

• Pull JavaScript library in GWT world

Wrap using JavaScriptObject

Case Study Wrap OpenSocial apis

var dataRequest = opensocial.newDataRequest();

dataRequest.add(“myfriends”,dataRequest. newFetchPeopleRequest(“VIEWER_FRIENDS”);

dataRequest.send(function(resp){resp.get(“myfriends”).doSomething();});

Wrap using JavaScriptObject

Replicate OpenSocial using simple JSNI

public class OpenSocial{public native DataRequest newDataRequest()/*-{return $wnd.opensocial.newDataRequest();}-*/;}

Wrap using JavaScriptObject

Create DataRequest by extending JavaScriptObjectpublic class DataRequest extends JavaScriptObject{public final DataRequestItem newFetchPeopleRequest(Id idSpec) {return newFetchPeopleRequest(this, idSpec.toString());}private final native DataRequestItem newFetchPeopleRequest(DataRequest obj,String idSpec)/*-{return obj.newFetchPeopleRequest(idSpec);}-*/;}

Open Source GWT Libraries Demos

• GWT-EXT – Many Rich UI widgets• GWT-DND – Meant for drag and drop

EXT GWT

GWT-DND