Rich Java Client Seminar - Assembla

berserkarithmeticInternet and Web Development

Dec 14, 2013 (3 years and 9 months ago)

916 views

Rich Java Client Seminar

Seminar
:

Rich Java Client with
GWT, Ext JS and GXT



Presenter:

Yoav Aharoni,

Chief Architect

1

Rich Java Client Seminar

Agenda

2


What is RIA?


RIA Solutions Overview


Focus on Leading RIA JavaScript Solution


Ext
-
JS in a nutshell


GWT


The Java Advantage


What is it, Why it is good for us, How to use it


GXT


Great Library for GWT


Creating beautiful RIAs with GWT & GXT

Rich Java Client Seminar

Agenda

3


Best
Practices & Design
Patterns


Alternative Solutions


Other
3
rd Party Libraries &
Frameworks


Recap

Rich Java Client Seminar

RIA

Let’s get started...

4

Rich Java Client Seminar

An
HTML

Tale

Rich Java Client Seminar

Tim Berners
-
Lee

Evolution

HTML

90

Rich Java Client Seminar

Evolution

HTML

CSS

JS

LESS

JS
Libs

CSS
Libs

HTML
5

GWT

Ajax

1990

SASS

90

Rich Java Client Seminar

Then, an idea
...

Rich Java Client Seminar

And that’s were things
went wrong...

Rich Java Client Seminar

Because HTML wasn’t
designed for it

Rich Java Client Seminar

Heck,

developers aren’t

designed for it...

Rich Java Client Seminar

So what’s bothering us with

HTML/CSS/JS development?

Rich Java Client Seminar

What is RIA

13


Type of application


Not a framework


Specs


Responsive


Desktop
-
like



Not a website


Usually runs on the client (plugins /
js
)

Rich Java Client Seminar

»
Play Media: Video, Audio

»
Draw:
2
D,
3
D

»
Store Local Data

»
Bi
-
directional Client
-
Server
Communication

»
Concurrent JavaScript

»
More...

»
JavaScript:


Dynamic


Prototype based OO


Lack of Tools

»
HTML/CSS:


Quirks


Hacks


Boilerplate code


Stuff We Can’t Do

Hard to Develop

Web Development Issues

Rich Java Client Seminar

Evolution

HTML

CSS

JS

LESS

JS
Libs

Flash

Applets

Flex

JavaFX

CSS
Libs

Silverlight

Ajax

SASS

Rich Java Client Seminar

Evolution

HTML

CSS

JS

LESS

JS
Libs

Flash

Applets

Flex

JavaFX

CSS
Libs

Silverlight

Ajax

SASS

HTML
5

GWT

W
3
C

Better Specs, Better Browsers

Rich Java Client Seminar

GWT in a Nutshell

Rich Java Client Seminar

Web
Development Sore
Spots


Cross Browser Compatibility Issues


JavaScript:


Dynamic


Prototype based OO


Lack of tools


Managing
3
rd

party dependencies and a large code base is
an issue.


HTML/CSS:


Quirks


Hacks


Boilerplate code

Rich Java Client Seminar

GWT

The Java Advantage

19

Rich Java Client Seminar

GWT in a Nutshell


Rich Java Client Seminar

GWT in a Nutshell

Rich Java Client Seminar

GWT Benefits


Develop using Java.


Using YOUR IDE.


Java tools: refactoring, debugging, profiling, etc…


Detect error in compile
-
time rather than runtime.


JUnit integration.


Good holistic development environment.


Cross browser compatible.


Runs natively on the browser, no plugins needed.


Rich Java Client Seminar

GWT Benefits


Built for speed, lots of optimizations.


Has everything a framework needs.


Dynamic, rich, reusable widgets. Lots of them.


Ajax, utilities and more.



Plus:


It’s Open source, Apache v
2.0
license.


It’s Google’s...


Rich Java Client Seminar

GWT Cons

24


Google has practically stopped actively
developing GWT


Java is less powerful than JavaScript




Rich Java Client Seminar

Who Is Using GWT?

25


Used by Google:


iGoogle
, Google
Flights
, Blogger,

Google Shopping
, Google
Offers
, Google
Wallet,
AdWords
,
AdSense,
Orkut
, Google Health,

Google Wave
(may it RIP)


Companies I’ve been to and use GWT:


PayPal, HP, Intel,
BillGuard
,
Malam
-
Team, EMC, CA,...


Rovio

and
King.com


And also...

Company

Country

Industry

ABZ Reporting GmbH

Germany

Financial Services

Advenio Software

Argentina

Information
Technology & Services

Agillence Inc

United
States

Information
Technology & Services

Air Liquide

United
States

Chemical

akibu GmbH

Germany

Online Media

Ametras Informatik AG

Germany

Logistics & Supply
Chain

Ardison Software &
Consulting

Argentina

Information
Technology & Services

Atol Conseils &
Développements

France

Information
Technology & Services

AVNOC, LLC

United
States

Information
Technology & Services

Banana Campus SL

Spain

Information
Technology & Services

Basler Versicherungen

Switzerlan
d

Insurance

BionX International Inc.

Canada

Others

Calflora Database

United
States

Education

California Instiute of
Technology

United
States

Academia

Calpano

Germany

Consumer Services

Calyx

Croatia

Outsourcing/Offshorin
g

CargoSoft GmbH

Germany

Logistics & Supply
Chain

Cenarion Information
Systems GmbH

Austria

Computer Software

CERN / ATLAS

Switzerlan
d

Research

CGI (Logica)

France

Information
Technology & Services

chemtrax

Malaysia

Transport

cimt objects AG

Germany

Consulting

Clouway LTD

Bulgaria

Telecommunication

Comerge

Switzerlan
d

Information
Technology & Services

Cursor d.o.o.

Slovenia

Information
Technology & Services

CyberEd Corp.

United
States

Education

DCLabs MSC SDN BHD

Malaysia

Information
Technology & Services

Deutsche Bank

United
States

Financial Services

devbliss GmbH

Germany

Information
Technology & Services

Dirk Winkler

Germany

Others

EMC Corporation

United
States

Information
Technology & Services

Emitrom LLC

United
States

Information
Technology & Services

Eteration

Turkey

Information
Technology & Services

Farfromhomepage

Germany

Internet

Findero.us

United
States

Information
Technology & Services

Future Earth B.V.

Netherlan
ds

Other

gasblenders.info

France

Sports

Generali Hellas Insurance
Company S.A.

Greece

Insurance

GenieLog

France

Information
Technology & Services

GeoModel Solar

Slovakia

Energy

Gras Savoye

France

Insurance

GT Nexus, Inc.

United
States

Information
Technology & Services

HAT webtech

Serbia

Information
Technology & Services

Healthometry Software Inc.

Canada

Health & Fitness

Hossfeld Solutions

Germany

Information
Technology & Services

I
-
Arkaden

Denmark

Computer Software

I.Strive.To

United
States

Information
Technology & Services

InAphone ApS

Denmark

Information
Technology & Services

Infoteam Software AG

Germany

Industrial Automation

Ingenieria Informatica
Empresarial

Spain

Information
Technology & Services

Invitbox

Australia

Financial Services

ixmid Software Technologie
GmbH

Germany

Medical Services

KeepITCloud LTD

