Download Why Google Webtoolkit?

An Overview of the
Google Web Toolkit (GWT)
November 15, 2006
1
Introduction
• Who am I?
• My development experience: C++, Java, .NET
• Why GWT?
2
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)
3
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
4
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
5
AJAX Advantages
• Sexy
• Looks great on a resume!
• Lends itself to great pick up lines
6
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
7
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)
8
So what can we use to address these
disadvantages?
9
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
10
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?
11
In Java!
12
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
13
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?)
14
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
15
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
16
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
17
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
18
Getting Started Developing with GWT
•
First things first, we need an Eclipse project:
1.
2.
3.
4.
5.
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
19
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.
20
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
21
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.)
22
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
23
The Application
• Synonymous with C/C++, Java and C# main
methods
• Implementation of the Module entry point
public interface EntryPoint {
public abstract void onModuleLoad();
}
24
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
25
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);
}
}
26
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
27
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);
28
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
29
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);
30
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
31
Service “Plumbing” Diagram
32
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
33
Sample User Story:
• User enters time which is validated and
formatted (data entry validation)
34
Create Client-side Interface
• Extends GWT RemoteService
• Regular Java interface - nothing special
public interface TimeFormatService extends
RemoteService
{
public abstract String formatTime(String
unformatted);
}
35
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
36
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;
}
}
37
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);
}
38
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
39
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);
40
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
41
Debugging Sample With IDE
42
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
43
Questions, Comments, Suggestions?
44
Beer???
45
Thank You!!!
46