Download - Digging Deeper into GWT
![Page 2: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/2.jpg)
Topics Covered
• Short Introduction to GWT• Architectural Overview• Simple Code Example• MVC Code Example• Server Communication using GWT – RPC• Open source Libraries
![Page 3: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/3.jpg)
Introduction to GWT
Read more on GWT Overview Page
![Page 4: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/4.jpg)
Key Features
Read more on GWT Overview Page
![Page 5: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/5.jpg)
Key Features
Read more on GWT Overview Page
![Page 6: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/6.jpg)
![Page 7: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/7.jpg)
![Page 8: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/8.jpg)
![Page 9: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/9.jpg)
![Page 10: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/10.jpg)
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
![Page 11: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/11.jpg)
Install GWT
![Page 12: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/12.jpg)
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
![Page 13: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/13.jpg)
![Page 14: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/14.jpg)
![Page 15: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/15.jpg)
![Page 16: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/16.jpg)
![Page 17: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/17.jpg)
![Page 18: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/18.jpg)
![Page 19: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/19.jpg)
![Page 20: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/20.jpg)
![Page 21: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/21.jpg)
![Page 22: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/22.jpg)
Demo GWT Project
• Site - http://code.google.com/p/gwt-simple-demo/• Download demo project from here
![Page 23: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/23.jpg)
GWT Project Anatomy
GWT-Demo+src+com/gwt/demoSimpleDemo.gwt.xml- clientSimpleDemo.java- publicSimpleDemo.html
![Page 24: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/24.jpg)
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
![Page 25: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/25.jpg)
Shuffle Box Example
![Page 26: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/26.jpg)
Shuffle Box ExampleRootPanel
![Page 27: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/27.jpg)
Shuffle Box Example
HorizontalPanel
![Page 28: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/28.jpg)
Shuffle Box Example
VerticalPanel
![Page 29: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/29.jpg)
Shuffle Box Example
![Page 30: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/30.jpg)
Shuffle Box Example
![Page 31: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/31.jpg)
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);}}}
![Page 32: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/32.jpg)
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
![Page 33: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/33.jpg)
MVC Demo
![Page 34: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/34.jpg)
MVC Demo
![Page 35: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/35.jpg)
MVC Demo
# temperature+ setTemp(int temp)+int getTemp()
TempModel
# observers+ addObserver()+removeObserver()+ notifyObserver()
Observerable
FahrView CelsView ThermoView
update(Observable mode)
Observer
![Page 36: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/36.jpg)
MVC Demo
# temperature+ setTemp(int temp)+int getTemp()
TempModel
# observers+ addObserver()+removeObserver()+ notifyObserver()
Observerable
FahrView CelsView ThermoView
update(Observable mode)
Observer
Renders
![Page 37: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/37.jpg)
MVC Demo
# temperature+ setTemp(int temp)+int getTemp()
TempModel
# observers+ addObserver()+removeObserver()+ notifyObserver()
Observerable
FahrView CelsView ThermoView
update(Observable mode)
Observer
Register
![Page 38: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/38.jpg)
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
![Page 39: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/39.jpg)
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
![Page 40: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/40.jpg)
MVC Demo source files
• FahrView.java• CelsView.java• ThermoView.java• TempModel.java
![Page 41: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/41.jpg)
RPC Demo
![Page 42: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/42.jpg)
RPC Demo
![Page 43: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/43.jpg)
RPC Demo
![Page 44: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/44.jpg)
RPC Classes Explained
LocationService<<Interface>>
List getStates(String country)
LocationServiceImpl
List getStates(String country)
RemoteService<<Interface>>
List getStates(String country)
RemoteServiceServlet
LocationServiceAsync<<Interface>>
Void getStates(String country, AsyncCallback callback)
LocationServiceUtil
public static LocationServiceAsync getInstance()
GWT
MagicGlue
GWT Classes
![Page 45: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/45.jpg)
RPC Classes Explained
AsyncCallback<<Interface>>
void onSuccess(Object result);
void onFailure(Throwable caught);
![Page 46: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/46.jpg)
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");
![Page 47: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/47.jpg)
LocationServiceUtil Code
public class LocationServiceUtil {public static LocationServiceAsync createService() {LocationServiceAsync serviceAsync = (LocationServiceAsync) GWT.create(LocationService.class);
((ServiceDefTarget) serviceAsync).setServiceEntryPoint(GWT.getModuleBaseURL()+"/LocationService");return serviceAsync;}}
![Page 48: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/48.jpg)
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);
}});
![Page 49: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/49.jpg)
RPC related Links
• Complete source code• LocationService.java• LocationServiceAsync.java• LocationServiceImpl.java• LocationServiceUtil.java• Client Code• RPC Tutorial
![Page 50: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/50.jpg)
Extending Widgets for more events
onBrowserEvent(Event event)
Widget
FocusWidget
ListBox
![Page 51: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/51.jpg)
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.
![Page 52: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/52.jpg)
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)
![Page 53: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/53.jpg)
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
![Page 54: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/54.jpg)
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
![Page 55: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/55.jpg)
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
![Page 56: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/56.jpg)
Extending Widgets for more eventsSource files
• AdvListBox.java • AdvListBoxDemo.java • DoubleClickListener.java • DoubleClickListenerCollection.java
![Page 57: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/57.jpg)
Open Source GWT Libraries Demos
• MyGWT – Many Rich UI widgets• GWT-DND – Meant for drag and drop
![Page 58: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/58.jpg)
MyGWT
![Page 59: Digging Deeper into GWT](https://reader034.vdocuments.net/reader034/viewer/2022051015/55557b02b4c9055f5f8b4ec3/html5/thumbnails/59.jpg)
GWT-DND