An Overview of the Google Web Toolkit (GWT)

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

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

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

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. 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. AJAX Advantages • Sexy • Looks great on a resume! • Lends itself to great pick up lines

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. 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. So what can we use to address these disadvantages?

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. 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. In Java!

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 • Conceptually similar to Swing but HTML specific with web remoting capabilities • Includes UI Widgets/Components, RPC mechanisms and native Javascript support

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. 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. What? Where? • Can be downloaded from 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. 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. 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. Getting Started Developing with GWT • First things first, we need an Eclipse project: • Manually create a directory in your workspace • Create project files with projectCreator • Create application with applicationCreator • Import project into Workspace • Grip it and rip it! …err, run the app

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. 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. 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. 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. 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. 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. Application Example publicclass Application implements EntryPoint { publicvoid onModuleLoad() { final Button button = new Button("Click me"); final Label label = new Label(); button.addClickListener(new ClickListener() { publicvoid 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. 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. 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. 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. ClickListener Sample • An interface used for click events. • Buttons etc. ClickListener listener = new ClickListener() { publicvoid onClick(Widget sender) { String value = textbox.getText(); if (value != null && !"".equals(value)) { // do something with value… } } }; myButton.addClickListener(listener);

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. Service “Plumbing” Diagram

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. Sample User Story: • User enters time which is validated and formatted (data entry validation)

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

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. Servlet Code publicclass 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. 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 publicinterface TimeFormatServiceAsync { publicabstractvoid formatTime(String unformatted, AsyncCallback callback); }

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. 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() { publicvoid onFailure(Throwable object) { // Failure path } publicvoid onSuccess(Object object) { // Success path } }; timeService.formatTime(value, callback);

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. Debugging Sample With IDE

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. Questions, Comments, Suggestions?

45. Beer???

46. Thank You!!!