1. 1 An Overview of the Google Web Toolkit (GWT) November 15, 2006

2. 2 Introduction Who am I? My development experience: C++, Java,.NET Why GWT?

3. 3 Why Google Webtoolkit? Web-based application framework AJAX enabled Web 2.0 Implement an HTML User Interface in Java Compiles to: HTML and Javascript AJAX-enables app using a binary remoting protocol (proprietary Google technology)

4. 4 What is AJAX? Asyncrhonous Xml And Javascript Centered around the XMLHttpRequest object AJAX request types: Fire and forget (doPost in Servlet parlance) Asynchronous (request/callback) Enables Event Handling paradigm/semantics Implemented using Javascript

5. 5 Everybody loves Javascript - Just not me Originally created by Netscape Now based on ECMA Spec Not a strongly typed language Not fully dynamically typed either (think Ruby) Browser implementations are inconsistent Fragile and difficult to debug (I write buggy code) Unit testing Javascript? jsUnit

6. 6 AJAX Advantages Sexy Looks great on a resume! Lends itself to great pick up lines

7. 7 Real AJAX Advantages Finer grained requests/responses Avoid full-page refreshes to update data Just-in-time data retrieval Reuse existing server-side logic/components Data validations in native language Richer UI functionality

8. 8 AJAX Disadvantages Implemented differently by browser vendors Javascript not an OO language Inheritance, Polymorphism is possible, but difficult Encapsulation using Javascript objects works Knowledge of DOM to manipulate elements (really it’s a Javascript issue, not really AJAX)

9. 9 So what can we use to address these disadvantages?

10. 10 Frameworks, Frameworks, Frameworks Scriptaculous, DWR, home-grown in-house etc. No clear leader, definitely no standard Java developers are inherently averse to Javascript – that’s the reality (or is it just me?) Provide tested code and crosss-browser support

11. 11 So what does Google do? Recognize these issues - they develop webapps too! Ask the question: How should a Java developer develop sexy web-based AJAX-enabled applications?

12. 12 In Java!

13. 13 So what is Google Webtoolkit? A Rich Client Architecture for developing rich internet apps How Google describes it: “Google Web Toolkit (GWT) is a Java software development framework that makes writing AJAX applications like Google Maps and Gmail easy for developers who don't speak browser quirks as a second language.” http://code.google.com/webtoolkit http://code.google.com/webtoolkit Conceptually similar to Swing but HTML specific with web remoting capabilities Includes UI Widgets/Components, RPC mechanisms and native Javascript support

14. 14 Swing UI’s based on Panels and Layout Managers UI Widgets for trees, lists, text, labels etc. Event Handling (Action Listeners, Keyboard Handling, Mouse and Focus events) Swing’s implementation of UI is based on UI Delegate (pattern?)

15. 15 GWT Widgets include the usual suspects - text, passwords, tables and HTML abstractions Layouts based on Panels (vertical, horizontal, deck, dock, scroll, tab etc.) Event Handlers/Listeners (Change, Click, Focus, Keyboard, Mouse, Scroll, Tab) Also utilizes the UI Delegate pattern

16. 16 What? Where? Can be d ownloaded from http://code.google.com/webtoolkit http://code.google.com/webtoolkit Supported platforms include: Windows, Linux (GTK+) and Mac OSX OSS-friendly license: UI Widgets: Apache 2.0 GWT Compiler: Proprietary non-distributable license Initial support for Eclipse

17. 17 Archive Contents Command-line utilities: projectCreator, applicationCreator, i18nCreator, junitCreator Platform Development Jar: gwt-dev-xxx.jar – where xxx is win32, linux, mac Deployment Jar: gwt-user.jar Sample Applications API Documentation

18. 18 Layout of Significant Packages core.client: GWT (uncaught exception handler) JavascriptException EntryPoint Interface user.client – Browser history, DOM manipulation, event handling etc user.client.rpc – Client side implementation classes of RPC (IsSerializable, AsyncCallback) user.client.ui – UI Widgets, Panels and other classes to support GUI

19. 19 Getting Started Developing with GWT First things first, we need an Eclipse project: 1.Manually create a directory in your workspace 2.Create project files with projectCreator 3.Create application with applicationCreator 4.Import project into Workspace 5.Grip it and rip it! …err, run the app

20. 20 Project Creator projectCreator, creates specific project artifacts Src/bin directories.project file.classpath file In the case of Eclipse, workspace folder must exist already: projectCreator -ant Foo -eclipse Foo Ant build file creates targets for compile, package and clean.

21. 21 Application Creator Command line utility to generate application artifacts: Default client packages Main class, entry point implementation Module XML file (more later).launch file for Hosted Mode (debug mode) applicationCreator –eclipse Foo com.daugherty.gwtdemo.client.Application

22. 22 Project Structure com/example/cal - The project root package contains module XML files com/example/cal/client - Client-side source files and subpackages com/example/cal/server - Server-side code and subpackages com/example/cal/public - Static resources that can be served publicly (think HTML, images etc.)

23. 23 Modes of Operandi GWT supports to modes: Hosted - uses a built-in Tomcat instance for run-time debug environment Web - compiled application deployed to a production (or non-production as the case may be) environment

