Gwt 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

http://www.exigenservices.by/webinars
To be continued…

Gwt Deep Dive

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (20)

Similar a Gwt Deep Dive

Similar a Gwt Deep Dive (20)

Más de Return on Intelligence

Más de Return on Intelligence (20)

Último

Último (20)

Gwt Deep Dive