Gwt app start to finish

Google Confidential and Proprietary

Course materials

All course materials are available on USB flash drive

Copy the following from the USB drive to your computer• Eclipse 3.6.2 (if you don’t already have it)

• gpe-2.3-alpha-eclipse3.6.zip

• gwt-tutorial.zip

Install zipped update sites now to save time in Lab 1

Google Confidential and Proprietary 2

GWT App start to finishA hands-on tutorial building GWT using GPE

Presented by:

Rajeev DayalEric ClaybergDan Rubel

Client Logo

Agenda

Introduction

GPE Overview

Google APIs

GWT Overview

GWT and GPE

Advanced Topics

GWT = Google Web Toolkit

GPE = Google Plugin for Eclipse

Introduction

Rajeev Dayal

Eric Clayberg Dan Rubel

Course materials

Install zipped update sites now to save time in Lab 1

GPE OverviewA brief introduction to Google Plugin for Eclipse

Google Plugin for Eclipse

GoogleAPIs

Google Plugin for Eclipse

Wizards, Quick Fixes, Launching, Optimization, Deployment

GWT Designer

Robust visual editing of GWT UI code

Development Cycle

HitRefresh

QuickTest

WriteCode

GPE Dev Mode

Debug in GPE Dev Mode

Compile for production

Your app running here.No plugins.

Source files:

Code, CSS, Images, Resources, …

GWT Compiler

Optimize with Speed Tracer

One click deploy to AppEngine

Google APIs OverviewA brief introduction to Google APIs

Standard access to Google services

Google APIs

Standard access to Google services• Templates for expressing data

like JSON, XML, ...

• Flexible calling styles JSON-RPC and REST

• Configurable interceptors for common things authorization, caching, logging, ...

• Auto-generated client libraries Java, Python, JavaScript

Google APIs

http://code.google.com/more/table/

Google APIs

Many APIs available• Ads, Analytics, Apps, Books, Buzz, Calendar, Contacts, ...

http://code.google.com/more/

Google API Documentation

Select an API and explore

Google API Documentation

Documentation

Javadoc

http://code.google.com/apis/gdata/javadoc/

Importing Google APIs

Import an API into your Eclipse project• Click on “Import Google APIs...”

• Select the desired API and click “Finish”

Import

Google API Documentation (alternate)

Alternate path to documentation• Click on “Import Google APIs...”

• Click “API documentation”

Book APIs

Java packages

• com.google.gdata.client.books.* BookService VolumeQuery

• com.google.gdata.data.books.* BooksCategory BooksLink BooksNamespace VolumeFeed VolumnEntry ...

Code to search book content ...

Book Search Example

• Application name = [company-id]-[app-name]-[app-version]

Initialize the service

• Book search URL

• Search text

• Only return results which have previews available

Build the query

Unique to each service

• Search criteria

• Search result

Execute the query

• Show the result to the user

Display the result

Other Google API resources

Samples• http://code.google.com/p/gdata-java-client/downloads/list

Other tools• http://code.google.com/apis/explorer/

• http://googlecodesamples.com/oauth_playground/

• http://code.google.com/apis/chart/docs/chart_playground.html

Lab 1Command Line Book Search

Course materials

Installation

Unzip Eclipse 3.6.2

Install GPE 2.3 Alpha• Select “Help > Install New Software”• Click “Add”• Click “Archive”• Locate “gpe-2.3-alpha-eclipse3.6.zip”

Install GWT Tutorial• Repeat for “gwt-tutorial.zip”

Must have network connection

Calculating requirements takes time

Load Lab

Select “Window > Show GWT Tutorial”

Select “Lab 1”

Click “Import” toolbar button

Import Google APIs

Select “BookSearch” project

Click “Import Google APIs” toolbar button

Select “Books” and click “Finish”

Edit Search

