An overview of the google web toolkit gwt
1 / 46

An Overview of the Google Web Toolkit (GWT) - PowerPoint PPT Presentation

  • Uploaded on

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 <insert yet another buzzword here>

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about ' An Overview of the Google Web Toolkit (GWT)' - ulla

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
An overview of the google web toolkit gwt

An Overview of the Google Web Toolkit (GWT)

November 15, 2006


  • Who am I?

  • My development experience: C++, Java, .NET

  • Why GWT?

Why google webtoolkit
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)

What is ajax
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

  • Everybody loves javascript just not me
    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

    Ajax advantages
    AJAX Advantages

    • Sexy

    • Looks great on a resume!

    • Lends itself to great pick up lines

    Real ajax advantages
    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

  • Ajax disadvantages
    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)

    Frameworks frameworks frameworks
    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

    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?

    So what is google webtoolkit
    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.”

    • Conceptually similar to Swing but HTML specific with web remoting capabilities

    • Includes UI Widgets/Components, RPC mechanisms and native Javascript support


    • 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?)


    • 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

    What where
    What? Where?

    • Can be downloaded from

    • 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

  • Archive contents
    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

    Layout of significant packages
    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

  • Getting started developing with gwt
    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

    Project creator
    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.

  • Application creator
    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


    Project structure
    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.)

    Modes of operandi
    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

    The application
    The Application

    • Synonymous with C/C++, Java and C# main methods

    • Implementation of the Module entry point

      public interface EntryPoint {

      public abstract void onModuleLoad();


    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

    Application example
    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!");









    User client ui package
    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

    More detailed sample
    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);





    Event handling
    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

  • Clicklistener sample
    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…





    Service remoting
    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

    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

    Sample User Story:

    • User enters time which is validated and formatted (data entry validation)

    Create client side interface
    Create Client-side Interface

    • Extends GWT RemoteService

    • Regular Java interface - nothing special

      publicinterface TimeFormatService extends RemoteService


      publicabstract String formatTime(String unformatted);


    Server side servlet
    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

    Servlet code
    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;



    Aysnchronous interface
    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);


    Making the call
    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

    What this looks like
    What this looks like

    TimeFormatServiceAsync timeService = (TimeFormatServiceAsync) GWT.create(TimeFormatService.class);

    ServiceDefTarget endpoint = (ServiceDefTarget) timeService;

    String moduleRelativeURL = GWT.getModuleBaseURL() + "time";


    AsyncCallback callback = new AsyncCallback() {

    publicvoid onFailure(Throwable object)

    { // Failure path


    publicvoid onSuccess(Object object)

    { // Success path



    timeService.formatTime(value, callback);

    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

    Wrapping up
    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