Gooogle Web Toolkit

The google web toolkit Stefaan Ternier

Classic web application model (synchronous)

Ajax web application model (asynchronous)

Asynchronous JavaScript and XML (AJAX) Server - side Client – side Javascript -> Firefox/IE <html> [...] <script type="text/javascript"> [...] xmlhttp.open("POST", url, true); xmlhttp.onreadystatechange = function(func) { if (xmlhttp.readyState == 4) { [...] } } xmlhttp.setRequestHeader('MessageType', 'CALL'); xmlhttp.setRequestHeader('Content-Type', 'text/xml'); </script> <body>[...]</body> </html> JAVA -> Tomcat package com.mycompany.server; import com.google.gwt.user.server.rpc.RemoteServiceServlet; import com.mycompany.client.MyAddService; public class MyAddServiceImpl extends RemoteServiceServlet implements MyAddService{ public int add(int a, int b) { return a + b; } }

Asynchronous JavaScript and XML (AJAX) Server - side Client – side Javascript JAVA

+ no page transition, no blocking

No IDE

Debugging is difficult

weakly typed

+ eclipse: debugging, easy development

good IDE’s

Debugging is easy

strongly typed

Google Web Toolkit (GWT) @ deployment time @ development time <html> [...] <script type="text/javascript"> [...] xmlhttp.open("POST", url, true); xmlhttp.onreadystatechange = function(func) { if (xmlhttp.readyState == 4) { [...] } } xmlhttp.setRequestHeader('MessageType', 'CALL'); xmlhttp.setRequestHeader('Content-Type', 'text/xml'); </script> <body>[...]</body> </html> JAVA/eclipse javascript Hosted mode JVM IDE Compile to JAVA bytecode Compile to Javascript

GWT: create project in eclipse

projectCreator -eclipse MySumationProject

applicationCreator -eclipse MySumationProject com.mycompany.client.MySumApplication

Import project into eclipse

GWT: Build your first app GWT JAVA Code HTML Host page

GWT: Build your first app final Label resultaatLabel = new Label(); final TextBox aBox= new TextBox(); final TextBox bBox= new TextBox(); final Button button = new Button("Click me"); button.addClickListener( new ClickListener() { public void onClick(Widget sender) { resultaatLabel.setText("hier komt het resultaat"); } }); RootPanel. get ("inputboxa").add(aBox); RootPanel. get ("inputboxb").add(bBox); RootPanel. get ("resultaat").add(resultaatLabel); RootPanel. get ("bereken").add(button); GWT Widgets Bind to HTML page

GWT: project structure Client-side source files and subpackages com/mycompany/client/ The project root package contains module XML files com/mycompany/ Server-side code and subpackages com/mycompany/server/ Static resources that can be served publicly com/mycompany/public/ Purpose Package

GWT: module XML files

Defines configuration of GWT modules

Source entry point

HTML page entry

Extension: .gwt.xml

Example: <module>  <inherits name='com.google.gwt.user.User'/>  <entry-point class='com.mycompany.client.MyApplication'/> </module>

GWT: module example com/mycompany/public/MyApplication.html com/mycompany/MyApplication.gwt.xml com/mycompany/client/MyApplication.java

GWT Widgets

SuggestBox

TabBar

Panel

More… http:// code.google.com / webtoolkit / documentation / com.google.gwt.doc.DeveloperGuide.UserInterface.html

Google Maps – import api

Google Maps public void onModuleLoad() { GMap2Widget mapWidget = new GMap2Widget("300", "400"); final GMap2 gmaps = mapWidget.getGmap(); RootPanel.get("slot1").add(mapWidget); } <module> <inherits name='com.google.gwt.user.User'/> <inherits name='com.mapitz.gwt.googleMaps.GoogleMaps' /> <entry-point class='com.mycompany.client.MyMapsApplication'/> </module> Module XML JAVA code

Google Maps - Geocoder

Convert addresses to latitude/longitude pairs

Google Maps - Geocoder

Convert addresses to latitude/longitude pairs

RPC plumbing diagram

RPC plumbing diagram package com.mycompany.client; import com.google.gwt.user.client.rpc.RemoteService; public interface MyAddService extends RemoteService { public int add(int a, int b); }

RPC plumbing diagram package com.mycompany.server; import com.google.gwt.user.server.rpc.RemoteServiceServlet; import com.mycompany.client.MyAddService; public class MyAddServiceImpl extends RemoteServiceServlet implements MyAddService{ public int add(int a, int b) { int z = a + b; return z; } }

RPC plumbing diagram package com.mycompany.client; import com.google.gwt.user.client.rpc.AsyncCallback; public interface MyAddServiceAsync { public void add(int a, int b, AsyncCallback callback); }

Deploy service

Tomcat -> add Servlet

Hosted mode -> modify module XML

Actually making a call button.addClickListener( new ClickListener() { public void onClick(Widget sender) { MyAddServiceAsync addService = (MyAddServiceAsync) GWT.create(MyAddService.class); ServiceDefTarget endpoint = (ServiceDefTarget) addService; String moduleRelativeURL = GWT.getModuleBaseURL() + "addService“; endpoint.setServiceEntryPoint(moduleRelativeURL); AsyncCallback callback = new AsyncCallback(){ public void onSuccess(Object result){ resultaatLabel.setText(result.toString()); } public void onFailure(Throwable caught) { resultaatLabel.setText(caught.getMessage()); } }; addService.add(Integer.parseInt(aBox.getText()), Integer.parseInt(bBox.getText()), callback); } } );

References