• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
GWT Indepth
 

GWT Indepth

on

  • 1,370 views

 

Statistics

Views

Total Views
1,370
Views on SlideShare
1,171
Embed Views
199

Actions

Likes
0
Downloads
22
Comments
0

1 Embed 199

http://rohitghatol.com 199

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    GWT Indepth GWT Indepth Presentation Transcript

    • GWT In-depth Explained by Rohit Ghatol ( [email_address] ) 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 Read more on GWT Overview Page
    • Key Features Read more on GWT Overview Page
    • Key Features Read more on GWT Overview Page
    •  
    •  
    •  
    •  
    • GWT Documentation Links
        • Developer's Guide
          • Fundamentals
          • User Interfaces
          • Remote Procedure Calls
          • Unit Testing
          • Internationalization
          • JavaScript Native Interface (JSNI)
          • JRE Emulation
          • GWT Class API
    • Install GWT
    • 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
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    • Demo GWT Project
        • Site - http://code.google.com/p/gwt-simple-demo/
        • Download demo project from here
    • GWT Project Anatomy GWT-Demo +src +com/gwt/demo SimpleDemo.gwt.xml - client SimpleDemo.java - public SimpleDemo.html
    • 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
    • Shuffle Box Example
    • Shuffle Box Example RootPanel
    • Shuffle Box Example HorizontalPanel
    • Shuffle Box Example VerticalPanel
    • Shuffle Box Example
    • Shuffle Box Example
    • 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); } } }
    • 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
    • MVC Demo
    • MVC Demo
    • MVC Demo # temperature + setTemp(int temp) +int getTemp() TempModel # observers + addObserver() +removeObserver() + notifyObserver() Observerable FahrView CelsView ThermoView update(Observable mode) Observer
    • MVC Demo # temperature + setTemp(int temp) +int getTemp() TempModel # observers + addObserver() +removeObserver() + notifyObserver() Observerable FahrView CelsView ThermoView update(Observable mode) Observer Renders
    • MVC Demo # temperature + setTemp(int temp) +int getTemp() TempModel # observers + addObserver() +removeObserver() + notifyObserver() Observerable FahrView CelsView ThermoView update(Observable mode) Observer Register
    • 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
    • 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
    • MVC Demo source files
        • FahrView.java
        • CelsView.java
        • ThermoView.java
        • TempModel.java
    • RPC Demo
    • RPC Demo
    • RPC Demo
    • RPC Classes Explained LocationService <<Interface>> List getStates(String country) LocationServiceImpl List getStates(String country) RemoteService <<Interface>> RemoteServiceServlet LocationServiceAsync <<Interface>> Void getStates(String country, AsyncCallback callback) LocationServiceUtil public static LocationServiceAsync getInstance() GWT Magic Glue GWT Classes
    • RPC Classes Explained AsyncCallback <<Interface>> void onSuccess(Object result); void onFailure(Throwable caught);
    • 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;);
    • 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; } }
    • 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);
        • }
      • }
      • );
    • RPC related Links
        • Complete source code
        • LocationService.java
        • LocationServiceAsync.java
        • LocationServiceImpl.java
        • LocationServiceUtil.java
        • Client Code
        • RPC Tutorial
    • Extending Widgets for more events onBrowserEvent(Event event) Widget FocusWidget ListBox
    • 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.
    • 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)
    • 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
    • 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
    • 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
    • Extending Widgets for more events
      • Source files
        • AdvListBox.java
        • AdvListBoxDemo.java
        • DoubleClickListener.java
        • DoubleClickListenerCollection.java
    • J2EE Components
        • Components are JSP 2.0 Tag Files
        • Components are configured using attributes
        • Concept of ComponentLoader at GWT
    • Target Code <widget:loader/> <table> <tr> <td><widget:colorPicker id=“cp1” color=“red”/></td> </tr> <tr> <td><widget:navTree id=“menu1=“ key=“menuTree” /></td> </tr> </table>
    • Data Provided to Components
        • Simple and Static Data
          • Provided using attributes
        • Complex and Dynamic Data
          • Provided using RPC
          • Key is used to identify context at Server side
          • Key is provided to client as attribute
    • Complex and Dynamic Data Server Browser TreeRPCServlet menu roles conf menu conf roles
    • [email_address]
        • Is an Entry Point
        • Keeps a map of widget name Vs widget factories
        • Hunts for DOM elements with attribute “widget” (placeholders)
        • Replaces place holder with instances of Widget
    • Target Code <widget:loader/> <table> <tr> <td><widget:colorPicker id=“cp1” color=“red”/></td> </tr> <tr> <td><widget:navTree id=“menu1” key=“menuTree” /></td> </tr> </table> <script src=“com.xyz.ComponentLoader.nocachejs”/> <div id=“cp1” widget=“ColorPicker” color=“${color}”></div> <div widget=“Tree” id=“menu1” key=“${key}” readonly=“true”></div>
    • ComponentLoader GWT’s ComponentLoader Script Body .. .. div id=“cp1” widget=“ColorPicker” div id=“menu1” widget=“Tree” ColorPicker cpFactory Tree treeFactory RootPanel.get(“cp1”).add(cpFactory.getWidget()); RootPanel.get(“menu1”).add(treeFactory.getWidget());
    • Building Gadgets using GWT
        • Download gwt-gadgets-0.0.290.zip
        • Add it your project path
        • Create your gadget by extending Gadget
        • Build
        • You will get <gadget>.xml instead of html file
        • Load this on Igoogle
      • Refer HelloGadget sample in this zip
    • Wrapping JavaScript Frameworks
        • Interface with legacy or 3 rd party JavaScript frameworks
          • E. g Google Gadgets, OpenSocial (Orkut apps)
        • Pull JavaScript library in GWT world
    • Wrap using JavaScriptObject Case Study Wrap OpenSocial apis var dataRequest = opensocial.newDataRequest(); dataRequest.add(“myfriends”,dataRequest. newFetchPeopleRequest(“VIEWER_FRIENDS”); dataRequest.send(function(resp){ resp.get(“myfriends”).doSomething(); });
    • Wrap using JavaScriptObject Replicate OpenSocial using simple JSNI public class OpenSocial{ public native DataRequest newDataRequest()/*-{ return $wnd.opensocial.newDataRequest(); }-*/; }
    • Wrap using JavaScriptObject Create DataRequest by extending JavaScriptObject public class DataRequest extends JavaScriptObject{ public final DataRequestItem newFetchPeopleRequest(Id idSpec) { return newFetchPeopleRequest(this, idSpec.toString()); } private final native DataRequestItem newFetchPeopleRequest(DataRequest obj, String idSpec)/*-{ return obj.newFetchPeopleRequest(idSpec); }-*/; }
    • Open Source GWT Libraries Demos
        • GWT-EXT – Many Rich UI widgets
        • GWT-DND – Meant for drag and drop
    • EXT GWT
    • GWT-DND