yajug: what's new in gwt2
DESCRIPTION
What's new in GWT2TRANSCRIPT
![Page 1: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/1.jpg)
GWT 2 = Easier AJAX
YAJUG11/5 /2010
![Page 2: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/2.jpg)
Who am I?
Olivier GérardinTechnical Director, Sfeir Benelux (groupe
Sfeir)Java / Web architect13+ years Java3 years GWT
![Page 3: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/3.jpg)
Agenda
GWT remindersNew in GWT 2.0
SpeedTracer In-browser development mode Code splitting & compile report UiBinder Client bundle Layout panels Misc.
Pointers, Conclusion, Q&A
![Page 4: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/4.jpg)
Reminders
![Page 5: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/5.jpg)
GWT solves all your problems
GWT gives you AJAX without the pain of JavaScript development Takes care of cross-browser issues Allows full debugging (breakpoints, step by step,
inspecting/watching variables) Strong static typing early error detection Full refactoring options No browser plugin or mandatory IDE Short learning curve Simple RPC mechanism built in
But can communicate with any server technology
![Page 6: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/6.jpg)
Program in Java…
GWT allows developing client-side web apps in full Java (with only a few restrictions) Leverage existing Java tools and skills Use any IDE (Eclipse, NetBeans, IntelliJ, …)
Program like a traditional graphical client (Swing, SWT, …) Widgets, containers, listeners, etc. Use OO patterns (MVC, MVP, observer, composite, etc.)
Test like any Java app Use standard Java debuggers Test with JUnit
![Page 7: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/7.jpg)
… deploy in JavaScript
JavaScript is only generated: For deployment To test in actual web mode
GWT guarantees that the generated JavaScript app behaves exactly like the Java app And it does (most of the time)
![Page 8: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/8.jpg)
4 easy pieces
1) Java-to-JavaScript compiler Generates JS code from Java source Performs many optimization
2) JRE emulation library GWT compatible version of most used Java core
classes (java.lan, java.util)
3) Java libraries Utility classes (JSON, I18N, …) Widget library
4) Hosted Development mode Run/debug the app as Java bytecode
![Page 9: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/9.jpg)
Key benefits
![Page 10: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/10.jpg)
Easy development
During development, you are writing and running a classic Java app Use your favorite IDE All IDE features available (code completion, code
analysis, refactoring, links, Javadoc, …) Plugins help GWT-specific tasks
launching development mode compiling refactoring creating projects, modules, RPC services, … even design GUI (GWT Designer from Instantiations)
![Page 11: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/11.jpg)
More benefits
Easy RPC implementation / consumption / deployment
Easy JSON / XML parsingEasy UI building / widget reuseEasy history supportEasy i18nEasy debugging Easy testing
![Page 12: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/12.jpg)
Any room for improvement???
Of course…
![Page 13: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/13.jpg)
New in GWT 2.0
![Page 14: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/14.jpg)
Speed tracer
Performance analysis toolVisualize where your app spends time:
JS execution Browser rendering CSS handling (style selection/calculation) DOM handling / event processing Resource loading
![Page 15: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/15.jpg)
Speed Tracer: example
![Page 16: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/16.jpg)
In-browser development mode
Before 2.0: hosted mode uses customized browser engine Heavily customized
Only one supported browser per platform (IE on Windows, WebKit on Mac, Mozilla on Linux)
Difficult to keep up-to-date Includes platform-specific code (SWT)
Browser and hosted application share the same process
Most plugins don’t work (including Google Gears…)
![Page 17: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/17.jpg)
In-browser development mode
now: Hosted mode shell runs outside browser Communicates with browser using plugin through
TCP
![Page 18: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/18.jpg)
In-browser development mode
Benefits Use any (supported) browser/version on any platform
Currently Safari, Firefox, IE, Chrome (not on OS X!) Behavior closer to web mode No interference with browser plugins No more platform-specific stuff in GWT (one jar for
all!) Network protocol between shell and browser cross-
platform dev possible Dev mode shell on machine X, slave browser on machine
Y E.g. dev on Linux, test in IE on Windows…
![Page 19: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/19.jpg)
Initiating dev mode
![Page 20: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/20.jpg)
Plugin installation
![Page 21: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/21.jpg)
Code splitting
Before: monolithic download can become very big Slow startup times
After: Programmer can insert “split points” in code Hints for the compiler to place everything not required up to
split point in separate download Compiler divides code in several “chunks”, which are loaded
on-demandBenefits:
Initial loading time reduced 50% on average with a single split point
Allows on-demand module loading (provider pattern)
![Page 22: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/22.jpg)
Specifying a split point
GWT.runAsync(new RunAsyncCallback() {public void onFailure(Throwable reason) {
// …}public void onSuccess() {
// ..}
});
![Page 23: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/23.jpg)
Pattern: AsyncProvider
public interface AsyncClient<P> {
void onUnavailable(Throwable reason);
void onAvailable(P instance);
}
![Page 24: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/24.jpg)
Async provider: Implementing the provider
public class Provider {
private static Provider instance = null;
public static void getAsync(final AsyncClient<Provider> client) {
GWT.runAsync(new RunAsyncCallback() {public void onFailure(Throwable reason) {client.onUnavailable(reason);}public void onSuccess() {if (instance == null) {instance = new Provider();}client.onAvailable(instance);}});}
![Page 25: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/25.jpg)
Async provider: Loading the provider
private void loadProvider() {
Provider.getAsync(new AsyncClient<Provider>() {
public void onAvailable(Provider provider) {provider.doSomething();
}
public void onUnavailable(Throwable reason) {Window.alert(”Failed: " + reason);
}});
}
![Page 26: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/26.jpg)
Compile Report (formerly: SOYC)
Better understanding of the compilation process Helps tuning code splitting Simple compiler flag Produces HTML report
Shows: Permutations Sizes per chunk, package, etc. Dependencies
Compiler flag: -compileReport
![Page 27: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/27.jpg)
Compile Report: output
![Page 28: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/28.jpg)
Declarative UI: UiBinder
Declarative construction of GUI using XML grammar Mix HTML and widgets
Benefits: Clearly separate responsibilities better collaboration
Static UI construction (XML) Dynamic UI behavior (Java)
More efficient HTML vs DOM API calls
Easy to transition from static HTML to dynamic
![Page 29: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/29.jpg)
UiBinder: define layout
XML file (xx.ui.xml)
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'xmlns:gwt='urn:import:com.google.gwt.user.client.ui'><gwt:HorizontalPanel><gwt:Label text="Sexe :" /><gwt:VerticalPanel><gwt:RadioButton name='sexeradio' text='M’ /><gwt:RadioButton name='sexeradio' text='F’ /></gwt:VerticalPanel></gwt:HorizontalPanel>
</ui:UiBinder>
![Page 30: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/30.jpg)
UiBinder: instantiate
public class SexeRadio2 extends Composite {
@UiTemplate("SexeRadio2.ui.xml")interface MyUiBinder
extends UiBinder<Panel, SexeRadio2> {}
private static final MyUiBinder binder = GWT.create(MyUiBinder.class);
public SexeRadio2() {final Panel panel = binder.createAndBindUi(this);initWidget(panel);
}
![Page 31: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/31.jpg)
UiBinder: bind fields
Automatically assign references to dynamically created widgets to designated Java fields (@UiField)
XML :<gwt:RadioButton name='sexeradio' text='M’
ui:field='maleRadio' /><gwt:RadioButton name='sexeradio' text='F’
ui:field='femaleRadio' />
Code: @UiFieldRadioButton maleRadio;@UiFieldRadioButton femaleRadio;
![Page 32: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/32.jpg)
UiBinder: bind handlers
Automatically attach event handlers (@UiHandler) Widgets only (not DOM elements)
Handler type inferred from parameter type
Code:@UiHandler("maleRadio")void maleClicked(ClickEvent event) {
GWT.log("C'est un garçon !", null);}
![Page 33: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/33.jpg)
More UiBinder goodness
Mix HTML and widgets in same XML fileDefine CSS styles with <ui:style>
Inline / external Apply to widgets with attributes styleNames /
addStyleNames Programmatic access to styles (works with
CssResource)Use external resources (images, CSS
stylesheets, …) declared as client bundles with <ui:with>
Instantiate widgets that don’t have zero-arg constructor with @UiFactory
![Page 34: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/34.jpg)
Resource bundles
Download multiple heterogeneous resources from server in a single request Images (similar to ImageBundle in 1.x) CSS Text Any other resource
Benefits: Fewer round trips to the server Less overhead More responsive interface
![Page 35: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/35.jpg)
Resource bundles: general mechanism
Familiar mechanism Coding time: define interface
Method type constrains resource type Method name (accessor) designates resource Annotation @source specifies resource content
If unspecified, source is derived from accessor I18N aware (append _fr, _fr_FR)
Runtime: access resource Obtain instance via GWT.create(interface.class) and call
accessor directly Reference accessor through other mechanism (CSS
injection @sprite, etc.)
![Page 36: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/36.jpg)
Resource bundles: DataResource
Works with any kind of sourceMake the resource available through a URLRename file to make resulting URL strongly-
cacheable if appropriate XXX.pdf AAA12345.cache.pdf Webserver should be configured accordingly
![Page 37: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/37.jpg)
Resource bundles: TextResource
Access to static text content TextResource is inlined into JavaScript ExternalTextResource is fetched asynchronously
interface Resources extends ClientBundle { Resources INSTANCE = GWT.create(Resources.class);
@Source(“text1.txt") TextResource text1();
@Source(“text2.txt") ExternalTextResource text2(); }
![Page 38: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/38.jpg)
Accessing TextResouce
// TextResource myTextArea.setInnerText(
Resources.INSTANCE.text1().getText());
// ExternalTextResource Resources.INSTANCE.text2().getText(
new ResourceCallback<TextResource>() { public void onError(ResourceException e)
{ ... }public void onSuccess(TextResource r) {
myTextArea.setInnerText(r.getText()); } });
![Page 39: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/39.jpg)
Resource bundles: ImageResource
Optimize runtime access to image data Transparently group /split images Uses ImageIO library
Use in injected CSS with @sprite directive Supports most image formats
Including animated GIFNot an image-processing library!
![Page 40: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/40.jpg)
Resource bundles: CssResource
Define an extension of CSS Syntax validations / compile-time optimizations Injected at runtime
Usage: Write CSS stylesheet Extend CssResource
interface MyCss extends CssResource {} Include in ClientBundle
interface MyResources extends ClientBundle { @Source("my.css") MyCss css(); }
Use GWT.create(MyResources.class) to obtain instance of bundle Call CssResource.ensureInjected() to inject stylesheet in page
![Page 41: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/41.jpg)
CSS extensions
Sprites with @sprite Bundle:
class MyResources extends ClientBundle { @Source("my.css") MyCssResource css(); @Source("some.png") ImageResource imageAccessor();}
my.css:
@sprite .mySpriteClass { gwt-image: "imageAccessor”
}
![Page 42: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/42.jpg)
CSS extensions
Constants with @defRuntime evaluation with @eval and value()Conditional CSS with @if/@elif/@else
![Page 43: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/43.jpg)
Layout panels
Layout panels Predictable, consistent layout Constraint based system built on top of CSS Plays nice with custom CSS styles
Each child must have 0 or 2 constraints per axis Horizontal: none, left/width, right/width, left/right Vertical: none, top/height, bottom/height, top/bottom no constraint = fill parent Any unit (%, px, …)
Must be added to an instance of ProvidesResize typically RootLayoutPanel
![Page 44: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/44.jpg)
Layout Panels
Easily usable with UiBinder<g:layer left=‘25% right=‘25%’ top=‘10px’ bottom=‘0’>
<g:Label>Label</g:Label></g:layer>
Bunch of specialized panels implemented as LayoutPanels: DockLayoutPanel, SplitLayoutPanel,
StackLayoutPanel, TabLayoutPanel
![Page 45: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/45.jpg)
And also…
Compiler optimizations Most notably reduces generated JS size (expect 3-20 %)
Draft compile mode: flag -drafCompile No optimizations / Faster builds Not for deployment!
GWTTestCase No more dependency on SWT No native code / browser required HtmlUnit: GUI-less browser written in Java
![Page 46: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/46.jpg)
Pointers, Conclusion, etc.
![Page 47: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/47.jpg)
Pointers
GWT home (downloads, docs, FAQs, guides, etc.) http://code.google.com/toolkit
Google groups “GWT” group http://groups.google.com/group/Google-Web-Toolkit
onGWT: fresh news about GWT http://www.ongwt.com
LinkedIn “GWT Users” group http://www.linkedin.com/groups?gid=129889
![Page 48: YaJUG: What's new in GWT2](https://reader035.vdocuments.site/reader035/viewer/2022070316/555e2613d8b42a384f8b4eea/html5/thumbnails/48.jpg)
Shameless self-promotion