GWT

3,408 views
3,263 views

Published on

Introduction to GWT framework

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
3,408
On SlideShare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
157
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

GWT

  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>

×