United
Kingdom

Information
Technology & Services

Kiahu

Australia

Information
Technology & Services

Klis Solutions

Brazil

Information
Technology & Services

KOMA Software BVBA

Belgium

Information
Technology & Services

LangTech Bangor University

United
Kingdom

Translation &
Localization

LatentView

Analytics

啮楴敤e
却at敳

䵡湡M敭en琠
䍯湳畬瑩湧

䱥湳潯 䥮挮

啮楴敤e
却at敳

E
-
汥l牮楮r

䱩湫慲攠呉
-

T散湯汯杩慳g摥d
Informação, Lda.

Portugal

䥮f潲浡瑩潮t
Technology & Services

L佇慬aze

䡵湧慲y

䥮f潲浡瑩潮t
T散桮潬h杹…⁓gr癩捥v

䵥M扥b猠佮汹O卯晴S慲攬⁉湣

United
States

䍯浰畴敲 卯晴S慲e

䵥t慤at愠T散桮潬h杹⁎潲瑨g
䅭A物ra

啮楴敤e
却at敳

䥮f潲浡瑩潮t
T散桮潬h杹…⁓gr癩捥v

䵥t態潣o愠搮d⹯.

卬Sv敮楡

䥮f潲浡瑩潮t
T散桮潬h杹…⁓gr癩捥v

䵩捨M氠䱡t愠匮A.

䙲慮ae

偲楮瑩湧

䵩物慤M 匮瀮S.

䥴慬a

䥮f潲浡瑩潮t
T散桮潬h杹…⁓gr癩捥v

MoreData

Portugal

䥮f潲浡瑩潮t
Technology & Services

䵹M敥 T散桮潬h杩敳

卯畴栠
䅦物Aa

䍯浰畴敲 卯晴S慲e

湥xt敶潬畴楯渠AG

䝥牭慮y

Information
Technology & Services

湪楮

䙲慮ae

䍯浰畴敲 卯晴S慲e

Nordea AB

Denmark

Financial Services

乯牴桥牮⁌楧r瑳Ⱐt湣n

啮楴敤e
却at敳

䵡物瑩Me

位匠卡f敨e牢潲

United
States

Information
Technology & Services

佮数潩O琠偲潪散o

䅵A瑲楡

䥮f潲浡瑩潮t
T散桮潬h杹…⁓gr癩捥v

佲摥d却潲洠E
-
c潭浥o捥
卯汵瑩S湳

啮楴敤e
却at敳

䥮f潲浡瑩潮t
T散桮潬h杹…⁓gr癩捥v

Orientation in Objects GmbH

Germany

䥮f潲浡瑩潮t
Technology & Services

P慬浡 䑩慳⁃潮獵汴潲楡o攠
卩St敭e W敢

䉲慺楬

䥮f潲浡瑩潮t
T散桮潬h杹…⁓gr癩捥v

Paycoo

Germany

Other

偄匠呅䍈䤠I噔 L呄

䥮摩I

Tr慮獰潲a

灥p爠r敢摥獩杮⁡s敮瑵t

䝥牭慮y

䥮t敲湥t

P敲f散瑳t畲捥 印⸠稠漮漮

P潬慮o

䥮f潲浡瑩潮t
T散桮潬h杹…⁓gr癩捥v

灧琠t散桮潬h杹g獣潵瑩湧
GmbH

Germany

䥮f潲浡瑩潮t
Technology & Services

偩捴慲楮a

䙲慮ae

偨Pt潧r慰ay

偉䜮剕RLtd

創獳楡

䕮t敲t慩湭ant

偩P散h

䙲慮ae

Information
Technology & Services

P潬楣楡o䵩汩M慲a摥⁍楮慳d
Gerais
-

7
ª RPM

䉲慺楬

䑥f敮獥⽍楬楴慲y

POSibolt Solutions

India

Information
Technology & Services

P潴慳桃潲a

䍡湡摡

䅧物捵汴畲e

Promis

Czech
Republic

Information
Technology & Services

Quality Unit, LLC

United
States

Computer Software

Research In Motion

Canada

Telecommunication

Rhem Solutions

Peru

Information
Technology & Services

RunPartner.com

United
States

Other

Sage

United
Kingdom

Computer Software

千䅉S䝭扈

䝥牭慮y

Information
Technology & Services

SCARATEC IT
-
Consulting
GmbH

䝥牭慮y

䥮f潲浡瑩潮t
T散桮潬h杹…⁓gr癩捥v

schubec

Austria

Computer Software

獣潲楯⁇浢

䝥牭慮y

䵵獩M

卨S数䑯朠e湣

䍡湡摡

䥮f潲浡瑩潮t
T散桮潬h杹…⁓gr癩捥v

卨物Sr慭a䝥湥r慬a䥮I畲慮a攠
c潭灡o礠Lt搮

䥮摩I

䥮I畲慮ae

卩S敷敬e

䍺散栠
R数畢汩e

䥮f潲浡瑩潮t
T散桮潬h杹…⁓gr癩捥v

卭楴桩浡ge

Sw敤en

䥮f潲浡瑩潮t
T散桮潬h杹…⁓gr癩捥v

印S慫a䱯L楳瑩捳

啮楴敤e
却at敳

䱯L楳瑩捳t☠卵灰汹&
䍨C楮

synova inc

India

䥮f潲浡瑩潮t
Technology & Services

T慣灯楮t

啮楴敤e
却at敳

䥮f潲浡瑩潮t
T散桮潬h杹…⁓gr癩捥v

Tanya Geometrik Pvt Ltd

India

Computer Software

啮楶敲獩瑹s䍨楬摲敮❳⁈潳灩e慬a
䡥楤敬扥rg

䝥牭慮y

䵥摩M慬a卥r癩捥v

啓U⁁G

䝥牭慮y

Information
Technology & Services

V慡摩a

䙩湬慮F

䍯浰畴敲 卯晴S慲e

V慮杵慲搠dG

䝥牭慮y

䵥摩M慬a卥r癩捥v

V敲敩渠啴攠䉯捫

䅵A瑲楡

䍩癩挠☠卯捩c氠
佲g慮楺a瑩潮t

噩V畡汆ox

䱌L

啮楴敤e
却at敳

䍯浰畴敲 卯晴S慲e

坩W散慲搠dG

䝥牭慮y

䉡湫楮B

坉W

乯rway

䥮f潲浡瑩潮t
T散桮潬h杹…⁓gr癩捥v

塰X物潳

P潬慮o

䡯獰楴慬楴a

Zilicus Solutions

India

䥮f潲浡瑩潮t
Technology & Services

Rich Java Client Seminar

Agenda


Introduction


GWT Basics


Developing with GWT


Widgets


Internationalization


ClientBundle



Ajax


UiBinder



Security


Bookmarks & History


Rich Java Client Seminar

Agenda


Best Practices & Design Patterns


Testing & Profiling


3
rd

Party Libraries


Reference


Rich Java Client Seminar


Introduction


GWT What?

Rich Java Client Seminar

Rich Internet Applications


RIA



a cross between web applications and
desktop applications.


Introduced in a Macromedia whitepaper in
March
2002
.


RIA is typically run in a web browser, or do not
require software installation.


Current solutions include Flash/Flex,
Silverlight and JavaScript.

