1 / 59

GWT In-depth

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.

henrik
Download Presentation

GWT In-depth

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

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

  7. Install GWT

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

  9. Demo GWT Project • Site - http://code.google.com/p/gwt-simple-demo/ • Download demo project from here

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

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

  12. Shuffle Box Example

  13. Shuffle Box Example RootPanel

  14. Shuffle Box Example HorizontalPanel

  15. Shuffle Box Example VerticalPanel

  16. Shuffle Box Example

  17. Shuffle Box Example

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

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

  20. MVC Demo

  21. MVC Demo

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

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

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

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

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

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

  28. RPC Demo

  29. RPC Demo

  30. RPC Demo

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

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

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

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

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

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

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

More Related