GWT

Copyright AlphaCSP Israel 2008 – Web Framework Playoff Seminar

2

GWTGWTIt’s Java all the wayIt’s Java all the way

Ophir RadnitzConsultant, AlphaCSP


3

Mission StatementMission 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.”


4

OverviewOverview

• Introduction

• Demo Features

• Discussion

• Summary


5

OverviewOverview

• Introduction

• Demo Features

• Discussion

• Summary


6

OverviewOverview

• Java Javascript compiler (!)

• Dynamic, reusable UI components

• Fast, responsive rich interface

• Easy on the developer

• Apache v2.0 license


7

Features Features (1 of 2)(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


Features Features (2 of 2)(2 of 2)

• Lots of ready rich components

• JUnit integration

• Built-in benchmarking

• Easy I18N

• Debugging

• Your IDE


9

……Powered By GWTPowered By GWT

• Google Code

• Google Health

• Google Checkout

• Google Base

• Lombardi Blueprint

• Contact Office

• Compiere

• Queplix

• Awdio

• DimDim

• Scenechronize

• QueWeb CRM

• Applications built at

SAP, SAS, Library

of Congress


10

HistoryHistory

May August November February August May

• Formerly known as “Project Red Pill”

• Announced on JavaOne 2006


11

StatusStatus

• 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


12

What’s in it?What’s in it?

JRE Emulation(java.lang, java.util)

GWT Compiler

Hosted Browser

Class Library


Where does Speed Come From?Where does Speed Come From?

• Fewer Requests (by far)

• Compiler optimization Javascript

• Deferred binding

• Versioned cache

• Efficient RPC

• Reduced load on the server

13


14

Deferred BindingDeferred Binding

• The GWT Mantra:

Why do at runtime what you can do at compile time?

MyService service = GWT.create(MyService.class);


15

Hosted ModeHosted Mode


16

Entry Point AnatomyEntry Point Anatomy

MyPage.html

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

com.alphacsp.demo.MyModule. <MD5>.cache.js“


17

Compiled JavascriptCompiled 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:onPropertyErrorFn',t='gwt:property',hb='hosted.html?com_alphacsp_contacts_Contacts',bb='ie6',pb='iframe',p='img',qb="javascript:''",r='meta',gb='moduleRequested',ab='msie',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;yb&&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)(;


18

Project structureProject structure

ResourceDescription

/clientYour client-side stuff

/serverYour server-side stuff

/publicYour resources (css, images, js)

MyModule.gwt.xmlYour module configuration


A module file:

19

ConfigurationConfiguration

<module>

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

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

</module>

Contact.gwt.xmlContact.gwt.xml


20

AgendaAgenda

• Introduction

• Demo Features

• Discussion

• Summary


21

Base HTML TemplateBase HTML Template

<html> <head>

 <meta name='gwt:property' content='locale=en_UK'>

<link rel="stylesheet" href="Calendar.css"> <title>Demo Contacts Application</title>

</head>

<body>

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

 <iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0“/>

<div id=“niceWidgetThingHere”/></body>

</html>

Contact.htmlContact.html

Standard GWT injection

Standard GWT injection

Access and manipulate

however you like

Access and manipulate

however you like


22

View Technology View Technology (1 of 2)(1 of 2)

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);

LoginView.javaLoginView.java


23

View Technology View Technology (2 of 2)(2 of 2)

Button loginButton = new Button(constants.loginButton());loginButton.setType("submit");loginButton.addSelectionListener(new SelectionListener<ButtonEvent>() {

@Override public void componentSelected(ButtonEvent be) {login(usernameField.getValue(), passwordField.getValue());

}});loginPanel.addButton(loginButton);


Client-side event handling

Client-side event handling


24

Page FlowPage Flow

private void switchToView(View view) { viewport.removeAll(); viewport.add(view.getContent()); viewport.layout();}

Controller.javaController.java

What’s a page?


25

Form BindingForm 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.javaLookupView.java


26

PaginationPagination

// tableTableColumnModel columnModel = new TableColumnModel(columns);Table table = new Table(columnModel);

// pagingLoaderPagingLoader<PagingLoadConfig> pagingLoader = new BasePagingLoader(proxy);

// storeListStore<Employee> store = new ListStore<Employee>(pagingLoader);

// bindernew TableBinder<Employee>(table, store);

