Your SlideShare is downloading. ×
0
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Google Web Toolkit Introduction - eXo Platform SEA

1,743

Published on

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

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Google Web Toolkit (GWT) by Do Hoang Khiem (Collaboration Team)
  • 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. 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. What's and Why GWT?
  • 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. 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. 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. 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. 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. 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. GWT Architecture Overview
  • 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. Building User Interface
  • 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. Widgets Library <ul><li>Widgets Library Images </li></ul>
  • 16. Widgets Library
  • 17. Widgets Library Widgets Library Images
  • 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. 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. 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. Remote Procedure Call (RPC)
  • 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. GWT RPC plumbing architecture
  • 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. 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. 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. History management
  • 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: http://www.example.com/historyexample/HistoryExample.html#page1 </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. GWT History <ul><li>GWT history demo </li></ul>
  • 30. Internationalization
  • 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. Internationalization <ul><li>Demo </li></ul>
  • 33. JUnit Testing
  • 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. JUnit Testing <ul><li>Demo. </li></ul>
  • 36. Javascript Native Interface (JSNI)
  • 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. JSNI <ul><li>Demo </li></ul>
  • 39. Resources <ul><li>http://code.google.com/webtoolkit/ </li></ul><ul><ul><li>Main site for GWT </li></ul></ul><ul><li>http://googlewebtoolkit.blogspot.com/ </li></ul><ul><li>http://developerlife.com </li></ul>
  • 40. Question & Answer

×