google web toolkit introduction - exo platform sea
DESCRIPTION
A presentation made by eXo Platform SEA. We introduce about Google Web Toolkit - the framework from Google to make AJAX application easily.TRANSCRIPT
Google Web ToolkitGoogle Web Toolkit(GWT)(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.
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
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: http://www.example.com/historyexample/HistoryExample.html#page1
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
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
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.
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
http://code.google.com/webtoolkit/
Main site for GWT
http://googlewebtoolkit.blogspot.com/
http://developerlife.com
Question & Answer