Google Web Toolkit Introduction - eXo Platform SEA


Published on

A presentation made by eXo Platform SEA. We introduce about Google Web Toolkit - the framework from Google to make AJAX application easily.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Google Web Toolkit Introduction - eXo Platform SEA

  1. 1. Google Web Toolkit (GWT) by Do Hoang Khiem (Collaboration Team)
  2. 2. Agenda <ul><li>What is & Why GWT? </li></ul><ul><li>Building User Interface </li></ul><ul><ul><li>GWT Widgets </li></ul></ul><ul><ul><li>Event handling </li></ul></ul><ul><ul><li>Apply styles </li></ul></ul><ul><li>Remote Procedure Call (RPC) </li></ul><ul><ul><li>GWT RPC </li></ul></ul><ul><ul><li>Serializable type </li></ul></ul><ul><ul><li>Handling Exception </li></ul></ul>
  3. 3. Agenda <ul><li>History management </li></ul><ul><li>Internationalization </li></ul><ul><li>JUnit Testing </li></ul><ul><li>Javascript Native Interface (JSNI) </li></ul>
  4. 4. What's and Why GWT?
  5. 5. What is GWT? <ul><li>Java software development framework that makes writing AJAX applications easy </li></ul><ul><ul><li>Google announced GWT at the JavaOne 2006 </li></ul></ul><ul><ul><li>Latest version: 2.2.0 February 11, 2011 </li></ul></ul><ul><li>Let you develop and debug AJAX applications in the Java language using Java development tools </li></ul><ul><ul><li>Eclipse, Netbeans, IntelliJ, … </li></ul></ul><ul><li>Provides Java-to-Javascript compiler and development mode that helps you debug your GWT applications </li></ul>
  6. 6. GWT SDK & Tools <ul><li>GWT SDK: contains Java API libraries, compiler, development server and tools </li></ul><ul><li>Plugin for Eclipse: provides IDE support for GWT and App Engine web projects </li></ul><ul><li>Some other tools: </li></ul><ul><ul><li>GWT Designer </li></ul></ul><ul><ul><li>Speed Tracker </li></ul></ul><ul><ul><li>Maven plugins </li></ul></ul>
  7. 7. Two modes of running GWT App <ul><li>Development mode (hosted mode) </li></ul><ul><ul><li>GWT application is run as Java bytecode within JVM </li></ul></ul><ul><ul><li>Take advantage of Java debugging </li></ul></ul><ul><li>Production mode (web mode) </li></ul><ul><ul><li>Your GWT application is run as pure Javascript and HTML compiled from original Java source code </li></ul></ul><ul><ul><li>End user will only see the web mode version of your application </li></ul></ul>
  8. 8. Why GWT? <ul><li>Static type checking in Java language boots productivity while reducing errors </li></ul><ul><li>Easily caught common Javascript errors </li></ul><ul><ul><li>typos, type mismatches, ... </li></ul></ul><ul><li>Take advantage of Java refactoring, code completion, ... </li></ul><ul><li>Java-based Object-Oriented designs are easier to communicate and understand. </li></ul>
  9. 9. Why GWT? <ul><li>No need to write “excellent” Javascript code </li></ul><ul><ul><li>Leverage your Java programming knowledge </li></ul></ul><ul><li>No need to take care of browser incompatibilities and quirks </li></ul><ul><ul><li>GWT compiler handles them </li></ul></ul><ul><ul><li>Support browser history, backward, forward </li></ul></ul><ul><li>Use Java API to manipulate DOM </li></ul><ul><li>Take advantage from rich built-in Widgets </li></ul>
  10. 10. Why GWT? <ul><li>Leverage various tools of Java programming for writing, debugging, testing </li></ul><ul><ul><li>Ex: Eclipse, IntelliJ, Netbeans </li></ul></ul><ul><li>JUnit integration </li></ul><ul><li>Internationalization </li></ul>
  11. 11. GWT Architecture Overview
  12. 12. GWT Architecture Overview <ul><li>GWT Java-to-Javascript compiler </li></ul><ul><ul><li>Translates Java source code to Javascript code </li></ul></ul><ul><li>GWT Hosted Web Browser </li></ul><ul><ul><li>Let you run and debug your GWT application in development mode, where your code run as Java bytecode within JVM </li></ul></ul><ul><li>JRE emulation library </li></ul><ul><ul><li>A small subset of JRE to handle the Java to Javascript conversion. This of the JRE emulation library as representing the Javascript capabilities </li></ul></ul><ul><li>GWT Web UI class library </li></ul><ul><ul><li>A set of custom interfaces and classes for creating widgets. </li></ul></ul>
  13. 13. Building User Interface
  14. 14. GWT User Interface <ul><li>GWT user interface classes are similar to those in existing UI frameworks such as Swing and SWT. </li></ul><ul><ul><li>GWT widgets are rendered using dynamically-created HTML rather than pixel-oriented graphics </li></ul></ul><ul><li>While GWT provides access to the browser's DOM directly using the DOM package, it is far easier to use classes from the Widget hierarchy </li></ul><ul><li>The Widget classes make it easier to quickly build interfaces that will work correctly on all browsers. </li></ul>
  15. 15. Widgets Library <ul><li>Widgets Library Images </li></ul>
  16. 16. Widgets Library
  17. 17. Widgets Library Widgets Library Images
  18. 18. Event Handler <ul><li>Events in GWT use the handler model similar to other user interface frameworks </li></ul><ul><ul><li>A handler interface defines one or more methods that the widget calls to announce an event </li></ul></ul><ul><ul><li>A class wishing to receive events of a particular type implements the associated handler interface and then passes a reference to itself to the widget to subscribe to a set of events. </li></ul></ul>
  19. 19. Event Handler <ul><li>Example </li></ul><ul><li>public void anonClickHandlerExample() { </li></ul><ul><li>Button b = new Button(&quot;Click Me&quot;); </li></ul><ul><li>b.addClickHandler(new ClickHandler() { </li></ul><ul><li>public void onClick(ClickEvent event) { </li></ul><ul><li>// handle the click event </li></ul><ul><li>} </li></ul><ul><li>}); </li></ul><ul><li>} </li></ul>
  20. 20. Apply styles <ul><li>GWT applications use CSS for visual styling </li></ul><ul><li>Update styles dynamically in Java code </li></ul><ul><li>Associate style sheets with the project </li></ul><ul><ul><li>Using a <link> tag in the host HTML page. </li></ul></ul><ul><ul><li>Using the <stylesheet> element in the module XML file. </li></ul></ul>
  21. 21. Remote Procedure Call (RPC)
  22. 22. GWT Remote Procedure Call <ul><li>Mechanism for interacting with server by invoking a method </li></ul><ul><ul><li>Ex: fetching data from server </li></ul></ul><ul><li>GWT RPC makes it easy for the client and server to pass Java objects back and forth over HTTP </li></ul><ul><ul><li>GWT provides serialization mechanism to bridge between client and server </li></ul></ul><ul><ul><li>Any object that needs to send is a GWT Serialization type </li></ul></ul><ul><li>Proper use of GWT RPC can allow you to develop an application where all the UI logic resides on the client, leaving business logic on the server) </li></ul><ul><ul><li>Resulting in an application with greatly improved performance, reduced bandwidth, and reduced web server load </li></ul></ul>
  23. 23. GWT RPC plumbing architecture
  24. 24. Implementing GWT RPC <ul><li>Define an interface for your service that extends RemoteService and lists all RPC method </li></ul><ul><ul><li>called “Synchronous Interface” </li></ul></ul><ul><li>Implement the service at server-side </li></ul><ul><ul><li>This class extends RemoteServiceServlet and implement the created interface </li></ul></ul><ul><li>Define an asynchronous interface to your service to be called from the client-side code </li></ul><ul><ul><li>Based on original service interface </li></ul></ul><ul><ul><li>Require caller to pass callback object that can be notified when async call completes. </li></ul></ul>
  25. 25. Serializable Types <ul><li>GWT RPC method parameters and return types must be serializable </li></ul><ul><ul><li>These values will be transmitted across network between client and server </li></ul></ul><ul><li>Java data types are already serializable </li></ul><ul><ul><li>Primitive, such as char, byte, short, int, long, boolean, float, or double. </li></ul></ul><ul><ul><li>String, Date or primitive wrapper: Character, Integer, Byte, Double, … </li></ul></ul><ul><ul><li>Array of serializable types </li></ul></ul><ul><ul><li>Serializable user-defined class </li></ul></ul><ul><ul><li>The type has at least one serializable subclass </li></ul></ul>
  26. 26. Handling Exception <ul><li>Making RPCs opens up the possibility of a variety of errors </li></ul><ul><ul><li>Networks fail, servers crash, and problems occur while processing a server call. </li></ul></ul><ul><li>GWT lets you handle these conditions in terms of Java exceptions </li></ul><ul><li>Caller should implement AsyncCallBack.onFailure(Throwable) to handle exception </li></ul>
  27. 27. History management
  28. 28. GWT History Mechanism <ul><li>GWT applications use “history token” to help Ajax developer activate browser history </li></ul><ul><ul><li>The token will be saved in browser history as a URL fragment </li></ul></ul><ul><ul><li>Ex: </li></ul></ul><ul><li>To enable history to your Ajax </li></ul><ul><ul><li>Add a history token to the history stack when you want to enable history event </li></ul></ul><ul><ul><li>Create an object that implements the ValueChangeHandler interface, parses new token and changes the application state to match </li></ul></ul>
  29. 29. GWT History <ul><li>GWT history demo </li></ul>
  30. 30. Internationalization
  31. 31. Internationalization <ul><li>GWT offers multiple internationalization techniques </li></ul><ul><ul><li>Static String Internationalization </li></ul></ul><ul><ul><li>Dynamic String Internationalization </li></ul></ul><ul><li>Static String Internationalization </li></ul><ul><ul><li>Extends Constants Interface </li></ul></ul><ul><ul><li>Extends Message Interface </li></ul></ul><ul><ul><li>Use properties files </li></ul></ul><ul><li>Dynamic String Internationalization </li></ul>
  32. 32. Internationalization <ul><li>Demo </li></ul>
  33. 33. JUnit Testing
  34. 34. JUnit Testing <ul><li>GWT provides integration with the popular JUnit unit testing framework </li></ul><ul><li>GWT allows JUnit test cases to run in either development mode or production mode. </li></ul>
  35. 35. JUnit Testing <ul><li>Demo. </li></ul>
  36. 36. Javascript Native Interface (JSNI)
  37. 37. Why JSNI? <ul><li>Sometimes it's very useful to mix handwritten Javascript to Java source code </li></ul><ul><ul><li>Ex: access low-level browser functionality not exposed by the GWT API </li></ul></ul><ul><li>You can use JSNI to: </li></ul><ul><ul><li>Implement a Java method directly in JavaScript </li></ul></ul><ul><ul><li>Wrap type-safe Java method signatures around existing JavaScript </li></ul></ul><ul><ul><li>Call from JavaScript code into Java code and vice-versa </li></ul></ul><ul><ul><li>Throw exceptions across Java/JavaScript boundaries </li></ul></ul><ul><ul><li>Read and write Java fields from JavaScript </li></ul></ul><ul><ul><li>Use development mode to debug both Java source (with a Java debugger) and JavaScript (with a script debugger) </li></ul></ul>
  38. 38. JSNI <ul><li>Demo </li></ul>
  39. 39. Resources <ul><li> </li></ul><ul><ul><li>Main site for GWT </li></ul></ul><ul><li> </li></ul><ul><li> </li></ul>
  40. 40. Question & Answer