Your SlideShare is downloading. ×
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Digging Deeper into GWT
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Digging Deeper into GWT

1,053

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,053
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. GWT In-depth Explained by Rohit Ghatol ( [email_address] ) 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.  
  • 7.  
  • 8.  
  • 9.  
  • 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:WorkGWT-Demo>set PATH=e:worksoftgwt-windows-1.4.60;%PATH% E:WorkGWT-Demo>projectCreator -eclipse SimpleDemo Created directory E:WorkGWT-Demosrc Created directory E:WorkGWT-Demotest Created file E:WorkGWT-Demo.project Created file E:WorkGWT-Demo.classpath E:WorkGWT-Demo>applicationCreator -eclipse SimpleDemo com.gwt.demo.client.SimpleDemo Created directory E:WorkGWT-Demosrccomgwtdemo Created directory E:WorkGWT-Demosrccomgwtdemoclient Created directory E:WorkGWT-Demosrccomgwtdemopublic Created file E:WorkGWT-DemosrccomgwtdemoSimpleDemo.gwt.xml Created file E:WorkGWT-DemosrccomgwtdemopublicSimpleDemo.html Created file E:WorkGWT-DemosrccomgwtdemoclientSimpleDemo.java Created file E:WorkGWT-DemoSimpleDemo.launch Created file E:WorkGWT-DemoSimpleDemo-shell.cmd Created file E:WorkGWT-DemoSimpleDemo-compile.cmd
  • 13.  
  • 14.  
  • 15.  
  • 16.  
  • 17.  
  • 18.  
  • 19.  
  • 20.  
  • 21.  
  • 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
      • Module XML Definition File
      • Includes Project Dependencies
      • Includes Entry Point
      • Includes RPC Servlet Entry
    SimpleDemo.java
      • This is the Entry Point
      • Entry Point is like Main Method
      • Widgets are added to RootPanel
    SimpleDemo.html
      • 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. Shuffle Box Example 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 <<Interface>> + update(Observable model) Notify Register/Unregister View Source for Observable.java View Source for Observer.java
  • 33. MVC Demo
  • 34. MVC Demo
  • 35. MVC Demo # temperature + setTemp(int temp) +int getTemp() TempModel # observers + addObserver() +removeObserver() + notifyObserver() Observerable FahrView CelsView ThermoView update(Observable mode) Observer
  • 36. MVC Demo # temperature + setTemp(int temp) +int getTemp() TempModel # observers + addObserver() +removeObserver() + notifyObserver() Observerable FahrView CelsView ThermoView update(Observable mode) Observer Renders
  • 37. MVC Demo # temperature + setTemp(int temp) +int getTemp() TempModel # observers + addObserver() +removeObserver() + notifyObserver() Observerable FahrView CelsView ThermoView 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 FahrView CelsView ThermoView 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
  • 42. RPC Demo
  • 43. RPC Demo
  • 44. 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 Magic Glue GWT Classes
  • 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
    • LocationServiceAsync serviceAsync = (LocationServiceAsync) GWT
    • . create(LocationService. class);
      • Set the Service’s Entry point (aka url)
    • ((ServiceDefTarget) serviceAsync).setServiceEntryPoint(GWT. getModuleBaseURL() +
    • &quot;/LocationService&quot;);
  • 47. LocationServiceUtil Code public class LocationServiceUtil { public static LocationServiceAsync createService() { LocationServiceAsync serviceAsync = (LocationServiceAsync) GWT . create(LocationService. class); ((ServiceDefTarget) serviceAsync).setServiceEntryPoint(GWT. getModuleBaseURL() + &quot;/LocationService&quot;); return serviceAsync; } }
  • 48. RPC Client Code
    • LocationServiceAsync serviceAsync = LocationServiceUtil. createService();
    • serviceAsync.getStates(country, new AsyncCallback() {
      • public void onFailure(Throwable caught) {
      • Window. alert(&quot;System Error!&quot;);
      • }
      • 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) AdvListBox ListBox addDblClickListener() removeDblClickListener() fireDblClickEvent(Widget sender) DblClickListenerCollection ArrayList Void onDoubleClick(Widget sender) DblClickListener <<Interface>> 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
      • GWT-DND – Meant for drag and drop
  • 58. MyGWT
  • 59. GWT-DND

×