gwt indepth
Post on 15-May-2015
1.216 Views
Preview:
TRANSCRIPT
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
top related