Gwt 2,3 Deep dive

GWT Deep Dive
Part 1: UiBinder, CellWidgets, Activities&Places

Andrey Mormysh

Java Developer
a.mormysh@gmail.com

November 02, 2011 www.ExigenServices.com

GWT
Google Web Toolkit

2 www.ExigenServices.com

GWT /ˈɡwɪt /
Google Web Toolkit


GWT-based projects


GWT-based projects
 Google Wave (http://wave.google.com/) - an online tool for real-time communication
and collaboration


GWT-based projects
and collaboration
 Odnoklassniki (http://www.odnoklassniki.ru) - social network


GWT-based projects
and collaboration
 Google Moderator (http://www.google.com/moderator) - a tool that allows
distributed communities to submit and vote on questions for talks, presentations and
events


GWT-based projects
and collaboration
events
 Go Grid (http://www.gogrid.com/) - cloud computing infrastructure service provider
which enables you to deploy and scale load-balanced cloud server networks via a
unique multi-server control panel.


GWT-based projects
and collaboration
events
 Blueprint (https://blueprint.lombardi.com/index.html) - business process mapping
tool


GWT-based projects
and collaboration
events
tool
 Scenechronize (https://www.scenechronize.com/) - a production management web
application for film, television and commercials


GWT-based projects
and collaboration
events
tool
 Scenechronize (https://www.scenechronize.com/) - a production management web
application for film, television and commercials
 Whirled (http://www.whirled.com/) - social virtual world website which includes
multi-player games
etc…


Features

Cross-browser
Object-oriented programming
Dev-mode
GUI debugging
Wigets and declarative UI
Client Bundle
Simple localization
Code optimization
Code splitting
RPC, JSON/XML
UI Designer
HTML5
…

Features

Cross-browser
Dev-mode
GUI debugging
Client Bundle
Simple localization
Code optimization
Code splitting
RPC, JSON/XML
UI Designer
HTML5
…

?


JSNI
Java Script Native Interface

Access JS code from Java code and vice versa


JSNI


Wrap your own or third-party JS-widgets with JSNI:
• Google Maps
• Flash objects
• etc.


JSNI


Wrap your own or third-party JS-widgets with JSNI:
• Google Maps
• Flash objects
• etc.

Example 1:

public static native void alert(String msg)
/*-{
$wnd.alert(msg);
}-*/;

JSNI

Example 2:

package mypackage;
public MyClass{

public static int foo()
{ ... }

public static native void exportStaticMethod()
/*-{
$wnd.foo = $entry(@mypackage.MyClass::foo());
}-*/;
}


Deferred binding

It is a pluggable compile-time type substitution and code generation
mechanism.


Deferred binding

It is a pluggable compile-time type substitution and code generation
mechanism.
Example:

Static binding
Foo f = new Foo();

Dynamic Binding
Class c = Class.forName(fooImplName);
Foo f = (Foo) c.newInstance();

Deferred Binding
Foo f = (Foo) GWT.create(Foo.class);


Deferred binding

Goal - send exactly the right code to client, depending on

• User‟s browser
• Locale
• Mode (debug / production)
• Network characteristics
• etc.


Deferred binding

Goal - send exactly the right code to client, depending on

• User‟s browser
• Locale
• Mode (debug / production)
• Network characteristics
• etc.

Facilities

• Make fewer Http Requests
• Eliminate dead code
• Avoid polymorphic dispatch
• Avoid synchronous XHR
• Avoid spaghetti code (if-s in JS-code)
• Try to use only inline code “elem.innerText = str”
• etc.


Permutations


Permutations

Example:

Input:

DOMImpl dom = GWT.create(DOMImpl.class);


Permutations

Example:

Input:


Implementations:
DOMImplInternetExplorer
DOMImplMozilla
DOMImplOpera
Property:
user_agent = “IE”


Permutations

Example:

Input:


Implementations:
DOMImplInternetExplorer
DOMImplMozilla
DOMImplOpera
Property:
user_agent = “IE”

Output:

DOM dom = new DOMImplInternetExplorer();


Permutations

Example:


Perfect Caching


Perfect Caching
Bootstrap selection script loads Javascript „executable‟ containing correct set of bindings
for given request.

<module>.nocache.js - small
<md5>.cache.js – big


Perfect Caching
Bootstrap selection script loads Javascript „executable‟ containing correct set of bindings
for given request.

<module>.nocache.js - small
<md5>.cache.js – big

Apache HTTP server .htaccess configuration:

<Files *.nocache.*>
ExpiresActive on
ExpiresDefault "now"
Header merge Cache-Control "public, max-age=0, must-revalidate"
</Files>

<Files *.cache.*>
ExpiresActive on
ExpiresDefault "now plus 1 year"
</Files>

Monilithic Compilation



“The fastest code that which does not run”,
--Joel Webber, GWT co-creator




Example:

Shape shape = new Square(4);

1) int area = shape.getArea();




Example:



2) int area = Shape_getArea(shape);




Example:




3) int area = shape.len * shape.len;




Example:




3) int area = shape.len * shape.len;

4) int area = 16;


Client Bundle


Client Bundle
Problem:

1) HTTP 1.1 limit: 2 outgoing connections per domain/port


Client Bundle
Problem:


2) HTTP request has to be sent to the server for each resource (e.g. image)


Client Bundle
Problem:


2) HTTP request has to be sent to the server for each resource (e.g. image)