24. 24 The Application Synonymous with C/C++, Java and C# main methods Implementation of the Module entry point public interface EntryPoint { public abstract void onModuleLoad(); }

25. 25 What is a Module? An XML configuration Specifies an entry point - an application class that renders to HTML Specifies servlet mapping for Hosted Mode May inherit from other Modules

26. 26 Application Example public class Application implements EntryPoint { public void onModuleLoad() { final Button button = new Button("Click me"); final Label label = new Label(); button.addClickListener(new ClickListener() { public void onClick(Widget sender) { if (label.getText().equals("")) label.setText("Hello World!"); else label.setText(""); } }); RootPanel.get("slot1").add(button); RootPanel.get("slot2").add(label); }

27. 27 user.client.ui Package Contains basic UI abstractions: TextBox, PasswordTextBox, Grid, Label, Listbox, MenuBar, MenuItem, Tree, HTMLTable All UI elements descend from Widget Panel abstractions include: Panel, VerticalPanel, HorizontalPanel, DeckPanel, DockPanel, RootPanel Panels are composites, support whole/part hierarchies

28. 28 More Detailed Sample VerticalPanel display = new VerticalPanel(); HorizontalPanel panel = new HorizontalPanel(); panel.setSpacing(2); // Add a label panel.add(new Label("Time:")); // Create a text box textbox = new TextBox(); textbox.setSize("75px", "25px"); textbox.addFocusListener(createFocusListener()); textbox.setFocus(true); panel.add(textbox); display.add(panel); display.add(createButtonPanel()); RootPanel.get().add(display);

29. 29 Event Handling GWT supports a wide selection of event handling interfaces and semantics, samples include: KeyboardListener MouseListener ClickListener SourceClickListeners And many many more - seriously, tons more. UI elements have methods for adding and removing the event handlers

30. 30 ClickListener Sample An interface used for click events. Buttons etc. ClickListener listener = new ClickListener() { public void onClick(Widget sender) { String value = textbox.getText(); if (value != null && !"".equals(value)) { // do something with value… } }; myButton.addClickListener(listener);

31. 31 Service Remoting Proprietary binary remoting protocol. AJAX under the covers Server-side service target is a Servlet Hosted Mode deployed in Module XML Repetitive steps to create a Service - opportunity to refactor/abstract and write some “cool” OO code Steps are well defined

32. 32 Service “Plumbing” Diagram

33. 33 So how do we do this? Create a client-side interface to represent the service Server-side abstraction is a Servlet - extends GWT’s RemoteServiceServlet Create an asynchronous interface – GWT uses this to generate the proxy Make the call

34. 34 Sample User Story: User enters time which is validated and formatted (data entry validation)

35. 35 Create Client-side Interface Extends GWT RemoteService Regular Java interface - nothing special public interface TimeFormatService extends RemoteService { public abstract String formatTime(String unformatted); }

36. 36 Server-side Servlet Lives in app.server package structure This is different than the client package - “real” Java code, does not get compiled by the GWT compiler Standard Servlet Extends RemoteServiceServlet (GWT base class for remote services) Implements client-side interface Hosted mode testing by mapping in Module XML

37. 37 Servlet Code public class TimeFormatServiceImpl extends RemoteServiceServlet implements TimeFormatService { public String formatTime(String unformatted) { String result = ""; if (unformatted != null) { Time time = TimeFactory.createTime(unformatted); result = time.toString(); } return result ; }

38. 38 Aysnchronous Interface GWT generates remote proxy from this Interface that mimics the client-side interface Subtle differences This is the actual wiring between client and server - the underpinnings of GWT’s remoting public interface TimeFormatServiceAsync { public abstract void formatTime(String unformatted, AsyncCallback callback); }

39. 39 Making the Call Create an instance of the Service Proxy - GWT.create() This is the weird part: Cast the client interface to a ServiceDefTarget Set the Module Entry point on the above target (URL) Create Asynchronous callback - handles onSuccess and onFailure Call client-side remote proxy passing the arguments and the callback

40. 40 What this looks like TimeFormatServiceAsync timeService = (TimeFormatServiceAsync) GWT.create(TimeFormatService.class); ServiceDefTarget endpoint = (ServiceDefTarget) timeService; String moduleRelativeURL = GWT.getModuleBaseURL() + "time"; endpoint.setServiceEntryPoint(moduleRelativeURL); AsyncCallback callback = new AsyncCallback() { public void onFailure(Throwable object) { // Failure path } public void onSuccess(Object object) { // Success path } }; timeService.formatTime(value, callback);

41. 41 Well? Did it work? Hosted mode allows rapid development feedback loop - with a caveat. Supports Hosted Mode debugging through Eclipse Full debugging capabilities of the IDE

42. 42 Debugging Sample With IDE

43. 43 Wrapping Up Full UI abstractions for Web applications Allows for remoting of Objects that implement IsSerializable Surprisingly mature API Well supported Finally! Java code that generates to a Web GUI Much much more than has been shown here

44. 44 Questions, Comments, Suggestions?

45. 45 Beer???

46. 46 Thank You!!!