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=&quo...
Asynchronous JavaScript and XML (AJAX) Server - side Client – side Javascript JAVA <ul><li>+ no page transition, no blocki...
Google Web Toolkit (GWT) @ deployment time @ development time <html> [...] <script type=&quot;text/javascript&quot;> [...]...
GWT: create project in eclipse <ul><li>projectCreator -eclipse MySumationProject  </li></ul><ul><li>applicationCreator -ec...
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  TextBo...
GWT: project structure Client-side source files and subpackages com/mycompany/client/ The project root package contains mo...
GWT: module XML files <ul><li>Defines configuration of GWT modules </li></ul><ul><ul><li>Source entry point </li></ul></ul...
GWT: module example com/mycompany/public/MyApplication.html com/mycompany/MyApplication.gwt.xml com/mycompany/client/MyApp...
GWT Widgets <ul><li>SuggestBox </li></ul><ul><li>TabBar </li></ul><ul><li>Panel </li></ul><ul><li>More…  http:// code.goog...
 
Google Maps – import api
Google Maps public void onModuleLoad() { GMap2Widget mapWidget = new GMap2Widget(&quot;300&quot;, &quot;400&quot;); final ...
Google Maps - Geocoder <ul><li>Convert addresses to latitude/longitude pairs </li></ul>
Google Maps - Geocoder <ul><li>Convert addresses to latitude/longitude pairs </li></ul>
RPC plumbing diagram
RPC plumbing diagram package com.mycompany.client; import com.google.gwt.user.client.rpc.RemoteService; public interface M...
RPC plumbing diagram package com.mycompany.server; import com.google.gwt.user.server.rpc.RemoteServiceServlet; import com....
RPC plumbing diagram package com.mycompany.client; import com.google.gwt.user.client.rpc.AsyncCallback; public interface M...
Deploy service <ul><li>Tomcat -> add Servlet </li></ul><ul><li>Hosted mode -> modify module XML </li></ul><module> <inheri...
Actually making a call button.addClickListener( new ClickListener() { public void onClick(Widget sender) { MyAddServiceAsy...
References <ul><li>Google Web Toolkit, http://code.google.com/webtoolkit/ </li></ul><ul><li>W3 Schools,  http://www.w3scho...
Computerklas <ul><li>/localhost/packages/gwt/gwt-linux-1.4.60 </li></ul><ul><ul><li>projectCreator </li></ul></ul><ul><ul>...
Upcoming SlideShare
Loading in...5
×

Gooogle Web Toolkit

5,123
-1

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Gooogle Web Toolkit

  1. 1. The google web toolkit Stefaan Ternier
  2. 2. Classic web application model (synchronous)
  3. 3. Ajax web application model (asynchronous)
  4. 4. Asynchronous JavaScript and XML (AJAX) Server - side Client – side Javascript -> Firefox/IE <html> [...] <script type=&quot;text/javascript&quot;> [...] xmlhttp.open(&quot;POST&quot;, 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; } }
  5. 5. Asynchronous JavaScript and XML (AJAX) Server - side Client – side Javascript JAVA <ul><li>+ no page transition, no blocking </li></ul><ul><li>No IDE </li></ul><ul><li>Debugging is difficult </li></ul><ul><li>weakly typed </li></ul><ul><li>+ eclipse: debugging, easy development </li></ul><ul><li>good IDE’s </li></ul><ul><li>Debugging is easy </li></ul><ul><li>strongly typed </li></ul>
  6. 6. Google Web Toolkit (GWT) @ deployment time @ development time <html> [...] <script type=&quot;text/javascript&quot;> [...] xmlhttp.open(&quot;POST&quot;, 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
  7. 7. GWT: create project in eclipse <ul><li>projectCreator -eclipse MySumationProject </li></ul><ul><li>applicationCreator -eclipse MySumationProject com.mycompany.client.MySumApplication </li></ul><ul><li>Import project into eclipse </li></ul>
  8. 8. GWT: Build your first app GWT JAVA Code HTML Host page
  9. 9. 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(&quot;Click me&quot;); button.addClickListener( new ClickListener() { public void onClick(Widget sender) { resultaatLabel.setText(&quot;hier komt het resultaat&quot;); } }); RootPanel. get (&quot;inputboxa&quot;).add(aBox); RootPanel. get (&quot;inputboxb&quot;).add(bBox); RootPanel. get (&quot;resultaat&quot;).add(resultaatLabel); RootPanel. get (&quot;bereken&quot;).add(button); GWT Widgets Bind to HTML page
  10. 10. 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
  11. 11. GWT: module XML files <ul><li>Defines configuration of GWT modules </li></ul><ul><ul><li>Source entry point </li></ul></ul><ul><ul><li>HTML page entry </li></ul></ul><ul><li>Extension: .gwt.xml </li></ul><ul><li>Example: <module> <!-- Inherit the core Web Toolkit stuff. --> <inherits name='com.google.gwt.user.User'/> <!-- Specify the app entry point class. --> <entry-point class='com.mycompany.client.MyApplication'/> </module> </li></ul>
  12. 12. GWT: module example com/mycompany/public/MyApplication.html com/mycompany/MyApplication.gwt.xml com/mycompany/client/MyApplication.java
  13. 13. GWT Widgets <ul><li>SuggestBox </li></ul><ul><li>TabBar </li></ul><ul><li>Panel </li></ul><ul><li>More… http:// code.google.com / webtoolkit / documentation / com.google.gwt.doc.DeveloperGuide.UserInterface.html </li></ul>
  14. 15. Google Maps – import api
  15. 16. Google Maps public void onModuleLoad() { GMap2Widget mapWidget = new GMap2Widget(&quot;300&quot;, &quot;400&quot;); final GMap2 gmaps = mapWidget.getGmap(); RootPanel.get(&quot;slot1&quot;).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
  16. 17. Google Maps - Geocoder <ul><li>Convert addresses to latitude/longitude pairs </li></ul>
  17. 18. Google Maps - Geocoder <ul><li>Convert addresses to latitude/longitude pairs </li></ul>
  18. 19. RPC plumbing diagram
  19. 20. 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); }
  20. 21. 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; } }
  21. 22. 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); }
  22. 23. Deploy service <ul><li>Tomcat -> add Servlet </li></ul><ul><li>Hosted mode -> modify module XML </li></ul><module> <inherits name='com.google.gwt.user.User'/> <entry-point class='com.mycompany.client.MyApplication'/> <servlet path=&quot;/addService&quot; class=&quot;com.mycompany.server.MyAddServiceImpl“/> </module>
  23. 24. 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() + &quot;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); } } );
  24. 25. References <ul><li>Google Web Toolkit, http://code.google.com/webtoolkit/ </li></ul><ul><li>W3 Schools, http://www.w3schools.com/ </li></ul><ul><li>Apache axis, http://ws.apache.org/axis/ </li></ul><ul><li>GWT – Google Maps API http://sourceforge.net/projects/gwt/ </li></ul><ul><li>http://www.adaptivepath.com/ideas/essays/archives/000385.php </li></ul>
  25. 26. Computerklas <ul><li>/localhost/packages/gwt/gwt-linux-1.4.60 </li></ul><ul><ul><li>projectCreator </li></ul></ul><ul><ul><li>applicationCreator </li></ul></ul><ul><li>/localhost/packages/gwt/googlemaps </li></ul><ul><ul><li>Lib </li></ul></ul><ul><ul><li>javadoc_2_2_1 </li></ul></ul>

×