GWT

GWT
It’s Java all the way
Ophir Radnitz
Consultant, AlphaCSP
2
Copyright AlphaCSP Israel 2008 – Web Framework Playoff Seminar
Mission Statement
• “GWT's mission is to radically
improve the web experience

for users by enabling developers to
use existing Java tools to build no-
compromise AJAX for any modern
browser.”
3
Overview
• Introduction
• Demo Features
• Discussion
• Summary
4
Overview
• Introduction
• Demo Features
• Discussion
• Summary
5
Overview
• Java Javascript compiler (!)
• Dynamic, reusable UI components
• Fast, responsive rich interface
• Easy on the developer
• Apache v2.0 license
6
Features (1 of 2)
• Cross browser compatibility
• Highly optimized output
• A good handle on The Web

– Browser history management
– Safe and powerful DOM access
– Bookmarkable stuff
– Secure remoting
7
Features (2 of 2)
• Lots of ready rich components
• JUnit integration
• Built-in benchmarking
• Easy I18N
• Debugging
• Your IDE
…Powered By GWT
• Google Code • Queplix
• Google Health • Awdio
• Google Checkout • DimDim
• Google Base • Scenechronize
• Lombardi Blueprint • QueWeb CRM
• Contact Office • Applications built at
• Compiere SAP, SAS, Library

of Congress
9
History
• Formerly known as “Project Red Pill”
• Announced on JavaOne 2006
May August November February August May
10

Status
• Version 1.5 Release Candidate

– Support for Java 5 features
– Even more compiler optimizations
– UI library additions (animations, themes)
– I18N (Bi-di, pluralizations), accessibility
– Better DOM API
• Emerging libraries and integrations

11
What’s in it?
Class Library
Hosted JRE Emulation

Browser (java.lang, java.util)
GWT Compiler
12
Where does Speed Come From?
• Fewer Requests (by far)
• Compiler optimization Javascript
• Deferred binding
• Versioned cache
• Efficient RPC
• Reduced load on the server

13
Deferred Binding
• The GWT Mantra:
Why do at runtime what you

