Google Web Toolkit Introduction - eXo Platform SEA
- 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
- 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.
- 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
- 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
- 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
- 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.
- 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 http://code.google.com/webtoolkit/ Main site for GWT http://googlewebtoolkit.blogspot.com/ http://developerlife.com