An overview of the google web toolkit gwt
This presentation is the property of its rightful owner.
Sponsored Links
1 / 46

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


  • 90 Views
  • Uploaded on
  • Presentation posted in: General

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>

Download Presentation

An Overview of the Google Web Toolkit (GWT)

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)

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>

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

  • 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

    • 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

    • Sexy

    • Looks great on a resume!

    • Lends itself to great pick up lines


    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

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


    So what can we use to address these disadvantages?


    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?

    • Recognize these issues - they develop webapps too!

    • Ask the question:

      • How should a Java developer develop sexy web-based AJAX-enabled applications?


    In Java!


    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


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


    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


    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


  • 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

    • 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

    • 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

    • 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

    • 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


    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

    • 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

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

    • 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

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

    }

    }


    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

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


    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

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


    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


    Service “Plumbing” Diagram


    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

    • Extends GWT RemoteService

    • Regular Java interface - nothing special

      publicinterface TimeFormatService extends RemoteService

      {

      publicabstract String formatTime(String unformatted);

      }


    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

    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

    • 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

    • 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

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


    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


    Debugging Sample With IDE


    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


    Questions, Comments, Suggestions?


    Beer???


    Thank You!!!


  • Login