Rich Java Client Seminar

GWT Introduction


G
oogle
W
eb
T
oolkit Is:



A Web Framework.



A SOUI / SOFEA Framework.



A Sort of JavaScript Framework.



One of Google’s gifts to Java developers.



All of the Above.


S
ervice
-
O
riented
F
ront
-
E
nd
A
rchitecture or
S
ervice
-
O
riented
U
ser
I
nterface

Rich Java Client Seminar

Introduction


GWT in a Nutshell...


A web framework for rapid developing and
debugging of
JavaScript

front
-
end applications
in
Java.

1.
Develop in Java.

2.
Compile into JavaScript.

3.
Run on a Browser.


Rich Java Client Seminar

Introduction


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.


Rich Java Client Seminar

Introduction


What’s so good about it?


It’s built for speed and it’s fast as it gets.


Runs natively on the browser, no plugins needed.


Cross browser compatible.


Has everything a framework needs.


Dynamic, rich, reusable widgets. Lots of them.


Utilities and more.


Big active community.


Many
3
rd

party libraries already out there.


Simple built
-
in Ajax/RPC mechanism.

Rich Java Client Seminar

Introduction


What’s so good about it?


Develop using Java.


Using YOUR IDE.


Detect error in compile
-
time rather than runtime.


Java tools: refactoring, debugging, profiling, etc…


JUnit

integration.


Good development environment.


It’s Open source: Apache v
2.0
license.


It’s
Google
’s


will be around for a long time.



Rich Java Client Seminar

Introduction


History


Announced at
JavaOne
,
2006
.


Formerly known as “Project
Red Pill
”.


Current release:
2.1
.



05
/

2006

10
/

2010

06
/

2009

1.0
RC
1

08
/

2006

11
/

2006

02
/

2007

08
/

2007

08
/

2008

04
/

2009

12
/

2009

2.0

1.7

2.2

1.5

10
/

2010

2.1

Rich Java Client Seminar

Introduction


History


Announced at
JavaOne
,
2006
.


Formerly known as “Project
Red Pill
”.


Current release:
2.1
.




Support for Java
5
features.


Even more compiler optimizations.


UI library additions (animations, themes).


I
18
N (Bi
-
di
,
pluralizations
), accessibility.


Better DOM API.

05
/

2006

10
/

2010

06
/

2009

1.0
RC
1

08
/

2006

11
/

2006

02
/

2007

08
/

2007

08
/

2008

04
/

2009

12
/

2009

2.0

1.7

2.2

1.5

10
/

2010

2.1

Rich Java Client Seminar

Introduction


History


Announced at
JavaOne
,
2006
.


Formerly known as “Project
Red Pill
”.


Current release:
2.1
.




Development Mode


Speed Tracer


Code Splitting


Compiler Optimizations


Draft Compile


Declarative UI


ClientBundle


HtmlUnit

05
/

2006

10
/

2010

06
/

2009

1.0
RC
1

08
/

2006

11
/

2006

02
/

2007

08
/

2007

08
/

2008

04
/

2009

12
/

2009

2.0

1.7

2.2

1.5

10
/

2010

2.1

Rich Java Client Seminar

Introduction


History


Announced at
JavaOne
,
2006
.


Formerly known as “Project
Red Pill
”.


Current release:
2.1
.




Cell Widgets


MVP Framework


Request Factory


Editor framework


Logging


SafeHtml


Spring Integration

05
/

2006

10
/

2010

06
/

2009

1.0
RC
1

08
/

2006

11
/

2006

02
/

2007

08
/

2007

08
/

2008

04
/

2009

12
/

2009

2.0

1.7

2.2

1.5

10
/

2010

2.1

Rich Java Client Seminar

Introduction


History


Announced at
JavaOne
,
2006
.


Formerly known as “Project
Red Pill
”.


Current release:
2.1
.




Integrated
designer


HTML
5
Canvas, Audio and
Video


CellTable

Updates


SafeHtml

lenient
parser


Mobile touch events


Improved
Bidi

support

05
/

2006

10
/

2010

06
/

2009

1.0
RC
1

08
/

2006

11
/

2006

02
/

2007

08
/

2007

08
/

2008

04
/

2009

12
/

2009

2.0

1.7

2.2

1.5

10
/

2010

2.1

Rich Java Client Seminar


How does it work?


... and why is it so damn fast...

Rich Java Client Seminar

Architecture


JRE
Emulation

GWT Compiler

Dev.

Mode

Class Library

Development

Servlet Container

GWT RPC

Remote Service Servlet

Web
Services

Server
-
Side

Ajax

GWT Runtime

Compiled
JavaScript

Client
-
Side

Compile

Rich Java Client Seminar

JRE emulation library


JavaScript

implementations of the most
commonly used classes in JRE


most of the
java.lang

package


a subset of the
java.util

package


Several classes are missing


java.util.Calendar


date
-
formatting classes


More Info

Rich Java Client Seminar

Deferred Binding


Definition:
a technique used by the GWT compiler
to create and select a specific implementation of
a class based on a set of parameters.


GWT produces a different application
permutations for each browser environment.


Only one permutation is downloaded and executed by
the browser.


Permutations can be created for each Locale.


Additional custom parameters can be configured.


DOMImpl

impl

=
GWT.create
(
DOMImpl
.class
);

Rich Java Client Seminar

Deferred Binding
-

Benefits


Branching is done in compile time rather than
runtime.


No runtime penalty for lookup.


Download and evaluate only the minimum
needed code.


Reduce download size.


Reduce execution time.


Saves development time by automatically
generating code to implement an interface or
create a proxy class.

More Info

Rich Java Client Seminar

Development Lifecycle



Download SDK
+ Browser Plugin

Create Project
with IDE/Maven

Develop

& Code

View & Debug
using
Dev. Mode

Compile

to
JavaScript

Deploy

to Prod
Server

Profile

with

Speed Tracer

Unit Test
with
Java Tools

Debug using
Dev. Mode

Fix Bugs

Rich Java Client Seminar


Developing with GWT


Lets get to work!

Rich Java Client Seminar

Developing with GWT



Available Tools


Standard Directory Layout


Building Blocks


Module


Host Page


Entry Point


RootPanel


Running the Application


Application Modes


Development Mode

Rich Java Client Seminar

Available Tools


Google SDK


Eclipse


Google Plugin for Eclipse


Google GWT Designer

(previously Instantiations)


IntelliJ

IDEA


GWT Support
Plugin
(built
-
in).


Netbeans

-

GWT
4
NB Plugin


Maven

-

gwt
-
maven
-
plugin


Speed Tracer


GWT Theme Generator


Rich Java Client Seminar

Creating a New Project


webAppCreator

-

Generates all files needed in
order to start a new GWT project.


Generates Eclipse project files and launch
configuration


Generates Ant build.xml


Rich Java Client Seminar

Creating a
Project:
webAppCreator


-
out
specifies which directory to place the
generated files in


A second argument specifies the GWT logical
module name.


From the project root directory, use:


ant
devmode
: runs in development mode


ant build: runs in production mode

Rich Java Client Seminar

Creating a Project: Eclipse


File
-
> New
-
> Web Application Project




1.
Enter project name

2.
Enter package name

3.
Select default GWT SDK

