GWT In-depth

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
Reusable UI components Really Simple RPC

Features
Read more on GWT Overview Page

Cross browser compatible

Javascript Native Interface (JSNI)

Key Features
Real Debugging Internationalization

Features
Read more on GWT Overview Page

JUnit Integration

Completely Open source

GWT Documentation Links

Developer's Guide
Fundamentals User Interfaces Remote Procedure Calls Unit Testing Internationalization JavaScript Native Interface (JSNI) JRE Emulation 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 SimpleDemo Created directory E:\Work\GWT-Demo\src Created directory E:\Work\GWT-Demo\test Created file E:\Work\GWT-Demo\.project Created file E:\Work\GWT-Demo\.classpath E:\Work\GWT-Demo>applicationCreator -eclipse SimpleDemo com.gwt.demo.client.SimpleDemo Created directory E:\Work\GWT-Demo\src\com\gwt\demo Created directory E:\Work\GWT-Demo\src\com\gwt\demo\client Created directory E:\Work\GWT-Demo\src\com\gwt\demo\public Created file E:\Work\GWT-Demo\src\com\gwt\demo\SimpleDemo.gwt.xml Created file E:\Work\GWT-Demo\src\com\gwt\demo\public\SimpleDemo.html Created file E:\Work\GWT-Demo\src\com\gwt\demo\client\SimpleDemo.java Created file E:\Work\GWT-Demo\SimpleDemo.launch Created file E:\Work\GWT-Demo\SimpleDemo-shell.cmd Created 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/demo SimpleDemo.gwt.xml - client SimpleDemo.java - public SimpleDemo.html

GWT Project Anatomy

SimpleDemo.gwt.xml
1. 2. 3. 4. Module XML Definition File Includes Project Dependencies Includes Entry Point Includes RPC Servlet Entry 1. 2. 3.

SimpleDemo.java
This is the Entry Point Entry Point is like Main Method Widgets are added to RootPanel

SimpleDemo.html
1. 2. 3. This is the final deliverable HTML/JSP/ASP/PHP Includes JS file for SimpleDemo Includes PlaceHolder Elements

Shuffle Box Example

RootPanel

Shuffle Box Example

Shuffle Box Example

HorizontalPanel

Shuffle Box Example

VerticalPanel

Shuffle Box Example

Shuffle Box Example

Shuffle Box Example

new 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() Register/Unregister

Observer <<Interface>> + update(Observable model) Notify

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

MVC Demo

MVC Demo

MVC Demo
Observer
update(Observable mode)

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

FahrView

CelsView

ThermoView

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

MVC Demo
Observer
update(Observable mode)

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

FahrView

CelsView

ThermoView Renders

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

MVC Demo
Observer
update(Observable mode)

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

FahrView

CelsView

ThermoView Register

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

MVC Demo
Observer
update(Observable mode)

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

Changes
FahrView CelsView ThermoView TempModel
# temperature + setTemp(int temp) +int getTemp()

User clicked increment button

MVC Demo
Observer
update(Observable mode)

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

FahrView

CelsView

ThermoView Notifies

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

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

GWT Classes
RemoteService <<Interface>> List getStates(String country) RemoteServiceServlet

LocationServiceAsync <<Interface>> Void getStates(String country, AsyncCallback callback)

GWT Magic Glue

LocationService <<Interface>> List getStates(String country)

LocationServiceImpl LocationServiceUtil List getStates(String country) public static LocationServiceAsync getInstance()

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

Widget
onBrowserEvent(Event event)

FocusWidget

ListBox

Extending Widgets for more events

Some Facts about ListBox widget
Following Listeners can be added
Change Focus Keyboard

Extends FocusWidget which extends Widget ListBox does not receive a DoubleClick event as it never sinks it.

Extending Widgets for more events

Some Facts about Widget class
A Widget needs to sink events in its constructor to receive it 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 class
If a Widget needs to receive a DoubleClick event it needs to call sinkEvents(Event.ONDBLCLICK) 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

ListBox ArrayList

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

DblClickListenerCollection
addDblClickListener() removeDblClickListener() fireDblClickEvent(Widget sender)
1 0..*

DblClickListener <<Interface>>
Void onDoubleClick(Widget sender)

Extending Widgets for more events

AdvListBox.java Source
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); } }

Extending Widgets for more events

Source files AdvListBox.java AdvListBoxDemo.java DoubleClickListener.java DoubleClickListenerCollection.java

Open Source GWT Libraries Demos

MyGWT Many Rich UI widgets GWT-DND Meant for drag and drop

MyGWT

GWT-DND