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


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

An Overview of the Google Web Toolkit (GWT)

November 15, 2006


Introduction

Introduction

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


    An overview of the google web toolkit gwt

    So what can we use to address these disadvantages?


    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?


    An overview of the google web toolkit gwt

    In Java!


    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.” 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

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


    An overview of the google web toolkit gwt

    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

    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

    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

        com.daugherty.gwtdemo.client.Application


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

    else

    label.setText("");

    }

    });

    RootPanel.get("slot1").add(button);

    RootPanel.get("slot2").add(label);

    }

    }


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

    panel.add(textbox);

    display.add(panel);

    display.add(createButtonPanel());

    RootPanel.get().add(display);


    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…

      }

      }

      };

      myButton.addClickListener(listener);


    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


    Service plumbing diagram

    Service “Plumbing” Diagram


    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


    An overview of the google web toolkit gwt

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

    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

    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


    An overview of the google web toolkit gwt

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


    An overview of the google web toolkit gwt

    Questions, Comments, Suggestions?


    An overview of the google web toolkit gwt

    Beer???


    An overview of the google web toolkit gwt

    Thank You!!!


  • Login