4.
Select default Google App Engine SDK (optional)

5.
Click Finish


Rich Java Client Seminar

Creating a Project:
IntelliJ



File
-
> New Project


Select Create new project from scratch


Enter Project Name


Enter Project Location


Select “Java Module” in Module Settings


Select “Next”


Edit source directory, Select “Next”

Rich Java Client Seminar

Creating a Project:
IntelliJ



Create a new GWT Module by right click
src

folder

Rich Java Client Seminar

Creating a Project: Maven


Use

gwt
-
maven
-
plugin
.


mvn

archetype:generate


-
DarchetypeRepository=repo
1
.maven.org

-
DarchetypeGroupId
=
org.codehaus.mojo


-
DarchetypeArtifactId
=
gwt
-
maven
-
plugin

-
DarchetypeVersion
=
2.1.0
-
1



Or (since GWT
2.1.0
):

webAppCreator

-
maven
-
noant

com.example.MyApplication

Rich Java Client Seminar


Rich Java Client Seminar

Standard Directory Layout


Package folder (root)

E.g. com.alphacsp


<app
-
name>.gwt.xml

Module definition file


client

The client package containing code
that will be cross compiled

to JavaScript


server

The package containing server
-
side
implementation code


public

Folder containing assets used by the
module (images,

CSS files, other resources)


rebind

The package containing compile
-
time code (generators)

Rich Java Client Seminar

Building Blocks


Module

-

An individual unit of GWT
configuration and resources.


Composed of Java sources, static resources and an
XML configuration file.


Defines an application starting point called

Entry Point
.


Module’s entry point is invoked from an HTML
page called
Host Page
.



Rich Java Client Seminar

Module


A module bundles configuration and execution
settings for a GWT project.


Modules can be inherited.


Most modules inherit built
-
in modules.


XML descriptor, which contains:


Entry point class name.


Source path entries.


Deferred binding rules (for example I
18
n).


Other rules...




Rich Java Client Seminar

XML Descriptor

<module>


<inherits

name
=
"
com.google.gwt.user.User
"
/>


<inherits

name
=
"
com.google.gwt
...
Standard
"
/>




<entry
-
point

class
=
"
com.alphacsp.gwt.client.Demo
"
/>




<source

path
=
"client"
/>


<public

path
=
"public"
/>



<
stylesheet

src
=
"Demo.css"
/>

</module>

Rich Java Client Seminar

Host Page


HTML page hosting our GWT application.


Meaning, application will run in this page.


This is done by including reference to the
compiled JavaScript file:
<
ModuleName
>.
nocache.js


Created during GWT compilation.


This “Ignites” the application loading process.


Host pages can be either static or dynamic server
pages.


Rich Java Client Seminar

Minimal Host Page

<!
DOCTYPE html
>

<html>

<head>


<script

type
=
"text/
javascript
"

language
=
"
javascript



src
=
"com.alphacsp.gwt.Demo.nocache.js
"
></script>

</head>

<body>

</body>

</html>

Rich Java Client Seminar

Entry Point & Root Panel


Entry Point
is to GWT is as
main()
is to Java.


Contains module initialization code.


It is a class implementing the
EntryPoint

interface.



Root Panel
, a default wrapper around <body> tag, is
usually being used.


RootPanel.get
()


Composite elements can be added as decedents of the
root panel.






Rich Java Client Seminar

Sample
EntryPoint

public class Demo implements
EntryPoint

{


@Override


public void
onModuleLoad
()

{


RootPanel
.
get
().
add
(
new Label
(
"Hello
World
"
));


}

}

Rich Java Client Seminar

Root Panel & Placeholders


You may insert widgets into specific
placeholders in an HTML page.






Java

button = new Button("Click me");

label = new Label();


...

RootPanel.get
("
slot
1
“).add(button);

RootPanel.get
("
slot
2
“).add(label);

HTML



<body>





<!
--

... More HTML ...


--
>





<table align=center>







<
tr
>









<td
id="slot
1
"
></td>









<td
id="slot
2
"
></td>







</
tr
>





</table>



</body>

Rich Java Client Seminar

Application Modes


There are two application modes:


Production mode


Development mode.



Production Mode


Application is compiled into JavaScript.


Deploy into a web server.


Compilation may take a couple of minutes...



Rich Java Client Seminar

Compilation


Only “used” code is compiled.


Produced artifacts:


Highly optimized JavaScript


and CSS.


Images & Sprites



java
-
cp


%CLASSPATH%
;gwt
-
dev.jar”
com.google.gwt.dev.Compiler


%MODULE%

Rich Java Client Seminar

Compilation Style



style
command
-
line option:


OBF
: obfuscated mode, suitable for production
use.


PRETTY
: pretty printed JavaScript.


Useful for debugging.


DETAILED
: pretty printed JavaScript with fully
qualified names.




Rich Java Client Seminar

IntelliJ

GWT Compiler


Rich Java Client Seminar

Development Mode


Replaces what used to be called “hosted
mode” up until GWT
1.7
.


Start Application in Development mode using
GWT Shell (inside SDK) or an IDE
plugin
.


Lunch application in a regular browser with a
GWT Developer Plugin
installed.


Java code is interpolated on
-
the
-
fly. No need to
compile to JavaScript. Just edit, save and refresh.


You may start development mode to debug
production server.


Rich Java Client Seminar

Eclipse Development Mode


Running using Eclipse:





Copy/paste the URL in
Dev

Mode view onto
your favorite browser:


Rich Java Client Seminar

Eclipse Development Mode


You may be prompted to install the Google
Web Toolkit Developer Plugin:






In order to use GWT compiler, use:


Rich Java Client Seminar

IntelliJ

Development Mode


Rich Java Client Seminar

IntelliJ

Development Mode


Running using
IntelliJ





You may be prompted to install the Google
Web Toolkit Developer Plugin


Rich Java Client Seminar


Rich Java Client Seminar


Widgets


UI Components

Rich Java Client Seminar

GWT Widgets


Widgets area
UI Components
.


Developed in Java.


Implemented natively using JavaScript and
DOM elements.


Meant for reuse. Compiled, packaged and
distributed in jar files.


Two categories:


“Regular” Widgets


which

users may
interact
with

(
e.g. buttons, links)


Panels
-

containers
for other
components.

Rich Java Client Seminar

DOM Tree Example


<html>

<head>


<
title>
My title
</title>

</head>

<body>


<
h
1
>
My header
</h
1
>


<
a
href
=“
url

>
My link
</a>

</body>

</html>

Rich Java Client Seminar

Sample Widgets


new
Button
()



new
TextBox
()




new
Tree
()




new
RichTextArea
()

Rich Java Client Seminar

Widgets


Rich Java Client Seminar

Widgets



Wraps DOM element.


Cannot receive events.


Methods:
getElement
(),
getStyleName
(),
isVisible
(),...

Rich Java Client Seminar

Widgets



Base for most components.


Receives events.


Can be added to panels.


Methods:
getParent
(),
addHandler
(),
isAttached
(),...

Rich Java Client Seminar

Widgets



Base for
most widgets that can
receive
keyboard focus.


Methods:
setFocus
(),
getTabIndex
(),
setAccessKey
(), ...

Rich Java Client Seminar


