Google Web Toolkits


Published on

This talk will explain the Google Web Toolkit (GWT), GWT architecture, and why you would want to use GWT. In addition, it will include a demo of GWT and the recently released GWT Designer (a tool that makes GWT development easy and that makes it fast to generate a complicated UI).

  • 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
  • Java dev framework for complex web Java-to-JavaScript compiler Designer(Widget, event, styling, code generation) Hosted mode When app deploy to prod compiler translates Java application to browser-compliant JavaScript, CSS, and HTML
  • Use GWT commandline tool IDE plugins: intellij, eclipse, Netbean etc Install GWT plugin Create a java application, select GWT in the process Create a sample GWT application Install gwt development plugin for browsers IE, Firefox, Safari.-No chrome plugin yet
  • Static type checking in the Java boosts productivity while reducing errors. Common JavaScript errors (typos, type mismatches) are easily caught at compile time Code prompting/completion (through IDE) ‏ Automated Java refactoring Java-based OO designs are easier to communicate and understand, thus making AJAX code base more comprehensible.
  • No need to code JavaScript No need to handle browser incompatibilities No need to use DOM APIs No need to build commonly used Widgets Java Tools JUnit integration Internationalization Designer
  • GWT Java-to-JavaScript Compiler GWT Hosted Web Browser GWT Designer JRE emulation library GWT contains JavaScript implementations of the most widely used classes in the Java standard class library GWT Web UI class library Similar to Swing UI Parses the original Java code Full parser, almost all Java constructs will be parsed correctly. Generates a full Abstract Syntax Tree (AST) ‏ GWT's compiler isn't a parlor trick, it's a real code parser and cross-language compiler Performs optimization, dead-code elimination, dynamic analysis, and other code fixups The generated JS is fast and efficient, sometimes faster than what you might write yourself Optimization All code is optimized, including some unusual tricks (like turning some methods into wrapped statics) ‏ Dead-Code Elimination Remove any code that cannot be reached, or always returns the same value(s) ‏ Javascript Generation Generate Javascript, including all necessary browser-specific checks and workarounds Javascript obfuscation and size reduction Javascript is (optionally) obfuscated to protect your trade-secrets, and to reduce it's size
  • Swing like Event Driven UI frameworks Far easier to manipulate DOM using Java classes than using DOM API Much easier to quickly build interfaces that works correctly on all browsers using widgets
  • Swing like Event Driven UI frameworks Far easier to manipulate DOM using Java classes than using DOM API Much easier to quickly build interfaces that works correctly on all browsers using widgets
  • A mechanism for interacting with the server by invoking a method asynchronously Makes it easy for the client and server to pass Java objects back and forth over HTTP You could move all UI logic to the client improved performance, reduced bandwidth, reduced web server load, and a pleasant user experience
  • Google Web Toolkits

    1. 1. Google Web Toolkit (GWT) Yiguang Hu <ul><ul><li>[email_address] </li></ul></ul><ul><ul><li>[email_address] </li></ul></ul><ul><ul><li>[email_address] </li></ul></ul>
    2. 2. Agenda <ul><ul><li>Introduction to AJAX </li></ul></ul><ul><ul><li>What is & Why GWT? </li></ul></ul><ul><ul><li>Building User interface </li></ul></ul><ul><ul><ul><li>GWT Widgets </li></ul></ul></ul><ul><ul><ul><li>Event Handling </li></ul></ul></ul><ul><ul><ul><li>Styling </li></ul></ul></ul><ul><ul><ul><li>Designer </li></ul></ul></ul><ul><ul><li>Interaction With Server </li></ul></ul><ul><ul><ul><li>Remote Procedural Call (RPC) </li></ul></ul></ul><ul><ul><ul><li>JSON, grails </li></ul></ul></ul>
    3. 3. Introduction to AJAX <ul><ul><li>AJAX=Async JavaScript + XML </li></ul></ul>
    4. 6. What is GWT? <ul><ul><li>Java dev framework for complex web </li></ul></ul><ul><ul><li>Java-to-JavaScript compiler </li></ul></ul><ul><ul><li>Designer (widget, event, styling, code gen) </li></ul></ul><ul><ul><li>Development mode </li></ul></ul><ul><ul><li>When app deploy to prod </li></ul></ul><ul><ul><ul><li>compiler translates Java application to browser-compliant JavaScript, CSS, and HTML </li></ul></ul></ul>
    5. 7. GWT setup <ul><ul><li>Install Java/GWT </li></ul></ul><ul><ul><ul><li>env: JAVA_HOME, GWT_HOME </li></ul></ul></ul><ul><ul><li>Use GWT commandline tool </li></ul></ul><ul><ul><li>IDE plugins: intellij, eclipse, Netbean etc </li></ul></ul><ul><ul><li>Install GWT plugin </li></ul></ul><ul><ul><li>Install gwt development plugin for browsers </li></ul></ul><ul><ul><ul><li>IE, Firefox, Safari. </li></ul></ul></ul><ul><ul><ul><li>-No chrome plugin yet </li></ul></ul></ul>
    6. 8. Demo <ul><li>In the beginning… </li></ul>
    7. 9. Why Use Java for AJAX Dev? <ul><ul><li>Static type checking in the Java </li></ul></ul><ul><ul><li>JavaScript dynamic typing </li></ul></ul><ul><ul><li>JavaScript not compiled </li></ul></ul><ul><ul><li>Code prompting/completion </li></ul></ul><ul><ul><li>Automated Java refactoring </li></ul></ul><ul><ul><li>Java-based OO designs </li></ul></ul>
    8. 10. Why GWT? <ul><ul><li>No need to: </li></ul></ul><ul><ul><ul><ul><li>JavaScript </li></ul></ul></ul></ul><ul><ul><ul><ul><li>handle browser incompatibilities </li></ul></ul></ul></ul><ul><ul><ul><ul><li>DOM APIs </li></ul></ul></ul></ul><ul><ul><ul><ul><li>build commonly used Widgets </li></ul></ul></ul></ul><ul><ul><li>Java Tools </li></ul></ul><ul><ul><li>JUnit integration </li></ul></ul><ul><ul><li>Internationalization </li></ul></ul><ul><ul><li>Designer </li></ul></ul>
    9. 11. GWT Architecture JRE Emulation Library (java.lang and java.util) GWT Web UI Class library Class Libraries Java-to-JavaScript Compiler hosted web browser Designer Development tools
    10. 12. GWTApplication Development Process <ul><ul><ul><li>Design with Designer </li></ul></ul></ul><ul><ul><ul><ul><li>Widgets </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Event </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Code generation </li></ul></ul></ul></ul><ul><ul><ul><li>Interact with Server (RPC, JSON) </li></ul></ul></ul>
    11. 13. GWT Widget Gallery
    12. 14. GWT Widget Gallery
    13. 15. GWT Widget Gallery
    14. 16. GWT Widget Gallery
    15. 17. GWT Application Development Process <ul><ul><ul><li>Design with Designer </li></ul></ul></ul><ul><ul><ul><ul><li>Widgets </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Event handling </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Styling </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Code auto generation </li></ul></ul></ul></ul><ul><ul><ul><li>Interact with Server (RPC, JSON) </li></ul></ul></ul>
    16. 18. Demo 2 <ul><li>Do some simple UI design with widgets, event handling, Debugging </li></ul>
    17. 19. Events and Listeners <ul><ul><li>Widgets are event listeners </li></ul></ul><ul><ul><li>Events in GWT use the &quot;listener interface&quot; model </li></ul></ul><ul><ul><ul><li>Define listener interface </li></ul></ul></ul><ul><ul><ul><li>Event Listener implements listener interface </li></ul></ul></ul><ul><ul><ul><li>Event Listener subscribes to a event </li></ul></ul></ul><ul><ul><ul><ul><li>by passing a reference to itself to the widget </li></ul></ul></ul></ul>
    18. 20. Example: Event Listener public class ListenerExample extends Composite implements ClickListener { private FlowPanel fp = new FlowPanel(); private Button b1 = new Button(&quot;Button 1&quot;); public ListenerExample() { setWidget(fp); fp.add(b1); b1.addClickListener(this); } // Event listener method from the ClickListener interface public void onClick(Widget sender) { // handle event: Read input, interact with server, update page }
    19. 21. Remore Procedure Call (RPC)
    20. 22. GWT RPC Plumbing Architecture
    21. 23. Steps for Implementing GWT RPC <ul><ul><li>Write two service interface's (client & server) ‏ </li></ul></ul><ul><ul><ul><li>Synchronous interface </li></ul></ul></ul><ul><ul><ul><li>Asynchronous interface – must pass async. callback object </li></ul></ul></ul><ul><ul><li>Implement the service at the server side </li></ul></ul><ul><ul><ul><li>Service class implements Service interface and extends RemoteServiceServlet class </li></ul></ul></ul><ul><ul><li>Configure the servlet in the web.xml </li></ul></ul><ul><ul><li>Make a call from the client </li></ul></ul>
    22. 24. 1. Write Two Service Interface Files <ul><ul><li>Synchronous interface </li></ul></ul><ul><ul><ul><li>@RemoteServiceRelativePath(”gwtservice&quot;) </li></ul></ul></ul><ul><ul><ul><li>public interface MyHelloService extends RemoteService { </li></ul></ul></ul><ul><ul><ul><li>public String sayHello(String s); </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><li>Asynchronous interface </li></ul></ul><ul><ul><ul><li>// Has to be named as <Synchronous-interface>Async. </li></ul></ul></ul><ul><ul><ul><li>// Has to pass AsyncCallback object as the last parameter. </li></ul></ul></ul><ul><ul><ul><li>// The return type is always void . </li></ul></ul></ul><ul><ul><ul><li>interface MyHelloServiceAsync { </li></ul></ul></ul><ul><ul><ul><li>public void sayHello(String s, AsyncCallback callback ); </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul>
    23. 25. 2. Implement the Service <ul><ul><li>Extends RemoteServiceServlet and implements the service interface </li></ul></ul><ul><ul><ul><li>public class MyHelloServiceImpl extends RemoteServiceServlet </li></ul></ul></ul><ul><ul><ul><ul><ul><li>implements MyHelloService { </li></ul></ul></ul></ul></ul><ul><ul><ul><li>// Provide implementation logic. </li></ul></ul></ul><ul><ul><ul><li>public String sayHello(String s) { </li></ul></ul></ul><ul><ul><ul><li>return &quot;Hello, &quot; + s + &quot;!&quot;; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul>
    24. 26. 4. Make a call from Client <ul><ul><li>Instantiate an client proxy (an object of the type of asynch. service interface) using GWT.create() ‏ </li></ul></ul><ul><ul><li>Create an asynchronous callback object to be notified when the RPC has completed </li></ul></ul><ul><ul><li>Make the call from the client </li></ul></ul>
    25. 27. a. Instantiate Service Interface using GWT.create() ‏ public void menuCommandsayHello(String msg) { MyHelloServiceAsync myhelloService = GWT.create(MyHelloService.class);
    26. 28. b. Make the Call with an asynchronous callback object public void menuCommandsayhello(String msg) { ... // (d) Make the call. Control flow will continue immediately and later // 'callback' will be invoked when the RPC completes. myhelloService.sayHello(msg, new AsyncCallback() { public void onSuccess (Object result) { // update page with server response data } public void onFailure (Throwable caught) { // handle failure } }); }
    27. 29. Demo 3 <ul><li>Interacting with Server through RPC </li></ul>
    28. 30. Remote Procedure Call (RPC) Sub-topic: Serializable Types
    29. 31. Remote Procedure Call (RPC) Sub-topic: Handling Exceptions
    30. 32. Handling Exceptions <ul><ul><li>Making RPCs opens up various possible errors </li></ul></ul><ul><ul><ul><li>Networks fail, servers crash, and problems occur while processing a server call </li></ul></ul></ul><ul><ul><li>GWT lets you handle these conditions in terms of Java exceptions </li></ul></ul><ul><ul><li>RPC-related exceptions </li></ul></ul><ul><ul><ul><li>Checked exceptions </li></ul></ul></ul><ul><ul><ul><li>Unexpected exceptions </li></ul></ul></ul>
    31. 33. Checked Exceptions <ul><ul><li>Service interface methods support throws declarations to indicate which exceptions may be thrown back to the client from a service implementation </li></ul></ul><ul><ul><li>Callers should implement AsyncCallback.onFailure(Throwable) to check for any exceptions specified in the service interface </li></ul></ul>
    32. 34. Unchecked Exceptions <ul><ul><li>An RPC may not reach the service implementation at all. This can happen for many reasons: </li></ul></ul><ul><ul><ul><li>the network may be disconnected </li></ul></ul></ul><ul><ul><ul><li>a DNS server might not be available </li></ul></ul></ul><ul><ul><ul><li>the HTTP server might not be listening </li></ul></ul></ul><ul><ul><li>InvocationException is passed to your implementation of AsyncCallback.onFailure(Throwable) ‏ </li></ul></ul>
    33. 35. Other ways to interact with Server <ul><li>JSON </li></ul><ul><li>Cross-site JSON </li></ul><ul><li>Grails integration </li></ul>
    34. 36. JSON-Creating overlay type <ul><li>import; </li></ul><ul><li>class StockData extends JavaScriptObject { // [1] </li></ul><ul><li>// Overlay types always have protected, zero argument constructors. </li></ul><ul><li>protected StockData() {} // [2] </li></ul><ul><li>// JSNI methods to get stock data. </li></ul><ul><li>public final native String getSymbol() /*-{ return this.symbol; }-*/; // [3] </li></ul><ul><li>public final native double getPrice() /*-{ return this.price; }-*/; </li></ul><ul><li>public final native double getChange() /*-{ return this.change; }-*/; </li></ul><ul><li>// Non-JSNI method to return change percentage. // [4] </li></ul><ul><li>public final double getChangePercent() { </li></ul><ul><li>return 100.0 * getChange() / getPrice(); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
    35. 37. JSON-Convert JSON String into JavaScript object <ul><li>import; </li></ul><ul><li>private final native JsArray<StockData> asArrayOfStockData(String json) /*-{ </li></ul><ul><li>return eval(json); </li></ul><ul><li>}-*/; </li></ul>
    36. 38. JSON-Requesting JSON <ul><li>import; </li></ul><ul><li>import; </li></ul><ul><li>import; </li></ul><ul><li>import; </li></ul><ul><li>import; </li></ul><ul><li>import; </li></ul><ul><li>// Send request to server and catch any errors. </li></ul><ul><li>private static final String JSON_URL = GWT.getModuleBaseURL() + &quot;stockPrices?q=&quot;; </li></ul><ul><li>RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, url); </li></ul><ul><li>try { </li></ul><ul><li>Request request = builder.sendRequest(null, new RequestCallback() { </li></ul><ul><li>public void onError(Request request, Throwable exception) { </li></ul><ul><li>displayError(&quot;Couldn't retrieve JSON&quot;); </li></ul><ul><li>} </li></ul><ul><li>public void onResponseReceived(Request request, Response response) { </li></ul><ul><li>if (200 == response.getStatusCode()) { </li></ul><ul><li>updateTable(asArrayOfStockData(response.getText())); </li></ul><ul><li>} else { </li></ul><ul><li>displayError(&quot;Couldn't retrieve JSON (&quot; + response.getStatusText() </li></ul><ul><li>+ &quot;)&quot;); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>}); </li></ul><ul><li>} catch (RequestException e) { </li></ul><ul><li>displayError(&quot;Couldn't retrieve JSON&quot;); </li></ul><ul><li>} </li></ul>
    37. 39. ? <ul><ul><li>Yiguang Hu </li></ul></ul><ul><ul><li>[email_address] </li></ul></ul>