5. GWT-based projects
Google Wave (http://wave.google.com/) - an online tool for real-time communication
and collaboration
5 www.ExigenServices.com
6. GWT-based projects
Google Wave (http://wave.google.com/) - an online tool for real-time communication
and collaboration
Odnoklassniki (http://www.odnoklassniki.ru) - social network
6 www.ExigenServices.com
7. GWT-based projects
Google Wave (http://wave.google.com/) - an online tool for real-time communication
and collaboration
Odnoklassniki (http://www.odnoklassniki.ru) - social network
Google Moderator (http://www.google.com/moderator) - a tool that allows
distributed communities to submit and vote on questions for talks, presentations and
events
7 www.ExigenServices.com
8. GWT-based projects
Google Wave (http://wave.google.com/) - an online tool for real-time communication
and collaboration
Odnoklassniki (http://www.odnoklassniki.ru) - social network
Google Moderator (http://www.google.com/moderator) - a tool that allows
distributed communities to submit and vote on questions for talks, presentations and
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.
8 www.ExigenServices.com
9. GWT-based projects
Google Wave (http://wave.google.com/) - an online tool for real-time communication
and collaboration
Odnoklassniki (http://www.odnoklassniki.ru) - social network
Google Moderator (http://www.google.com/moderator) - a tool that allows
distributed communities to submit and vote on questions for talks, presentations and
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.
Blueprint (https://blueprint.lombardi.com/index.html) - business process mapping
tool
9 www.ExigenServices.com
10. GWT-based projects
Google Wave (http://wave.google.com/) - an online tool for real-time communication
and collaboration
Odnoklassniki (http://www.odnoklassniki.ru) - social network
Google Moderator (http://www.google.com/moderator) - a tool that allows
distributed communities to submit and vote on questions for talks, presentations and
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.
Blueprint (https://blueprint.lombardi.com/index.html) - business process mapping
tool
Scenechronize (https://www.scenechronize.com/) - a production management web
application for film, television and commercials
10 www.ExigenServices.com
11. GWT-based projects
Google Wave (http://wave.google.com/) - an online tool for real-time communication
and collaboration
Odnoklassniki (http://www.odnoklassniki.ru) - social network
Google Moderator (http://www.google.com/moderator) - a tool that allows
distributed communities to submit and vote on questions for talks, presentations and
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.
Blueprint (https://blueprint.lombardi.com/index.html) - business process mapping
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…
11 www.ExigenServices.com
27. JSNI
Java Script Native Interface
Access JS code from Java code and vice versa
27 www.ExigenServices.com
28. JSNI
Java Script Native Interface
Access JS code from Java code and vice versa
Wrap your own or third-party JS-widgets with JSNI:
• Google Maps
• Flash objects
• etc.
28 www.ExigenServices.com
29. JSNI
Java Script Native Interface
Access JS code from Java code and vice versa
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);
}-*/;
29 www.ExigenServices.com
30. JSNI
Example 2:
package mypackage;
public MyClass{
public static int foo()
{ ... }
public static native void exportStaticMethod()
/*-{
$wnd.foo = $entry(@mypackage.MyClass::foo());
}-*/;
}
30 www.ExigenServices.com
31. Deferred binding
It is a pluggable compile-time type substitution and code generation
mechanism.
31 www.ExigenServices.com
32. 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);
32 www.ExigenServices.com
33. Deferred binding
Goal - send exactly the right code to client, depending on
• User‟s browser
• Locale
• Mode (debug / production)
• Network characteristics
• etc.
33 www.ExigenServices.com
34. 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.
34 www.ExigenServices.com
41. Perfect Caching
Bootstrap selection script loads Javascript „executable‟ containing correct set of bindings
for given request.
<module>.nocache.js - small
<md5>.cache.js – big
41 www.ExigenServices.com
42. 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>
42 www.ExigenServices.com
45. 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();
45 www.ExigenServices.com
46. 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();
2) int area = Shape_getArea(shape);
46 www.ExigenServices.com
47. 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();
2) int area = Shape_getArea(shape);
3) int area = shape.len * shape.len;
47 www.ExigenServices.com
48. 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();
2) int area = Shape_getArea(shape);
3) int area = shape.len * shape.len;
4) int area = 16;
48 www.ExigenServices.com
51. Client Bundle
Problem:
1) HTTP 1.1 limit: 2 outgoing connections per domain/port
2) HTTP request has to be sent to the server for each resource (e.g. image)
51 www.ExigenServices.com
52. Client Bundle
Problem:
1) HTTP 1.1 limit: 2 outgoing connections per domain/port
2) HTTP request has to be sent to the server for each resource (e.g. image)
3) Request for status 304 ("Not Modified")
52 www.ExigenServices.com
55. 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);
}
}
55 www.ExigenServices.com
56. 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);
}
}
56 www.ExigenServices.com
57. Code Splitting
public class Hello implements EntryPoint {
public void onModuleLoad() {
Button b = new Button("Click me", new ClickHandler() {
public void onClick(ClickEvent event) {
GWT.runAsync(new RunAsyncCallback() {
public void onFailure(Throwable caught) {
Window.alert("Code download failed");
}
public void onSuccess() {
Window.alert("Hello, AJAX");
}
});
}
});
RootPanel.get().add(b);
}
}
57 www.ExigenServices.com
58. GWT – it is a set of tools
…
N+1) UiBinder
N+2) CellWidgets
N+3) Activities & Places
…
58 www.ExigenServices.com
59. 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)
59 www.ExigenServices.com
60. 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
60 www.ExigenServices.com
61. 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
61 www.ExigenServices.com
62. 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
62 www.ExigenServices.com
63. 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)
63 www.ExigenServices.com
64. 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"/>
64 www.ExigenServices.com
65. 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)
65 www.ExigenServices.com
67. 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)
67 www.ExigenServices.com
68. 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
68 www.ExigenServices.com
69. 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)
69 www.ExigenServices.com
70. 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)
70 www.ExigenServices.com
71. CellWidgets
Objective:
In general, all widgets are slow (too much JavaScript)
Old layout widgets are too static
71 www.ExigenServices.com
72. 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)
72 www.ExigenServices.com
73. CellWidgets - Showcase
CellList, CellTable, DataGrid, CellTree, CellBrowser, …
CellTable Features:
Can render large amounts of data efficiently
Pagination
Multiple selection
Sorting
Keyboard navigation
Editable cells
73 www.ExigenServices.com
75. Activities&Places - Place
Represents particular state that can be bookmarked
Provides a way for bidirectional serialization of URL
(PlaceTokenizer)
Managed by PlaceController (listens eventBus)
75 www.ExigenServices.com
76. Activities&Places - PlaceHistoryMapper
Declares all the Places available in application
GWT compiler will link PlaceHistoryHandler with PlaceTokenizer-s
Example: SamplePlaceHistoryMapper
76 www.ExigenServices.com
77. Activities&Places – Use case 1: goTo()
Program calls to change place -> new place created and
remembers it‟s token
77 www.ExigenServices.com
78. Activities&Places – Use case 2: history event
User navigates to some URL -> Controller changes the place
78 www.ExigenServices.com
79. 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
79 www.ExigenServices.com
80. 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
80 www.ExigenServices.com
81. 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)
81 www.ExigenServices.com