Transcript GWT Indepth
GWT In-depth Explained by Rohit Ghatol ([email protected]) 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 Reusable UI components Really Simple RPC Features Cross browser compatible Read more on GWT Overview Page Javascript Native Interface (JSNI) Key Features Real Debugging Internationalization Features Read more on GWT Overview Page JUnit Integration Completely Open source 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:\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 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 1. 2. 3. 4. SimpleDemo.java Module XML Definition File Includes Project Dependencies Includes Entry Point Includes RPC Servlet Entry 1. 2. 3. This is the Entry Point Entry Point is like Main Method Widgets are added to RootPanel SimpleDemo.html 1. 2. 3. 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() Register/Unregister Observer <<Interface>> + update(Observable model) Notify View Source for Observable.java View Source for Observer.java MVC Demo MVC Demo MVC Demo Observer Observerable update(Observable mode) FahrView CelsView # observers + addObserver() +removeObserver() + notifyObserver() ThermoView TempModel # temperature + setTemp(int temp) +int getTemp() MVC Demo Observer Observerable update(Observable mode) FahrView CelsView # observers + addObserver() +removeObserver() + notifyObserver() ThermoView TempModel Renders # temperature + setTemp(int temp) +int getTemp() MVC Demo Observer Observerable update(Observable mode) FahrView CelsView # observers + addObserver() +removeObserver() + notifyObserver() ThermoView TempModel Register # temperature + setTemp(int temp) +int getTemp() MVC Demo Observer Observerable update(Observable mode) # observers + addObserver() +removeObserver() + notifyObserver() Changes FahrView CelsView ThermoView TempModel # temperature + setTemp(int temp) +int getTemp() User clicked increment button MVC Demo Observer Observerable update(Observable mode) FahrView CelsView # observers + addObserver() +removeObserver() + notifyObserver() ThermoView TempModel Notifies All the Views Update themselves using update() method # temperature + setTemp(int temp) +int getTemp() MVC Demo source files • • • • FahrView.java CelsView.java ThermoView.java TempModel.java RPC Demo RPC Demo RPC Demo RPC Classes Explained GWT Classes RemoteService <<Interface>> RemoteServiceServlet List getStates(String country) LocationServiceAsync <<Interface>> Void getStates(String country, AsyncCallback callback) GWT Magic Glue LocationService <<Interface>> List getStates(String country) LocationServiceImpl LocationServiceUtil List getStates(String country) public static LocationServiceAsync getInstance() 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()+ "/LocationService"); LocationServiceUtil Code public class LocationServiceUtil { public static LocationServiceAsync createService() { LocationServiceAsync serviceAsync = (LocationServiceAsync) GWT .create(LocationService.class); ((ServiceDefTarget) serviceAsync).setServiceEntryPoint(GWT.getModuleBaseURL()+ "/LocationService"); return serviceAsync; } } 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); } } ); RPC related Links • • • • • • • Complete source code LocationService.java LocationServiceAsync.java LocationServiceImpl.java LocationServiceUtil.java Client Code RPC Tutorial Extending Widgets for more events Widget onBrowserEvent(Event event) 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 ListBox ArrayList AdvListBox DblClickListenerCollection # dblClickListenerCollection + AdvListBox() # onBrowserEvent(Event event) addDblClickListener() removeDblClickListener() fireDblClickEvent(Widget sender) 1 0..* DblClickListener <<Interface>> Void onDoubleClick(Widget sender) Extending Widgets for more events AdvListBox.java Source 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); } } Extending Widgets for more events Source files • AdvListBox.java • AdvListBoxDemo.java • DoubleClickListener.java • DoubleClickListenerCollection.java Open Source GWT Libraries Demos • MyGWT – Many Rich UI widgets • GWT-DND – Meant for drag and drop MyGWT GWT-DND