GWT In-depth

1. GWT In-depth Explained by Rohit Ghatol (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 Page

4. Key Features Read more on GWT Overview Page

5. Key Features Read more on GWT Overview Page

10. GWT Documentation Links • Developer's Guide • Fundamentals • User Interfaces • Remote Procedure Calls • Unit Testing • Internationalization • JavaScript Native Interface (JSNI) • JRE Emulation • 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 SimpleDemocom.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/ • Download demo project from here

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 SimpleDemo.java SimpleDemo.html • Module XML Definition File • Includes Project Dependencies • Includes Entry Point • Includes RPC Servlet Entry • This is the Entry Point • Entry Point is like Main Method • Widgets are added to RootPanel • This is the final deliverable HTML/JSP/ASP/PHP • Includes JS file for SimpleDemo • Includes PlaceHolder Elements

25. Shuffle Box Example

26. Shuffle Box Example RootPanel

27. Shuffle Box Example HorizontalPanel

28. Shuffle Box Example VerticalPanel

29. Shuffle Box Example

30. Shuffle Box Example

31. new ClickListener(){ public void onClick(Widget sender) { intleftIndex=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); } } } Shuffle Box Example

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

33. MVC Demo

34. MVC Demo

35. MVC Demo FahrView CelsView ThermoView TempModel Observerable Observer update(Observable mode) # temperature + setTemp(int temp) +intgetTemp() # observers + addObserver() +removeObserver() + notifyObserver()

36. MVC Demo FahrView CelsView ThermoView TempModel Observerable Observer Renders update(Observable mode) # temperature + setTemp(int temp) +intgetTemp() # observers + addObserver() +removeObserver() + notifyObserver()

37. MVC Demo FahrView CelsView ThermoView TempModel Observerable Observer Register update(Observable mode) # temperature + setTemp(int temp) +intgetTemp() # observers + addObserver() +removeObserver() + notifyObserver()

38. MVC Demo Changes FahrView CelsView ThermoView TempModel Observerable Observer update(Observable mode) # temperature + setTemp(int temp) +intgetTemp() # observers + addObserver() +removeObserver() + notifyObserver() User clicked increment button

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

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

41. RPC Demo

42. RPC Demo

43. RPC Demo

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

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

46. LocationServiceUtil Code • Use GWT Glue to link LocationService and LocationServiceAsync classes • LocationServiceAsyncserviceAsync = (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 FocusWidget Widget ListBox onBrowserEvent(Event event)