PagingToolBar toolBar = new PagingToolBar(50);toolBar.bind(pagingLoader);



27

Table SortingTable Sorting

pagingLoader.setRemoteSort(false);



28

ValidationValidation

emailField.setAllowBlank(false);emailField.setRegex("[a-zA-Z0-9]@+");emailField.getMessages().setRegexText(“Please use alphabet only);

emailField.setValidator(new Validator() {public String validate(Field field, String value) {

// …}

});



29

AJAX AJAX (1 of 2)(1 of 2)

@RemoteServiceRelativePath("lookup") public interface LoginService extends RemoteService {

Employee login(String userName, String password) throws UnsuccessfulLoginException;}

LoginService.javaLoginService.java

public interface LoginServiceAsync {

void login(String userName, String password, AsyncCallback<Employee> callback);} LoginServiceAsync.javaLoginServiceAsync.java

public class LoginServiceImpl extends RemoteServiceServlet {

String login(String userName, String password) {// ….

}}

LoginServiceImpl.javaLoginServiceImpl.java

Registering the service under this name

Registering the service under this name

Mandatory stuff…Mandatory stuff…

It’s great to be a servletIt’s great to be a servlet


30

AJAX AJAX (2 of 2)(2 of 2)

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

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

public void onSuccess(Employee result) {passwordField.setValue("");controller.setUsername(username);controller.loggedIn();

}

public void onFailure(Throwable caught) {try {

throw caught;} catch (UnsuccessfulLoginException e) {

loginPanel.setHeading(caught.getMessage());} catch (Throwable throwable) {

// do whatever}

}});

Yeepee!Yeepee!

Deal with it…Deal with it…



31

I18N Support I18N Support (1 of 2)(1 of 2)

public interface LoginMessages extends Messages {

String fieldBlank(String fieldName);// …

}LoginMessages.javaLoginMessages.java

fieldBlank = {0} cannot be empty.….

LoginMessages.propertiesLoginMessages.properties

LoginConstants messages = GWT.create(LoginMessages.class);String message = messages.fieldBlank(“Username”);

anywhereanywhere


32

I18N Support I18N Support (2 of 2)(2 of 2)

<head><meta name="gwt:property" content="locale=ja_JP">

<head>myPage.htmlmyPage.html

http://www.example.org/myapp.html?locale=fr_CA

Locale resolution:

By metadata:

By request parameter:


33

Error HandlingError Handling

GWT.setUncaughtExceptionHandler(new GWT.UncaughtExceptionHandler() {

public void onUncaughtException(Throwable e) {GWT.log(e.getMessage(), e);// …

}});

Contacts.javaContacts.java


34

AgendaAgenda

• Introduction

• Demo Features

• Discussion

• Summary

Copyright AlphaCSP Israel 2008 – Web Framework Playoff Seminar35

DocumentationDocumentation

• GWT reference

• Decent Javadoc

• Active Forum

• onGWT.com, GWT Site

• Books


36

Did You Know?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


37

DesignDesign

• Programmatic layouting

• Everything is CSS

• Go ahead, tweak your DOM

• Out of the box themes


RoadmapRoadmap

• Simplified RPC

• Support for very large modules

• Drag and drop support

• Animation/effects support

• Vector graphics library (canvas, SVG,

VML)


39

ToolsTools

• IntelliJ IDEA

• Cypal Studio (for Eclipse)

• GWT4NB (for NetBeans)

• Instantiations

• Maven


40

IntegrationsIntegrations

• HTML

• Seam, Grails, Spring MVC

• Google APIs, Google Gears


41

33rdrd party party

• Ext-GWT

• Gwittir

• GWT Rocket

• GWT Log


42

AgendaAgenda

• Introduction

• Demo Features

• Discussion

• Summary


43

ConsCons

• It runs as Javascript

– No real concurrency

– Very limited reflection

• Limited POJO binding so far

• Verbatim design takes work

• Think outside the box


44

ProsPros

• Fast, fast, fast (and dynamic)

• Easy to mix

• OO, nice tooling

• Conversational state

• No more markup/Javascript soup

• Think outside the box


45

ResourcesResources

• http://code.google.com/webtoolkit/

• http:// www.onGWT.com

• http://del.icio.us/liqweed/GWT


46

Thank Thank You !You !

Business

GWT