Rich Java Client Seminar

Panel


Container of other widgets.


Propose: Layout widgets on the page.


Position and manage the visibility of widgets.


May use child’s layout data hint.


Can be nested.


Implemented using DOM elements
such as
DIV
or TABLE.


Rich Java Client Seminar

Panels


Rich Java Client Seminar

Panels



Base for most
containers.


Layout children using
layoutData
.


Methods: add(), remove(), clear(),...

Rich Java Client Seminar

Panels


@
Deprecated:


HorizontalSplitPanel
,
VerticalSplitPanel


DockPanel


TabPanel

Rich Java Client Seminar

Panels



Rectangular grid.


Rresized

explicitly.


Creates
cells on
demand.


Can
be
jagged (
rowSpan

/
colSpan
).

Rich Java Client Seminar

Panels



Notice:
RootPanel

is
an
AbsolutePanel

Rich Java Client Seminar

DOM Related Classes


Window



represents browser’s window.


Window.alert
(
message
)


Window.confirm
(
message
)


Window.setTitle
(
title
)


Document



represents HTML document.


Document.get
().
getClientWidth
()


Document.get
().
createDivElement
()


Document.get
().
getElementById
(
id
)


DOM



utility for
manipulating DOM


DOM.insertChild
(
parent
,
child
,
index
)

Rich Java Client Seminar

GWT Events


Involved Classes:


GwtEvent
<H
extends
EventHandler
>


GwtEvent.
Type
<H>


EventHandler


HasHandlers

(
e.g
:
EventBus
)




Rich Java Client Seminar

Event Classes


GwtEvent

Type

EventHandler

HasHandlers

Has

Fires

Registers at

Handles

Listens to

Rich Java Client Seminar

Events API


Registration:



widget.
addHandler
(
EventHandler
, Type
)


“Shortcut” Methods:


e.g
: button.
addClickHandler
(
ClickHandler
)


Returned value:


HandlerRegistration

instance
. Used to unregister
handlers.


Note:
EventListener

and related methods are
deprecated
.


Rich Java Client Seminar

DOM Events


DOM Event Registration:



widget.
addDomHandler
(
handler, type
)


DOM Events are
bubbled
.


Mouse events can be captured.



Event.
setCapture
(
element
)


DOM Events can be

previewed”:



Event.
addNativePreviewHandler
(
handler
)


Rich Java Client Seminar

Event.addNativePreviewHandler

(

new
Event
.
NativePreviewHandler
()

{


public void
onPreviewNativeEvent



(
NativePreviewEvent

event
)

{



switch
(
event.getTypeInt
()
)

{




case
Event.ONCLICK
:




case
Event
.
ONKEYPRESS
:


...



}


}

});

Handling Previewed Events


Rich Java Client Seminar

Low Level
DOM Event API



Event.
sinkEvents
(
element
,
eventBits
)


Event.
setEventListener
(
element, listener
)


Rich Java Client Seminar

Widget Events

(i.e.
addHandler
)


AttachEvent


ValueChangeEvent


Window.ScrollEvent


SelectionEvent


CloseEvent


ResizeEvent


More...


Your custom events



Rich Java Client Seminar

DOM Events
(i.e.
addDomHandler
)


Mouse Events


MouseDownEvent


MouseWheelEvent


MouseUpEvent


DoubleClickEvent


MouseOverEvent


MouseOutEvent


MouseMoveEvent


ClickEvent


KeyPressEvent


KeyDownEvent


KeyUpEvent


BlurEvent


FocusEvent


ChangeEvent


ScrollEvent



Key Events

Other Events

Rich Java Client Seminar

Themes


A
GWT
Theme

is
a simple module, containing
CSS
Style Sheet defining
widgets look n’ feel
.


To apply a theme, inherit it in your
module’s
xml descriptor
:

<
inherits

name=
"com
...
theme.standard.Standard
"
/>

Rich Java Client Seminar

Available Themes


GWT
is bundled with several themes:


com.google.gwt.user.theme.standard.
Standard


com.google.gwt.user.theme.dark.
Dark


com.google.gwt.user.theme.chrome.
Chrome


All of which have a secondary RTL version:
StandardRTL
,
DarkRTL
,
ChromeRTL
.



When custom theme is required, bundled
themes can be either patched, partially
overridden or replaced.


Rich Java Client Seminar

Styling Widgets


Styling is applied using HTML’s
class attribute
.


All widgets have
StylePrimaryName
.


And may have
StyleDependentName
.


Styles are added using methods:


widget.
setStylePrimaryName
()


widget.
setStyleName
(),
widget.
addStyleName
()


widget.
addStyleDependentName
()


Low level DOM API:


element.
getStyle
()


element.
addClassName
()

Rich Java Client Seminar

Adding CSS Styles Sheets


Style
Sheets can be added in several ways
:


Add style sheet directly to Host Page.




Add style sheet to
module’s xml descriptor
.




Add
style using
ClientBundle

and
CssResource
.


Some advantages when using this method.


Will be discussed later in details.


<
link

type=
"text/
css
"

rel
=
"
stylesheet
"

href
=
"style.css"
/>

<
stylesheet

src
=
“style.css
"
/>

Rich Java Client Seminar

Restyling Existing Components


Methods for Finding CSS Class Names

1.
See
CSS Style Rules

section in each widget’s
JavaDoc
.

2.
Look for method invocations (e.g.
addStyleName
).

3.
Inspect
elements using:


Firefox’s Firebug


Internet Explorer Developer Toolbar


Chrome Developers Tools


Opera Dragonfly.

Rich Java Client Seminar


Rich Java Client Seminar

Custom Components


Use cases


A Brand new
unique component
is needed


rare use case.


Example:
Slider


Component build as
composition

of other
existing components


common use case.


Example:
TextBox


+ Button + Popup

+
DatePicker

=
DateField

01
/
02
/
2003

Rich Java Client Seminar

Creating Unique Components


Achieved by
subclassing

Widget

class.


Tasks:


Create elements using
Document
.get
().
create
XXX
()


Set widget’s element by calling
widget.
setElement
()


Manipulate elements using
Element

methods and
DOM

utility class.


Listen to events, prefer
addDomHandler
(
handler
)

over overriding
onBrowserEvent
().



Rich Java Client Seminar

Creating Compositions

»
Rather than
subclassing

Panel, subclass
Composite

class:


A widget that wraps another
widget, typically
a
Panel
.


When added
to a Panel, behaves as if the
wrapped widget has
been added
.


Incentive: control
which methods are publicly
accessible.


API Contract:


Initialize by
calling
initWidget
(
widget
)
.



A newer alternative (since GWT
2.1
):


Implement
IsWidget

interface.


Rich Java Client Seminar

Implemented Interfaces


When creating a custom component, it might
be useful to let is implement interfaces such
as:


HasValue
<T>


HasText



HasName


HasHandlers
,
HasClickHandlers
,
HasKeyPressHandlers
, ...


Rich Java Client Seminar


Rich Java Client Seminar

Cell
Widgets


Useful set widgets used for displaying lists or
trees.


Introduced in GWT
2.1
, improved in GWT
2.2
.


Supports sorting, paging, selection, etc.

Rich Java Client Seminar

Cell
Widgets API


Cell Widget Classes


