an overview of the google web toolkit (gwt)
DESCRIPTION
An Overview of the Google Web Toolkit (GWT). November 15, 2006. Introduction. Who am I? My development experience: C++, Java, .NET Why GWT?. Why Google Webtoolkit?. Web-based application framework AJAX enabled Web 2.0 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/1.jpg)
1
An Overview of the An Overview of the Google Web Toolkit (GWT)Google Web Toolkit (GWT)November 15, 2006
![Page 2: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/2.jpg)
2
IntroductionIntroduction
• Who am I?
• My development experience: C++, Java, .NET
• Why GWT?
![Page 3: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/3.jpg)
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)
![Page 4: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/4.jpg)
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
![Page 5: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/5.jpg)
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
![Page 6: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/6.jpg)
6
AJAX Advantages• Sexy
• Looks great on a resume!
• Lends itself to great pick up lines
![Page 7: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/7.jpg)
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
![Page 8: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/8.jpg)
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)
![Page 9: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/9.jpg)
9
So what can we use to address these disadvantages?
![Page 10: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/10.jpg)
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
![Page 11: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/11.jpg)
11
So what does Google do?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?
![Page 12: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/12.jpg)
12
In Java!
![Page 13: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/13.jpg)
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
![Page 14: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/14.jpg)
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?)
![Page 15: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/15.jpg)
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
![Page 16: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/16.jpg)
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
![Page 17: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/17.jpg)
17
Archive ContentsArchive 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
![Page 18: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/18.jpg)
18
Layout of Significant PackagesLayout 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
![Page 19: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/19.jpg)
19
Getting Started Developing with Getting Started Developing with GWTGWT
• First things first, we need an Eclipse project:
1. Manually create a directory in your workspace2. Create project files with projectCreator3. Create application with applicationCreator4. Import project into Workspace5. Grip it and rip it! …err, run the app
![Page 20: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/20.jpg)
20
Project CreatorProject 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.
![Page 21: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/21.jpg)
21
Application CreatorApplication 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 Foocom.daugherty.gwtdemo.client.Application
![Page 22: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/22.jpg)
22
Project StructureProject 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.)
![Page 23: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/23.jpg)
23
Modes of OperandiModes 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
![Page 24: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/24.jpg)
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();
}
![Page 25: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/25.jpg)
25
What is a Module?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
![Page 26: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/26.jpg)
26
Application ExampleApplication Examplepublic 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); }}
![Page 27: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/27.jpg)
27
user.client.ui Packageuser.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
![Page 28: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/28.jpg)
28
More Detailed SampleMore Detailed SampleVerticalPanel display = new VerticalPanel();
// Add a labelpanel.add(new Label("Time:"));
// Create a text boxtextbox = new TextBox();textbox.setSize("75px", "25px");
textbox.addFocusListener(createFocusListener());
panel.add(textbox);display.add(panel);display.add(createButtonPanel());RootPanel.get().add(display);
textbox.setFocus(true);
• HorizontalPanel panel = new HorizontalPanel();• panel.setSpacing(2);••
![Page 29: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/29.jpg)
29
Event HandlingEvent 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
![Page 30: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/30.jpg)
30
ClickListener SampleClickListener 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);
![Page 31: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/31.jpg)
31
Service RemotingService 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
![Page 32: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/32.jpg)
32
Service “Plumbing” DiagramService “Plumbing” Diagram
![Page 33: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/33.jpg)
33
So how do we do this?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
![Page 34: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/34.jpg)
34
Sample User Story:
• User enters time which is validated and formatted (data entry validation)
![Page 35: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/35.jpg)
35
Create Client-side InterfaceCreate Client-side Interface• Extends GWT RemoteService• Regular Java interface - nothing special
public interface TimeFormatService extends RemoteService{
public abstract String formatTime(String unformatted);
}
![Page 36: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/36.jpg)
36
Server-side ServletServer-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
![Page 37: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/37.jpg)
37
Servlet CodeServlet Codepublic 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;}
}
![Page 38: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/38.jpg)
38
Aysnchronous InterfaceAysnchronous 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);
}
![Page 39: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/39.jpg)
39
Making the CallMaking 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
![Page 40: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/40.jpg)
40
What this looks likeWhat this looks likeTimeFormatServiceAsync 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);
![Page 41: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/41.jpg)
41
Well? Did it work?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
![Page 42: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/42.jpg)
42
Debugging Sample With IDE
![Page 43: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/43.jpg)
43
Wrapping UpWrapping 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
![Page 44: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/44.jpg)
44
Questions, Comments, Suggestions?
![Page 45: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/45.jpg)
45
Beer???
![Page 46: An Overview of the Google Web Toolkit (GWT)](https://reader034.vdocuments.site/reader034/viewer/2022050806/56815d4e550346895dcb5717/html5/thumbnails/46.jpg)
46
Thank You!!!