can do at compile time?
MyService service =
GWT.create(MyService.class);
14
Hosted Mode
15
Entry Point Anatomy
MyPage.html
<script language="javascript"
src="com.alphacsp.demo.My
Module.nocache.js“/>
com.alphacsp.demo.MyM
odule. <MD5>.cache.js“
16
Compiled Javascript
function com_alphacsp_contacts_Contacts(){var l='',B='" for "gwt:onLoadErrorFn"',z='" for

"gwt:onPropertyErrorFn"',wb='"><\/script>',n='/',kb='226AF0230B73371F6FD432899942EF89.cache.html',ib='6C5371FFFFB5323F9D8058C234E97823.cache.
html',jb='86331CB96F6F13236040789304D78367.cache.html',lb='96AB31FA627C259590E8CA143E53C3E0.cache.html',vb='<script
id="',sb="<script>com_alphacsp_contacts_Contacts.onInjectionDone('com.alphacsp.contacts.Contacts')<\/script>",v='=',y='Bad handler
"',ob='DOMContentLoaded',mb='E6FAB8BEE24B098AC223BA54C66FD81B.cache.html',xb='SCRIPT',ub='__gwt_marker_com.alphacsp.contacts.Contacts',o='
base',q='clear.cache.gif',m='com.alphacsp.contacts.Contacts',u='content',db='gecko',eb='gecko1_8',nb='gwt.hybrid',A='gwt:onLoadErrorFn',w='gwt:onPropertyEr
rorFn',t='gwt:property',hb='hosted.html?com_alphacsp_contacts_Contacts',bb='ie6',pb='iframe',p='img',qb="javascript:''",r='meta',gb='moduleRequested',ab='msi
e',s='name',D='opera',rb='position:absolute;width:0;height:0;border:none',F='safari',tb='selectionDone',cb='selectionStart',x='startup',fb='unknown',C='user.agent'
,E='webkit';var
zb=window,k=document,bc=zb.external,yb=zb.__gwtstatsEvent?function(a,b,c,d){zb.__gwtstatsEvent(a,b,c,d)}:null,oc,ec,Eb,Db=l,hc={},rc=[],nc=[],Cb=[],kc,mc;y
b&&yb(m,x,cb,{millis:(new
Date()).getTime()});if(!zb.__gwt_stylesLoaded){zb.__gwt_stylesLoaded={}}if(!zb.__gwt_scriptsLoaded){zb.__gwt_scriptsLoaded={}}function dc(){try{return
bc&&(bc.gwtOnLoad&&zb.location.search.indexOf(nb)==-1)}catch(a){return false}}function gc(){if(oc&&ec){var c=k.getElementById(m);var
b=c.contentWindow;b.__gwt_initHandlers=com_alphacsp_contacts_Contacts.__gwt_initHandlers;if(dc()){b.__gwt_getProperty=function(a){return
Fb(a)}}com_alphacsp_contacts_Contacts=null;b.gwtOnLoad(kc,m,Db);yb&&yb(m,x,tb,{millis:(new Date()).getTime()})}}function ac(){var
j,h=ub,i;k.write(vb+h+wb);i=k.getElementById(h);j=i&&i.previousSibling;while(j&&j.tagName!=xb){j=j.previousSibling}function d(b){var a=b.lastIndexOf(n);return
a>=0?b.substring(0,a+1):l};if(j&&j.src){Db=d(j.src)}if(Db==l){var c=k.getElementsByTagName(o);if(c.length>0){Db=c[c.length-1].href}else{var g=k.location;var
e=g.href;Db=d(e.substr(0,e.length-g.hash.length))}}else if(Db.match(/^\w+:\/\//)){}else{var
f=k.createElement(p);f.src=Db+q;Db=d(f.src)}if(i){i.parentNode.removeChild(i)}}function lc(){var f=document.getElementsByTagName(r);for(var
d=0,g=f.length;d<g;++d){var e=f[d],h=e.getAttribute(s),b;if(h){if(h==t){b=e.getAttribute(u);if(b){var
i,c=b.indexOf(v);if(c>=0){h=b.substring(0,c);i=b.substring(c+1)}else{h=b;i=l}hc[h]=i}}else
if(h==w){b=e.getAttribute(u);if(b){try{mc=eval(b)}catch(a){alert(y+b+z)}}}else if(h==A){b=e.getAttribute(u);if(b){try{kc=eval(b)}catch(a){alert(y+b+B)}}}}}}function
qc(d,e){var a=Cb;for(var b=0,c=d.length-1;b<c;++b){a=a[d[b]]||(a[d[b]]=[])}a[d[c]]=e}function Fb(d){var e=nc[d](),b=rc[d];if(e in b){return e}var a=[];for(var c in
b){a[b[c]]=c}if(mc){mc(d,a,e)}throw null}nc[C]=function(){var d=navigator.userAgent.toLowerCase();var b=function(a){return
parseInt(a[1])*1000+parseInt(a[2])};if(d.indexOf(D)!=-1){return D}else if(d.indexOf(E)!=-1){return F}else if(d.indexOf(ab)!=-1){var c=/msie ([0-9]+)\.([0-
9]+)/.exec(d);if(c&&c.length==3){if(b(c)>=6000){return bb}}}else if(d.indexOf(db)!=-1){var c=/rv:([0-9]+)\.([0-9]+)/.exec(d);if(c&&c.length==3){if(b(c)>=1008)return
eb}return db}return
fb};rc[C]={gecko:0,gecko1_8:1,ie6:2,opera:3,safari:4};com_alphacsp_contacts_Contacts.onInjectionDone=function(){oc=true;yb&&yb(m,x,gb,{millis:(new
Date()).getTime()});gc()};com_alphacsp_contacts_Contacts.onScriptLoad=function(){ec=true;gc()};ac();lc();var
pc;if(dc()){pc=hb}else{try{qc([D],ib);qc([F],jb);qc([bb],kb);qc([eb],lb);qc([db],mb);pc=Cb[Fb(C)]}catch(a){return}}var jc;function
ic(){if(!Eb){Eb=true;gc();if(k.removeEventListener){k.removeEventListener(ob,ic,false)}if(jc){clearInterval(jc)}}}var cc;function fc(){if(!cc){cc=true;var
a=k.createElement(pb);a.src=qb;a.id=m;a.style.cssText=rb;a.tabIndex=-
1;k.body.appendChild(a);a.src=Db+pc}}if(k.addEventListener){k.addEventListener(ob,function(){fc();ic()},false)}var jc=setInterval(function(){if(/loaded|
complete/.test(k.readyState)){fc();ic()}},50);k.write(sb)}com_alphacsp_contacts_Contacts.__gwt_initHandlers=function(i,e,j){var
d=window,g=d.onresize,f=d.onbeforeunload,h=d.onunload;d.onresize=function(a){try{i()}finally{g&&g(a)}};d.onbeforeunload=function(a){var
c,b;try{c=e()}finally{b=f&&f(a)}if(c!=null){return c}if(b!=null){return b}};d.onunload=function(a){try{j()}finally{h&&h(a)}}};com_alphacsp_contacts_Contacts();
17
Project structure
Resource Description
/client Your client-side stuff
/server Your server-side stuff
/public Your resources (css, images, js)
MyModule.gwt.xml Your module configuration
18
Configuration
A module file:
<module>
<inherits name=“com.google.gwt.user.User“ />
<entry-point class=“com.alphacsp.demo.MyModule" />
</module>
Contact.gwt.xml
19
Agenda
• Introduction
• Demo Features
• Discussion
• Summary
20
Base HTML Template
Contact.html
html>
<head>

<meta name='gwt:property' content='locale=en_UK'>
<link rel="stylesheet" href="Calendar.css">

<title>Demo Contacts Application</title> Standard GWT
</head>
injection
<body>
<script language="javascript" src="com.alphacsp.demo.MyModule.nocache.js“/>

<iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0“
Access and
<div id=“niceWidgetThingHere”/> manipulate
</body> however you like
/html>
21
View Technology (1 of 2)
LoginView.java
FormPanel loginPanel = new FormPanel();
loginPanel.setFrame(true);
loginPanel.setBorders(true);
loginPanel.setButtonAlign(HorizontalAlignment.CENTER);
loginPanel.setHeading(constants.login());
loginPanel.setFieldWidth(210);
loginPanel.setLabelWidth(100);
loginPanel.setWidth(400);
TextField usernameField = new TextField<String>();

usernameField.setFieldLabel(constants.userNameField());
loginPanel.add(usernameField);
TextField passwordField = new TextField<String>();

passwordField.setFieldLabel(constants.passwordField());
passwordField.setPassword(true);
loginPanel.add(passwordField);
22
View Technology (2 of 2)
Client-side event
handling 
Button loginButton = new Button(constants.loginButton());
oginButton.setType("submit");
oginButton.addSelectionListener(new SelectionListener<ButtonEvent>() {
@Override public void componentSelected(ButtonEvent be) {
login(usernameField.getValue(), passwordField.getValue());
}
});
oginPanel.addButton(loginButton);
LoginView.java
23
Page Flow
What’s a page?
private void switchToView(View
view) {
viewport.removeAll();
viewport.add(view.getContent());
viewport.layout();
}
Controller.java
24
Form Binding
List<TableColumn> columns = new ArrayList<TableColumn>();
columns.add(new TableColumn(“name”, constants.nameColumn(), 150));

columns.add(new TableColumn(“email”, constants.emailColumn(), 150));
columns.add(new TableColumn(“department”, constants.departmentColumn(), 100);
Table table = new Table(new TableColumnModel(columns));

LookupView.java
25
Pagination
/ table
TableColumnModel columnModel = new TableColumnModel(columns);
Table table = new Table(columnModel);
/ pagingLoader
PagingLoader<PagingLoadConfig> pagingLoader = new BasePagingLoader(proxy);
/ store
istStore<Employee> store = new ListStore<Employee>(pagingLoader);
/ binder
ew TableBinder<Employee>(table, store);
PagingToolBar toolBar = new PagingToolBar(50);

oolBar.bind(pagingLoader);
LookupView.java
26
Table Sorting
pagingLoader.setRemoteSort(false);
LookupView.java
27
Validation
emailField.setAllowBlank(false);
LookupView.java
emailField.setRegex("[a-zA-Z0-9]@+");
emailField.getMessages().setRegexText(“Please use alphabet
only);
emailField.setValidator(new Validator() {
public String validate(Field field, String value) {
// …
}
});
28
AJAX (1 of 2)
LoginService.java
RemoteServiceRelativePath("lookup")
ublic interface LoginService extends RemoteService {
Registering the service
Employee login(String userName, String password) throws UnsuccessfulLoginExcep
under this name
public interface LoginServiceAsync

Mandatory stuff… {
void login(String userName, String password,

AsyncCallback<Employee> callback);
} LoginServiceAsync.java
public class LoginServiceImpl extends RemoteServiceServlet {
String login(String userName, String password) {

// …. It’s great to be a servlet
}
}
LoginServiceImpl.jav
a
29
AJAX (2 of 2)
LoginServiceAsync loginService = GWT.create(LoginService.class);
loginService.login(username, password, new AsyncCallback<Employee> {
public void onSuccess(Employee result) {

passwordField.setValue(""); Yeepee!
controller.setUsername(username);
controller.loggedIn();
}
public void onFailure(Throwable caught) {

try {
throw caught;
} catch (UnsuccessfulLoginException e) { Deal with it…
loginPanel.setHeading(caught.getMessage());
} catch (Throwable throwable) {
// do whatever
}
}
}); LoginView.java
30
I18N Support (1 of 2)
public interface LoginMessages extends Messages {
String fieldBlank(String fieldName);

// …
}
LoginMessages.java
fieldBlank = {0} cannot be empty.

….
LoginMessages.properties
LoginConstants messages = GWT.create(LoginMessages.class);

String message = messages.fieldBlank(“Username”);
anywhere
31
I18N Support (2 of 2)
Locale resolution:
By metadata:
<head>
<meta name="gwt:property" content="locale=ja_JP">
<head>
myPage.html
By request parameter:
http://www.example.org/myapp.html?locale=fr_CA
32
Error Handling
GWT.setUncaughtExceptionHandler(new
GWT.UncaughtExceptionHandler() {
public void onUncaughtException(Throwable e) {

GWT.log(e.getMessage(), e);
// …
}
});
Contacts.java
33
Agenda
• Introduction
• Demo Features
• Discussion
• Summary
34
Documentation
• GWT reference
• Decent Javadoc
• Active Forum
• onGWT.com, GWT Site
• Books
35
Did You Know?
• Can be very minimal
• Doesn’t require a Java backend
• Doesn’t mess with your Javascript
• Conversational state is saved in the

client
36
Design
• Programmatic layouting
• Everything is CSS
• Go ahead, tweak your DOM
• Out of the box themes
37
Roadmap
• Simplified RPC
• Support for very large modules
• Drag and drop support
• Animation/effects support
• Vector graphics library (canvas, SVG,

VML)
Tools
• IntelliJ IDEA
• Cypal Studio (for Eclipse)
• GWT4NB (for NetBeans)
• Instantiations
• Maven
39
Integrations
• HTML
• Seam, Grails, Spring MVC
• Google APIs, Google Gears
40
3rd party
• Ext-GWT
• Gwittir
• GWT Rocket
• GWT Log
41
Agenda
• Introduction
• Demo Features
• Discussion
• Summary
42
Cons
• It runs as Javascript
– No real concurrency
– Very limited reflection
• Limited POJO binding so far
• Verbatim design takes work
• Think outside the box

43
Pros
• Fast, fast, fast (and dynamic)
• Easy to mix
• OO, nice tooling
• Conversational state
• No more markup/Javascript soup
• Think outside the box

44
Resources
• http://code.google.com/webtoolkit/
• http:// www.onGWT.com
• http://del.icio.us/liqweed/GWT
45
Thank
You !
46

GWT

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

GWT

Uploaded by

Copyright:

Available Formats

GWT

It’s Java all the way

• “GWT's mission is to radically

improve the web experience

• Java Javascript compiler (!)

• Dynamic, reusable UI components

• Fast, responsive rich interface

• Easy on the developer

• Apache v2.0 license

• Cross browser compatibility

• Highly optimized output

• A good handle on The Web

• Lots of ready rich components

• Google Code • Queplix

• Google Health • Awdio

• Google Checkout • DimDim

• Google Base • Scenechronize

• Lombardi Blueprint • QueWeb CRM

• Contact Office • Applications built at

• Compiere SAP, SAS, Library

• Formerly known as “Project Red Pill”

• Announced on JavaOne 2006

May August November February August May

Copyright AlphaCSP Israel 2008 – Web Framework Playoff Seminar

• Version 1.5 Release Candidate

– Even more compiler optimizations

– UI library additions (animations, themes)

– I18N (Bi-di, pluralizations), accessibility

– Better DOM API

• Emerging libraries and integrations

Hosted JRE Emulation

• Fewer Requests (by far)

• Compiler optimization Javascript

• Reduced load on the server

• The GWT Mantra:

Why do at runtime what you

function com_alphacsp_contacts_Contacts(){var l='',B='" for "gwt:onLoadErrorFn"',z='" for

/client Your client-side stuff

/server Your server-side stuff

/public Your resources (css, images, js)

MyModule.gwt.xml Your module configuration

<inherits name=“com.google.gwt.user.User“ />

<entry-point class=“com.alphacsp.demo.MyModule" />

<link rel="stylesheet" href="Calendar.css">

<script language="javascript" src="com.alphacsp.demo.MyModule.nocache.js“/>

TextField usernameField = new TextField<String>();

TextField passwordField = new TextField<String>();

List<TableColumn> columns = new ArrayList<TableColumn>();

columns.add(new TableColumn(“name”, constants.nameColumn(), 150));

Table table = new Table(new TableColumnModel(columns));

PagingToolBar toolBar = new PagingToolBar(50);

public interface LoginServiceAsync

void login(String userName, String password,

public class LoginServiceImpl extends RemoteServiceServlet {

String login(String userName, String password) {

LoginServiceAsync loginService = GWT.create(LoginService.class);

loginService.login(username, password, new AsyncCallback<Employee> {

public void onSuccess(Employee result) {

public void onFailure(Throwable caught) {

public interface LoginMessages extends Messages {

String fieldBlank(String fieldName);

fieldBlank = {0} cannot be empty.

LoginConstants messages = GWT.create(LoginMessages.class);