Cell



responsible
for displaying or editing a
value

(e.g.
NumberCell
,
DateCell
,
TextCell
,
PersonCell
).



Cell Widget



receives data and cells; uses cell
to display data (e.g.
CellTable
,
CellTree
).


Rich Java Client Seminar

Simple Cell Example


Code:






Result:

CellList
<
String
>

cellList

=

new

CellList
<
String
>(
new

TextCell
());

List
<
String
>

strings
=

createStringList
();

cellList
.
setRowData
(
strings
);

add
(
cellList
);

Rich Java Client Seminar

Cell Interface


Rendering

Rich Java Client Seminar

Cell Interface


Event Handling

Rich Java Client Seminar

Cell Types


Base
:
AbstractCell
,
AbstractEditableCell


Text
:
TextCell

,
ClickableTextCell
,
SafeHtmlCell


Formatted
:
NumberCell
,
DateCell


Images
:
ImageCell
,
ImageResourceCell
,
ImageLoadingCell


Actions
:
ActionCell
,
ButtonCell


Editable
:
CheckboxCell
,
EditTextCell
,
SelectionCell
,
TextInputCell
,
DatePickerCell


Other
:
CompositeCell
,
IconCellDecorator

Rich Java Client Seminar

Available Cell Widgets


CellWidget



Displays
one cell
.


CellList



Displays a
list of cells
.


CellTable



Each column displays a cell.


CellTree



Each node is a cell.


CellBrowser



Displays a
TreeViewModel

as a
“browser”.


Rich Java Client Seminar

Cell Widgets: Related Classes


Key Provider


Provides key for each data
item.






Returned Key must implement
equals()

and
hashCode
()
.


Among other things, key is used by various
Cell methods, determines selected item, etc.

»
Default
implementation


SimpleKeyProvider
.


public

interface

ProvidesKey
<
T
>

{


Object
getKey
(
T item
);

}

Rich Java Client Seminar

Cell Widgets:
Value Updater


ValueUpdater

and
FieldUpdater



used by
CellList

and
CellTable

respectively to update
values of editable cells.


interface

ValueUpdater
<
C
>

