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

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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.

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


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