public static void main(String[] args) throws Exception { // Get the search text String searchText = "EclipseCon";

if (args != null && args.length > 0) { String firstArg = args[0]; if (firstArg != null) { firstArg = firstArg.trim(); if (firstArg.length() > 0) { searchText = firstArg; } } }

... etc ...

Modify the search term

BookSearchCmdLine.java

Right click on “BookSearchCmdLine” file

Select “Run As > Java Application”

GWT OverviewA brief introduction to the Google Web Toolkit

GWT in 10 seconds

AsynchronousJavaScriptAndXML++

GWT overview

Java GWT Compiler

JavaScript(optimized)

GWT overview

Advantages• Write web apps in Java

• Compiles to optimized JavaScript (small and fast)

• Easy (and efficient) RPC

• Open source compiler

• Cross browser support... just works

Plugins

Can you find the bug?

Catch errors at compile time

Used at Google

AdWords, AdSense, Maps, Docs, Groups, ...

Rich ecosystem

Utilities gwt-dnd, gwt-log, gwt-voices, gwt-fx

Mobile gwt-mobile-toolkit

Rich ecosystem

www.gwtmarketplace.com

GWT UI Gallery

GWT and GPEGWT development with Google Plugin for Eclipse

Creating a new GWT project

Click the “new web application” button and fill in the fields

Importing Google APIs

Select a project and click “Import Google APIs” toolbar button

Project structure

• Client code• Client only code• Restricted library• Java code compiled to JavaScript

• Server code• Server only code• Full Java library

• Shared code• Restricted library• Code available to both client and server

• Google APIs• Server only code

UiBinder

File > New > Other...

UiBinder

Associated source files• SearchPanel.ui.xml - layout

• SearchPanel.java - behavior

UiBinder

<ui:UiBinder xmlns:ui="... etc ..."> <g:HTMLPanel width="600px" height="100%"> Please enter a search term: <g:AbsolutePanel width="600px" height="250px"> <g:at left="0" top="0"> <g:TextBox ui:field="searchText" ... >EclipseCon</g:TextBox> </g:at> <g:at left="514" top="0"> <g:Button ui:field="searchButton" ... >Search</g:Button> </g:at> <g:at left="0" top="27"> <g:ListBox ui:field="resultsList" ...="10"/> </g:at> </g:AbsolutePanel> ... etc ...

public class SearchPanel extends Composite { interface SearchPanelUiBinder extends UiBinder<Widget, SearchPanel> { } private static SearchPanelUiBinder uiBinder = GWT.create(SearchPanelUiBinder.class); @UiField TextBox searchText; @UiField Button searchButton; @UiField ListBox resultsList; ... @UiHandler("searchButton") void onSearchButtonClick(ClickEvent event) { search(); }

SearchPanel.ui.xml

SearchPanel.java

GWT RPC

@RemoteServiceRelativePath("search")public interface BookSearch extends RemoteService { BookSearchResult search(String searchText);}

search(“some-search-text”)

BookSearchResult

Client Server

• Send / receive Plain Old Java Objects (POJO)

• Versioned to help keep client & server in sync

• Serialized, JSON, or XML data formats

GWT RPC

public interface BookSearchAsync { void search(String searchText, AsyncCallback<BookSearchResult> callback);}

Client

GWT RPC

Client

GWT RPC

public class SearchPanel extends Composite { private final BookSearchAsync bookSearch = GWT.create(BookSearch.class);}

Client

GWT RPC

public class SearchPanel extends Composite { private final BookSearchAsync bookSearch = GWT.create(BookSearch.class);}

Client

GWT RPC

public class SearchPanel extends Composite { private final BookSearchAsync bookSearch = GWT.create(BookSearch.class);

void search() { bookSearch.search(searchText.getText(), new AsyncCallback<BookSearchResult>() { public void onSuccess(BookSearchResult results) { // show search results } public void onFailure(Throwable caught) // report error to user } }); }}

Client

GWT RPC

public class BookSearchImpl extends RemoteServiceServlet implements BookSearch {

Server

GWT RPC

public BookSearchResult search(String input) {

Server

GWT RPC

public BookSearchResult search(String input) {

... perform search ... // Return the result BookSearchResult result = new BookSearchResult(); result.setBooks(books.toArray(new Book[books.size()])); return result; }}

Server

Lab 2GWT UI Book Search

Load Lab

Select “Window > Show GWT Tutorial”

Select “Lab 2”

Click “Import” toolbar button

Import Google APIs

Select “BookSearch” project

Click “Import Google APIs” toolbar button

Select “Books” and click “Finish”

Edit UI

Double-click on “SearchPanel.ui.xml”

Click on “Design” tab

Add Event Handler

Right-click on “resultList” widget

Select “Add Event Handler > onDoubleClick”

Event Handler Behavior

Implement the event handler to open a new browser tab showing the content

Event Handler Behavior

UI Element UI Event

@UiHandler("resultsList")void onResultsListDoubleClick(DoubleClickEvent event) { int index = resultsList.getSelectedIndex(); if (index != -1 && currentResults != null) { Book book = currentResults.getBooks()[index]; Window.open(book.getPreviewHref(), "_blank", ""); }}

Open new browser tab Get selected book

Right click on “BookSearch” project

Select “Run As > Web Application”

Opens “Development Mode” view

Double-click on URL in “Development Mode” view

Enter search term

Click “Search” button

Check your work

Select “Lab 2 - GWT Book Search (complete)”

Click “Compare” toolbar button

AdvancedAdvanced GWT Topics

Hooks in to low-level instrumentation in the browser to provide information about:• paint events

• CSS style recalculation

• layout events

• general DOM events

• network traffic

Why does such detailed information matter?• UIs are complex, and they take time to lay out - users can tell

• It’s easy to write pathological UI code and not know it

// This line invalidates layout.elementA.className = 'foo';

// This line requires layout to be up to date.var aWidth = elementA.offsetWidth;

// Invalidates layout again.elementB.className = 'bar';

// Requires layout to be up to datevar bWidth = elementB.offsetWidth;

Instead..

// These lines invalidate layout.elementA.className = 'foo';elementB.className = 'bar';

// This line requires layout to be up to date.var aWidth = elementA.offsetWidth;

// Layout is already up to date; nothing to dovar bWidth = elementB.offsetWidth;

Launch SpeedTracer

From Chrome...

Or from Eclipse...

ClientBundle

Ensures that an application’s resources are perfectly cacheable • the filename of the resource is based on a MD5 hash of the file’s contents

• configure your web server to cache files that match “*.cache.*” until the sun explodes

Reduces HTTP round-trips for resources• inline resources into compiled JS with data:// URLs

Without ClientBundle... slow to load

A Few Resource Types..

TextResource• either intern strings into compiled JavaScript, or place all strings into a single

file that’s fetched at runtime

• @Source(“foo.txt”), textResource.getText()

CssResource • constants

In CSS: @def small 1px; border: small solid black; In Java: cssResource.small()

• conditional CSS compile-time: @if user.agent ie6 opera { // css rules } runtime: @if (com.module.Foo.staticBooleanFunction()) { // css rules }

• runtime substitution @eval userBackground com.module.UserPrefs.getUserBackground(); div

{ background: userBackground; }

• other cool stuff: minification, obfuscation, value functions, image spriting.. 81

ImageResource in ClientBundle

∑ Separate Bundled

20,558 bytes

6,824 bytes

11 separate images

1 bundled image

Code Splitting

Defer downloading portions of your application

public class Hello implements EntryPoint { public void onModuleLoad() { Button b = new Button("Click me", new ClickHandler() { public void onClick(ClickEvent event) {

Window.alert("Hello, AJAX");

RootPanel.get().add(b); }}

Code Splitting

Defer downloading portions of your application

public class Hello implements EntryPoint { public void onModuleLoad() { Button b = new Button("Click me", new ClickHandler() { public void onClick(ClickEvent event) {

Window.alert("Hello, AJAX");

RootPanel.get().add(b); }}

GWT.runAsync(new RunAsyncCallback() { public void onFailure(Throwable caught) { Window.alert("Code download failed"); }

public void onSuccess() {

Code Splitting

Very powerful tool for ...• reducing your application’s initial download size

• reducing startup time

Splitting your app effectively requires ...• tools - such as the compile report

• iteration - you won’t get it right the first time

Compiler Optimizations

GWT Compiler automatically does...• Shrinking (obfuscation)

• Type tightening

• Dead code removal

• Inlining

• Constant folding

• Common subexpression elimination

Compiler Options

-XdisableClassMetadata• Disables some java.lang.Class methods (e.g. getName())

-XdisableCastChecking• Disables run-time checking of cast operations

RPC “flavors”

• RequestBuilder + JSONParser (see RESTY-GWT)

• RequestBuilder + XMLParser

• GWT-RPC (easiest) Requires Java on the server-side

• RequestFactory Also requires Java on the server-side higher level of abstraction over GWT-RPC only send data from server to client if that data has been modified since the last

request

None of the RPC mechanisms are synchronous!

“Frameworks”

Model-View-Presenter• View: UI and implementation

• Presenter: business logic, formats the data for display in the view, sits between model and view

Activities and Places• Activity (presenter)

• Places (state in the UI, tied to browser history)

• A place is associated with an activity; an activity has an associated view

Cell Widgets• used for displaying large datasets quickly

• display is done using innerHTML instead of DOM manipulation

• data providers; updates to the data source are reflected in the widget

• can also accept input and push changes back to data source89

Authorization

Need access to a user’s data? You need authorization from them.• Google APIs

Enter OAuth• allows you to write an application that asks a user’s permission to access a

protected resource (i.e. their gmail contacts)

• the user does two things: they first authenticate with the entity that controls the data (i.e. Google) the entity then asks the user if he/she wants to give your application to access a

specific set of your data; the user grants/denies permission

• if the user grants permission, your application receives a notification via a callback URL, along with a token that can be used to access the resource

• a scope is needed this is defined by the entity that controls the data

• your application never actually sees the user’s password!

Gotchas with OAuth• “dance”: request token, authorized token, access token

• user authentication with the entity happens in a web browser

• signed requests - the token, sent along with the request, is signed with a key based on the request URL (no curl!)

OAuth 2.0• no signed requests; all requests need to be done over HTTPs

• greatly simplifies the process

• access token and refresh token

Resources• Using OAuth 2.0 to Access Google APIs

http://code.google.com/apis/accounts/docs/OAuth2.html

• Using OAuth with the GData APIs http://code.google.com/apis/gdata/articles/oauth.html (these haven’t moved to OAuth 2.0 yet)

• OAuth 1.0 Playground http://googlecodesamples.com/oauth_playground/

• Authentication and Authorization for Google APIs http://code.google.com/apis/accounts/docs/GettingStarted.html

Testing

• use GWTTestCase to test GWT UIs

• use MVP (not MVC) to isolate UI code and maximize testability

Google I/O talk on testing ...• http://www.google.com/events/io/2010/sessions/gwt-continuous-build-testing.html

Testing methodologies ...• http://code.google.com/webtoolkit/articles/testing_methodologies_using_gwt.html

Plugins

Questions

Thank You

Where to get it: http://code.google.com/webtoolkit/

Wiki, issue tracker, source: http://code.google.com/p/google-web-toolkit/

Official GWT blog: http://google-web-toolkit.blogspot.com/

Gwt app start to finish

Technology

GWT videocall: power-up your mobile & web app with WebRTC

google gwt

An introduction to GWT and Ext GWT

Introdução GWT

Prague GWT

GWT Indepth

Exposicion GWT

Gwt Prezentace

Atelier gwt

Gwt Presentation1

Tutorial GWT

Gdd2009 gwt gwt-architecture-best-practices

Gwt portlet

GWT Opportunity

Gwt wouter

Ihr Eigenheim? · S s nivea u Velopa Hauseingang Garagenvorplatz PP-Bewohner GWT 436.36 = -0.34 435.92 = -0.78 GWT 436.87 = +0.17 GWT 436.51 = -0.19 Container GWT 436.35 = -0.35 GWT

Effective GWT: Developing a complex, high-performance app with Google Web Toolkit

Formation GWT · 2013-03-09 · • GWT et les appels distants RPC • Design patterns GWT • Intégration applis coté serveur (Spring, Servlets...) • Intégration GWT/Javascript

Gwt II - trabajando con gwt

App Engine/GWT overview (STLIC 02-10)