3) Request for status 304 ("Not Modified")


Client Bundle
Solution:

interface Resources extends ClientBundle {
@Source("logo.png")
ImageResource logo();

@Source("arrow.png")
@ImageOptions(flipRtl = true)
ImageResource pointer();
}


Client Bundle
Solution:

interface Resources extends ClientBundle {
@Source("logo.png")
ImageResource logo();

@Source("arrow.png")
@ImageOptions(flipRtl = true)
ImageResource pointer();
}

Resources resources = GWT.create(Resources.class);

Image img = new Image(resources.logo());


Code Splitting
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
}
});

}
}


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

GWT – it is a set of tools

…
N+1) UiBinder
N+2) CellWidgets
N+3) Activities & Places
…


UiBinder

Introduced in 2.0 (2010)

GWT app is a Web Page
Web page is HTML+CSS

The best way to do is the easy one:
1) build your apps as HTML pages with GWT widgets sprinkled
throughout them
2) do it more efficient (uses innerHTML, not DOM API calls)


UiBinder

1) Widgets have overhead

2) Use UiBinder to replace Widgets with HTML

2.1) when don‟t need to respond to events

2.2) or when events can be caught by a parent Widget

2.3) caution: can‟t add Widgets to HTML elements, so leaf
Widgets require a parent Widget hierarchy to the top


UiBinder – “IS”

1) helps productivity and maintainability
2) collaboration with UI designers on theis language
3) mocking;
4) separation UI from its behavior
5) compile-time checking
6) direct support for internationalization
7) encourages more efficient use of browser‟s power


UiBinder – “IS NOT”

1) it is not a renderer
2) there are no loops, no conditionals, no if statements in its
markup, and only a very limited expression language
3) UiBinder allows you to lay out your user interface. It's still up to
the widgets or other controllers themselves to convert rows of data
into rows of HTML


UiBinder – “Hello” example

1) Template (Hello.ui.xml)
1.1) For this example – it is pure HTML
1.2) Associate fields: ui:field='name'

2) Owner class (Hello.java)
2.1) Declare root (DivElement) and owner (Hello)
interface MyUiBinder extends UiBinder<DivElement, Hello>

2.2) Use deffered binding to instanciate it:
MyUiBinder uiBinder = GWT.create(MyUiBinder.class)

2.3) Create Element: uiBinder.createAndBindUi(this);
(todo: show generated code)

UiBinder – “Hello” example

Namespaces
xmlns:s=“urn:import:com.nimbleteam.gwt.client.mvp.view.uibinder”
<s:HelloWidget/>

Method access
Every one of the widget's methods that follow JavaBean-style
conventions for setting a property can be used this way.

1) public void setName(String name)
public void setValues(String values)

2) <s:HelloWidget name="default text"
values="Andrew,Nikita,Yura"/>

UiBinder – Panels

New LayoutPanels more efficient

1) Layout mostly delegated to browser

2) Less use of tables (except TabLayoutPanel)

3) Any panel (or anything that implements HasWidgets) can be
used in a template file, and can have other panels inside of it.

4) Can contain only widgets (the restriction may be removed at
2.4+, workaround: enclose in HTML or HTMLPanel widgets)


UiBinder – Panels

<g:DockLayoutPanel unit='EM'>
<g:north size='5'>
<g:Label>Top</g:Label>
</g:north>
<g:center>
<g:Label>Body</g:Label>
</g:center>
<g:west size='10'>
<g:HTML>
<ul>
<li>Sidebar</li>
<li>Sidebar</li>
</ul>
</g:HTML>
</g:west>
</g:DockLayoutPanel>


