Greg Murray

February 2006
Web 2.0 and AJAX with Java
2
Agenda
Definitions: Web 2.0, Rich Web Applications, AJAX
Demo
Guidelines
JSF Appoach
AJAX !lue"ints
Futues
# $ A
3
Agenda
Definitions: Web 2.0, Rich Web Applications, AJAX
AJAX %se&ases'
Demo
Guidelines
JSF Appoach
AJAX !lue"ints
Futues
# $ A
4
Web 2.0
Web as a "latfom
&ollection (ntelli)ence
>
Fol*sonom+ , &ollaboati-e &ate)oi.ation
Data is *e+ and should be shaed
Soft/ae is in constantl+ e-ol-in)
>
Soft/ae elease c+cles dead'
0i)ht/ei)ht "o)ammin) 1odels
>
S2A"3R4S5
5he 6et/o* is the compute
Rich %se 47peience
5
Conventional Rich Web Applications
"lu)ins3Applets
Fames3 ifames
Dumb bo/se
Se-e &entic
"a)e to "a)e na-i)ation based
6
Conventional Inteaction !odel
"
#igh $evel AJAX Inteaction !odel
%
AJAX
As+nchonous Ja-aScipt 8 X10
AJAX is using JavaScript, namely the
XmlHttpRequest object, to communicate
asynchronously with a server-side
component and dynamically update the
source o an H!"# page based on the
resulting X"#$!e%t response&
&
Anato'( o) an AJAX Inteaction
*0
#+!$ ,age -vent
'orm name()autoillorm) action()autocomplete) method()get)*
'table border()+) cellpadding(),) cellspacing()+)*
'tr*'td*'b*-mployee .ame/'$b*'$td*'td*
'input type()te%t) id()complete-ield) si0e()1+)
autocomplete()o)
on2eyup()do3ompletion456)*
'$td*'td align()let)*
'input id()submit7btn) type()Submit) value()#oo2up -mployee)*
'$td*'$tr*
'tr*'td id()auto-row) colspan()1)*8nbsp6'td$*'$tr*
'$table*
'$orm*
'div style()position/ absolute6 top/9:+p%6let/9;+p%) id()menu-popup)*
'table id()complete!able) border()9) bordercolor()blac2)
cellpadding()+) cellspacing()+) $*
'$div*
**
Java.cipt -vent #andle
unction getXHR45 <
i 4window&X"#HttpRequest5 <
return new X"#HttpRequest456
= else i 4window&ActiveX>bject5 <
return new ActiveX>bject4)"icrosot&X"#H!!?)56
=
=
unction do3ompletion45 <
var url ( )autocomplete@action(complete8id() A
encodeBRC4target&value56
var req ( getXHR456
req&onreadystatechange ( processRequest6
req&open4)D-!), url, true56
req&send4null56
=
*2
.evlet
public void doDet4HttpServletRequest request, HttpServletResponse response5
throws C>-%ception, Servlet-%ception <
String targetCd ( request&get?arameter4)id)56
Cterator it ( employees&2eySet45&iterator456
while 4it&has.e%t455 <
-mployeeEean e ( 4-mployeeEean5employees&get44String5it&ne%t4556
i 44e&getFirst.ame45&to#ower3ase45&startsGith4targetCd5 HH
e&get#ast.ame45&to#ower3ase45&startsGith4targetCd55 88 ItargetCd&equals4))55 <
sb&append4)'employee*)56
sb&append4)'id*) A e&getCd45 A )'$id*)56
sb&append4)'irst.ame*) A e&getFirst.ame45 A )'$irst.ame*)56
sb&append4)'last.ame*) A e&get#ast.ame45 A )'$last.ame*)56
sb&append4)'$employee*)56
namesAdded ( true6
= =
i 4namesAdded5 <
response&set3ontent!ype4)te%t$%ml)56
response&setHeader4)3ache-3ontrol), )no-cache)56
response&getGriter45&write4)'employees*) A sb&toString45 A )'$employees*)56
= else response&setStatus4HttpServletResponse&S37.>73>.!-.!56
=
*3
Java.cipt Client Callbac/
unction post?rocess4responseX"#5 <
clear!able456
var employees ( responseX"#&get-lementsEy!ag.ame4)employees)5J+K6
i 4employees&child.odes&length * +5 <
complete!able&setAttribute4)bordercolor), )blac2)56
complete!able&setAttribute4)border), )9)56
= else <
clear!able456
=
or 4loop ( +6 loop ' employees&child.odes&length6 loopAA5 <
var employee ( employees&child.odesJloopK6
var irst.ame ( employee&get-lementsEy!ag.ame4)irst.ame)5J+K6
var last.ame ( employee&get-lementsEy!ag.ame4)last.ame)5J+K6
var employeeCd ( employee&get-lementsEy!ag.ame4)id)5J+K6
append-mployee4irst.ame&child.odesJ+K&nodeLalue,
last.ame&child.odesJ+K&nodeLalue, employeeCd&child.odesJ+K&nodeLalue56
=
=
*4
0e'o
AJAX Memo
*5
Agenda
Definitions: Web 2.0, Rich Web Applications, AJAX
Demo
Guidelines
JSF Appoach
AJAX !lue"ints
Futues
# $ A
*6
AJAX 12idelines
Ja-aScipt 0ibaies
%sabilit+
(9:n
AJAX Desi)n
Achitectues
;55" methods
Retun content<t+pes
%secases3"attens
Secuit+
*"
Java.cipt $ibaies
"otot+pe
R(&2
Scipt.aculo.us
Do=o
>imba
Recommendation: Adopt a library and don't try to re-invent the wheel.
*%
3sabilit(
!ac*3Fo/ad3Refesh !uttons
!oo*ma*in)
%R0 shain)
"intin)
?0: &ompliance
Recommendation: Consider the meaning of each and weigh
the benefits when designing your application.
*&
X!$#ttpRe42est 5X#R6
;55" 1ethod
>
G45 < When the esult of 6 @ 0 eAuests is the same.
>
"2S5 < When opeation has Bside<effectsC and chan)es
the state on the se-e.
&oncuent ReAuests
>
1a7 is 2 D(4E &onside < "oolin)
>
Ja-aScipt &losues , (nline functions
Recommendation: Take care using the !R. "se Closures to track the
re#uests$callbacks. Consider using a library.
20
Intenationali7ation 5I*%n6
"a)e &ontent 5+pe
Fmeta http<eAui-GH&ontent<5+peH
contentGHte7t3htmlI chasetG%5F<:H@
%se Ja-aScipt encode%R( /hen buildin) %R0s o
sendin) locali.able content.
&all eAuest.set&haacte4ncodin)DH%5F<:HE befoe etie-in)
an+ paametes fom Ja-a 44.
&all esponse.set&ontent5+peDBte7t37mlIchasetG%5F<:CE
Recommendation: "se "T%-& since it supports the widest number of
languages and browsers.
2*
AJAX 0esign
Add Aound the 4d)es
>
Small components Dautocomplete, tee, patial submitE
"a)e is the Application
>
&lient and Se-e split 1J& esponsibilities
Recommendation: Consider designing initial A'A applications around
the edges as you gain e(perience. )on't go overboard.
22
Achitect2es
Se-e &entic
>
Se-e Rendes 4-e+thin)
&lient &entic
>
1oe Ja-aScipt
>
"a)e as the Application
>
&lient &ontolle
Recommendation: *f you already have a server centric architecture
consider adding some client centric components. +hen using a client
centric architecture consider using an e(isting library.
23
Response Content +(pe
X10
;510
5e7t
>
"ost pocessin) on client
>
(n=ect diectl+ into the pa)e
Ja-aScipt
>
4-aluated in Ja-aScipt usin) e-alDE
>
Ja-aScipt ob=ect epesentations of dataDJS26E
Recommendation: "se ,- for structured portable data. "se plain te(t
for when in.ecting content into the !T,-. "se 'ava/cript to return
ob.ect representations data.
24
3scases8,attens
Ad-anced &ontols
Autocomplete
2bse-e
1aste Details
"atial Submit
Se-e Side Jalidation
Jalue 0ist ;andle
Recommendation: "se A'A to 0nhance the user e(perience.
25
.ec2it(
Sandbo7ed
>
&oss Domain X10;ttpReAuest esticted
>
Access to file s+stem esticted
;55"S , ReAuies a pa)e efesh
Ja-aScipt 0ibaies fo 4nc+ption 47ist
Ja-aScipt code -isible to the /old
Recommendation: "se !TT1/ when you want to secure A'A
communication. )on't put compromising code in your 'ava/cript
26
,e)o'ance
http:33///.macumos.com3e-ents3m/sf200K<stats.php
BWe pea*ed at appo7imatel+ 90L,000 simultaneous /eb -isitos and
K,000 (R& -ie/es duin) the Me+note speech and tansmited o-e L2
G! of data in a thee hou peiod. (f not fo the efficienc+ of the
1acRumos0i-e AJAX update s+stem, the same /ebcast /ould ha-e
eAuied appo7imatel+ t/ice as man+ se-es and /ould ha-e had to
tansfe almost K times as much data D9NK G!E.C
"attens< Jalue 0ist ;andle3 1aste Details
Ja-aScipt < &ompession
Recommendation: A'A 1erforms2 "se patterns and try to reduce the
si3e of your 'ava/cript files. Consider dynamic loading of script
2"
Agenda
Definitions: Web 2.0, Rich Web Applications, AJAX
Demo
Guidelines
JSF Appoach
AJAX !lue"ints
Futues
# $ A
2%
J.9 Co'ponent Appoach
&ontol &ontent Rendein)
&ontol of Se-e Side 0o)ic
All in one component
Reusable
%sable in a tool
;ide AJAX comple7it+ fom pa)e de-elopes
4enefits *nclude:
2&
Anato'( o) an AJAX enabled J.9
Co'ponent
30
,age 0evelope:s ;iew o) J.9
Co'ponent
'aja%!ags/completionField
si0e();+) id()cityField)
completion"ethod()
N<ApplicationEean&complete.ame=)
$*
3*
.eve .ide $ogic )o J.9
Co'ponent
public StringJK complete.ame45 <
Array#ist results ( new Array#ist456
Cterator it ( employees&2eySet45&iterator456
while 4it&has.e%t455 <
-mployeeEean e ( 4-mployeeEean5employees&get44String5it&ne%t4556
i 44e&getFirst.ame45&to#ower3ase45&startsGith4targetCd5 HH
e&get#ast.ame45&to#ower3ase45&startsGith4targetCd55 88
ItargetCd&equals4))55 <

results&add4e&getCd45 A ) ) A
e&getFirst.ame45 A
e&get#ast.ame4556
=
=
return 4StringJK5results&toArray456
=
32
AJAX <l2e,ints
!lue"ints Solutions &atalo) 4nties on AJAX
>
6et!eans
>
&ommand 0ine
>
Witten fo Glassfish http:33)lassfish.de-.=a-a.net
Ja-a "etstoe Demo
33
92t2es
AJAX "et Stoe
1oe Ja-a !lue"ints Solutions &atalo) enties
1oe Ja-a !lue"ints AJAX components
!ette tool suppot
Web 2.03AJAX focus fo Ja-a2ne 200K
34
.2''a(
Ja-a po-ides the ideal platfom fo AJAX and Web
2.0 st+le applications
%se AJAX /hee it ma*es sense.
Follo/ the )uidelines
5he !lue"ints team and !lue"ints Solutions
&atalo) is a )eat AJAX esouces
35
Reso2ces
!lue"ints AJAX "a)e:
http:33=a-a.sun.com3bluepints3a=a7.html
AJAX FA# fo the Ja-a De-elope
http:33bluepints.de-.=a-a.net3a=a7<faA.html
#ui*smode.o)
http:33///.Aui*smode.o)
= > A