{


void

update
(
C value
);

{

interface

FieldUpdater
<
T
,

C
>

{


void

update
(
int

index
,



T
object
,

C value
);

{

Rich Java Client Seminar

Cell Widgets:
Sort Handler


ColumnSortEvent

are fired whenever a
sortable column is clicked.


A
ColumnSortEvent.Handler

is implemented
to handle the sort event.





Default implementations exist:


ListHandler



used for client
-
side sorting.


AsyncHandler



used for server
-
side sorting.


public

static

interface

Handler
extends

EventHandler

{


void

onColumnSort
(
ColumnSortEvent

event
);

{

Rich Java Client Seminar

Cell Widgets:
Pagers


Pagers

provide paging GUI.


A pager is bound to a cell widget and invoke
cellWidget.
setVisibleRange
()
method
whenever used.



Existing pagers:


SimplePager



a simple pager.



PageSizePager



controls # of rows in page.



AbstractPager



base class for implementing your
one pager.

Rich Java Client Seminar

Cell Widgets:
Data Provider


Data
Provider


holds data and is bound to
one or more cell widgets (
CellTable

or
CellList
).

»
Available classes:
AbstractDataProvider
,
ListDataProvider
,
AsyncDataProvider
.

»
DataProvider

is useful for implementing paging and
sorting.


Cell Widget

DataProvider

setRowData
()

Sort Handler

Pager

Fire
RangeChangeEvent

setVisibleRange
()

May Use

Rich Java Client Seminar


Rich Java Client Seminar

Editor Framework


Introduced
in GWT
2.1
.


Use conventions and annotations to
bind UI
to model beans
.


Framework is composed of
Editors

and
Drivers
.


Editor

is an object, usually a widget, responsible
for editing a specific type (e.g. String, Long,
Person).


A
Driver

is used to initialize Editors and to copy
data from Editor to model
and vice versa.

Rich Java Client Seminar

Editors


All built
-
in field widgets (e.g.
TextBox
) are
Editors.


Composite Editors are created by
implementing marker interface
Editor<T>
.


Mapping is done by using fields of other
Editors.


public

class

PersonEditor

implements

Editor
<
Person
>

{


TextBox

name
;


public

IntegerBox

ageEditor
;


...

}

Rich Java Client Seminar

Editor Conventions


Editor’s class must be
public
.


Sub
-
Editor field must be
package visible
(or
public).


Property
xxx

is edited by sub
-
editor in a field
named
xxx

or
xxxEditr
.


You can’t edit primitives (e.g. long), only
objects (Long).

public

class

PersonEditor



implements

Editor
<
Person
>

{





TextBox

name
;


public

IntegerBox

age
Editor
;


...

}

public

class

Person

{


public

String
get
Name
()

{

...

}


public

void

set
Name
(
String name
)

{

...

}



public

Integer
get
Age
()

{

...

}


public

void

set
Age
(
Integer age
)

{

...

}

{

Rich Java Client Seminar

Editor Composition


Composite Editors can contain other
composite Editors.

public

class

PersonEditor



implements

Editor
<
Person
>

{





TextBox

name
;


AddressEditor

address
Editor
;


...

}

public

class

Person

{


public

String
get
Name
()

{

...

}


public

void

set
Name
(
String name
)

{

...

}



public

Integer
get
Address
()

{

...

}


public

void

set
Address

(
Address age
)

{

...

}

{

public

class

AddressEditor



implements

Editor
<
Address
>

{


TextBox

city
;

}

public

class

Address

{


public

String
get
City
()

{

...

}


public

void

set
City
(
String city
)

{

...

}

{

Rich Java Client Seminar

Editor Drivers


A Driver must be created for root Editor.


Drivers allow Editors to
edit

objects (i.e. copy
object values to UI) and to
flush

changes back
to objects.


Two Drivers exists:


SimpleBeanEditorDriver



used to edit client
-
side
beans.


RequestFactoryEditorDriver



used for editing
server
-
side objects using
RESTful

web services.

Rich Java Client Seminar

Driver Usage
-

Example


interface

Driver
extends

SimpleBeanEditorDriver
<
Person
,

PersonEditor
>

{ }

public

class

PersonEditor

implements

Editor
<
Person
>

{
...

}

public

void

init
()

{


//
Create and initialize Person Driver


PersonEditor

personEditor

=

new

PersonEditor
();


Driver
driver

=

GWT
.
create
(
Driver
.
class
);


driver
.
initialize
(
personEditor
);


// E
dit Person bean


Person
person

=

new

Person
();


driver
.
edit
(
person
);


// F
lush changes back to person


driver
.
flush
();

{

Rich Java Client Seminar

Editor Annotations


@
Editor.Path

annotation can be used to
specify edited property name (and ignore
naming conventions).


It can also be used to edit nested properties.


@
Editor.Ignore

can be used to mark package
visible fields which aren’t meant to be used as
Editors.

public

class

PersonEditor

implements

Editor
<
Person
>

{


@
Path
(
"phone"
)

TextBox

phoneNumber
;



@
Path
(

address.city
"
)

TextBox

cityEditor
;


@Ignore
DatePicker

datePicker
;


...

{

Rich Java Client Seminar

Custom Editors


Custom
Leaf Editors
can be created by
implementing

LeafValueEditor
<V>
.


void setValue(V
value)

and
V
getValue
(); must
be



implemented.


Editors which delegate editing to other Editors
can be easily created by implementing
IsEditor
<E>

interface.

class

DateField

implements

IsEditor
<
LeafValueEditor
<
Date
>>

{


private

DateBox

dateBox
;


public

LeafValueEditor
<
Date
>

asEditor
()

{


return

dateBox
.
asEditor
();


{

{

Rich Java Client Seminar

Editors Adapters


Several Editor
adapters

are bundled with
GWT.


This is useful when using
IsEditor
<E>

interface.


Existing Adapters:


HasDataEditor

-

Adapts the
HasData

interface.


HasTextEditor

-

Adapts
HasText

to
LeafValueEditor
<String
>.


ListEditor

-

Keeps
a List<T> in sync with a list of
sub
-
Editors.


OptionalFieldEditor



For nullable bean
properties.


SimpleEditor

-

Used
as a headless property
Editor.


TakesValueEditor

-

Adapts
a
TakesValue
<T
>.


ValueBoxEditor

-

Adapts
a
ValueBoxBase
<T
>.

Rich Java Client Seminar

Advanced Configuration


Editor Subtypes
:


HasEditorDelegate

-

Every Editor has a peer
EditorDelegate

that provides framework
-
related
services to the
Editor

(e.g. notify errors, get editor
path).



ValueAwareEditor



allows editor to be notified
when object is being edited or flushed.


HasEditorErrors



allows editor to be notified
about
ConstraintViolations

in
the
value
being
edited.

Rich Java Client Seminar


Rich Java Client Seminar

Ajax


Ajax

-

A
synchronous
J
avaScript
a
nd
X
ML


Allows
client
-
server interaction
without
refreshing
the entire
page
.


Client usually invoke
Web Services
, passing
JSON

or
XML
.



GWT Ajax APIs


GWT
-
RPC


RequestBuilder


RequestFactory

Rich Java Client Seminar

Ajax


Ajax

-

A
synchronous
J
avaScript
a
nd
X
ML


Allows
client
-
server interaction
without
refreshing
the entire
page
.


Client usually invoke
Web Services
, passing
JSON

or
XML
.



GWT Ajax APIs


GWT
-
RPC


RequestBuilder


RequestFactory

<person>


<name>
Paul
</name>


<age>
23
</age>


<
isSingle
>
false
</
isSingle
>


<
luckyNumbers
>



<number>
10
</number>



<number>
13
</number>


</
luckyNumbers
>

</person>

Rich Java Client Seminar

Ajax


Ajax

-

A
synchronous
J
avaScript
a
nd
X
ML


Allows
client
-
server interaction
without
refreshing
the entire
page
.


Client usually invoke
Web Services
, passing
JSON

or
XML
.



GWT
Ajax APIs


GWT
-
RPC


RequestBuilder


Request Factory

{ "
personal
": {



"
name
": "Paul",



"
age
":
23
,



"
isSingle
": true,



"
luckyNumbers
": [
5
,
17
,
21
]


},


"
favoriteBands
": ["Band ABC", "Band XYZ“]

}

Rich Java Client Seminar

GWT RPC
-

Introduction


RPC

-

R
emote
P
rocedure
C
alls


Mechanism for passing Java objects to and
from a server over standard HTTP.


Based on Java Servlet API.


Best choice when creating your own interface
and run Java on the server.


The server
-
side code gets invoked from the
client is often referred to as a
service
.


Making a remote procedure call is sometimes
referred to as
invoking a service
.







Rich Java Client Seminar

GWT RPC
-

Components


In order to define an RPC interface, you need
to write three components:

1.
An interface
for the service that extends
RemoteService

and lists RPC methods.

2.
A class
that implement the server
-
side code,
extending
RemoteServiceServlet

and
implements the interface

3.
An asynchronous interface
to the service, to be
called from the client
-
side code.











Rich Java Client Seminar

GWT RPC


Classes Diagram


Client
-
Side

Server
-
Side

Rich Java Client Seminar

RemoteService

Interface


An RPC service is an interface that extends
RemoteService

interface


The
@
RemoteServiceRelativePath

annotation
associates the service with a default path
relative to the module base URL
.


Reside on client directory (source path).




@
RemoteServiceRelativePath
(
“contacts"
)

public

interface

ContactService

extends

RemoteService

{


public

Contact
findContactById
(
Long

id);

}

Rich Java Client Seminar

Service
Implementation


A service implementation must implement
the associated interface.


Implementation is ultimately a servlet.


Extends
RemoteServiceServlet
.


Reside
on server directory (server path).


Automatically handles serialization.


Invokes the intended method in your service
implementation.










Rich Java Client Seminar

Service Implementation Example


public

class

ContactServiceImpl

extends

RemoteServiceServlet



implements

ContactService

{


@Override


public

Contact
findContactById
(
Long id
)

{



Contact
contact
;



...



return

contact
;


}

}

@
RemoteServiceRelativePath
(
“contacts"
)

public

interface

ContactService

extends

RemoteService

{


public

Contact
findContactById
(
Long

id);

}

Rich Java Client Seminar

Servlet Mapping


web.xml


Add <servlet> and <servlet
-
mapping>
elements to the web.xml


Point to the implementation class


In <servlet
-
mapping>,
url
-
pattern can take
form of an absolute directory path.


Make sure the
url
-
pattern matches the
@
RemoteServiceRelativePath

annotation
value.









Rich Java Client Seminar

web.xml Example


<servlet>


<
servlet
-
name>
Contacts Service
</servlet
-
name>


<servlet
-
class>
hp.server.ContactServiceImpl
</servlet
-
class>

</servlet>

<servlet
-
mapping>


<
servlet
-
name>
Contacts Service
</servlet
-
name>


<
url
-
pattern
>
/
hp.Demo
/
gwt
-
rpc
/*
</
url
-
pattern>

</servlet
-
mapping>

@
RemoteServiceRelativePath
(
“contacts"
)

public

interface

ContactService

extends

RemoteService

{


public

Contact
findContactById
(
Long

id);

}

web.xml Snippet

Rich Java Client Seminar

Asynchronous Service Interface


Client creates a “proxy” that communicates
with the service implementation
asynchronously.


When calling a remote procedure, a callback
object is passed and executed when the call
completes.










Rich Java Client Seminar

Asynchronous Service Conventions


You must define a new interface that:


Have the same name as the service interface,
appended with
Async
.


Located in the same package as the service
interface.


Has methods with the same name and signature
as in the service interface, but with an important
difference:

The method returns void, and the last parameter
is an
AsyncCallback

object.









public

interface

ContactService
Async

{


void

findContactById
(
Long id
,

AsyncCallback
<Contact>

async
);

}

Rich Java Client Seminar

Callback methods


Making an RPC call from the client:

1.
Instantiate the service interface using
GWT.create
()
.

2.
Create an asynchronous callback object to be
notified when the RPC completes.

3.
Make the call.


It’s safe to cache the service proxy to avoid
creating it for subsequent calls.











Rich Java Client Seminar

RPC Invocation Example


ContactServiceAsync

service
=

GWT
.
create
(
ContactService
.
class
);

service
.
findContactById
(
id
,
new

AsyncCallback
<
Contact
>()

{


@Override


public

void

onFailure
(
Throwable

caught
)

{



// handle exception


{



@Override


public

void

onSuccess
(
Contact contact
)

{



// use result


{

});

Rich Java Client Seminar

Serialization


GWT RPC requires that all service method
parameters and return types be
serializable
.


A type is
serializable

if
one of the following is
true:


Type is a primitive types
or primitive Wrapper
Object.


Type
is an array of
serializable

types.


Type is a
serializable

class.










Rich Java Client Seminar

Serialization


A class is
serializable

if it meets these three
requirements:


It implements either Java
Serializable

or GWT
IsSerializable

interface, directly or by inheritance.


Its non
-
final, non
-
transient instance fields are
themselves
serializable
.


It has a default (zero argument) constructor with
any access modifier









Rich Java Client Seminar

Handling Exceptions


When a remote procedure call fails, the cause
is either unexpected or checked exception.


Unexpected exception: communication
problems, or undeclared exceptions in server
side


In client
-
side, the
onFailure
(
Throwable
) the
callback method will receive an
InvocationException

with the generic message


Find stack trace in the development mode log.









Rich Java Client Seminar

Handling Exceptions


Checked Exception: GWT supports the
throws

keyword so you can add it to your service
interface methods as needed


GWT will serialize the exception and send it back
to the client for handling.








@
RemoteServiceRelativePath
(
“contacts"
)

public

interface

ContactService

extends

RemoteService

{


public

Contact
findContactById
(
Long

id)
throws

MyException
;

}

Rich Java Client Seminar


Rich Java Client Seminar

I
18
N
-

Internalization


I
18
N

-

Internationalization


L
10
N

-

Localization


Locale

-

Language + Location (Country)


Examples:


language=English, location=United States.


language=German, location=Switzerland


language=German, location=Germany,
variant=Euro


Rich Java Client Seminar

Java Locale


Has two arguments:


Language (ISO
-
639
)


Lowercase two
-
letter code


Country code (ISO
-
3166
)


Uppercase two
-
letter code


Locale
germanGermany

= new Locale("de", "DE");


Locale
germanSwitzerland

= new Locale("de",
"CH");

Rich Java Client Seminar

Java Localized Objects


Numbers and Currencies


Date and Time


Resource Bundles

Rich Java Client Seminar

Resource Bundles


Motivation:


Avoid hard
-
coded strings.


Supply different strings for different Locales.




In Java,
Resource
Bundles are defined in
*.properties
files.


Naming convention:
BundleName
_
language
_
COUNTRY
.properties


e.g
:


MyMessages_he.properties


MyMessages_en_US.properties




new

Label
(
"Name"
);

new

Label
(
"
םש
"
);

Rich Java Client Seminar

I
18
N
in GWT


Resources Bundles (*.properties files) must be
saved as
UTF
-
8
.


Client
-
side implementation relays on
Deferred
Binding
.


A different application permutation is generated
for each Locale.


Additional benefit: we can define different class
implementation for each
Locale
(i.e. different
logic/UI).


Locales are configured in module’s xml
descriptor.


You must specify which Locales are used in your
application, in order for proper permutation to be
compiled.


No locale is set by default
. It is advisable to always
configure a default, fallback, Locale.



Rich Java Client Seminar

Module Configuration


<!


Available Locales
--
>

<
extend
-
property

name
=
"locale"

values
=
"en"
/>

<extend
-
property

name
=
"locale"

values
=
"
en_US
"
/>

<extend
-
property

name
=
"locale"

values
=

he_IL
"
/>

<!
--

Default Locale
--
>

<set
-
property
-
fallback

name
=
"locale"

value
=
"
en_US
"
/>

<inherits

name
=
"com.google.gwt.i
18
n.I
18
N"
/>

<
inherits name=
"com.google.gwt.i
18
n.CldrLocales"
/>

<head>

<
meta

http
-
equiv
=
"
content
-
type“


content
=
"text/html; charset=UTF
-
8
"
> ...

Module.get.xml Snippet

Host Page Snippet

Rich Java Client Seminar

Setting Locale


Locale can be set by:


Passing “locale” parameter in URL query string:




Using
gwt:property

meta tag:


<head>


<
meta http
-
equiv
=
"content
-
type“



content
=
"text/html; charset=UTF
-
8
"
>


<
meta

name
=
"
gwt:property
"

content
=
"locale=
ja_JP
"
>

</head>

Host Page Snippet

http://
domain/module/page.html
?locale=he_IL

Rich Java Client Seminar

Getting Locale Information


Locale information get be viewed in runtime
using
LocalInfo

class:


LocalInfo.
getCurrentLocale
();


LocalInfo.
getAvailableLocaleNames
();


LocalInfo.
getLocaleQueryParam
()

Rich Java Client Seminar

GWT Localized Objects


Static String Initialization


Constants


Messages


Dynamic

String Initialization


Dictionary


Formatting


com.google.gwt.i
18
n.client.
NumberFormat


com.google.gwt.i
18
n.client.
DateTimeFormat


Rich Java Client Seminar

Static String
initialization


Uses standard Java properties files to store
translated strings and parameterized
messages.


Implements strongly
-
typed Java interfaces to
values.


Benefits:


Simple
technique to
implement.


Requires very little overhead at runtime.


Work with methods, instead of Strings and
constants.


Easier
refactoring and usage detection
.


Two
Java interfaces


Constants

-

For constants (usually strings).


Messages

-

For
parameterized
messages.


Rich Java Client Seminar

GWT Constants


Composed of:

1.
An interface which extends the
Constants

Interface.

2.
Property files containing the constant values.


This interface is bound to *.properties files in
the same package (i.e. folder) with the
interface name.


Interface contains methods for each of the
constants in the properties files.


Constants are usually Strings, but can also be
primitives, Arrays or Maps.



Rich Java Client Seminar

Constants Example









loginMessage
=
Welcome back!

builtInUsers
=
admin,user

maxPasswordLength
=
10

adminEnabled
=
true

key
1
=
value
1

admin
=
admin
123

user
=
myPass

passwords
=
key
1
,ad
min,user


UserConstants
_
en.properties

Public interface

UserConstants




extends

Constants
{


String
loginMessage
();


String
[]

builtInUsers
();


int

maxPasswordLength
();


boolean

adminEnabled
();



Map
<
String
,

String
>

passwords
();

{

UserConstants.java

Rich Java Client Seminar

Constants Usage








//
...


UserConstants

userConstants

=

GWT
.
create
(
UserConstants
.
class
);


String
msg

=

userConstants
.
loginMessage
();

String
[]

users
=

userConstants
.
builtInUsers
();

int

passLen

=

userConstants
.
maxPasswordLength
();

boolean

enabled
=

userConstants
.
adminEnabled
();

Map
<
String
,
String
>

passwords
=

userConstants
.
passwords
();


//
...

Rich Java Client Seminar

Annotations


Use
@
Key
annotation
to provide
a property
key different from method name.


The
default String values are expressed either:


A
default properties file (no locale suffix
)


A @
DefaultXXX

annotation:


String

-


@
DefaultStringValue


String[]
-