1. GWT In-depth Explained by Rohit Ghatol (rohitsghatol@gmail.com)rohitsghatol@gmail.com http://pune-gtug.blogspot.com

2. Topics Covered Short Introduction to GWT Architectural Overview Simple Code Example MVC Code Example Server Communication using GWT – RPC Open source Libraries

3. Introduction to GWT Read more on GWT Overview PageGWT Overview Page

4. Key Features Read more on GWT Overview PageGWT Overview Page Reusable UI components Really Simple RPC Cross browser compatible Javascript Native Interface (JSNI) Features

5. Key Features Read more on GWT Overview PageGWT Overview Page Real DebuggingInternationalization JUnit Integration Completely Open source Features

10. GWT Documentation Links Developer's Guide – Fundamentals Fundamentals – User Interfaces User Interfaces – Remote Procedure Calls Remote Procedure Calls – Unit Testing Unit Testing – Internationalization Internationalization – JavaScript Native Interface (JSNI) JavaScript Native Interface (JSNI) – JRE Emulation JRE Emulation – GWT Class API GWT Class API

11. Install GWT

12. 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 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

22. Demo GWT Project Site - http://code.google.com/p/gwt-simple-demo/http://code.google.com/p/gwt-simple-demo/ Download demo project from herehere

23. GWT Project Anatomy GWT-Demo +src +com/gwt/demo SimpleDemo.gwt.xml - client SimpleDemo.java - public SimpleDemo.html

24. GWT Project Anatomy SimpleDemo.gwt.xml 1.Module XML Definition File 2.Includes Project Dependencies 3.Includes Entry Point 4.Includes RPC Servlet Entry SimpleDemo.java 1.This is the Entry Point 2.Entry Point is like Main Method 3.Widgets are added to RootPanel SimpleDemo.html 1.This is the final deliverable HTML/JSP/ASP/PHP 2.Includes JS file for SimpleDemo 3.Includes PlaceHolder Elements

25. Shuffle Box Example

26. RootPanel

27. Shuffle Box Example HorizontalPanel

28. Shuffle Box Example VerticalPanel

29. Shuffle Box Example

31. 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); }

32. Observable # List observers + addObserver(Observer observer) + removeObserver(Observer observer) + notifyObservers() Observer > + update(Observable model) Notify Register/Unregister View Source for Observable.javaObservable.java View Source for Observer.javaObserver.java

33. MVC Demo

35. # temperature + setTemp(int temp) +int getTemp() TempModel # observers + addObserver() +removeObserver() + notifyObserver() Observerable FahrViewCelsViewThermoView update(Observable mode) Observer

36. MVC Demo # temperature + setTemp(int temp) +int getTemp() TempModel # observers + addObserver() +removeObserver() + notifyObserver() Observerable FahrViewCelsViewThermoView update(Observable mode) Observer Renders

37. MVC Demo # temperature + setTemp(int temp) +int getTemp() TempModel # observers + addObserver() +removeObserver() + notifyObserver() Observerable FahrViewCelsViewThermoView update(Observable mode) Observer Register

38. 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

39. MVC Demo # temperature + setTemp(int temp) +int getTemp() TempModel # observers + addObserver() +removeObserver() + notifyObserver() Observerable FahrViewCelsViewThermoView update(Observable mode) Observer Notifies All the Views Update themselves using update() method

40. MVC Demo source files FahrView.java CelsView.java ThermoView.java TempModel.java

41. RPC Demo

44. RPC Classes Explained LocationService > List getStates(String country) LocationServiceImpl List getStates(String country) RemoteService > List getStates(String country) RemoteServiceServlet LocationServiceAsync > Void getStates(String country, AsyncCallback callback) LocationServiceUtil public static LocationServiceAsync getInstance() GWT Magic Glue GWT Classes

45. RPC Classes Explained AsyncCallback > void onSuccess(Object result); void onFailure(Throwable caught);

46. 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");

47. LocationServiceUtil Code public class LocationServiceUtil { public static LocationServiceAsync createService() { LocationServiceAsync serviceAsync = (LocationServiceAsync) GWT.create(LocationService.class); ((ServiceDefTarget) serviceAsync).setServiceEntryPoint(GWT.getModuleBaseURL()+ "/LocationService"); return serviceAsync; }

48. 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); } );

49. RPC related Links Complete source code LocationService.java LocationServiceAsync.java LocationServiceImpl.java LocationServiceUtil.java Client Code RPC Tutorial

50. Extending Widgets for more events onBrowserEvent(Event event) Widget FocusWidget ListBox

51. 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.

52. 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)

53. 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

54. Extending Widgets for more events # dblClickListenerCollection + AdvListBox() # onBrowserEvent(Event event) AdvListBoxListBox addDblClickListener() removeDblClickListener() fireDblClickEvent(Widget sender) DblClickListenerCollectionArrayList Void onDoubleClick(Widget sender) DblClickListener > 0..* 1

55. 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

56. Extending Widgets for more events Source files AdvListBox.java AdvListBoxDemo.java DoubleClickListener.java DoubleClickListenerCollection.java

57. Open Source GWT Libraries Demos MyGWT – Many Rich UI widgets MyGWT GWT-DND – Meant for drag and drop GWT-DND

58. MyGWT

59. GWT-DND