UiBinder – Event Handling

Old style:
titleListBox.addChangeHandler( new ChangeHandler()
{
public void onChange( ChangeEvent event )
{
Window.alert( "Old style" );
}
}
);

New style:
@UiHandler( "titleListBox" )
void titleListBoxValueChanged(ChangeEvent e)
{
Window.alert( "New style" );
}

(you can only use @UiHandler with events thrown by widget objects, not DOM elements)

UiBinder – ClientBundle

It is a way to minimize trips for images, CSS
Takes all other stuff that makes up your app and inject it into the
code:
Images
CSS
Text
or anyhing you need

Fewer roundtrips
Built in image spriting
Name spaces (no global name issues)
Utilize CSS as engineering tool


UiBinder – Resources

CssResource (see example)

• ImageResource
Options:
1) separate cacheable files
2) inline base64-encoded data
3) monolith image (will be sprited)

• TextResource/ExternalTextResource

• DataResource (non-text, with provided MIME type)


UiBinder – I18n

Before:
<div>Hello, world.</div>

After:
<div><ui:msg description="Greeting">Hello</ui:msg></div>

Properties:
ui:generateFormat, ui:generateKeys, ui:generateLocales

Result:
# Description: Greeting
8B1A9953C4611296A827ABF8C47804D7=Bonjour

*Some widgets are i18n-ed out of the box (DatePicker)

CellWidgets

Objective:
In general, all widgets are slow (too much JavaScript)
Old layout widgets are too static


CellWidgets - Features

High-performance and lightweight (flyweight pattern)
Renders interface as an HTML string (uses innerHTML, not DOM)
Can handle events (fewer events == faster)
Editable (Text, Number, Date-picker, etc.)
Dataproviders support (sync and async)


CellWidgets - Showcase

CellList, CellTable, DataGrid, CellTree, CellBrowser, …

CellTable Features:
Can render large amounts of data efficiently
Pagination
Multiple selection
Sorting
Keyboard navigation
Editable cells


Activities&Places

Browser‟s history management approach
Natural place for using code-splitting for UI optimization


Activities&Places - Place

Represents particular state that can be bookmarked

Provides a way for bidirectional serialization of URL
(PlaceTokenizer)

Managed by PlaceController (listens eventBus)


Activities&Places - PlaceHistoryMapper

Declares all the Places available in application

GWT compiler will link PlaceHistoryHandler with PlaceTokenizer-s

Example: SamplePlaceHistoryMapper


Activities&Places – Use case 1: goTo()

Program calls to change place -> new place created and
remembers it‟s token


Activities&Places – Use case 2: history event

User navigates to some URL -> Controller changes the place


Activities&Places - Activity

• Represents something the user is doing
• Contains no Widgets or UI code
• As some level it can be a “Presenter” in MVP pattern
• Typical responsibility:
• restore state ("wake up")
• perform initialization ("set up")
• load a corresponding UI ("show up")
• Started and stopped by an ActivityManager (each per container)
• May warn user before leaving


Activities&Places - ActivityMapper

Maps each Place to its corresponding Activity
"if (place instanceof SomePlace) return new SomeActivity(place)"

Use case 1 – Provides brand new Activity for each call

Use case 2 – Refreshes previous (singleton) activity


Activities&Places - View

• Part of the UI associated with an Activity
• Is a Widget (e.g. implements IsWidget interface)
• Is a View in MVP pattern
• Has 1 interface and >=1 implementations
• Support for different views (e.g. desktop/mobile)
• Easy JUnit testing (mocking)
• Can be reused (recommended)


Activities&Places - Design


Sources
GoogleIO videos:
http://www.youtube.com/watch?v=g2XclEOJdIc&feature=player_embedded
http://www.youtube.com/watch?v=0F5zc1UAt2Y&cc=1#t=554s
http://www.youtube.com/watch?v=qT6ZsQBM7kY&cc=1#t=2084s
http://www.youtube.com/watch?v=oiNfPjV72lg&feature=related

Documents:
http://code.google.com/webtoolkit/doc/latest/DevGuideUi.html
http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html
http://code.google.com/webtoolkit/doc/latest/DevGuideUiCellWidgets.html
http://code.google.com/webtoolkit/doc/latest/DevGuideMvpActivitiesAndPlaces.html


To be continued…

http://www.exigenservices.by/webinars


Gwt 2,3 Deep dive

More Related Content

Viewers also liked

Similar to Gwt 2,3 Deep dive

More from Return on Intelligence

Gwt 2,3 Deep dive