Learning Ext JS

Learnlng LxL !
S
8ulld dynamlc deskLopsLyle user lnLerfaces for your
daLadrlven web appllcaLlons
Shea lrederlck
Colln 8amsay
SLeve CuLLer 8lades
8l8MlnCPAM MuM8Al
1hls maLerlal ls copyrlghL and ls llcensed for Lhe sole use by 8oman Pelnrlch on 23Lh uecember 2008
Am Pllllgenbusch 47 aderborn n8W 33098Learnlng LxL !S
CopyrlghL 2008 ackL ubllshlng
All rlghLs reserved no parL of Lhls book may be reproduced sLored ln a reLrleval
sysLem or LransmlLLed ln any form or by any means wlLhouL Lhe prlor wrlLLen
permlsslon of Lhe publlsher excepL ln Lhe case of brlef quoLaLlons embedded ln
crlLlcal arLlcles or revlews
Lvery efforL has been made ln Lhe preparaLlon of Lhls book Lo ensure Lhe accuracy of
Lhe lnformaLlon presenLed Powever Lhe lnformaLlon conLalned ln Lhls book ls sold
wlLhouL warranLy elLher express or lmplled nelLher Lhe auLhors ackL ubllshlng
nor lLs dealers or dlsLrlbuLors wlll be held llable for any damages caused or alleged Lo
be caused dlrecLly or lndlrecLly by Lhls book
ackL ubllshlng has endeavored Lo provlde Lrademark lnformaLlon abouL all Lhe
companles and producLs menLloned ln Lhls book by Lhe approprlaLe use of caplLals
Powever ackL ubllshlng cannoL guaranLee Lhe accuracy of Lhls lnformaLlon
llrsL publlshed november 2008
roducLlon 8eference 1201108
ubllshed by ackL ubllshlng LLd
32 Llncoln 8oad
ClLon
8lrmlngham 827 6A uk
lS8n 9781847193142 142 142
wwwpackLpubcom
Cover lmage by Mlchelle Ckane (mlchelle[kofele)
Am Pllllgenbusch 47 aderborn n8W 33098CredlLs
AuLhors
Shea lrederlck
Colln 8amsay
SLeve CuLLer 8lades
8evlewer
!ames kennard
Senlor AcqulslLlon LdlLor
uavld 8arnes
uevelopmenL LdlLor
Swapna v verlekar
1echnlcal LdlLor
Cagandeep Slngh
Copy LdlLor
SumaLhl Srldhar
LdlLorlal 1eam Leader
Akshara Aware
ro[ecL Manager
Abhl[eeL ueobhakLa
ro[ecL CoordlnaLor
neelkanLh MehLa
lndexer
Monlca A[mera
roofreader
ulrk Manuel
roducLlon CoordlnaLor
8a[nl 8 1horaL
Cover Work
8a[nl 8 1horaL
Am Pllllgenbusch 47 aderborn n8W 33098AbouL Lhe AuLhors
Shea lrederlck began hls career ln web developmenL before Lhe Lerm Web
AppllcaLlon became commonplace 8y Lhe laLe 1990s he was developlng web
appllcaLlons for 1ower 8ecords LhaL comblned a call cenLer lnLerface wlLh lnvenLory
and fulllmenL Slnce Lhen Shea has worked as a developer for several companles
bulldlng and lmplemenLlng varlous commerce soluLlons conLenL managemenL
sysLems and lead Lracklng programs
lnLegraLlng new Lechnologles Lo make a beLLer appllcaLlon has been a drlvlng
polnL for Sheas work Pe sLrlves Lo use opensource llbrarles as Lhey are ofLen Lhe
launchlng pad for Lhe mosL creaLlve Lechnologlcal advances AfLer sLumbllng upon a
young user lnLerface llbrary called yulexL several years ago Shea conLrlbuLed Lo lLs
growLh by wrlLlng documenLaLlon LuLorlals and example code Pe has remalned an
acLlve communlLy member for Lhe modern yulexL llbraryLxL !S Sheas experLlse
ls drawn from communlLy forum parLlclpaLlon work wlLh Lhe core developmenL
Leam and hls own experlence as Lhe archlLecL of several large LxL !Sbased web
appllcaLlons Pe currenLly llves ln 8alLlmore Maryland wlLh hls wlfe and Lwo dogs
and spends Llme skllng blklng and waLchlng Lhe SLeelers
A blg lovlng Lhanks goes ouL Lo my wlfe 8ecky for looklng over my
shoulder Lo correcL Lhe many grammaLlcal errors my ngers produce
and for always belng Lhere Lo supporL me
Colln 8amsay began hls career bulldlng AS webslLes as a parLLlme developer
aL unlverslLy Slnce Lhen hes been lnvolved wlLh a range of web Lechnologles
and employers ln Lhe norLh LasL of Lngland worklng on everyLhlng from ash
lnLhepan web frameworks Lo legacy appllcaLlons MosL recenLly he has used
Lhls experlence Lo provlde a sprlngboard for Lhe formaLlon of hls ukbased web
developmenL company lasLlscenlc LlmlLed lrom wrlLlng arLlcles and blog posLs
across Lhe web Colln has made Lhe leap Lo book auLhorlng wlLh Lhe paLlence and
klnd asslsLance of hls frlends and famlly
Am Pllllgenbusch 47 aderborn n8W 33098SLeve 8lades (who goes by Lhe name of CuLLer) a
vlrglnla naLlve ralsed ln a vlrglnla naLlve ralsed ln
Ceorgla began hls compuLlng career when he sLarLed learnlng 8ASlC aL age
12 hammerlng ouL small programs on a 1lmex Slnclalr 1000 As a llngulsL and
lnLelllgence AnalysL for Lhe uS Army CuLLer began learnlng P1ML whlle sLaLloned
aL Lhe naLlonal SecurlLy Agency Cn leavlng Lhe servlce CuLLer became parLowner
of a growlng AdverLlslng SpeclalLy company developlng buslness auLomaLlon
processes for Lhe company by wrlLlng MS Cfcebased appllcaLlons lrom Lhere
CuLLer wenL on Lo become a CusLomer SupporL 1echnlclan wlLh a local lnLerneL
Servlce rovlder upon showlng programmlng apLlLude he was laLer moved
lnLo Lhelr CorporaLe SupporL deparLmenL provldlng malnLenance and rewrlLes Lo
exlsLlng webslLes and appllcaLlons lL was here LhaL CuLLer began Lo really dlve lnLo
web appllcaLlon programmlng Leachlng hlmself !avaScrlpL CSS and Coldluslon
programmlng CuLLer Lhen Look Lhe poslLlon of l1 ulrecLor for SeacreLs a large resorL
desLlnaLlon ln Ccean ClLy Maryland whlle also holdlng Lhe same poslLlon for one
of lLs owners oLher companles lrle 8adlo now CuLLer ls Lhe Senlor Web ueveloper
for uealersklns a company LhaL develops and hosLs webslLes for Lhe auLomoblle
dealershlp lndusLry Pe llves and works ln nashvllle 1ennessee wlLh hls wlfe 1eresa
and daughLer Savannah
AparL from work slde pro[ecLs and malnLalnlng hls blog (hLLp//blog
cuLLerscrosslngcom) CuLLer also en[oys spendlng Llme wlLh hls famlly ls an avld
reader and a vldeophlle and llkes Lo rellve hls band days wlLh a mlc ln hand
l would llke Lo Lhank a few people for Lhelr supporL whlle l have
been worklng on Lhls pro[ecL llrsL Lhanks Lo !ack Slocum and
Lhe enLlre LxL !S Leam for glvlng us such a greaL llbrary Lo wrlLe
abouL 1hanks Lo Lhe uev 1eam aL uealersklns for helplng proof
my chapLers 1hanks Lo my Mom for buylng me my rsL book on
programmlng 8uL mosL of all Lhanks Lo my wlfe 1eresa and my
daughLer Savannah for glvlng me Lhe Llme space love and
supporL needed Lo work on Lhls pro[ecL l could never have done
lL wlLhouL Lhem
Am Pllllgenbusch 47 aderborn n8W 33098 AbouL Lhe 8evlewer
!ames kennard ls an allround compuLer speclallsL wlLh a parLlcular lnLeresL ln
webbased Lechnologles Pe auLhored Lhe !oomla! CMS book MasLerlng !oomla! 13
LxLenslon and lramework uevelopmenL Pe holds a 8Sc ln CompuLer Sclence and has
worked for organlsaLlons such as LoglcaCMC !ames has recenLly Laken an lnLeresL
ln user lnLerfaces and overall uxlL ls Lhls whlch led hlm Lo Lhe Lruly superb
LxL !S pro[ecL
Am Pllllgenbusch 47 aderborn n8W 330981hls maLerlal ls copyrlghL and ls llcensed for Lhe sole use
by 8oman Pelnrlch on 23Lh uecember 2008
Am Pllllgenbusch 47 aderborn n8W 33098uedlcaLed Lo our famlly frlends and Lhe LxL !S Leam
Am Pllllgenbusch 47 aderborn n8W 330981able of ConLenL
reface 1
ChapLer 1 CeLLlng SLarLed 9
AbouL LxL 9
LxL noL [usL anoLher !avaScrlpL llbrary 11
Crossbrowser uCM (uocumenL Cb[ecL Model) 12
LvenLdrlven lnLerfaces 12
LxL and A!Ax 12
CeLLlng LxL 13
Where Lo puL LxL 13
lncludlng LxL ln your pages 14
WhaL do Lhose flles do? 13
uslng Lhe LxL llbrary 13
1lme for acLlon 16
1he example 17
noL worklng? 17
AdapLers 18
uslng adapLers 18
lm asynchronous! 19
LocallzaLlon 20
Lngllsh only 20
A language oLher Lhan Lngllsh 21
MulLlple languages 21
LxL !S onllne communlLy 22
Summary 22
Am Pllllgenbusch 47 aderborn n8W 330981able of ConLenLs
ll
ChapLer 2 1he SLaples of LxL 23
8eady seL go! 23
Spacer lmage 24
WldgeL 24
1lme for acLlon 24
WhaL [usL happened? 23
uslng on8eady 23
More wldgeL wonders 26
MeeL !SCn and Lhe conflg ob[ecL 28
1he old way 28
1he new wayconflg ob[ecLs 28
WhaL ls a conflg ob[ecL? 29
Pow does !SCn work? 30
1lme for acLlon 30
LlghLlng Lhe flre 32
1he workhorseLxLgeL 33
Speed Llp 34
Summary 33
ChapLer 3 lorms 37
1he core componenLs of a form 37
Cur flrsL form 38
nlce formhow does lL work? 39
lorm flelds 39
valldaLlon 40
8ullLln valldaLlonvLypes 41
SLyles for dlsplaylng errors 43
CusLom valldaLloncreaLe your own vLype 44
MasklngdonL press LhaL key! 43
8adlo buLLons and check boxes 46
lLs noL a buLLon lLs a radlo buLLon 46
x marks Lhe check box 46
1he Combo8ox 47
uaLabasedrlven Combo8ox 47
1exLArea and P1MLLdlLor 30
LlsLenlng for form fleld evenLs 31
Combo8ox evenLs 31
8uLLons and form acLlon 33
lorm submlsslon 33
1alklng backLhe server responses 34
lll
Loadlng a form wlLh daLa 36
SLaLlc daLa load 36
Cb[ecL reference or componenL conflg 38
lnsLanLlaLed 38
ComponenL conflg 38
Summary 39
ChapLer 4 8uLLons Menus and 1oolbars 61
A Loolbar for every occaslon 61
1oolbars 61
1he buLLon 63
Menu 63
SpllL buLLon 64
1oolbar lLem allgnmenL dlvlders and spacers 63
ShorLcuLs 66
lcon buLLons 66
8uLLon handlerscllck me! 67
Load conLenL on menu lLem cllck 68
lorm flelds ln a Loolbar 69
1oolbars ln wlndows grlds and panels 70
Summary 71
ChapLer 3 ulsplaylng uaLa wlLh Crlds 73
WhaL ls a grld anyway? 74
ulsplaylng sLrucLured daLa wlLh a Crldanel 74
SeLLlng up a daLa sLore 73
Addlng daLa Lo our daLa sLore 73
ueflnlng your daLa for Lhe daLa sLore 76
Speclfylng daLa Lypes 77
ulsplaylng Lhe Crldanel 78
Pow dld LhaL work? 80
Conflgurlng Lhe Crldanel 80
ueflnlng a Crlds column model 81
uslng cell renderers 82
lormaLLlng daLa uslng Lhe bullLln cell renderers 82
CreaLlng lookup daLa sLorescusLom cell renderlng 83
Comblnlng Lwo columns 84
CeneraLlng P1ML and graphlcs 84
8ullLln feaLures 83
CllenLslde sorLlng 86
Pldden/vlslble columns 86
Column reorderlng 86
lv
ulsplaylng serverslde daLa ln Lhe grld 88
Loadlng Lhe movle daLabase from an xML flle 88
Loadlng Lhe movle daLabase from a !SCn flle 90
Loadlng daLa from a daLabase uslng P 91
rogrammlng Lhe grld 92
Worklng wlLh cell and row selecLlons 92
LlsLenlng Lo our selecLlon model for selecLlons 93
ManlpulaLlng Lhe grld (and lLs daLa) wlLh code 94
AlLerlng Lhe grld aL Lhe cllck of a buLLon 94
Advanced grld formaLLlng 93
aglng Lhe grld 96
Crouplng 98
Crouplng sLore 98
Summary 100
ChapLer 6 LdlLor Crlds 101
WhaL can l do wlLh an edlLable grld? 101
Worklng wlLh edlLable grlds 102
LdlLlng more cells of daLa 104
LdlL more fleld Lypes 104
LdlLlng a daLe value 103
LdlL wlLh a Combo8ox 106
8eacLlng Lo a cell edlL 106
WhaLs a dlrLy cell? 107
8eacLlng when an edlL occurs 107
ueleLlng and addlng ln Lhe daLa sLore 108
8emovlng grld rows from Lhe daLa sLore 109
Addlng a row Lo Lhe grld 110
Savlng edlLed daLa Lo Lhe server 112
Sendlng updaLes back Lo Lhe server 112
ueleLlng daLa from Lhe server 114
Savlng new rows Lo Lhe server 113
Summary 117
ChapLer 7 LayouLs 119
WhaL are layouLs reglons and vlewporLs? 119
Cur flrsL layouL 121
SpllLLlng Lhe reglons 122
l wanL opLlons 123
1ab panels 124
Addlng a Lab panel 124
v
WldgeLs everywhere 126
Addlng a grld lnLo Lhe Labpanel 126
Accordlons 128
nesLlng an accordlon layouL ln a Lab 128
laclng a Loolbar ln your layouL 129
A form Lo add new movles 131
1rlcks and advanced layouLs 132
nesLed layouLs 132
lcons ln Labs 134
rogrammaLlcally manlpulaLlng a layouL 133
now you see me now you donL 133
Clve me anoLher Lab 136
Summary 136
ChapLer 8 LxL !S uoes Crow on 1rees 137
lanLlng for Lhe fuLure 137
lrom Llny seeds 138
Cur flrsL sapllng 138
reparlng Lhe ground 139
A Lree canL grow wlLhouL daLa 140
!SCn 141
A qulck word abouL lu 141
LxLra daLa 142
xML 142
1endlng your Lrees 143
urag and drop 143
SorLlng 143
LdlLlng 146
1rlmmlng and prunlng 147
SelecLlon models 147
8oundup wlLh conLexL menus 148
Pandllng Lhe menu 149
lllLerlng 130
1he rooLs 131
1reeanel Lweaks 131
CosmeLlc 132
1weaklng 1reenode 132
ManlpulaLlng 133
lurLher meLhods 134
LvenL capLure 133
vl
8ememberlng sLaLe 136
SLaLeManager 136
CaveaLs 137
Summary 137
ChapLer 9 Wlndows and ulalogs 139
Cpenlng a dlalog 139
ulalogs 160
Cff Lhe shelf 160
ConflrmaLlon 162
lLs all progresslng nlcely 163
8oll your own 164
8ehavlor 163
Wlndows 166
SLarLlng examples 166
anellng poLenLlal 167
LayouL 168
ConflguraLlon 169
When lm cleanlng wlndows 169
1he exLras 169
ueskLopplng 170
lurLher opLlons 171
lramlng our wlndow 171
ManlpulaLlng 172
LvenLs 173
SLaLe handllng 174
Wlndow managemenL 173
uefaulL wlndow manager behavlor 173
MulLlple wlndow example 173
CusLomer servlce WlndowCroups 179
Summary 180
ChapLer 10 LffecLs 183
lLs elemenLary 183
lancy feaLures 184
lLs ok Lo love 184
lxcellenL funcLlons 184
MeLhodlcal madness 184
ladlng 183
lramlng 186
Woooo ghosLlng 186
PlghllghLlng 187
Pufflng and pufflng 188
Scallng Lhe LxL !S helghLs 189
vll
Slldlng lnLo acLlon 189
SwlLchlng from seen Lo unseen 190
ShlfLlng 190
And now Lhe lnLeresLlng sLuff 191
1he lx ls ln 191
Anchorlng yourself wlLh LxL 192
CpLlons 192
Lasy does lL 194
MulLlple effecLs 193
Chalnlng 193
Cueulng 196
Concurrency 196
8locklng and LxLlx uLlllLy meLhods 196
LlemenLal 197
Maklng a move 197
uslng LxL componenLs 198
8rlng ouL Lhe flash 198
?oure maskln lm Lellln 198
uaLa blndlng and oLher Lales 200
Conslderlng componenLs 200
Culck1lpplng 200
Summary 202
ChapLer 11 uragandurop 203
urop whaL youre dolng 203
Llfes a drag 206
Sourclng a soluLlon 206
ApproxlmaLlng 206
Snap! 207
urop me off 207
8uL walL noLhlngs happenlng! 208
lnLeracLlng Lhe fool 209
Zones of conLrol 209
Changlng our llsLs 211
8eglsLerlng an lnLeresL 211
LxLreme draganddrop 212
uaLavlew dragglng 212
ueallng wlLh drag daLa 213
roxles and meLadaLa 214
uropplng ln Lhe deLalls 213
uragdrop groups 216
nurslng our dragdrop Lo healLh 216
lLs all ln Lhe deLalls 217
vlll
ConflguraLlon 217
lLs all under conLrol 217
Managlng our movemenL 218
Clobal properLles 218
Scroll managemenL 219
uragglng wlLhln componenLs 220
1reeanel 220
Crldanel 221
uslng lL ln Lhe real world 221
Summary 222
ChapLer 12 lLs All abouL Lhe uaLa 223
undersLandlng daLa formaLs 223
8aslc remoLe panel daLa 223
CoLchas wlLh P1ML daLa 227
CLher formaLs 227
1he daLa sLore ob[ecL 228
ueflnlng daLa 229
More on mapplng our daLa 230
ulllng daLa lnLo Lhe sLore 231
uslng a uaLa8eader Lo map daLa 233
uslng a cusLom uaLa8eader 234
CeLLlng whaL you wanL llndlng daLa 237
llndlng daLa by fleld value 237
llndlng daLa by record lndex 237
llndlng daLa by record lu 238
CeLLlng whaL you wanL lllLerlng daLa 238
8emoLe fllLerlng 1he why and Lhe how 238
ueallng wlLh 8ecordseL changes 244
Many ob[ecLs Lake a SLore 246
SLore ln a Combo8ox 246
SLore ln a uaLavlew 247
SLores ln Crlds 247
Summary 248
ChapLer 13 Code for 8euse LxLendlng LxL !S 249
Cb[ecLorlenLed !avaScrlpL 249
Cb[ecLorlenLed programmlng wlLh LxL !S 231
lnherlLance 231
8reak lL down and make lL slmple 231
Sounds cool buL whaL does lL mean? 233
now whaL was Lhls overrldlng sLuff? 233
lx
undersLandlng packages classes and namespaces 234
ackages 234
Classes 234
namespaces 234
WhaLs nexL? 234
Ck whaL do we exLend? 233
CreaLlng a cusLom namespace 233
Cur flrsL cusLom class 236
Cverrldlng meLhods 239
undersLandlng Lhe order of evenLs 260
When can we do whaL? 261
WhaL ls an evenLdrlven appllcaLlon? 261
CreaLlng our own cusLom evenLs 262
Cur flrsL cusLom componenL CompleLe 264
WhaLs nexL? 8reaklng lL down 267
uslng xLype 1he beneflLs of lazy lnsLanLlaLlon 271
uslng our cusLom componenLs wlLhln oLher ob[ecLs 271
Summary 272
ChapLer 14 1he ower of LxL !S WhaL Llse Can ?ou uo? 273
So much Lo work wlLh 273
lorm wldgeLs 273
uaLelleld 274
1lmelleld 273
numberlleld 276
CheckboxCroups and 8adloCroups 276
PLmlLdlLor 277
uaLa formaLLlng 278
8aslc sLrlng formaLLlng 278
lormaLLlng daLes 279
CLher formaLLlng 280
Managlng appllcaLlon sLaLe 281
8aslc sLaLe 281
Pow do l geL LhaL wlndow? 282
uslng Lhe back buLLon ln LxL !S appllcaLlons 282
Accesslng Lhe uCM 282
llndlng uCM elemenLs 283
ManlpulaLlng Lhe uCM 283
Worklng wlLh sLyles 284
LxL !S for Lhe deskLop Adobe Al8 284
x
LxL !S communlLy exLenslons 286
uaLelckerlus 286
owerWlzard 287
1lnyMCL 287
Swfuploadanel 288
Colorlcker 288
AddlLlonal resources 289
Samples and demos 289
LxL !S Al 289
LxL !S forums 289
SLepbysLep LuLorlals 290
CommunlLy manual 290
SpkeL luL 290
ApLana SLudlo 290
Coogle 290
Summary 291
Where do we go from here? 291
lndex 293
Am Pllllgenbusch 47 aderborn n8W 33098reface
LxL !S was developed by a unled Leam of programmers worklng Loward a slngle
goalLo provlde a conslsLenL core user lnLerface and lnLeracLlon llbrary 8ecause of
Lhls Lhe code used for dlfferenL funcLlonallLles and wldgeLs ls more coherenL Lhan ln
some oLher !avaScrlpL llbrarles LxL !S really shlnes ln maklng web appllcaLlons easy
Louse and lnLulLlve lf you are a web appllcaLlon developer lLs a greaL llbrary Lo
have ln your arsenal
We sLarL by ouLllnlng how Lo download and congure Lhe LxL !S llbrary Coverlng
everyLhlng from Lhe slmplesL alerLs Lo complex grlds layouLs and forms Lhls book
wlll enable you Lo sLarL creaLlng rlch lnLeracLlve web appllcaLlons
We wlll use plenLy of realworld examples LhaL can be applled lmmedlaLely Lo your
ongolng pro[ecLs Sample code ls broken down Lo lLs slmplesL form allowlng us Lo
concenLraLe on learnlng Lhe usage of Lhe llbrary 8y Lhe end of Lhls book we wlll end
up wlLh a sample appllcaLlon LhaL uses Lhe full specLrum of LxL !S componenLs
WhaL Lhls book covers
ChapLer 1 lnLroduces you Lo Lhe process of lnsLalllng Lhe requlred LxL !S llbrary les
and seLLlng up a baslc page LhaL dlsplays an alerLsLyle message 1hls provldes us
wlLh a way Lo LesL wheLher your seLup was done correcLly and wheLher youre ready
Lo play wlLh some code We also cover how Lo seL up oLher base llbrarles such as
[Cuery ?ul and roLoLype Lo work ln con[uncLlon wlLh LxL !S
ChapLer 2 covers how Lo lnLeracL wlLh Lhe web page and Lhe user WlLh example code
LhaL uses slmple componenLs we qulckly sLarL Lo see Lhe level of user lnLeracLlvlLy we qulckly sLarL Lo
see Lhe level of user lnLeracLlvlLy qulckly sLarL Lo see Lhe level of user lnLeracLlvlLy
LhaL LxL !S provldes rlghL ouL of Lhe box We assemble a serles of dlalogs LhaL appear
and modlfy Lhe exlsLlng pages dependlng upon Lhe users lnpuLs
2
ChapLer 3 launches us lnLo uslng Lhe rsL ma[or wldgeLforms We sLarL by creaLlng
a slmple form wlLh Lhree elds explore Lhe dlfferenL form eld Lypes and Lhen add
some slmple valldaLlon Lo our form lrom Lhere we move on Lo creaLlng cusLom
valldaLlon and daLabasedrlven comboboxes and handllng form submlsslons
ChapLer 4 provldes an overvlew of how Lo use Loolbars and buLLons wlLhln your
appllcaLlon 1hese componenLs are Lyplcally undervalued yeL Lhey provlde cruclal
user lnLerface funcLlons We [ump sLralghL lnLo creaLlng Loolbars wlLh buLLons spllL
buLLons and menus along wlLh addlng mechanlcal elemenLs such as spacers and
dlvlders nexL we cover cusLomlzlng Lhe Loolbar wlLh sLyllzed lcon buLLons and
form elds
ChapLer 3 covers grldsLhe mosL wldelyuLlllzed componenL ln Lhe LxL !S llbrary ln
Lhls chapLer we learn how Lo seL up a grld panel uslng boLh local and remoLe daLa
and ln boLh ln xML and !SCn formaLs We also dlscuss how Lo prepare dlfferenL
daLa Lypes and how Lo creaLe renderers LhaL wlll sLyle and formaL Lhe daLa Lo your
preference uslng Lhe selecLlon model and paglng are among Lhe many lnLeresLlng
polnLs covered ln Lhls chapLer
ChapLer 6 dlves lnLo edlLor grlds Pere we learn how Lo seL up an edlLor grld uslng
dlfferenL form eld Lypes and how Lo save changes made ln Lhe grld back Lo Lhe
server or daLabase We also dlscuss LacLlcs for addlng and removlng rows of daLa Lo
and from our daLa sLore and Lhe server or Lhe daLabase
ChapLer 7 explores Lhe concepL of uslng Lhe layouL componenL Lo brlng all Lhe porLlons
of your appllcaLlon LogeLher lnLo a coheslve web appllcaLlon We sLarL by uslng a
vlewporL wlLh a border layouL Lo conLaln Lhe many parLs of our appllcaLlon lrom
Lhere we are able Lo add oLher layouL feaLures such as Lab panels accordlons and
Loolbars We nlsh up by learnlng how Lo nesL layouLs and make dynamlc changes Lo
Lhe layouL componenLs
ChapLer 8 dlscusses Lhe presenLaLlon of hlerarchlcal lnformaLlon uslng Lhe LxL !S 1ree
supporL uslng realworld examples of hlerarchlcal daLa you wlll dlscover how
Lo dlsplay and manlpulaLe a 1ree vlew ?ou wlll use A!Ax Lechnlques Lo perslsL
Lhe modlcaLlons Lo a server and learn how Lo Lweak Lhe 1ree Lo supporL
advanced scenarlos
ChapLer 9 demonsLraLes how LxL !S can provlde aLLracLlve user prompLs LhaL can
elLher presenL lnformaLlon or accepL lnpuL We Lhen dlscuss Lhe exLenslon of Lhese
dlalogs ln Lhe form of LxLWlndow a fullyedged means of creaLlng cusLomlzable
popup wlndows
ln ChapLer 10 we Lake a Lour of Lhe vlsual effecLs avallable ln Lhe LxL !S effecLs
package ?ou wlll learn how Lo apply anlmaLlons Lo creaLe smooLh LranslLlons and
noLlcaLlons Lo enhance Lhe user experlence
3
ChapLer 11 shows how you can harness LxLddLhe rlch draganddrop funcLlonallLy
provlded by LxL !S A varleLy of dlfferenL demonsLraLlons allow you Lo undersLand
Lhe concepLs behlnd LxLdd and how you can harness lLs poLenLlal wlLhln your
own appllcaLlons
ChapLer 12 geLs sLralghL Lo Lhe hearL of every appllcaLlonLhe daLa LxL !S provldes
several dlfferenL meLhods for reLrlevlng daLa wlLh each meLhod havlng lLs own pros
and cons 1hls chapLer wlll help you Lo declde whaL wlll work for your appllcaLlon
wlLh sLepbysLep examples Lo gulde you on your way
ChapLer 13 shows Lhe Lrue power of LxL !S provldlng an lnLroducLlon Lo creaLlng your
own cusLom componenLs by expandlng upon LxL !Ss exLenslble archlLecLure ?ou
wlll see how Lo creaLe your own componenLs by exLendlng Lhe exlsLlng framework
maklng pleces LhaL you can reuse ln your own appllcaLlons
ChapLer 14 wraps lL all up by showlng you LhaL wlLh LxL !S Lhere ls more Lhan meeLs
Lhe eye ?ou wlll dlscover some of Lhe lnvlslble archlLecLure LhaL allows you Lo
perform lmporLanL Lasks such as daLa formaLLlng and appllcaLlon sLaLe managemenL
?ou wlll also nd LhaL you have a broad array of resources aL your ngerLlps as we
show you Lhe rlch user communlLy LhaL exlsLs around Lhe llbrary and lnLroduce you
Lo addlLlonal resources Lo conLlnue your [ourney ln Learnlng LxL !S
WhaL you need for Lhls book
AL Lhe ground level Lhls book requlres Lhe knowledge Lo wrlLe P1ML pages by
handlf you can wrlLe an P1ML documenL from memory ln Wlndows noLepad
(or ln a good LexL edlLor) Lhen LhaL wlll be good enough lamlllarlLy wlLh lncludlng
exLernal les such as sLyle sheeLs and !avaScrlpL les wlll also be necessary Cnly a
baslc undersLandlng of !avaScrlpL or anoLher scrlpLlng or programmlng language
wlll be requlred
Cne of Lhe Lhlngs LhaL wlll make llfe easler ls havlng access Lo a web server or a local
developmenL web server such as xAM or someLhlng slmllar 1he xAM local
web server ls developed by Apache lrlends (wwwapachefrlendsorg) and comes
ln an easyLouse lnsLall le 8y defaulL lL seLs up Apache P and MySCL whlch
allows you Lo perform local web developmenL easlly 8unnlng Lhls books examples
from a local web server ls useful and can save loLs of Llme
4
A good edlLor and debugger are exLremely useful parLlcularly lf Lhey are speclc Lo
!avaScrlpL as ApLana ls 1he makers of ApLana have creaLed a very powerful Lool for
developlng web appllcaLlons ln !avaScrlpL 1helr edlLor can debug !avaScrlpL CSS
P and many oLher languages as you Lype and Lhe besL parL ls LhaL you can llnk
Lhe edlLor up wlLh your llbrarles and classes Lo geL code auLocompleLlon speclc Lo
your developmenL 1he debugger can alerL you Lo errors ln your code before you geL
Lo Lhe browser (enable Lhe !SLlnL debugger) and can suggesL xes for Lhe errors
1he nal polnL here ls an absoluLe necesslLygeL llrefox and llrebug lnsLalled
on your compuLer! uonL even ask why because llrebug wlll soon become Lhe
program you [usL cannoL do your [ob wlLhouL Soon you wlll be wonderlng how
you ever goL any work done before llrebug WhaL lL does ls allows you Lo monlLor
and lnLeracL wlLh Lhe web page ln real Llme When you sLarL worklng wlLh slngle
page web appllcaLlons and A!Ax you qulckly lose Lhe ablllLy Lo look aL Lhe requesLs
and responses for communlcaLlons such as form submlsslon Cne of Lhe Lhlngs LhaL
llrebug provldes you wlLh ls a way Lo waLch and lnspecL Lhls communlcaLlon 1he
oLher maln Lhlng LhaL lL does ls allow you Lo modlfy Lhe P1ML and !avaScrlpL ln
your web page and waLch Lhese changes Lake effecL ln real Llme 1he bullLln scrlpL
debugger leLs us pause code execuLlon and lnspecL or even modlfy code
and varlables
Cnce you are seL up wlLh a local (or remoLe) developmenL web server your
favorlLe edlLor and debugger and llrefox wlLh llrebug you are ready Lo sLarL
Learnlng LxL !S
Who ls Lhls book for
1hls book ls wrlLLen for Web AppllcaLlon uevelopers who are famlllar wlLh P1ML
buL may have llLLle Lo no experlence wlLh !avaScrlpL appllcaLlon developmenL lf you
are sLarLlng Lo bulld a new web appllcaLlon or you are revamplng an exlsLlng web
appllcaLlon Lhen Lhls book ls for you
ConvenLlons
ln Lhls book you wlll nd a number of sLyles of LexL LhaL dlsLlngulsh beLween
dlfferenL klnds of lnformaLlon Pere are some examples of Lhese sLyles and an
explanaLlon of Lhelr meanlng
Code words ln LexL are shown as follows 1he conflg ob[ecL used for Lhls dlalog has
Lhree elemenLs
3
A block of code ls seL as follows
LxLon8eady(funcLlon()
LxLMsgshow(
LlLle MllLon
msg Pave you seen my sLapler?
buLLons
yes Lrue
no Lrue
cancel Lrue

)
)
When we wlsh Lo draw your aLLenLlon Lo a parLlcular parL of a code block Lhe
relevanL llnes or lLems wlll be shown ln bold

xLype daLefleld
fleldLabel 8eleased
name released

new Lerms and lmporLanL words are lnLroduced ln bold Words LhaL you see on Lhe
screen ln menus or dlalog boxes for example appear ln Lhe LexL llke Lhls We also
have elemenLs LhaL can add space and verLlcal dlvlders llke Lhe one used beLween
Lhe Menu and Lhe SpllL buLLons
Warnlngs or lmporLanL noLes appear ln a box llke Lhls
1lps and Lrlcks appear llke Lhls
8eader feedback
leedback from our readers ls always welcome LeL us know whaL you Lhlnk abouL
Lhls book whaL you llked or may have dlsllked 8eader feedback ls lmporLanL for us
Lo develop LlLles LhaL you really geL Lhe mosL ouL of
1o send us general feedback slmply drop an emall Lo feedback[packLpubcom and
menLlon Lhe book LlLle ln Lhe sub[ecL of your message
6
lf Lhere ls a book LhaL you need and would llke Lo see us publlsh please send us a
noLe ln Lhe SuCCLS1 A 1l1LL form on wwwpackLpubcom or emall suggesL[
packLpubcom
lf Lhere ls a Loplc LhaL you have experLlse ln and you are lnLeresLed ln elLher wrlLlng
or conLrlbuLlng Lo a book see our auLhor gulde on wwwpackLpubcom/auLhors
CusLomer supporL
now LhaL you are Lhe proud owner of a ackL book we have a number of Lhlngs Lo
help you Lo geL Lhe mosL from your purchase
uownloadlng Lhe example code for Lhe book
vlslL hLLp//wwwpackLpubcom/flles/code/3142_Codezlp Lo dlrecLly
download Lhe example code
1he downloadable les conLaln lnsLrucLlons on how Lo use Lhem
LrraLa
AlLhough we have Laken every care Lo ensure Lhe accuracy of our conLenLs mlsLakes
do happen lf you nd a mlsLake ln one of our booksmaybe a mlsLake ln LexL or
codewe would be graLeful lf you would reporL Lhls Lo us 8y dolng Lhls you can
save oLher readers from frusLraLlon and help Lo lmprove subsequenL verslons of
Lhls book lf you nd any erraLa reporL Lhem by vlslLlng hLLp//wwwpackLpub
com/supporL selecLlng your book cllcklng on Lhe leL us know llnk and enLerlng
Lhe deLalls of your erraLa Cnce your erraLa are verled your submlsslon wlll be
accepLed and Lhe erraLa added Lo any llsL of exlsLlng erraLa LxlsLlng erraLa can be
vlewed by selecLlng your LlLle from hLLp//wwwpackLpubcom/supporL
7
lracy
lracy of copyrlghL maLerlal on Lhe lnLerneL ls an ongolng problem across all
medla AL ackL we Lake Lhe proLecLlon of our copyrlghL and llcenses very serlously
lf you come across any lllegal coples of our works ln any form on Lhe lnLerneL
please provlde Lhe locaLlon address or webslLe name lmmedlaLely so we can pursue
a remedy
lease conLacL us aL copyrlghL[packLpubcom wlLh a llnk Lo Lhe suspecLed
plraLed maLerlal
We appreclaLe your help ln proLecLlng our auLhors and our ablllLy Lo brlng you
valuable conLenL
CuesLlons
?ou can conLacL us aL quesLlons[packLpubcom lf you are havlng a problem wlLh
any aspecL of Lhe book and we wlll do our besL Lo address lL
Am Pllllgenbusch 47 aderborn n8W 33098CeLLlng SLarLed
ln Lhls chapLer we wlll cover Lhe baslcs of LxL and whaL lL can do for us lf youre
accusLom Lo Lhe sLandard web developmenL Lhen youll be exclLed when you learn
abouL Lhe elegance ln Lhe archlLecLure of LxL [usL as l was unllke oLher !avaScrlpL
llbrarles LxL handles Lhe foundaLlon for you so wlLh only a few llnes of code you
can have a fully funcLlonal user lnLerface
ln Lhls chapLer we wlll cover
WhaL LxL does and why youll love uslng lL
Pow Lo geL LxL and sLarL uslng lL ln your web appllcaLlons
uslng adapLers Lo allow LxL Lo coexlsL wlLh oLher !avaScrlpL llbrarles
1aklng advanLage of A!Ax Lechnology
ulsplaylng LxL ob[ecLs ln your own language
AbouL LxL
We wlll be worklng wlLh Lhe mosL recenL release verslon of LxL whlch aL Lhe Llme
of wrlLlng ls Lhe 2x branch 1he change from 1x Lo 2x was a ma[or refacLorlng LhaL
lncluded Laklng full advanLage of Lhe newlycreaLed ComponenL model along wlLh
renamlng many of Lhe componenLs Lo provlde beLLer organlzaLlon 1hese changes
have made 1x code mosLly lncompaLlble wlLh 2x and vlce versa (an upgrade gulde
LhaL explalns ln more deLall whaL has changed ls avallable on Lhe LxL web slLe) 1he ls avallable on Lhe
LxL web slLe) 1he
3x branch ls backwardscompaLlble wlLh 2x and compaLlble wlLh everyLhlng LhaL
we wlll cover ln Lhls book 1he LxL developmenL Leam ls dedlcaLed Lo maklng fuLure
releases backwardscompaLlble
-
-
-
-
-
10
1he LxL llbrary sLarLed ouL as an exLenslon Lo Lhe moderaLely popular yeL very
powerful ?ahoo user lnLerface llbrary provldlng whaL Lhe ?ul llbrary lacked
an easy Lo use Al (AppllcaLlon rogrammlng lnLerface) and real world wldgeLs
Lven Lhough Lhe ?ahoo user lnLerface Lrled Lo focus on Lhe user lnLerface lL dldnL
conLaln much LhaL was useful rlghL ouL of Lhe box
lL wasnL long before LxL had developers and opensource conLrlbuLors chlpplng
ln Lhelr knowledge Lo Lurn Lhe baslc ?ul exLenslon lnLo one of Lhe mosL powerful
cllenLslde appllcaLlon developmenL llbrarles around
LxL provldes an easyLouse rlch user lnLerface much llke you would nd ln a
deskLop appllcaLlon 1hls leLs Lhe web developers concenLraLe on Lhe funcLlonallLy
of web appllcaLlons lnsLead of Lhe Lechnlcal caveaLs 1he examples glven on Lhe
LxL webslLe speak Lhe loudesL abouL how amazlng Lhls llbrary ls
hLLp//wwwexL[scom/deploy/dev/examples/
Cne of Lhe mosL sLrlklng examples ls Lhe leed vlewer 1hls demonsLraLes Lhe many
aspecLs of LxL Powever lL ls a blL Loo complex Lo be used as a learnlng example So
for now you can [usL revel ln lLs brllllance
Am Pllllgenbusch 47 aderborn n8W 33098ChapLer 1
11
AnoLher excellenL example ls Lhe Slmple 1asks LaskLracklng program whlch uLlllzes
a Coogle Cears daLabase
Cver Lhe course of Lhls book you wlll learn how Lo bulld web lnLerfaces as
lmpresslve as Lhese
LxL noL [usL anoLher !avaScrlpL llbrary
LxL ls noL [usL anoLher !avaScrlpL llbraryln facL LxL can work alongslde oLher
!avaScrlpL llbrarles by uslng adapLers Well see how Lo work wlLh adapLers laLer
ln Lhls chapLer
1yplcally we would use LxL ln a web slLe LhaL requlres a hlgh level of user
lnLeracLlonsomeLhlng more complex Lhan your Lyplcal web slLe A web slLe LhaL
requlres processes and a work ow would be a perfecL example or LxL could [usL be
used Lo make your boss gasp wlLh exclLemenL
LxL makes web appllcaLlon developmenL slmple by
rovldlng easyLouse crossbrowser compaLlble wldgeLs such as wlndows
grlds and forms 1he wldgeLs are already neLuned Lo handle Lhe lnLrlcacles
of each web browser on Lhe markeL wlLhouL us needlng Lo change a Lhlng
lnLeracLlng wlLh Lhe user and browser vla Lhe LvenLManager respondlng Lo
Lhe users keysLrokes mouse cllcks and monlLorlng evenLs ln a browser such
as a wlndow reslze or fonL slze changes
-
-
12
CommunlcaLlng wlLh Lhe server ln Lhe background wlLhouL Lhe need Lo
refresh Lhe page 1hls allows you Lo requesL or posL daLa Lo or from your
web server uslng A!Ax and process Lhe feedback ln real Llme
Crossbrowser uCM (uocumenL Cb[ecL Model)
l am sure l donL need Lo explaln Lhe plLfalls of browser compaLlblllLy lrom Lhe rsL
Llme you creaLe a ulv Lag and apply a sLyle Lo lL lL becomes apparenL LhaL lLs noL
golng Lo look Lhe same ln every browser unless you are very dlllgenL When we use
LxL wldgeLs Lhe browser compaLlblllLy ls Laken care of by Lhe LxL llbrary so LhaL each
wldgeL looks exacLly Lhe same ln mosL of Lhe popular browsers whlch are
lnLerneL Lxplorer 6+
llrefox 13+ (C Mac)
Safarl 2+
Cpera 9+ (C Mac)
LvenLdrlven lnLerfaces
LvenLs descrlbe when cerLaln acLlons happen An evenL could be a user acLlon such as
a cllck on an elemenL or lL could be a response Lo an A!Ax call When a user lnLeracLs
wlLh a buLLon Lhere ls a reacLlon wlLh noL [usL one buL many evenLs happenlng
1here ls an evenL for Lhe cursor hoverlng over Lhe buLLon and an evenL for Lhe cursor
cllcklng on Lhe buLLon and an evenL for Lhe cursor leavlng Lhe buLLon We can add an
evenL llsLener Lo execuLe some code block when any or all of Lhese evenLs Lake place
LlsLenlng for evenLs ls noL sLrlcLly relaLed Lo Lhe user lnLerface 1here are also sysLem
evenLs happenlng all Lhe Llme When we make A!Ax calls Lhere are evenLs aLLached
Lo Lhe sLaLus of LhaL A!Ax call Lo llsLen for Lhe sLarL Lhe compleLlon and Lhe fallure
LxL and A!Ax
1he Lerm A!Ax (Asynchronous !avaScrlpL and xML) ls an overlycompllcaLed
acronym for saylng LhaL processes can Lake place ln Lhe background whlle Lhe user
ls performlng oLher Lasks A user could be lllng ouL a form whlle a grld of daLa ls
loadlngboLh can happen aL Lhe same Llme wlLh no walLlng around for Lhe page
Lo reload
-
-
-
-
-
13
CeLLlng LxL
LveryLhlng we wlll need can be downloaded from Lhe LxL webslLe aL
hLLp//wwwexL[scom/download Crab Lhe LxL Suk (SofLware uevelopmenL klL)
whlch conLalns a Lon of useful examples and Lhe Al reference MosL lmporLanLly lL
conLalns Lhe resources LhaL LxL needs Lo run properly
Where Lo puL LxL
Cnce you geL Lhe Suk le uncompress lL onLo your hard drlve preferably ln lLs own
folder My approach Lo folder namlng convenLlons ls based on Lhe sLandard Llnux
sLrucLure where all llbrarles go lnLo a llb folder So for Lhe sake of Lhe examples ln
Lhls book uncompress all of Lhe les ln Lhe Suk lnLo a folder named llb
AfLer exLracLlng everyLhlng from Lhe Suk download le your dlrecLory Lree should
look llke Lhls
1o make lL easler when we upgrade our LxL llbrary Lo Lhe mosL recenLlyreleased
verslon leL us rename Lhe exL201 folder Lo exL[s
1he Suk conLalns a verslon of LxL !S LhaL has everyLhlng you need lncluded ln lL
commonly called exLall lL also conLalns a verslon used for developmenL referred
Lo as Lhe debug verslon whlch ls whaL we wlll prlmarlly use 1he debug verslon
makes lL easler Lo locaLe errors ln your code because lLs uncompressed and wlll
reporL back relevanL llne numbers for errors When lLs Llme Lo release our creaLlon Lo
Lhe general publlc we can swlLch our appllcaLlon Lo use Lhe sLandard exLall and
everyLhlng wlll conLlnue Lo work as lL was
14
lncluded ln Lhe Suk le are a speclcaLlon of dependencles documenLaLlon example
code and more 1he adapLer and resources folders shown ln bold are requlred for
LxL Lo work properly everyLhlng else ls [usL for developmenL purposes
adapLer llles LhaL allow you Lo use oLher llbrarles along slde LxL
bulld llles LhaL can be used Lo cusLombulld an exLall[s
docs 1he documenLaLlon cenLer (Lhls wlll only work when run on
a web server)
examples lenLy of amazlng and lnslghLful examples
resources uependencles of Lhe LxL llbrary such as CSS and lmages
source 1he compleLe source code for LxL
When youre ready Lo hosL your page on a web server Lhe adapLer and resources
folders wlll need Lo be uploaded Lo Lhe server
lncludlng LxL ln your pages
8efore we can use LxL ln our pages we need Lo reference Lhe LxL llbrary les 1o do
Lhls we need Lo lnclude a few of Lhe les provlded ln Lhe Suk download ln Lhe PLAu
porLlon of our P1ML page
hLml
head
LlLleCeLLlng SLarLed Lxample/LlLle
llnk relsLylesheeL LypeLexL/css
hrefllb/exL[s/resources/css/exLallcss /
scrlpL srcllb/exL[s/adapLer/exL/exLbase[s/scrlpL
scrlpL srcllb/exL[s/exLalldebug[s/scrlpL
/head
body
! noLhlng ln Lhe body
/body
/hLml
1he paLh Lo Lhe LxL les musL be correcL and ls relaLlve Lo Lhe locaLlon of our P1ML
le 1hese les musL be lncluded ln Lhe followlng order
exLallcss 1he maln LxL CSS le
An exLernal [s llbrary le lf needed (one noL used ln Lhe examples ln Lhls
book however lf you need Lo use an exLernal llbrary lL ls covered ln Lhe
AdapLers secLlon of Lhls chapLer)
-
-
-
-
-
-
-
-
13
exLbase[s 1he LxL adapLerwe wlll learn more abouL Lhls le laLer ln
Lhls chapLer
exLall[s or exLalldebug[s 1he prlmary LxL llbrary le
A Lheme le could also be lncluded here or aL any polnL afLer Lhe maln LxL
CSS le
WhaL do Lhose flles do?
We have lncluded Lhe followlng Lhree les LhaL LxL requlres Lo run ln our page LhaL LxL requlres Lo run
ln our page ln our page
exLallcss A sLylesheeL le LhaL conLrols Lhe look and feel of LxL wldgeLs
1hls le musL always be lncluded asls wlLh no modlcaLlons Any changes
Lo Lhe CSS ln Lhls le would break fuLure upgrades lf Lhe look and feel of LxL
needs Lo be ad[usLed anoLher sLylesheeL conLalnlng Lhe overrldes should be
lncluded afLer Lhe exLallcss le
exLbase[s 1hls le provldes Lhe core funcLlonallLy of LxL lLs Lhe englne
of Lhe LxL car 1hls ls Lhe le LhaL we would change lf we wanLed Lo use
anoLher llbrary such as [Cuery along wlLh LxL
exLalldebug[s/exLall[s All of Lhe wldgeLs llve ln Lhls le 1he
debug verslon ls used for developmenL and Lhen swapped ouL for Lhe
nondebug verslon for producLlon
Cnce Lhese les are ln place we can sLarL Lo acLually use Lhe LxL llbrary and have
some fun
lf you are worklng wlLh a serverslde language such as P or ASnL1
you mlghL choose Lo lnclude Lhese llnes ln Lhe header dynamlcally lor
mosL of Lhe examples ln Lhls book we wlll assume LhaL you are worklng
wlLh a sLaLlc P1ML page
uslng Lhe LxL llbrary
now LhaL weve added Lhe LxL llbrary Lo our page we can sLarL wrlLlng Lhe code LhaL
uses Lhe LxL llbrary ln Lhe rsL example we wlll use LxL Lo dlsplay a message dlalog
1hls mlghL noL sound llke much buL lLs a sLarL
-
-
-
-
-
-
16
1lme for acLlon
We can run some LxL code by addlng a scrlpL secLlon ln Lhe head of our documenL
rlghL afLer where Lhe LxL llbrary has been lncluded Cur example wlll brlng up an LxL
sLyle alerL dlalog
hLml
head
LlLleCeLLlng SLarLed Lxample/LlLle
scrlpL
LxLMsgalerL(Pello World)
)
/scrlpL
/head
body
! noLhlng ln Lhe body
/body
/hLml
Were noL golng Lo cover exacLly whaL our example scrlpL ls dolng yeL llrsL leLs
make sure LhaL Lhe LxL llbrary ls seL up properly lf we open up our page ln a web
browser we should be able Lo see an alerL message llke Lhe one shown here
!usL llke a real dlalog you can drag lL around buL only wlLhln Lhe consLralnLs of Lhe
page 1hls ls because Lhls lsnL a real dlalog lLs a collecLlon of ulv Lags and lmages
puL LogeLher Lo lmlLaLe a dlalog ?ou can also see LhaL Lhe Close and Ck buLLons geL
hlghllghLed when you move Lhe cursor over LhemnoL bad for one llne of code! LxL
ls Laklng care of a loL of Lhe work for us here and LhroughouL Lhls book well see
how Lo geL lL Lo do much more for us
17
?ou may have noLlced LhaL we are worklng wlLh an empLy documenL
LhaL has no elemenLs ln Lhe body LxL does noL requlre any preexlsLlng
markup for lL Lo funcLlon properly lL generaLes everyLhlng lL needs on
lLs own
1he example
LeLs Lake a look aL LhaL example code we [usL ran Lvery LxL componenL we use wlll
sLarL wlLh LxL and wlll mosL llkely be conLalned wlLhln an LxL and wlll mosL llkely be conLalned wlLhln
an LxL and wlll mosL llkely be conLalned wlLhln an on8eady funcLlon LhaL we
wlll cover wlLh more deLall ln Lhe nexL chapLer
LxLMsgalerL(Pello World)
)
LxL has a very humanreadable lnLerface ?ou can almosL read lL as a senLencewhen
LxL ls ready lL dlsplays a message box ln Lhe alerL sLyle wlLh Pello for a LlLle and
World as Lhe body
Cur alerL message sLarLs wlLh LxLMsg whlch ls Lhe sLarLlng polnL for all message
sLyle wlndows and ls shorLhand for Message8ox 1he alerL porLlon Lells LxL
exacLly whlch sLyle of message wlndow Lo use
noL worklng?
lf Lhe llbrary ls noL seL up correcLly we mlghL recelve an LxL ls undened error
1hls message means Lhe LxL llbrary was noL loaded usually Lhls ls caused by havlng
an lncorrecL paLh Lo one or more of Lhe LxL llbrary les LhaL are lncluded ln our
documenL uoublecheck Lhe paLhs Lo Lhe lncluded llbrary les and make sure Lhey
are polnLlng Lo Lhe rlghL folders and LhaL Lhe les exlsL lf everyLhlng ls ln lLs correcL
place you should see an adapLer folder along wlLh Lhe les exLall[s and
exLalldebug[s ln your llb/exL[s folder
18
AnoLher common problem ls LhaL Lhe CSS le ls elLher mlsslng or ls noL referenced
correcLly whlch wlll resulL ln a page LhaL looks awkward as shown ln Lhe
example below
lf Lhls happens check Lo make sure LhaL you have exLracLed Lhe resources folder
from Lhe Suk le and LhaL your paLhs are correcL 1he resources folder should
reslde under Lhe llb/exL[s folder
AdapLers
When LxL was rsL belng developed (lnlLlally called yulexL) lL requlred Lhe ?ul
llbrary Lo be ln place Lo do Lhe behlndLhescenes work LaLer on LxL was glven Lhe
opLlon of uslng Lwo oLher frameworks[Cuery or roLoLype wlLh ScrlpLaculous
(roLaculous)
1hls means LhaL lf we were uslng oLher llbrarles already or lf we felL some oLher base
llbrary was somehow superlor or beLLer sulLed your needs we could conLlnue uslng beLLer sulLed your
needs we could conLlnue uslng sulLed your needs we could conLlnue uslng
LhaL llbrary ln con[uncLlon wlLh LxL by uslng Lhe approprlaLe adapLer LlLher way LxL
wlll funcLlon Lhe same and all of Lhe componenLs wlll work ldenLlcally no maLLer
whlch adapLer you choose
LxL also has lLs own adapLer an adapLer Lo lLself lf you have no preference for
anoLher llbrary or framework Lhen go wlLh Lhe LxL bullLln Lhe adapLer
uslng adapLers
1o use an adapLer you musL rsL lnclude Lhe exLernal llbrary LhaL you wanL Lo use rsL lnclude Lhe
exLernal llbrary LhaL you wanL Lo use lnclude Lhe exLernal llbrary LhaL you wanL Lo use
and Lhen lnclude Lhe relaLed adapLer le LhaL ls locaLed ln Lhe adapLers folder of Lhe
LxL Suk Cur example code uses Lhe LxL adapLer 1o use any of Lhe oLher llbrarles
[usL replace Lhe defaulL LxL adapLer scrlpL lnclude llne wlLh Lhe llnes for Lhe speclc
llbrarles as shown below
19
uefaulL LxL adapLer
lor [Cuery lnclude Lhese les ln Lhe head of your documenL
scrlpL srcllb/[query[s/scrlpL
scrlpL srcllb/[querypluglns[s/scrlpL
scrlpL srcllb/exL[s/adapLer/[query/exL[queryadapLer[s
/scrlpL
lor ?ul lnclude Lhese les ln Lhe head 1he uLlllLles le ls locaLed ln Lhe bulld/
uLlllLles folder of Lhe ?ul Llbrary download
scrlpL srcllb/uLlllLles[s/scrlpL
scrlpL srcllb/exL[s/adapLer/yul/exLyuladapLer[s/scrlpL
lor roLoLype + ScrlpLaculous lnclude Lhese les ln Lhe head
scrlpL srcllb/proLoLype[s/scrlpL
scrlpL srcllb/scrlpLaculous[s?loadeffecLs/scrlpL
scrlpL srcllb/exL[s/adapLer/proLoLype/
exLproLoLypeadapLer[s/scrlpL
AfLer Lhe adapLer and base llbrarles have been lncluded we [usL need Lo lnclude Lhe
exLall[s or exLalldebug[s le
lm asynchronous!
1he Web 10 way of dolng Lhlngs has all of our code happenlng ln successlonwalLlng
for each llne of code Lo compleLe before movlng on Lo Lhe nexL Much llke bulldlng a
house Lhe foundaLlon musL be compleLe before Lhe walls can be bullL Lhen Lhe walls
musL be compleLe before Lhe roof ls bullL
WlLh LxL we can easlly sLarL worklng on Lhe roof of our house before Lhe foundaLlon
has even been LhoughL abouL lmaglne Lhe roof of our house ls belng bullL ln a
facLory whlle aL Lhe same Llme we are bulldlng Lhe foundaLlon Lhen Lhe walls and
we come ln when all of Lhls ls done and seL Lhe roof LhaL has already been bullL on
Lop of lL all

Web 10 Web 2 0
20
1hls lnLroduces some Lhlngs were noL use Lo havlng Lo cope wlLh such as Lhe
roof belng compleLe before Lhe walls are done no longer are we forced Lo Lake a
llnebyllne approach Lo web developmenL
LxL helps us ouL by glvlng us evenLs and handlers Lo whlch we can aLLach our
funcLlonallLy We can seL up an evenL LhaL walLs around waLchlng Lo see when Lhe
walls of Lhe house are bullL and Lhen seLs Lhe roof on Lop once Lhls has happened
1hls meLhod of Lhlnklng abouL web pages ls hard for mosL people who have grown
up ln web developmenL 8uL lL wonL be long before you are an experL aL lL
SLandard !avaScrlpL alerL messages pause Lhe code execuLlon whlch can
cause unexpecLed resulLs ?ou should noL be uslng Lhe bullL ln !avaScrlpL
alerL messages and lnsLead use LxLs Message8ox wldgeL whlch does
noL pause LhaL code execuLlon
LocallzaLlon
LxL ob[ecLs can be dlsplayed ln your speclc language and currenLly Lhere are over
40 LranslaLlons (unforLunaLely kllngon ls noL yeL avallable) All of Lhese LranslaLlons (unforLunaLely
kllngon ls noL yeL avallable) All of Lhese LranslaLlons All of Lhese LranslaLlons
are creaLed by Lhe communlLyusers llke you and l who have Lhe need Lo use LxL ln
Lhelr own naLlve language 1he lncluded language les are Lo be used as a sLarLlng
polnL So leLs Lake Lhe language we wanL Lo use and copy lL Lo our llb folder 8y
copylng Lhe language le Lo our llb folder we can edlL lL and add LranslaLed LexL Lo
lL wlLhouL lL geLLlng overwrlLLen when we upgrade Lhe LxL llbrary les
1here are Lhree scenarlos for locallzaLlon LhaL requlre Lhree separaLe approaches
Lngllsh only
A slngle language oLher Lhan Lngllsh
MulLlple languages
Lngllsh only
1hls requlres no modlcaLlons Lo Lhe sLandard seLup and Lhere are no exLra les Lo
lnclude because Lhe Lngllsh LranslaLlon ls already lncluded ln Lhe exLall[s le
-
-
-
21
A language oLher Lhan Lngllsh
1he second opLlon requlres LhaL we lnclude one of Lhe language les from Lhe
bulld/locale folder 1hls opLlon works by overwrlLlng Lhe Lngllsh LexL sLrlngs so lL
should be lncluded afLer all of Lhe oLher llbrary les as shown below
scrlpL srcllb/exL[s/bulld/locale/exLlanges[s/scrlpL
l have lncluded Lhe Spanlsh LranslaLlons for Lhls example LeLs see whaL our LesL
page looks llke now
LlemenLs LhaL are parL of Lhe ul have been locallzedLhese generally lnclude
calendar LexL error messages Lool Llp lnfo messages paglng lnfo and loadlng
lndlcaLors Messages LhaL are speclc Lo your appllcaLlon such as Lhe Pl LlLle
and Pello World Lxample LexL wlll need Lo be LranslaLed and added Lo Lhe
exLlangxx[s le (where xx ls your Lwo leLLer language code) or added Lo a
new language le of your own 1he preferred meLhod ls Lo creaLe a language le of
our own wlLh [usL Lhe addlLlons and changes we need Lhls leaves us prepared for
upgrades and xes ln Lhe prlmary language le
MulLlple languages
1he Lhlrd meLhod of swlLchlng beLween dlfferenL languages ls baslcally Lhe same
as Lhe second We would [usL need Lo add some serverslde scrlpLlng Lo our page
Lo enable Lhe swlLchlng beLween language les unforLunaLely swlLchlng beLween
languages cannoL be done enLlrely dynamlcally ln oLher words we canL do lL ln real
Llme and waLch lL happen on Lhe screen
22
LxL !S onllne communlLy
1he onllne communlLy for LxL ls full of qulLe a few very knowledgeable people and
ofLen Lhe LxL core developers are answerlng quesLlons on Lhe forum
hLLp//wwwexL[scom/forum/
lf you run lnLo problems or run up agalnsL a wall a search of Lhe forum ls llkely Lo
yleld whaL you are looklng for l would suggesL geLLlng Lhe Coogle forum search Lool
LhaL ls avallable ln Lhe Learn secLlon of Lhe LxL web slLe
hLLp//wwwexL[scom/learn/
When asklng quesLlons ln Lhe forum be sure Lo lnclude as much deLall
abouL Lhe error(s) as posslble osLlng Lhe exacL LexL of an error message
and only Lhe relevanL porLlons of your code ls Lhe besL way Lo geL a
response from Lhe communlLy
Summary
ln Lhls chapLer we have covered Lhe baslcs of whaL you need Lo do Lo geL LxL up and
runnlng and whaL a slmple scrlpL looks llke lLs easy Lo mlss a mlnor deLall and geL
sLuck wlLh an error message LhaL makes no sense 8uL now you should be prepared
Lo conquer any lnlLlal errors LhaL you mlghL come across
1he example we creaLed showcases whaL LxL excels aL provldlng Lhe user lnLerface
We only used dlalogs buL as you now know a few llnes of code are all LhaL are
needed Lo dlsplay an LxL wldgeL 1he maln goal of Lhls chapLer was Lo geL LxL
lnsLalled and worklng so we can sLarL creaLlng some really sweeL wldgeLs
Am Pllllgenbusch 47 aderborn n8W 330981he SLaples of LxL
ln Lhls chapLer we wlll sLarL Lo use and lnLeracL wlLh LxL wldgeLs for Lhe rsL Llme by
creaLlng a serles of dlalogs LhaL lnLeracL wlLh each oLher Lhe user and Lhe web page
We wlll be uslng Lhe on8eady Message8ox and geL funcLlons Lo learn how Lo creaLe
dlfferenL Lypes of dlalogs and modlfy P1ML and sLyles on our page lurLhermore ln
Lhls chapLer we wlll be
llndlng ouL how Lo congure LxL wldgeLs easlly
WalLlng for Lhe uCM (uocumenL Cb[ecL Model) Lo be made avallable
for lnLeracLlon
uslng dlalogs Lo gure ouL whaL Lhe user wanLs Lo do
uynamlcally changlng Lhe P1ML and CSS on our page ln response Lo Lhe
users lnpuLs
We wlll sLarL by coverlng some of Lhe core funcLlons of LxL We wlll Lake a look aL
how Lhe example glven ln Lhe rsL chapLer worked and wlll expand upon lL 1he
followlng core funcLlons of LxL wlll be used on every pro[ecL LhaL we work on durlng
Lhe course of Lhls book
LxLon8eady 1hls funcLlon makes sure LhaL our documenL ls ready Lo be
Lhrashed ouL
LxLMsg 1hls funcLlon creaLes appllcaLlonsLyle message boxes for us
conflguraLlon ob[ecLs 1hls funcLlon denes how LxL wldgeLs wlll acL
LxLgeL 1hls funcLlon accesses and manlpulaLes elemenLs ln Lhe uCM
8eady seL go!
ln Lhls secLlon well look aL Lhe on8eady evenLLhe rsL Lhlng LhaL you need Lo deal
wlLh when you are worklng wlLh LxL We wlll also see how Lo dlsplay some dlfferenL
Lypes of dlalogs and how Lo respond Lo Lhe users lnLeracLlon wlLh Lhose dlalogs
8efore we geL Lo LhaL we need Lo cover some ground rules abouL worklng wlLh LxL
-
-
-
-
-
-
-
-
24
Spacer lmage
8efore we proceed any furLher we should provlde LxL wlLh someLhlng lL needsa
spacer lmage LxL needs a 1 plxel by 1 plxel LransparenL Cll lmage Lo sLreLch ln
dlfferenL ways glvlng a xed wldLh Lo lLs wldgeLs We need Lo seL Lhe locaLlon of Lhls
spacer lmage uslng Lhe followlng llne
LxL8LAnk_lMACL_u8L lmages/sglf
)
?oure probably wonderlng why we need a spacer lmage aL all 1he user lnLerface of
LxL ls creaLed uslng CSS buL Lhe CSS needs underlylng P1ML elemenLs Lo sLyle so
LhaL lL can creaLe Lhe look and feel of LxL componenLs 1he one P1ML elemenL LhaL
ls an exacL predlcLable slze across all browsers ls an lmage So an lmage ls used
Lo dene how an LxL componenL ls drawn 1hls ls a parL of how LxL malnLalns lLs
crossbrowser compaLlblllLy
WldgeL
LxL has many wldgeLs 1hese lnclude componenLs such as a message box grld
wlndow and preLLy much everyLhlng else LhaL serves a parLlcular user lnLerface
funcLlon l prefer Lo vlew componenLs llke on8eady more as core funcLlons and only
refer Lo componenLs LhaL provlde a speclc user lnLerface role as a wldgeLllke Lhe
grld LhaL ls used Lo presenL Labular daLa Lo Lhe user
1lme for acLlon
LeLs creaLe a new page (or [usL modlfy Lhe geLLlng sLarLed example page) and add
Lhe code Lo dlsplay a dlalog when Lhe page ls ready
LxL8LAnk_lMACL_u8L lmages/sglf
LxLMsgshow(
LlLle MllLon
buLLons
yes Lrue
no Lrue
cancel Lrue

)
)
23
As we dld ln Lhe prevlous chapLer we have placed our code lnslde an on8eady
funcLlon We can Lhen sLarL Lo code our dlalog and congure lL uslng a conflg ob[ecL
1he conflg ob[ecL used for Lhls dlalog has Lhree elemenLs Lhe lasL of whlch ls a
nesLed ob[ecL for Lhe Lhree buLLons
Pere ls how our code now looks ln a browser
1hls dlsplays whaL appears Lo be a very mlnlmal dlalog buL lf we sLarL cllcklng on
Lhlngs Lhe bullLln funcLlonallLy of LxL becomes apparenL 1he dlalog can be dragged
around Lhe screen by grabblng Lhe LlLle bar [usL llke Lhe dlalog ln a Lyplcal deskLop
appllcaLlon 1here ls a close buLLon bullLln and presslng Lhe Lscape key when Lhe
dlalog has focus or cllcklng on Lhe Cancel buLLon wlll close Lhe dlalog
WhaL [usL happened?
LeLs Lake a closer look aL Lhe Lwo core LxL funcLlons we have [usL used
LxLon8eady 1hls funcLlon provldes a way Lo make our code walL unLll Lhe
uCM ls avallable before dolng anyLhlng 1hls ls needed because !avaScrlpL
sLarLs execuLlng as soon as lL ls encounLered ln Lhe documenL aL whlch polnL
our uCM elemenLs mlghL noL exlsL
LxLMsgshow 1hls ls Lhe core funcLlon used for Lhe creaLlon of a dlalog lL
Lakes care of everyLhlng needed Lo have a worklng dlalog 1here are some
shorLcuLs LhaL can be used for common dlalog Lypes whlch wlll help you
save Llme We wlll cover Lhese ln [usL a mlnuLe
uslng on8eady
lLs Llme Lo examlne Lhe code we [usL used Lo dlsplay our dlalog
LxLMsgshow(
LlLle MllLon
buLLons
yes Lrue
-
-
26
no Lrue
cancel Lrue

)
)
1he on8eady funcLlon ls whaL we use Lo make our code walL unLll Lhe documenL ls
ready 1he argumenL passed Lo 1he argumenL passed Lo on8eady ls a funcLlon whlch can be passed ln
as a
funcLlon name or creaLed lnllne as we have done ln Lhe example code 1hls meLhod
of creaLlng a funcLlon lnllne ls referred Lo as an anonymous funcLlon whlch ls used
when you plan on calllng a parLlcular funcLlon only once
lf we were execuLlng a funcLlon LhaL wlll be used agaln Lhen we could dene and call
lL llke Lhls
luncLlon sLapler()
LxLMsgshow(
LlLle MllLon
buLLons
yes Lrue
no Lrue
cancel Lrue

)

LxLon8eady(sLapler())
When we sLarL Lo make our appllcaLlon blgger we are noL llkely Lo use many
anonymous funcLlons and wlll probably opL for creaLlng reusable funcLlons
1he buLLons record can also speclfy Lhe LexL Lo dlsplay on Lhe buLLon
lnsLead of passlng a boolean value [usL pass lL Lhe LexL you wanL for
example yes Maybe
More wldgeL wonders
LeLs geL back Lo maklng our llLLle appllcaLlon as annoylng as posslble by addlng an
lcon and buLLons! 1hls can be done by addlng a sLyle for Lhe lcon and modlfylng Lhe
conflg Lo have an lcon record along wlLh a buLLons record
27
llrsL leLs dlscuss Lhe CSS we need Add Lhe followlng code lnLo Lhe head of Lhe
documenL wlLhln a sLyle Lag
mllLonlcon
background url(mllLonheadlconpng) norepeaL

Also we wlll make some changes Lo our wldgeLs conguraLlon 1he lcon record
[usL needs our sLyle name as Lhe value mllLonlcon We have also lncluded a
funcLlon Lo be execuLed when a user cllcks on any of Lhe buLLons ln Lhe dlalog 1hls
funcLlon ls creaLed as an anonymous funcLlon and ln Lhls case lL ls merely used Lo
pass varlables
LxLMsgshow(
LlLle MllLon
buLLons
yes Lrue
no Lrue
cancel Lrue

lcon mllLonlcon
fn funcLlon(bLn)
LxLMsgalerL(?ou Cllcked bLn)

)
ln our case Lhe funcLlon has only one argumenL whlch ls Lhe name of Lhe buLLon
LhaL was cllcked So lf our user was Lo cllck Lhe ?es buLLon Lhe bLn varlable would
conLaln a value of yes uslng Lhe example code we are Laklng Lhe name of Lhe buLLon
cllcked and passlng lL Lo alerL as Lhe message
1he bullLln funcLlonallLy Lakes care of maklng sure Lhe Cancel buLLon Lhe
close lcon ln Lhe upper rlghL corner and Lhe Lsc key are all Lled LogeLher
Lo perform Lhe cancel acLlon 1hls ls one of Lhe many ways ln whlch LxL
makes Lhe codlng of web appllcaLlons easler for us
28
MeeL !SCn and Lhe conflg ob[ecL
ln our example we are uLlllzlng whaLs called a conflg ob[ecL whlch ls Lhe prlmary
way Lo geL LxL Lo do whaL you wanL 1hls ls whaL provldes Lhe conguraLlon of Lhe
dlfferenL opLlons LhaL are avallable for Lhe funcLlon LhaL ls belng used
1he old way
We used Lo call funcLlons wlLh a predeLermlned seL of argumenLs 1hls means LhaL
we had Lo remember Lhe order of Lhe argumenLs every Llme Lhe funcLlon was used
var LesL new 1esLlunLlon(
Lhree
flxed
argumenLs
)
1hls old way of uslng funcLlons can creaLe many problems
lL requlres us Lo remember Lhe order of Lhe argumenLs
lL does noL descrlbe abouL whaL Lhe argumenLs represenL
lL provldes less exlblllLy ln deallng wlLh opLlonal argumenLs
1he new wayconflg ob[ecLs
uslng a conflg ob[ecL we are able Lo have a larger level of exlblllLy and can Lell
whaL our varlables are ln descrlpLlve plaln LexL 1he order of our argumenLs no
longer maLLersflrsLWord could be Lhe lasL lLem and LhlrdWord could be Lhe rsL
or Lhey could be ln any random order WlLh Lhe conflg ob[ecL meLhod of passlng
argumenLs Lo your funcLlons Lhe argumenLs no longer needs Lo be Lled down Lo a
speclc place
var LesL new 1esLluncLlon(
flrsLWord Lhree
secondWord flxed
LhlrdWord argumenLs
)
1hls meLhod also allows for unllmlLed expanslon of our funcLlons argumenLs uslng
fewer argumenLs or addlng new argumenLs ls slmple AnoLher greaL resulL LhaL
comes by uslng a conflg ob[ecL ls LhaL Lhe prlor usage of your funcLlons wlll noL be
harmed by Lhe addlLlon or subLracLlon of argumenLs aL a laLer polnL
secondWord Lhree
)
-
-
-
29
secondWord Lhree
fourLhWord wow
)
WhaL ls a conflg ob[ecL?
lf you are famlllar wlLh CSS or !SCn youll noLlce LhaL a conflg ob[ecL looks slmllar
Lo Lhese mosLly because Lhey are all Lhe same Cong ob[ecLs are [usL ways of
sLrucLurlng daLa so LhaL lL can easlly be read by programmlng languagesln our
case !avaScrlpL
lor an example leLs Lake a look aL Lhe conflg porLlon of our example code

LlLle MllLon
buLLons
yes Lrue
no Lrue
cancel Lrue

lcon mllLonlcon
fn funcLlon(bLn)
LxLMsgalerL(?ou Cllcked bLn)

1he parLlcular conflg LhaL we are uslng here may appear complex aL rsL buL once
we geL Lo know lL lL becomes an exLremely fasL way of congurlng wldgeLs !usL
abouL every LxL wldgeL uses a conguraLlon ob[ecL so Lhls ls someLhlng LhaL we
wlll wanL Lo become very famlllar wlLh 1he conflg ob[ecL wlll become our new
besL frlend
Pere are some key Lhlngs Lo remember when worklng wlLh a conflg ob[ecL
Curly brackeLs wrap around your whole record seL whlch symbollzes Lhe
records lnslde Lhe brackeLs as belng parL of an ob[ecLrecords
Lach record conslsLs of a seL of name/value palr wlLh Lhe name and value
separaLed by a colon and palrs separaLed by commasname0 value0
name1 value1
1he records values can conLaln any Lype of daLa lncludlng boolean array
funcLlon or even anoLher ob[ecL name0 Lrue name1
name2 value2
-
-
-
30
Square brackeLs ldenLlfy an arrayname one Lwo Lhree
An array can also conLaln ob[ecLs wlLh records values or any number of
oLher Lhlngs
1he besL Lhlng abouL uslng !SCn Lo congure our wldgeLs ls LhaL lf we wanL more
opLlons we [usL sLarL Lyplng Lhem ouL resLo! unllke a Lyplcal funcLlon call Lhe order
of your conflg opLlons has become lrrelevanL and Lhere can be as few or as many
as necessary
Pow does !SCn work?
SomeLlmes you wlll hear people Lalk abouL eval whlch generally refers Lo !SCn
1he eval funcLlon ls whaL !avaScrlpL uses Lo lnLerpreL a !SCn sLrlng converLlng lL
lnLo Lhe ob[ecLs arrays and funcLlons LhaL we are uslng
1lme for acLlon
Ck! So now weve seen how Lo geL our LxL !S parLy sLarLed and ask Lhe user a
quesLlon now leLs see whaL we can do wlLh Lhelr answers LeLs add Lo our dlalogs
funcLlon so LhaL we can declde whaL Lo do ln response Lo each of Lhe buLLoncllcks A
swlLch sLaLemenL can Lake care of decldlng whaL Lo do ln each case
fn funcLlon(bLn)
swlLch(bLn)
case yes
LxLMsgprompL(MllLon Where ls lL?)
break
case no
LxLMsgalerL(MllLon
lm golng Lo burn Lhe bulldlng down!)
break
case cancel
LxLMsgwalL(Savlng Lables Lo dlskllle Copy)
break

8emember Lhose bullL ln dlalog Lypes l menLloned earller? Well we [usL used some of
Lhem 1hey leL us accompllsh some common Lasks wlLhouL spendlng Llme wrlLlng Lhe
conflg needed for each sLandard scenarlo
-
31
Cllck Ck and you geL a prompL A prompL ls Lhe common name for a small wlndow
LhaL allows you Lo enLer a slngle value and ls a sLandard elemenL ln almosL every
user lnLerface
Cllck no and you geL an alerL lm sure you are famlllar wlLh Lhe sLandard alerL
dlalog ln !avaScrlpL l remember Lhe rsL Llme l used an alerL dlalog ln !avaScrlpL l
was so exclLed Lo have an alerL message on my home page LhaL l made lL pop up and
say Cllck Ck lf you are a moron
Cllck Lhe Cancel buLLon(or cllck Lhe close buLLon or press Lhe buLLon(or cllck Lhe close buLLon or press
Lhe (or cllck Lhe close buLLon or press Lhe Lscape key) and you wlll
geL a walL message LhaLs uslng a progress dlalog
1he progress dlalog we are uslng can be conLrolled by LxL and be noLled when
lL should dlsappear 8uL for Lhe sake of slmpllclLy ln Lhls example we are leLLlng lL
run forever
8uLLon focus and Lab orders are bullL lnLo LxL 1yplcally Lhe Ck or ?es
buLLon wlll be Lhe defaulL acLlon So presslng LnLer on your keyboard wlll
Lrlgger LhaL buLLon and presslng 1ab wlll move you Lhrough Lhe buLLons
and oLher lLems ln Lhe dlalog
32
LlghLlng Lhe flre
now we can sLarL causlng some reacLlons ln our page based on Lhe users responses
Lo Lhe dlalogs We are golng Lo add Lo our swlLch sLaLemenL whlch Lakes care of
a ?es buLLon cllck 1he prompL funcLlon can handle a Lhlrd argumenL whlch ls Lhe
funcLlon Lo be execuLed afLer Lhe ?es buLLon has been cllcked We are denlng Lhls so
LhaL Lhe funcLlon wlll check Lo see lf Lhe value enLered lnLo our prompL dlalog ls equal
Lo Lhe offlce and Lhen wrlLe Lhls LexL Lo a ulv ln our page lf lL ls and a defaulL LexL
of uull Work lf lL does noL 1he code also applles a sLyle Lo Lhe same ulv whlch uses
a Swlngllne sLapler background lmage
case yes
LxLMsgprompL(MllLon Where ls lL? funcLlon(bLnLxL)

lf (LxLLoLowerCase() Lhe offlce)
LxLgeL(my_ld)domlnnerP1ML uull Work
else
LxLgeL(my_ld)domlnnerP1ML LxL

LxLuomPelperapplySLyles(my_ld
background LransparenL
url(lmages/sLaplerpng) 30 30 norepeaL
)
)
break
1he no case wlll dlsplay an alerL message whlch also sLyles Lhe documenL when Lhe
no buLLon ls cllcked
case no
LxLMsgalerL(MllLon
lm golng Lo burn Lhe bulldlng down!
funcLlon()
LxLuomPelperapplySLyles(my_ld
background LransparenL
url(lmages/flrepng) 0 100 repeaLx
)
33
LxLuomPelperapplySLyles(LxLgeL8ody()
backgroundcolor #ll0000
)
LxLgeL8ody()hlghllghL(llCC00
endColorll0000
duraLlon 6
)
)
break
1he workhorseLxLgeL
LxL ls able Lo work so well because lL has a foundaLlon LhaL provldes access Lo
Lhe uCM and Lo many funcLlons LhaL allow manlpulaLlon of Lhe uCM Cf Lhese
funcLlons geL ls one of Lhe mosL used
LxLgeL(my_ld)
34
1hls glves us access Lo an elemenL ln Lhe documenL wlLh Lhe lu my_ld lf we Lake a
look aL Lhe rsL example lL ls uslng geL8ody whlch reLrleves Lhe body elemenL and
applles our effecL Lo LhaL LeLs swlLch LhaL around Lo use my_ld lnsLead 8uL rsL we
wlll need Lo creaLe a my_ld elemenL ln our documenL
dlv ldmy_ld
sLylewldLh200pxhelghL200pxLesL/dlv
lf we add Lhls Lo Lhe body secLlon of our documenL and change our effecL Lo
reference Lhls lnsLead of Lhe body Lhen our effecL wlll happen only Lo Lhe my_ld
dlv we creaLed
LxLgeL(my_ld)hlghllghL(ll0000
endColor0000ll duraLlon 3
)
lf we now looked aL our documenL ln a browser we would see a 200plxel square box
changlng color lnsLead of Lhe enLlre body of Lhe documenL changlng color
8ear ln mlnd LhaL lus are unlque So once we have used my_ld we cannoL use Lhls
lu agaln ln our documenL lf dupllcaLe lus exlsL ln your documenL Lhen Lhe lasL one
found wlll be used 8uL Lhls should be consldered as a bug and noL a deslgn pracLlce
lor Lhe mosL parL LxL creaLes and Lracks lLs own lus and mosL of Lhe Llme we wlll
defaulL Lo LxLs Lracklng of Lhe documenL elemenLs and noL creaLe Lhem on our own
Pavlng dupllcaLe lus ln your documenL can lead Lo sLrange behavlor
such as a wldgeLs always showlng up ln Lhe upper lefL corner of Lhe
browser and ls Lherefore besL avolded
Speed Llp
1hls lsnL exacLly a speed Llp buL ls more abouL conservlng memory by uslng
someLhlng called a ywelghL Lo perform slmple Lasks whlch resulLs ln hlgher speed
by noL clogglng up Lhe browsers memory
1he same hlghllghL effecL we [usL used could be wrlLLen uslng a ywelghL lnsLead
LxLfly(my_ld)hlghllghL(ll0000
)
1hls ls used when we wanL Lo perform an acLlon on an elemenL ln a slngle llne of
code and we do noL need Lo reference LhaL elemenL agaln 1he ywelghL reuses Lhe
same memory over and over each Llme lL ls called
33
Pere ls an example of uslng a ywelghL lncorrecLly
var my_ld LxLfly(my_ld)
LxLfly(anoLher_ld)
my_ldhlghllghL(ll0000
)
8ecause Lhe ywelghL reuses Lhe same memory each Llme lL ls called by Lhe Llme
we run Lhe hlghllghL funcLlon on our my_ld reference Lhe memory has changed Lo
acLually conLaln a reference Lo anoLher_ld
Summary
uslng only a few llnes of code we have creaLed a fun program LhaL wlll keep you
enLerLalned for hours! Well maybe noL for hours buL for aL leasL a few mlnuLes
noneLheless we have Lhe beglnnlngs of Lhe baslc funcLlonallLy and user lnLerface
of a Lyplcal deskLop appllcaLlon
We have learned Lhe baslcs of uslng conguraLlon ob[ecLs and lm sure Lhls wlll
make even more sense afLer we have had Lhe chance Lo play wlLh some more LxL
wldgeLs 8uL Lhe real polnL here ls LhaL Lhe conguraLlon ob[ecL ls someLhlng LhaL ls
very fundamenLal when uslng LxL So Lhe qulcker you can wrap your head around lL
Lhe beLLer off you wlll be
uonL worry lf you are noL enLlrely comforLable wlLh Lhe conguraLlon ob[ecL yeL
We have plenLy of Llme Lo gure lL ouL lor now leLs move on Lo one of my favorlLe
Lhlngsforms
Am Pllllgenbusch 47 aderborn n8W 33098lorms
ln Lhls chapLer we wlll learn how Lo creaLe LxL forms whlch are slmllar Lo Lhe P1ML
forms LhaL we use wlLhouL Lhe usablllLy resLrlcLlons and borlng user lnLerface
We use some dlfferenL form eld Lypes Lo creaLe a form LhaL valldaLes and submlLs
asynchronously 1hen we wlll creaLe a daLabasedrlven dropdown menu
(Combo8ox) and add some more complex eld valldaLlon and masklng We wlll
Lhen nlsh lL off wlLh a few advanced Loplcs LhaL wlll glve our forms some serlous
wow facLor
1he goals of Lhls chapLer lnclude
CreaLlng a form LhaL uses A!Ax submlsslon
valldaLlng eld daLa and creaLlng cusLom valldaLlon
Loadlng form daLa from a daLabase
1he core componenLs of a form 1he posslblllLles are endless wlLh LxL forms key llsLeners valldaLlon
error messages
and value resLrlcLlons are all bullL ln wlLh slmple cong opLlons LxLendlng a form
opLlon for your own speclc needs can be done easlly whlch ls someLhlng we wlll
cover laLer on ln Lhls chapLer Pere are some of Lhe core form componenLs LhaL you
should become famlllar wlLh
LxLformlormanel Croups elds LogeLher ln a panel much as Lhe lC8M
Lag does for a sLandard P1ML form
LxLformlleld As Lhe prlmary handler of form eld creaLlon and
lnLeracLlon lL can be compared Lo Lhe lnu1 Lag ln P1ML
-
-
-
-
-
38
Cur flrsL form 1o sLarL wlLh leLs creaLe a form wlLh mulLlple eld Lypes a daLe plcker valldaLlon
error messages and A!Ax submlsslon[usL a slmple one for our rsL Lry
lor Lhls example our elds wlll be creaLed uslng a conflg ob[ecL lnsLead of an
lnsLanLlaLed LxLformlleld componenL 1hls meLhod wlll work [usL ne wlll Lake
less Llme Lo code and wlll help our code run fasLer A baslc P1ML page llke Lhe one
we used ln Lhe prevlous example wlll be used as a sLarLlng polnL 1he sLandard LxL
llbrary les need Lo be lncluded and as wlLh everyLhlng we creaLe ln LxL our code
wlll need Lo be wrapped ln Lhe on8eady funcLlon
var movle_form new LxLlormanel(
url movleformsubmlLphp
render1o documenLbody
frame Lrue
LlLle Movle lnformaLlon lorm
wldLh 230
lLems
xLype LexLfleld
fleldLabel 1lLle
name LlLle

xLype LexLfleld
fleldLabel ulrecLor
name dlrecLor

xLype daLefleld
fleldLabel 8eleased
name released

)
)
When we run Lhls code ln a browser we end up wlLh a form panel LhaL looks
llke Lhls
39
nlce formhow does lL work?
1he lormanel ls very slmllar Lo an P1ML form lL acLs as Lhe conLalner for our
form elds Cur form has a url cong so Lhe form knows where Lo send Lhe daLa
when lL ls submlLLed lL also has a render1o cong whlch denes where Lhe form ls
dlsplayed on Lhe page
1he lLems cong elemenL ls Lhe lmporLanL one as lL conLalns all of our form elds
1he lLems cong elemenL ls an array of elds Lach eld elemenL has an xLype LhaL
denes whlch Lype of LxL componenL wlll be used LexL daLe or number 1hls could
even be a grld or some oLher Lype of LxL componenL
lorm flelds
now we know LhaL each Lype of eld ls dened by lLs xLype 8uL where do xLypes
come from and how many of Lhem are Lhere? An xLype ls [usL a reference Lo a
parLlcular LxL componenL so a LexLeld xLype ls Lhe same as lLs LxLform1exLlleld
counLerparL Pere are examples of some of Lhe xLypes LhaL are avallable Lo us
LexLfleld
Llmefleld
numberfleld
daLefleld
combo
LexLarea
8ecause Lhese are all [usL LxL componenLs we could easlly be uslng a grld Loolbar
or buLLonpreLLy much anyLhlng! A recurrlng Lheme ln LxL componenLs ls LhaL
everyLhlng ls lnLerchangeable and everyLhlng shares Lhe same core funcLlons 1hls
ensures LhaL [usL abouL any scenarlo can be handled wlLh Lhe LxL llbrary
Cur baslc eld cong ls seL up llke Lhls

xLype LexLfleld
fleldLabel 1lLle
name LlLle

Cf course we have Lhe xLype LhaL denes whaL Lype of a eld lL lsln our case lL ls a
LexLfleld 1he fleldLabel ls Lhe LexL label LhaL ls dlsplayed Lo Lhe lefL of Lhe eld
alLhough Lhls can also be congured Lo be dlsplayed on Lhe Lop or Lhe rlghL slde of
Lhe eld 1he name cong ls [usL Lhe same as lLs P1ML counLerparL and wlll be used
as Lhe varlable name when sendlng Lhe form daLa Lo Lhe server
-
-
-
-
-
-
40
1he names of mosL of Lhe cong opLlons for LxL componenLs maLch
Lhelr counLerparLs ln P1ML 1hls ls because LxL was creaLed by web
developers for web developers
Maklng our daLe eld lsnL much dlfferenL from maklng Lhe LexL eld Change Lhe
xLype Lo a daLefleld and were done

xLype daLefleld
fleldLabel 8eleased
name released

valldaLlon
A few of our sample elds could have valldaLlons LhaL presenL Lhe users wlLh errors
lf Lhe user does someLhlng wrong LeLs add some valldaLlon Lo our rsL form Cne of
Lhe mosL commonlyused Lypes of valldaLlon ls checklng Lo see lf Lhe user has enLered
any value aL all We wlll use Lhls for our movle LlLle eld ln oLher words leLs
make Lhls eld a requlred one

xLype LexLfleld
fleldLabel 1lLle
name LlLle
allow8lank false

SeLLlng up an allow8lank cong opLlon and seLLlng lL Lo false (Lhe defaulL ls Lrue)
ls easy enough MosL forms we bulld wlll have a bunch of requlred elds [usL
llke Lhls
Lach Lype of LxL eld also has lLs own seL of speclallzed valldaLlons LhaL are speclc
Lo Lhe daLa Lype of LhaL eld lor lnsLance a daLe eld has ways Lo dlsable cerLaln
days of Lhe week or Lo use a regular expresslon Lo dlsable speclc daLes 1he
followlng code dlsables every day excepL SaLurday and Sunday

xLype daLefleld
fleldLabel 8eleased
name released
dlsableduays 12343

41
ln Lhls example everyday excepL SaLurday and Sunday ls dlsabled keep ln mlnd
LhaL Lhe week sLarLs on 0 for Sunday and ends on 6 for SaLurday
When we use oLher Lypes of elds we have dlfferenL valldaLlons llke number elds
LhaL can resLrlcL Lhe slze of a number or how many declmal places Lhe number can
have 1he sLandard valldaLlon opLlons for each eld Lype can be found ln Lhe
Al reference
8ullLln valldaLlonvLypes
AnoLher more complex Lype of valldaLlon ls Lhe vLype 1hls can be used Lo valldaLe
and resLrlcL user lnpuL and reporL back error messages lL wlll work ln [usL abouL any
scenarlo you can lmaglne because lL uses regular expresslons Lo do Lhe grunL work
Pere are some bullLln v1ypes LhaL can come ln handy
emall
url
alpha
alphanum
-
-
-
-
42
1hese bullLln vLypes are lnLended Lo be slmpllsLlc and mosLly used as a sLarLlng
polnL for creaLlng your own vLypes
Pere ls an alpha vLype belng used wlLh a Culck1lps balloon error message
var movle_form new LxLlormanel(
url movleformsubmlLphp
frame Lrue
LlLle Movle lnformaLlon lorm
wldLh 230
lLems
xLype LexLfleld
fleldLabel 1lLle
name LlLle
allow8lank false

xLype LexLfleld
fleldLabel ulrecLor
name dlrecLor
vLype alpha

xLype daLefleld
fleldLabel 8eleased
name released
dlsableduays 12343

)
)
All we dld was add a vLype Lo Lhe dlrecLor eld 1hls wlll valldaLe LhaL Lhe value
enLered ls composed of only alphabeLlc characLers only alphabeLlc characLers alphabeLlc characLers
43
now were sLarLlng Lo see LhaL Lhe bullLln vLypes are very baslc 1he bullLln alpha
vLype resLrlcLs our elds Lo alphabeL characLers only ln our case we wanL Lhe user
Lo enLer a dlrecLors name whlch would usually conLaln only alphabeL characLers
wlLh [usL one space or a hyphen CaplLallzlng Lhe rsL characLers ln Lhe names could
posslbly make Lhem look preLLy
A search of Lhe LxL forum ls llkely Lo come back wlLh a v1ype LhaL
someone else has creaLed LhaL ls elLher exacLly whaL you need or close
enough Lo use as a sLarLlng polnL for your own requlremenLs
SLyles for dlsplaylng errors
lorms are seL up by defaulL wlLh a very bland error dlsplay whlch shows any Lype
of error wlLh a squlggly red llne under Lhe form eld 1hls error dlsplay closely
mlmlcs Lhe errors shown ln programs llke MlcrosofL Word when you spell a word
lncorrecLly We do have oLher opLlons for dlsplaylng our error messages buL we wlll
need Lo Lell LxL !S Lo use lL
1he preferred opLlon ls Lo dlsplay Lhe error message ln a balloon 1hls uLlllzes Lhe
sLandard squlggly llne buL also adds a balloon message LhaL pops up when you
mouse over Lhe eld
We [usL need Lo add a llne of code before our form ls creaLed LhaL wlll lnlLlallze Lhe
balloon messages 1yplcally Lhls ls Lhe rsL llne wlLhln Lhe Cn8eady funcLlon
lor example
LxLCulck1lpslnlL()
// our form here
)
1hls ls all LhaL needs Lo happen for your form elds Lo sLarL dlsplaylng error
messages ln a fancy balloon
44
CusLom valldaLloncreaLe your
own vLype
lf youre llke me regular expresslons can leave you ln a sLupeed gaze aL your
monlLor so l always Lry Lo nd someLhlng LhaL ls close Lo whaL l need and Lhen
modlfy lL raLher Lhan sLarL from scraLch
1o creaLe our own vLype we need Lo add lL Lo Lhe vLype denlLlons Lach denlLlon
has a value mask error LexL and a funcLlon used for LesLlng
xxxval 1hls ls Lhe regular expresslon Lo maLch agalnsL
xxxMask 1hls ls Lhe masklng Lo resLrlcL user lnpuL
xxx1exL1hls ls Lhe error message LhaL ls dlsplayed
As soon as we gure ouL Lhe regular expresslons we need Lo use lLs falrly sLralghL
forward creaLlng our own v1ypeso leLs Lry one ouL Pere ls a valldaLlon for
our dlrecLors name eld 1he regular expresslon maLches a palr of alpha sLrlngs
separaLed by a space and each sLarLlng wlLh a caplLal leLLer Sounds llke a good way
Lo valldaLe a namerlghL?
LxLformv1ypesnameval /AZAZaz+
AZAZaz+$/
LxLformv1ypesnameMask /AZaz /
LxLformv1ypesname1exL lnvalld ulrecLor name
LxLformv1ypesname funcLlon(v)
reLurn LxLformv1ypesnamevalLesL(v)

lLs hard Lo look aL Lhls all aL once so leLs break lL down lnLo lLs maln parLs We rsL
sLarL wlLh Lhe regular expresslon LhaL valldaLes Lhe daLa enLered lnLo our form eld
LxLformv1ypesnameval /(AZ1)AZaz+
(AZ1)AZaz+/
nexL we add Lhe masklng whlch denes whaL characLers can be Lyped lnLo our form
eld 1hls ls also ln Lhe form of a regular expresslon
LxLformv1ypesnameMask /AZaz/
1hen we have Lhe LexL Lo be dlsplayed ln a balloon lf Lhere ls an error
LxLformv1ypesname1exL lnvalld ulrecLor name
-
-
-
43
And nally Lhe parL LhaL pulls lL all LogeLherLhe acLual funcLlon used Lo LesL our
eld value
LxLformv1ypesname funcLlon(v)
reLurn LxLformv1ypesnamevalLesL(v)

uL all Lhls LogeLher and we have our own cusLom vLype wlLhouL much efforL and
LhaL can be used over and over agaln
MasklngdonL press LhaL key!
Masklng ls used when a parLlcular eld ls forced Lo accepL only cerLaln keysLrokes
such as numbers only or leLLers only or [usL caplLal leLLers 1he posslblllLles are
llmlLless because regular expresslons are used Lo declde whaL keys Lo lLer ouL
1hls mask example would allow an unllmlLed sLrlng of caplLal leLLers
mask8e /AZ/
lnsLead of uslng Lhe masklng cong conslder creaLlng a v1ype Lo accompllsh
your masklng lf Lhe formaLLlng requlremenLs should happen Lo change lL wlll be
cenLrallylocaLed for easy changlng
So when Lhe day arrlves where your boss comes Lo you freaklng ouL and Lells you
8emember Lhose producL codes LhaL l sald would always be Len numbers well lL
Lurns ouL Lhey wlll be elghL leLLers lnsLead you can make Lhe change Lo your v1ype
and go play CulLar Pero for Lhe resL of Lhe day!
46
8adlo buLLons and check boxes
8adlo buLLons and check boxes are a necessary evll 1hey are clumsy and hard Lo
work wlLh l Lry Lo use Lhem only as a lasL resorL when noLhlng else wlll do Lhe [ob
8uL leLs add Lhem Lo our form [usL so we can say LhaL we dld
lLs noL a buLLon lLs a radlo buLLon
LeLs rsL add a seL of radlo buLLons Lo our form

xLype radlo
fleldLabel lllmed ln
name fllmed_ln
boxLabel Color

xLype radlo
hldeLabel false
labelSeparaLor
name fllmed_ln
boxLabel 8lack WhlLe

1hese radlo buLLons work much llke Lhelr P1ML counLerparLs Clve Lhem all Lhe
same name and Lhey wlll work LogeLher for you l also llke Lo hlde Lhe labels for Lhe
Lralllng radlo buLLons by seLLlng hldeLabel Lo Lrue and labelSeperaLor Lo an empLy
value 1hls glves Lhe form a cleaner look
x marks Lhe check box
SomeLlmes we need Lo use check boxes for boolean valuessorL of an
on/off swlLch

xLype checkbox
fleldLabel 8ad Movle
name bad_movle

47
1he Combo8ox
1he Combo8ox or SLLLC1 as lLs known ln P1ML also called a dropdown menu
ls a hlghlyuseful form elemenL lL reduces Lhe users need Lo Louch Lhe keys on
Lhelr keyboards 1he LxL Combo8ox has a Lon of pracLlcal uses and [usL as many
conguraLlon opLlons Lo keep Lrack of
llrsL leLs make a combo uslng local daLa 1o do Lhls we need Lo creaLe a daLa sLore
1here are a few dlfferenL Lypes of daLa sLore each of whlch can be used for dlfferenL
slLuaLlons Powever for Lhls one we are golng Lo use a slmple sLore
var genres new LxLdaLaSlmpleSLore(
flelds ld genre
daLa 1Comedy2urama3AcLlon
)
!usL llke Lhe oLher elds ln our form we add lL Lo Lhe lLems cong A few oLher
cong opLlons are needed when we are seLLlng up a combo box 1he sLore ls Lhe
obvlous oneLhls ls Lhe daLa LhaL populaLes Lhe opLlons for our combo 1he oLher
Lhlngs we need are Lhe mode whlch deLermlnes lf Lhe daLa ls comlng from a local
source or a remoLe source and Lhe dlsplaylleld whlch deLermlnes whlch column
of daLa ls dlsplayed ln Lhe combo opLlons

xLype combo
name genre
fleldLabel Cenre
mode local
sLore genres
dlsplaylleldgenre
wldLh 120

1hls glves us a combo box LhaL uses local daLa whlch ls good for small llsLs or llsLs
LhaL donL change ofLen WhaL happens when our llsL needs Lo be pulled up from WhaL happens when
our llsL needs Lo be pulled up from
a daLabase?
uaLabasedrlven Combo8ox
1he blggesL change LhaL needs Lo happen ls on Lhe server sldegeLLlng your daLa and
formaLLlng lL lnLo a !SCn sLrlng LhaL Lhe combo box can use WhaLever serverslde
language ls used we wlll need a !SCn llbrary Lo encode Lhe daLa lf were uslng
P 31 or hlgher Lhls ls bullL ln
48
1o check our verslon of P we can elLher execuLe a command ln a
Lermlnal wlndow or run a slngle llne of P code lf we have access Lo
Lhls command llne we can run php v Lo check our verslon oLherwlse
runnlng a scrlpL LhaL [usL has Lhe slngle llne ?php phplnfo() ? wlll
do Lhe [ob
1hls ls whaL we would use Lo generaLe our !SCn daLa uslng P 31 or hlgher
?php
// connecLlon Lo daLabase goes here
$resulL mysql_query(SLLLC1 ld genre_name l8CM genres)
lf (mysql_num_rows($resulL) 0)
whlle ($ob[ mysql_feLch_ob[ecL($resulL))
$arr $ob[

Lcho rows[son_encode($arr)
?
When we use remoLe daLa Lhere are a few more Lhlngs LhaL need Lo happen llrsL Lhe
daLa sLore needs Lo know whaL formaL Lhe daLa ls ln We speclfy Lhls by uslng a daLa
readerln our case lLs Lhe !SCn 8eader
var genres new LxLdaLaSLore(
reader new LxLdaLa!son8eader(
flelds ld genre_name
rooL rows
)
proxy new LxLdaLaPLLproxy(
url daLa/genresphp
)
)
1he rsL argumenL for Lhe daLa reader ls an ob[ecL conLalnlng Lhe conguraLlon of
our readerspeclcally whlch elds wlll be read and whaL Lhe rooL elemenL ls 1he
elds llsL ls slmply an array of eld names noLlce LhaL we lefL ouL sorL_orderLhls
eld wlll noL be avallable Lo our daLa seL Cur rooL ls Lhe elemenL LhaL conLalns our
array of daLa ln Lhls case lLs rows buL could [usL as easlly be bobscrabshack or
whaLever you felL llke
rows

ld1
genre_nameComedy
sorL_order0

49
ld2
genre_nameurama
sorL_order1

// snlp//

We have also seL up Lhe proxyLyplcally Lhls wlll be an P11 roxy LhaL reLrleves
daLa from Lhe same domaln as Lhe web page 1hls ls Lhe mosL common meLhod buL
Lhere ls also a ScrlpL1agroxy LhaL can be used Lo reLrleve daLa from a dlfferenL
domaln All we need Lo provlde for our proxy ls Lhe u8L Lo feLch our daLa from
Whenever we speclfy a proxy we are acLually uslng A!Ax 1hls requlres
LhaL you have a web server runnlng oLherwlse A!Ax wlll noL work
Slmply runnlng your code from Lhe le sysLem ln a web browser wlll noL
work
LeLs Lhrow ln a call Lo Lhe load funcLlon aL Lhe end so Lhe daLa ls loaded lnLo our
combo box before Lhe user sLarLs Lo lnLeracL wlLh lL
genresload()
1hls glves us a combo box LhaLs populaLed from our daLabase and should look
llke Lhls
AnoLher way Lo preload Lhe daLa sLore ls Lo seL Lhe auLoLoad opLlon Lo Lrue ln our
daLa sLore conguraLlon
var genres new LxLdaLaSLore(
flelds ld genre_name
rooL rows
)
proxy new LxLdaLaPLLproxy(
url daLa/genresphp
)
auLoLoad Lrue
)
30
1exLArea and P1MLLdlLor
We are golng Lo add a LexL eld Lo our movle lnformaLlon form and LxL has a couple
of opLlons for Lhls We can elLher use Lhe sLandard LexLarea LhaL we were famlllar
wlLh from uslng P1ML or we can use Lhe P1MLLdlLor eld whlch provldes rlch
LexL edlLlng
LexLarea Slmllar Lo a Lyplcal P1ML LexLarea eld
hLmledlLor A rlch LexL edlLor wlLh a buLLon bar for common
formaLLlng Lasks
lf we seL hldeLabel Lo Lrue and clear ouL Lhe label separaLor Lhen we can have
a LexLarea LhaL spans Lhe enLlre wldLh of our form panel 1hls glves a nlce look Lo
Lhe form

xLype LexLarea
name descrlpLlon
hldeLabel Lrue
labelSeparaLor
helghL 100
anchor 100

8y changlng [usL Lhe xLype as shown below we now have a falrly slmple P1ML
edlLor wlLh bullLln opLlons for fonL face slze color lLallcs bold and so on 1hls ls
Lhe rsL LxL componenL we have used LhaL requlres Lhe Culck1lps componenL Lo be
lnlLlallzed before we can use lL

xLype hLmledlLor
name descrlpLlon
hldeLabel Lrue
labelSeparaLor
helghL 100
anchor 100

-
-
31
LlsLenlng for form fleld evenLs
LxL makes lL exLremely slmple Lo llsLen for parLlcular user acLlons such as cllcklng on
an elemenL or presslng a parLlcular key
A common Lask would be llsLenlng for Lhe LnLer key Lo be pressed and Lhen
submlLLlng Lhe form So leLs see how Lhls ls accompllshed

xLype LexLfleld
fleldLabel 1lLle
name LlLle
allow8lank false
llsLeners
speclalkey funcLlon(fe)
lf (egeLkey() eLn1L8)
movle_formgeLlorm()submlL()

1he speclalkey llsLener ls called whenever a key relaLed Lo navlgaLlon ls pressed
1hls llsLener ls also called every Llme Lhe arrow keys are pressed along wlLh 1ab
Lsc and so on 1haLs why we have Lo check Lo see lf lL was Lhe 1haLs why we have Lo check Lo see lf lL
was Lhe LnLer key before we
Lake acLlon
now Lhe form wlll only be submlLLed when you press LnLer
Combo8ox evenLs
lL seems LhaL combo boxes commonly need Lo have evenLs aLLached Lo Lhem LeLs
Lake our genre combo box and aLLach a llsLener Lo lL LhaL wlll run when an lLem ln Lhe
llsL ls selecLed
llrsL leLs add a dummy lLem Lo our daLa as Lhe rsL lLem ln Lhe llsL and call lL
new Cenre
var genres new LxLdaLaSlmpleSLore(
flelds ld genre
daLa
0new Cenre
1Comedy
2urama
3AcLlon

)
32
1hen we add Lhe llsLener Lo our combo

xLype combo
name genre
fleldLabel Cenre
mode local
sLore genres
dlsplaylleldgenre
wldLh 130
llsLeners
selecL funcLlon(frl)
lf (l 0)
LxLMsgprompL(new CenrenameLxLempLyln)

1he llsLener ls seL up Lo walL for a selecL evenL and Lhen run Lhe funcLlon LhaL
ls specled Lach llsLener Lype has lLs own seL of varlables LhaL ls passed Lo Lhe
funcLlonLhese can be looked up ln Lhe Al reference
lor Lhe selecL evenL our funcLlon ls passed Lhree Lhlngs
1he form eld
1he daLa record of Lhe selecLed combo lLem
1he lndex number of Lhe lLem LhaL was cllcked on
Cnce Lhe llsL lLem ls selecLed we can see whlch lLem ln Lhe llsL was selecLed 1he Lhlrd
argumenL ln our llsLener funcLlon ls Lhe lndex of Lhe lLem LhaL was cllcked lf LhaL has
an lndex of zero (Lhe rsL lLem ln Lhe llsL) Lhen we wlll prompL Lhe user Lo enLer a
new genre uslng Lhe prompL dlalog we learned abouL ln Lhe prevlous chapLer
-
-
-
33
!usL abouL every componenL ln LxL has a llsLener A llsL of valld evenLs for
Lhese llsLeners can be found aL Lhe boLLom of Lhe Al documenLaLlon page
for each componenL
8uLLons and form acLlon
now we have qulLe a mess of a form wlLh only one problem lL doesnL send daLa Lo
Lhe server whlch was Lhe acLual polnL behlnd creaLlng our form ln Lhe rsL place 1o
do Lhls we are golng Lo add some buLLons
Cur buLLons are added Lo a buLLons cong ob[ecL slmllar Lo Lhe way LhaL Lhe form
elds were added 1hese buLLons really only need Lwo Lhlngs Lhe LexL Lo be dlsplayed
on Lhe buLLon and Lhe funcLlon(whlch ls called Lhe handler) Lo execuLe when Lhe
buLLon ls cllcked
buLLons
LexL Save
handler funcLlon()
movle_formgeLlorm()submlL(
success funcLlon(fa)
LxLMsgalerL(Success lL worked)

fallure funcLlon(fa)
LxLMsgalerL(Warnlng Lrror)

)

LexL 8eseL
handler funcLlon()
movle_formgeLlorm()reseL()

1he handler ls provlded wlLh a funcLlonor a reference Lo a funcLlonLhaL wlll
be execuLed once Lhe buLLon ls cllcked ln Lhls case we are provldlng an
anonymous funcLlon
lorm submlsslon
Cur lormanel has a url opLlon LhaL conLalns Lhe name of Lhe le LhaL Lhe form daLa
wlll be senL Lo 1hls ls slmple enough[usL llke an P1ML form all of our elds wlll
be posLed Lo Lhls url so Lhey can be processed on Lhe server slde
34
lnslde our Save buLLon we have an anonymous funcLlon LhaL runs Lhe followlng
code 1hls wlll run Lhe acLual submlsslon funcLlon for our form whlch sends Lhe
daLa Lo Lhe server uslng A!Ax no page refresh ls needed Lo submlL Lhe form lL all
happens ln Lhe background whlle Lhe page you are looklng aL remalns Lhe same

LxLMsgalerL(Warnlng Lrror)

)
ln order for our form submlsslon Lo work properly lL musL be run from a
web server
success and fallure opLlons provlded Lo Lhe submlL call handle Lhe servers
response 1hese are also anonymous funcLlons buL could [usL as easlly be references
Lo funcLlons creaLed earller on ln Lhe code
uld you noLlce LhaL Lhe funcLlons have a palr of argumenLs passed Lo Lhem? 1hese
wlll be used Lo gure ouL whaL response Lhe server gave 8uL rsL we need Lo dlscuss
how Lo provlde LhaL response on Lhe server slde
1alklng backLhe server responses
When our form ls submlLLed Lo Lhe server a scrlpL on Lhe server slde wlll process Lhe
posL daLa from Lhe form and declde lf a Lrue or false success message should be
senL back Lo Lhe cllenL slde Lrror messages can be senL back along wlLh our response
and Lhese can conLaln messages LhaL correspond Lo our form eld names
When uslng forms and serverslde valldaLlon a success boolean value ls requlred
An example of a response from Lhe server would look llke Lhls

success false
errors
LlLle Sounds llke a Chlck lllck

When Lhe success ag ls seL Lo false lL Lrlggers Lhe LxL form Lo read ln Lhe
error messages and apply Lhem Lo Lhe forms valldaLlon Lo presenL Lhe user wlLh
error messages
33
Serverslde valldaLlon of our form submlsslon glves us a way Lo look up lnformaLlon
on Lhe server slde and reLurn errors based on Lhls LeLs say we have a daLabase of
bad movle names and we donL wanL users Lo submlL Lhem Lo our daLabase We can
submlL Lhe form Lo our scrlpL whlch checks Lhe daLabase and reLurns a response
based on Lhe daLabase lookup of LhaL name
lf we wanLed Lo lLer ouL chlck fllcks Lhe response could look someLhlng llke Lhls Lhe response could
look someLhlng llke Lhls

success false
errors
LlLle Sounds llke a Chlck lllck

errormsg 1haL movle LlLle sounds llke a chlck fllck

1he false success response Lrlggers Lhe forms error messages Lo be dlsplayed An
errors ob[ecL ls passed wlLh Lhe response 1he form uses Lhls ob[ecL Lo deLermlne
each of Lhe error messages A name/value palr exlsLs ln Lhe errors ob[ecL for each
form elds error
Cur example response also passes an errormsg whlch ls noL used by Lhe form buL ls
golng Lo be accessed separaLely Lo presenL our own error message
LeLs Lake Lhe exLra error message LhaL we were passlng back and dlsplay lL ln a
message box
buLLons
LexL Save
handler funcLlon()

LxLMsgalerL(Warnlng aresulLerrormsg)

)

LexL 8eseL
handler funcLlon()
movle_formgeLlorm()reseL()

Cur submlL form acLlon passes lnformaLlon back Lo Lhe success and fallure
handlers 1he rsL argumenL ls an LxL form ob[ecL and Lhe second ls an LxL acLlon
ob[ecL LeLs Lake a look aL whaLs avallable ln Lhe LxL acLlon ob[ecL
36
CpLlon uescrlpLlon
fallure1ype SLrlng 8eporLs boLh cllenLslde and serverslde errors
response Cb[ecL ConLalns raw lnformaLlon abouL Lhe servers response
lncludlng useful header lnformaLlon
resulL Cb[ecL arsed !SCn ob[ecL based on Lhe response from Lhe server
Lype SLrlng 1he Lype of acLlon LhaL was performedelLher submlL or load
now LhaL we know whaL ls avallable Lo Lhe fallure handler we can seL up some
slmple error checklng
lf (afallure1ype LxLformAcLlonCCnnLC1_lAlLu8L)
LxLMsgalerL(lallure Server reporLed
+aresponsesLaLus+ +aresponsesLaLus1exL)

lf (afallure1ype LxLformAcLlonSL8vL8_lnvALlu)
LxLMsgalerL(Warnlng aresulLerrormsg)

8y checklng Lhe fallure Lype we can deLermlne lf Lhere was a server connecLlon error
and acL accordlngly even provldlng deLalls abouL Lhe servers speclc error message
by uslng Lhe resulL properLy
Loadlng a form wlLh daLa
1here are Lhree baslc ways ln whlch forms are used ln a user lnLerface
1o lnpuL daLa for a separaLe acLlonsay Coogle search
1o creaLe new daLa
1o change exlsLlng daLa
lLs Lhe lasL opLlon LhaL we are lnLeresLed ln now 1o accompllsh Lhls we need Lo learn
how Lo load LhaL daLa from lLs source (sLaLlc or daLabase) lnLo our user lnLerface
SLaLlc daLa load
We can Lake daLa from somewhere ln our code and dlsplay lL as Lhe value ln a form
eld 1hls slngle llne of code seLs a elds value
movle_formgeLlorm()flndlleld(LlLle)
seLvalue(uumb uumber)
-
-
-
37
Cnce we sLarL worklng wlLh more complex forms Lhls meLhod becomes a hassle
1haLs why we also have Lhe ablllLy Lo load our daLa vla an A!Ax requesL 1he server
slde would work much as lL dld when we loaded Lhe combo box
?php
// connecLlon Lo daLabase goes here
$resulL mysql_query(SLLLC1 * l8CM movles WPL8L ld $_
8LCuLS1ld)
lf (mysql_num_rows($resulL) 0)
$ob[ mysql_feLch_ob[ecL($resulL)
Lcho success Lrue daLa[son_encode($ob[)
else
Lcho success false

?
1hls would reLurn a !SCn ob[ecL conLalnlng a success ag and a daLa ob[ecL LhaL
would be used Lo populaLe Lhe values of Lhe form elds 1he reLurned daLa would
look someLhlng llke Lhls

success Lrue
daLa
ld1
LlLleCfflce Space
dlrecLorMlke !udge
released19990219
genre1
LagllneWork Sucks
coverLhumb84m[pg
prlce1993
avallable1

1o Lrlgger Lhls we need Lo use Lhe forms load handler
movle_formgeLlorm()load(
urldaLa/movlephp
params
ld 1

)
38
rovldlng lL wlLh a url and params cong wlll do Lhe Lrlck 1he params cong
represenLs whaL ls senL Lo Lhe server slde scrlpL as posL/geL parameLers 8y defaulL
Lhese are senL as posL parameLers
Cb[ecL reference or componenL conflg
1hroughouL Lhese rsL few chapLers we have sLarLed Lo use more and more
conguraLlon ob[ecLs Lo seL up our LxL !S componenLs lnsLead of lnsLanLlaLlng Lhem
LeLs do a qulck comparlson of Lhe Lwo meLhods
lnsLanLlaLed
var LesL new LxLform1exLlleld(
fleldLabel 1lLle
name LlLle
allow8lank false
)
Pere Lhe componenL has been creaLed and memory used rlghL away even lf lL ls
noL dlsplayed on Lhe screen yeL uependlng on how your end users work wlLh your
appllcaLlon Lhey mlghL never even need or use Lhls parLlcular LexL eld Powever
when lL ls Lhe Llme Lo dlsplay Lhls eld Lo Lhe end users lL shows up really fasL
ComponenL conflg

xLype LexLfleld
fleldLabel 1lLle
name LlLle
allow8lank false

39
WlLh Lhe componenL cong we have a descrlpLlon of whaL has Lo happen when lL ls
Llme Lo use Lhe eld no memory ls used rlghL away lLs only when Lhe user needs lL
LhaL Lhe memory ls used AL LhaL polnL Lhe eld ls rendered afLer Lhe user has cllcked
on or lnLeracLed wlLh someLhlng else whlch can slow Lhe lnlLlal dlsplay sllghLly
1hls meLhod of seLLlng up componenLs has many oLher advanLages one of Lhem
ls belng able Lo send conguraLlons over Lhe wlre 1he meLhod of sendlng
conguraLlons over Lhe wlre means LhaL serverslde code can generaLe a
conguraLlon Lo creaLe a cllenLslde componenL
Summary
We have Laken Lhe foundaLlon of Lhe classlc web appllcaLlonformsand ln[ecLed
Lhem wlLh Lhe power of LxL !S creaLlng a unlquelyexlble and powerful user
lnLerface 1he form creaLed ln Lhls chapLer can valldaLe user lnpuL load daLa from a
daLabase and send LhaL daLa back Lo Lhe server lrom Lhe meLhods ouLllned ln Lhls
chapLer we can go on Lo creaLe forms for use ln slmple LexL searches or a complexly
valldaLed daLa enLry screen
Am Pllllgenbusch 47 aderborn n8W 330988uLLons Menus and 1oolbars
1he unsung heroes of every appllcaLlon are Lhe slmple Lhlngs llke buLLons
menus and Loolbars ln Lhls chapLer we wlll cover how Lo add Lhese lLems Lo
our appllcaLlons
Cur example wlll conLaln a few dlfferenL Lypes of buLLons boLh wlLh and wlLhouL
menus A buLLon can slmply be an lcon or LexL or boLh 1oolbars also have some
mechanlcal elemenLs such as spacers and dlvlders LhaL can help Lo organlze Lhe
buLLons on your Loolbars lLems
We wlll also cover how Lo make Lhese elemenLs reacL Lo user lnLeracLlon
A Loolbar for every occaslon
!usL abouL every LxL componenLpanels wlndows grlds can accepL a Loolbar panels wlndows grlds
can accepL a Loolbar can accepL a Loolbar
on elLher Lhe Lop or Lhe boLLom 1he opLlon ls also avallable Lo render Lhe Loolbar
sLandalone lnLo any uCM elemenL ln our documenL 1he Loolbar ls an exLremely
exlble and useful componenL LhaL wlll no doubL be used ln every appllcaLlon
LxL1oolbar 1he maln conLalner for Lhe buLLons
LxL8uLLon 1he prlmary handler for buLLon creaLlon and lnLeracLlon
LxLmenu A menu
1oolbars
Cur rsL Loolbar ls golng Lo be rendered sLandalone ln Lhe body of our documenL We
wlll add one of each of Lhe maln buLLon Lypes so we can experlmenL wlLh each
8uLLonLbbuLLon 1hls ls Lhe sLandard buLLon LhaL we are all famlllar wlLh
SpllL 8uLLonLbspllL A spllL buLLon ls where you have a defaulL buLLon
acLlon and an opLlonal menu 1hese are used ln cases where you need Lo have
many opLlons ln Lhe same caLegory as your buLLon of whlch Lhere ls a mosL
commonly used defaulL opLlon
-
-
-
-
-
62
MenuLbbuLLon+menu A menu ls [usL a buLLon wlLh Lhe menu cong lled
ln wlLh opLlons
new LxL1oolbar(
lLems
xLype LbbuLLon
LexL 8uLLon

xLype LbbuLLon
LexL Menu 8uLLon
menu
LexL 8eLLer

LexL Cood

LexL 8esL

xLype LbspllL
LexL SpllL 8uLLon
menu
LexL lLem Cne

LexL lLem 1wo

LexL lLem 1hree

)
)
As usual everyLhlng ls lnslde our on8eady evenL handler 1he lLems cong holds
all of our Loolbars elemenLsl say elemenLs and noL buLLons because Lhe Loolbar can
accepL many dlfferenL Lypes of LxL componenLs lncludlng form eldswhlch we wlll
be lmplemenLlng laLer on ln Lhls chapLer
1he defaulL xLype for each elemenL ln Lhe lLems cong ls LbbuLLon
We can leave ouL Lhe xLype cong elemenL lf LbbuLLon ls Lhe Lype we
wanL buL l llke Lo lnclude lL [usL Lo help me keep Lrack
-
63
1he buLLon
CreaLlng a buLLon ls falrly sLralghLforward Lhe maln cong opLlon ls Lhe LexL LhaL ls
dlsplayed on Lhe buLLon We can also add an lcon Lo be used alongslde Lhe LexL lf we
wanL Lo
Pere ls a sLrlppeddown buLLon

xLype LbbuLLon
LexL 8uLLon

Menu
A menu ls [usL a buLLon wlLh Lhe menu cong populaLedlLs LhaL slmple 1he menu
lLems work along Lhe same prlnclples as Lhe buLLons 1hey can have lcons classes
and handlers asslgned Lo Lhem 1he menu lLems could also be grouped LogeLher Lo
form a seL of opLlon buLLons buL rsL leLs creaLe a sLandard menu
1hls ls Lhe cong for a Lyplcal menu cong

xLype LbbuLLon
LexL 8uLLon
menu
LexL 8eLLer

LexL Cood

LexL 8esL

64
As we can see once Lhe menu array cong ls populaLed Lhe menu comes Lo llfe 1o
group Lhese menu lLems LogeLher we would need Lo seL Lhe group cong and Lhe
boolean checked value for each lLem
menu
LexL 8eLLer
checked Lrue
group quallLy

LexL Cood
checked false
group quallLy

LexL 8esL
checked false
group quallLy

SpllL buLLon
1he spllL buLLon sounds llke a complex componenL buL lLs [usL llke a buLLon and a
menu comblned wlLh a sllghL LwlsL 8y uslng Lhls Lype of buLLon you geL Lo use Lhe
funcLlonallLy of a buLLon whlle addlng Lhe opLlon Lo selecL an lLem from Lhe aLLached
menu Cllcklng Lhe lefL porLlon of Lhe buLLon LhaL conLalns Lhe LexL Lrlggers Lhe buLLon
acLlon Powever cllcklng Lhe rlghL slde of Lhe buLLon whlch conLalns a small down
arrow Lrlggers Lhe menu

xLype LbspllL
LexL SpllL 8uLLon
menu
LexL lLem Cne

LexL lLem 1wo

LexL lLem 1hree

63
1oolbar lLem allgnmenL dlvlders and spacers
8y defaulL every Loolbar allgns elemenLs Lo Lhe lefLmosL slde 1here ls no allgnmenL
cong for a Loolbar so lf we wanL Lo allgn all of Lhe Loolbar buLLons Lo Lhe rlghLmosL
slde we need Lo add a ll as Lhe rsL lLem ln Lhe Loolbar lf we wanL Lo have lLems
spllL up beLween boLh Lhe lefL and rlghL sldes we can also use a ll

xLype Lbflll

op Lhls llLLle guy ln a Loolbar wherever you wanL Lo add space and he wlll push
lLems on elLher slde of Lhe ll Lo Lhe ends of Lhe Lool bar as shown below
We also have elemenLs LhaL can add space or verLlcal dlvlders llke Lhe one used
beLween Lhe Menu 8uLLon and Lhe SpllL 8uLLon
1he spacer adds a few plxels of empLy space LhaL can be used Lo space ouL buLLons or
move elemenLs away from Lhe edge of Lhe Loolbar

xLype Lbspacer

A dlvlder can be added ln Lhe same way

xLype LbseparaLor

66
ShorLcuLs
LxL has many shorLcuLs LhaL can be used Lo make codlng fasLer ShorLcuLs are a
characLer or Lwo LhaL can be used ln place of a conguraLlon ob[ecL lor example
conslder Lhe sLandard Loolbar ller conguraLlon

xLype Lbll

1he shorLcuL for a Loolbar ller ls a hyphen and a greaLer Lhan symbol

noL all of Lhese shorLcuLs are documenLed So be advenLurous poke around Lhe source
code and see whaL you can nd Pere ls a llsL of Lhe commonlyused shorLcuLs
ComponenL ShorLcuL uescrlpLlon
llll 1he ll LhaL ls used Lo push lLems Lo Lhe rlghL slde of
Lhe Loolbar
SeparaLor or separaLor A verLlcal bar used Lo vlsually separaLe lLems
Spacer LmpLy space used Lo separaLe lLems vlsually
1he space ls Lwo plxels wlde buL can be changed by
overrldlng Lhe yLbspacer CSS class
1exLlLem ?our 1exL Add any LexL or P1ML dlrecLly Lo a Loolbar by
slmply placlng lL wlLhln quoLes
lcon buLLons
1he sLandard buLLon can acL as an lcon buLLon llke Lhe ones you see used ln LexL
edlLors Lo make LexL bold or lLallc 1wo sLeps need Lo be Laken Lo make an lcon lcon
buLLondenlng an lmage Lo be used as Lhe lcon and applylng Lhe approprlaLe class
Lo Lhe buLLon

xLype LbbuLLon
cls xbLnlcon
lcon lmages/bombpng

67
1hls could [usL as easlly be an lcon beslde LexL by changlng Lhe sLyle class and addlng
Lhe LexL cong

xLype LbbuLLon
cls xbLnLexLlcon
lcon lmages/bombpng
LexL 1ha 8omb

8uLLon handlerscllck me!
A buLLon needs Lo do more Lhan [usL look preLLylL needs Lo reacL Lo Lhe user 1hls ls
where handlers come ln A handler ls a funcLlon LhaL ls execuLed when a buLLon or
menu lLem ls cllcked
1he handler cong ls where we add our funcLlon

xLype LbbuLLon
LexL 8uLLon
handler funcLlon()
LxLMsgalerL(8oo Pere l am)

1hls code wlll pop up an alerL message when Lhe buLLon ls cllcked SomeLlmes we
need Lo make changes Lo Lhe buLLon when lLs cllcked so each buLLon handler passes ach buLLon handler
passes
a reference Lo lLself for Lhls purpose 1he rsL argumenL of our handler ls a reference
Lo Lhe componenL LhaL Lrlggered Lhe evenL

xLype LbbuLLon
LexL 8uLLon
handler funcLlon(f)
fdlsable()

We can Lake Lhls reference Lo Lhe buLLona reference Lo lLselfand access all of Lhe
properLles and funcLlons of LhaL buLLon lor Lhls sample we have called Lhe dlsable
funcLlon whlch grays ouL Lhe buLLon and makes lL unselecLable
We can have more fun Lhan [usL dlsabllng a buLLon Why donL we Lry someLhlng
more useful?
68
Load conLenL on menu lLem cllck
LeLs Lake our buLLon cllck and do someLhlng more useful wlLh lL lor Lhls example
we are golng Lo add a conflg opLlon Lo each menu lLem LhaL wlll be used Lo
deLermlne whaL conLenL le Lo load ln Lhe body of our page

xLype LbspllL
LexL Pelp
menu
LexL Cenre
helpflle genre
handler MovlesshowPelp

LexL ulrecLor
helpflle dlrecLor

LexL 1lLle
helpflle LlLle

noLe Lhe helpflle cong opLlon LhaL we have added Lo each of Lhe menu lLems cong
We have made Lhls cong properLy up so LhaL we have a way Lo sLore a varlable LhaL ls
unlque Lo each menu lLem 1hls ls posslble because conflg properLles can be anyLhlng
we need Lhem Lo be and can be creaLed on Lhe y ln Lhls case we are uslng a cong
properLy as a varlable LhaL holds Lhe name of Lhe le we wanL Lo load
1he oLher new Lhlng we are dolng ls creaLlng a collecLlon of funcLlons Lo handle Lhe
menu lLem cllck 1hese funcLlons are all organlzed lnLo a Movles class
var Movles funcLlon()
reLurn
showPelp funcLlon(bLn)
var helpbody LxLgeL(helpbody)
lf (!helpbody)
LxLuomPelperappend(LxLgeL8ody()
Lagdlv
ldhelpbody
)

MovlesdoLoad(bLnhelpflle)

69
doLoad funcLlon(flle)
LxLgeL(helpbody)load(
url hLml/ + flle + LxL
)

()
l donL wanL Lo geL bogged down wlLh Loo much deLall abouL Lhls Movles class [usL
yeL buL essenLlally all lL does ls handle our menu lLem cllcks 1hls class wlll load a
LexL le lnLo Lhe body of our web page vla an A!Ax requesLwhlch LexL le lL loads
ls relaLed Lo whlch menu lLem ls cllcked So once Lhls Movles class ls ln place ln our
page we wlll be able Lo brlng up Lhls page ln our browser and cllck on each menu
lLem Lo load Lhe relevanL help le lnLo Lhe body of Lhe page

nexL we wlll Lry uslng a LexL eld Lo perform Lhls same Lype of acLlon
lorm flelds ln a Loolbar
Llke mosL Lhlngs ln LxL a Lool bar can accepL [usL abouL any LxL componenL
naLurally form elds and combo boxes are very useful lLems Lo have on a Loolbar

xLype LexLfleld

ln Lhe same way as we creaLed form elds ln Lhe lasL chapLer we have added Lhe
form elds Lo Lhe lLems array whlch wlll place Lhe form elds wlLhln Lhe Loolbar
now leLs make Lhe form eld do someLhlng useful by havlng lL perform Lhe same
funcLlonallLy as our help menu buL ln a more dynamlc way

xLype LexLfleld
llsLeners
speclalkey MovlesdoSearch

70
1hls llsLener ls added dlrecLly Lo Lhe form elds cong lor Lhls we are uslng a s cong lor Lhls we are
uslng a s cong lor Lhls we are uslng a
speclalkey llsLener whlch we used ln Lhe prevlous chapLer 1hls ls Lhe llsLener
LhaL ls used Lo capLure edlL keysLrokes such as LnLer and ueleLe among oLhers 1he
handler funcLlon wlll be added Lo our small Movles class creaLed earller
doSearch funcLlon(frmevL)
lf (evLgeLkey() evLLn1L8)
MovlesdoLoad(frmgeLvalue())

now we have a LexL eld ln our Loolbar LhaL enables us Lo Lype ln Lhe name of Lhe LexL
le Lo load 1ry some of Lhe samples used ln our menu such as dlrecLor or LlLle
1oolbars ln wlndows grlds and panels
All of Lhe Loolbars we have been worklng wlLh have an lLems cong lf we wanL Lo
place one of Lhese Loolbars lnLo anoLher LxL componenL such as a panel or a wlndow
we can slmply Lake Lhe conLenLs of Lhe lLems cong for a Loolbar and place lL wlLhln
one of Lhe Lwo preseL conLalners LhaL exlsL for panelLype componenLs
anelLype componenLs such as Lhe wlndow and Lhe grld have a Lop and boLLom
Loolbar cong
Lbar 1he Lop Loolbar
bbar 1he boLLom Loolbar
-
-
71
lf we wanLed Lo place a Loolbar aL Lhe Lop of a wlndow lllng Lhe Lbar cong wlLh an
array of Loolbar lLems would glve us whaL we wanLed
new LxLWlndow(
LlLle Pelp
ld helpwln
wldLh 300
helghL 300
Lbar
LexL Close
handler funcLlon()
LxLgeLCmp(helpwln)close()

LexL ulsable
handler funcLlon(L)
Ldlsable()

auLoLoad hLml/ + bLnhelpflle + LxL
)show()
LxL also has a cusLom Loolbar for paged grlds LhaL conLalns all of Lhe buLLons for
movlng Lhrough pages of resulLs We wlll cover Lhls speclal Loolbar ln Lhe grld
chapLer laLer ln Lhls book
Summary
ln Lhls chapLer we had Lhe chance Lo play wlLh a couple of dlfferenL ways Lo creaLe
Loolbar lLems lncludlng uslng a cong ob[ecL or lLs shorLcuL 1he many opLlons
avallable for Loolbars make Lhem a useful componenL for everyLhlng from Lhe
slmplesL buLLon bar Lo a complex comblnaLlon of buLLons menus and form
elds lnLeracLlng wlLh Lhe buLLons menus and form elds ls easy uslng Lhe
bullLln handlers
Am Pllllgenbusch 47 aderborn n8W 33098ulsplaylng uaLa wlLh Crlds
1he grld ls wlLhouL doubL one of Lhe mosL wldelyused componenLs of LxL We all
have daLa and Lhls needs Lo be presenLed Lo Lhe end user ln an easyLoundersLand
manner 1he spreadsheeL (aka grld) ls Lhe perfecL way Lo do LhlsLhe concepL has
been around for qulLe a whlle because lL works LxL Lakes LhaL concepL and makes lL
exlble and downrlghL amazlng!
ln Lhls chapLer we shall be
uslng a Crldanel Lo dlsplay sLrucLured daLa ln a userfrlendly grld
8eadlng daLa from Lhe server (or daLabase) Lo dlsplay ln Lhe grld
Worklng wlLh a grlds evenLs and manlpulaLlng Lhe grlds feaLures
uslng some advanced daLa formaLLlng Lechnlques for grlds
aglng daLa ln a grld
We wlll cover how Lo dene Lhe rows and columns buL more lmporLanLly we wlll
learn how Lo make Lhe grld ashler We can do Lhls by addlng cusLom rendered cells
LhaL conLaln lmages and change sLyles based on daLa values ln dolng Lhls we are
addlng real value Lo our grld by breaklng ouL of Lhe boundarles of spreadsheeLs!
-
-
-
-
-
Am Pllllgenbusch 47 aderborn n8W 33098ulsplaylng uaLa WlLh Crlds
74
WhaL ls a grld anyway?
LxL grlds are slmllar Lo a spreadsheeL Lhere are Lwo maln parLs Lo each spreadsheeL
Columns
8ows
Pere our columns are 1lLle 8eleased Cenre and rlce Lach of Lhe rows conLalns
movles such as 1he 8lg Lebowskl Super 1roopers and so on 1he rows are really
our daLa each row ln Lhe grld represenLs a record of daLa
ulsplaylng sLrucLured daLa wlLh
a Crldanel
ulsplaylng daLa ln a grld requlres Lwo LxL componenLs
A sLore LhaL acLs llke an lnmemory daLabase keeplng Lrack of Lhe daLa we
wanL Lo dlsplay
A grld panel LhaL provldes a way Lo dlsplay Lhe daLa sLored ln a daLa sLore
-
-
-
-
73
8efore we sLarL Lo creaLe each of Lhese leLs look aL some of Lhe Lermlnology LhaL wlll
be used because Lhls can be confuslng aL rsL
Columns 1hls refers Lo a whole column of daLa and would conLaln
lnformaLlon only relevanL Lo Lhe dlsplay of daLa down Lhrough Lhe enLlre
column lncludlng Lhe headlng ln LxL !S Lhls lnformaLlon ls parL of Lhe
Column Model
llelds 1hls also refers Lo an enLlre column of daLa buL ls refers Lo Lhe acLual
daLa values WlLh LxL !S Lhls ls used ln Lhe reader for loadlng daLa
SeLLlng up a daLa sLore
1he rsL Lhlng we need Lo do ls seL up our daLa whlch wlll be placed lnLo a daLa
sLore 1he daLa sLore Lypes avallable ln LxL glve us a conslsLenL way of readlng
dlfferenL daLa formaLs such as xML and !SCn and readlng Lhls daLa ln a conslsLenL
way LhroughouL all of Lhe LxL wldgeLs 8egardless of wheLher Lhls daLa lL ls !SCn
xML an array or even a cusLom daLa Lype of your own lLs all accessed ln Lhe same
way Lhanks Lo Lhe daLa sLore
Some daLa sLores avallable by defaulL ln LxL are
Slmple (Array)
xML
!SCn
A cusLom daLa sLore could be creaLed Lo read daLa LhaL does noL L lnLo Lhese
caLegorles 1he LxL !S forums provlde userconLrlbuLed daLa readers for Lhlngs such
as CSv and Coldluslon formaLs of daLa
Addlng daLa Lo our daLa sLore
ln our rsL aLLempL we are golng Lo creaLe a grld LhaL uses slmple local array daLa
1he daLa were uslng below ls Laken from a very small movle daLabase of some of my
favorlLe movles and ls slmllar Lo Lhe daLa LhaL wlll be pulled from an acLual daLabase
laLer ln Lhls chapLer
1he daLa sLore needs Lwo Lhlngs Lhe daLa lLself and a descrlpLlon of Lhe daLaor
whaL could be LhoughL of as Lhe elds A reader wlll be used Lo read Lhe daLa from
Lhe array and Lhls ls where we dene Lhe elds of daLa conLalned ln our array 1he
reader acLs as an lnLerpreLer of sorLs lL knows how Lo lnLerpreL a sLrlng of daLa as
rows of daLa Lo be used wlLh LxL !S
-
-
-
-
-
76
1he followlng code should be placed lnslde Lhe LxL Cn8eady funcLlon
var sLore new LxLdaLaSLore(
daLa

1
Cfflce Space
Mlke !udge
19990219
1
Work Sucks
1993
1

3
Super 1roopers
!ay Chandrasekhar
20020213
1
AlLered SLaLe ollce
1493
1

//more rows of daLa removed for readablllLy//

reader new LxLdaLaArray8eader(ldld
ld
LlLle
dlrecLor
name released Lype daLe daLelormaL ?md
genre
Lagllne
prlce
avallable

)
lf we vlewed Lhls code ln a browser we would noL see anyLhlngLhaLs because a
daLa sLore ls [usL a way of loadlng and keeplng Lrack of your daLa 1he web browsers
memory has our daLa ln lL now we need Lo declde how Lo dlsplay lL Lo Lhe user
ueflnlng your daLa for Lhe daLa sLore
1he reader needs Lo know whlch elds Lo read ln as daLa for our daLa sLore so we
wlll need Lo dene Lhese
77
llelds are dened uslng an array of ob[ecLsor lf Lhe daLa ls Lo be read verbaLlm [usL
a sLrlng speclfylng Lhe eld name All excepL one of our elds ln Lhls example can be
dened wlLh a slmple name lor example Lhe LlLle eld could be dened uslng an
ob[ecL llke Lhls
name LlLle
Powever ln our case because we are [usL readlng ln Lhe daLa as a sLrlng we can
slmply pass Lhe eld name and save some Lyplng
LlLle
1he released eld ls dlfferenL because we wanL Lo LreaL lLs daLa approprlaLely as a
daLe Lype lor each eld formaL Lype Lhere may be opLlons Lo dene Lhe formaL of
Lhe daLa more expllclLly WlLh Lhe daLe Lype Lhere ls a daLelormaL sLrlng LhaL needs
Lo be dened lf you have used P Lhese daLe formaL sLrlngs wlll look famlllar
because LxL uses Lhe same daLe formaL sLrlngs LhaL P does
Speclfylng daLa Lypes
LxL !S has many ways Lo properly read ln parLlcular daLa Lypes 1hey are shown here properly read ln
parLlcular daLa Lypes 1hey are shown here read ln parLlcular daLa Lypes 1hey are shown here
lleld 1ype uescrlpLlon lnformaLlon
sLrlng SLrlng daLa
lnL number uses !avaScrlpLs parselnL funcLlon
floaL lloaLlng polnL number uses !avaScrlpLs parselloaL funcLlon
boolean 1rue/lalse daLa
daLe uaLe daLa daLelormaL cong needed
8elow are a few useful daLa Lypes LhaL l Lake advanLage of very ofLen
lleld 1ype uescrlpLlon usage
daLe uaLa
conLalnlng a
daLe
?ou also have Lo speclfy Lhe daLelormaL 1hls Lells LxL
how Lo Lurn LexL daLa lnLo daLes
?md means full 4 dlglL yearnumbered
monLhnumbered day
daLelormaL ln LxL ls Lhe same as ln P and Lheres
a handy reference Lo dlfferenL daLe formaLs onllne here
hLLp//wwwphpneL/daLe
78
lleld 1ype uescrlpLlon usage
lnL numerlc daLa 1reaLs Lhe value as an lnLegerLhls ls useful when you
plan on maklng comparlsons of your daLa Lo perform oLher
acLlons such as addlng Lwo columns LogeLher
boolean
or bool
1rue/lalse
daLa
1akes care of readlng Lhe dlfferenL ldeas of whaL boolean
values are such as converLlng a sLrlng Lo an acLual boolean
value or LranslaLlng zero and one Lo boolean values
lf we were Lo dlsplay Lhe daLa [usL as Lhe reader sees lL we would end up wlLh
someLhlng llke Lhls
now LhaL ls uglyheres a breakdown of whaL happened
1he released daLe has been Lype seL properly as a daLe and lnLerpreLed
from Lhe value ln our daLa lLs provlded ln Lhe sLandard ugly !avaScrlpL daLe
formaLlucklly LxL has ways Lo make Lhls look preLLy
1he rlce column has been Lype seL as a oaLlng polnL number noLe LhaL
Lhere ls no need Lo speclfy Lhe declmal preclslon
1he Avall column has been lnLerpreLed as a Lrue boolean value even lf Lhe
raw daLa was noL a Lrue boolean value
1hls ls why lLs useful Lo speclfy Lhe Lype of daLa LhaL ls belng read and apply any
speclal opLlons LhaL are avallable
ulsplaylng Lhe Crldanel
1he Lhlng LhaL pulls everyLhlng LogeLher ls Lhe Crldanel whlch Lakes care of placlng
Lhe daLa lnLo columns and rows along wlLh addlng column headers and boxlng
everyLhlng LogeLher ln a neaL llLLle package
-
-
-
79
1he movle daLa lsnL much good Lo anybody [usL slLLlng ln Lhe compuLers memory
LeLs dlsplay lL ln a grld
1 Add your daLa sLore Lo Lhe followlng Crldanel code

// add your daLa sLore here

var grld new LxLgrldCrldanel(
frameLrue
LlLle Movle uaLabase
helghL200
wldLh300
sLore sLore
columns
header 1lLle daLalndex LlLle
header ulrecLor daLalndex dlrecLor
header 8eleased daLalndex released
renderer LxLuLlllormaLdaLe8enderer(m/d/?)
header Cenre daLalndex genre
header 1agllne daLalndex Lagllne

)

)
2 Load lL ln a browser and heres whaL you wlll see
80
Pow dld LhaL work?
Cur daLa sLore ls passed lnLo Lhe grld along wlLh a column model LhaL deLermlnes
how Lhe columns and column headers are Lo be dlsplayed 1hls ls dlfferenL from Lhe
eld daLa used ln Lhe reader whlch was dened so LhaL Lhe reader knew how Lo
read daLa
Conflgurlng Lhe Crldanel
1he Crldanel ls Lhe wldgeL LhaL Lles everyLhlng LogeLher
LxLgrldCrldanel
Cnly a few baslc Lhlngs are needed Lo seL up Lhe Crldanel
lleld Lype uescrlpLlon usage
render1o Where
should Lhe
grld panel be
dlsplayed?
1hls needs Lo be a valld uCM ob[ecL or Lhe lu of a uCM
elemenL LaLer on we wlll pass Lhe Crldanel dlrecLly
lnLo Lhe oLher wldgeLs Lo be rendered So Lhls cong
opLlon wlll become obsoleLe
frame lrames Lhe
grld panel
1hls [usL adds a nlce border around Lhe Crldanel
along wlLh a LlLle bar lLs noL requlred buL looks good
when rendered Lo Lhe page
helghL and
wldLh
Slze ln plxels A helghL ls almosL always requlred when uslng a
grld as Lhe grld lLself cannoL deLermlne lLs own helghL
When we geL lnLo uslng grlds ln a layouL Lhls wlll no
longer be needed
sLore Cur daLa 1hls ls a reference Lo a valld daLa sLore where our
daLa llves
columns Column
model
1hls ls an array of ob[ecLs denlng Lhe columns
of our grld
sLrlpe8ows SLrlpe rows 1hls ls seL Lo Lrue Lo alLernaLe Lhe colors ln Lhe rows of
daLa
Cur baslc seLup for a grld panel wlll look someLhlng llke Lhls
render1o LxLgeL8ody()
frameLrue
helghL200
wldLh300
sLore sLore
columns lnserL columns here
)
81
We can almosL read Lhrough Lhe conguraLlon llke a senLence
8ender our grld lnLo Lhe body of Lhe documenL frame lL and glve lL a LlLle
of Movle uaLabase 1he helghL wlll be 200 and Lhe wldLh 300 lL wlll use
our sLore daLa sLore and have Lhe columns specled
1he one reason why l love ob[ecLbased conguraLlon so much ls LhaL lL ls human
readable We never have Lo go Lo Lhe manual Lo look up whaL argumenL 3 of funcLlon
x ls we slmply say make lL 200 Lall and 300 wlde
ueflnlng a Crlds column model
1o dene our grlds columns we need Lo creaLe an array of ob[ecLs LhaL dene how
Lhese columns are Lo be dlsplayed and LreaLed
columns

1hls wlll creaLe grld column headers LhaL look llke Lhls
1he ob[ecL denlng each column can have many cong opLlons buL requlres LhaL aL
leasL a header and daLalndex be dened 1he header cong ls slmply Lhe LexL Lo be
dlsplayed ln Lhe column header 1he daLalndex cong ls Lhe name of Lhe daLa eld
Lo be used ln LhaL column We dened Lhese when we seL up Lhe daLa sLores reader
Pere are some oLher useful cong opLlons for Lhe column model
CpLlon uescrlpLlon usage
renderer Specles how Lhe
daLa should be
dlsplayed
Can be used Lo formaL Lhe daLa for Lhls column lnLo your
preferred formaL Any Lype of daLa can be Lransformed
We wlll learn abouL Lhese ln Lhe nexL few pages
hldden Pldes Lhe column 8oolean value denlng wheLher or noL Lhe column
should be dlsplayed
82
CpLlon uescrlpLlon usage
wldLh Specles Lhe
column wldLh ln
plxels
1he wldLh of Lhe column uefaulL ls 100 plxels
overowlng conLenL ls hldden
sorLable Specles wheLher
Lhe column ls
sorLable
8oolean value speclfylng wheLher or noL Lhe column can
be sorLed
uslng cell renderers
We can do some preLLy neaL Lhlngs wlLh cell renderlng 1here are few llmlLaLlons Lo
sLop us from maklng Lhe cell look llke or conLaln whaLever we wanL All LhaL needs Lo
be done ls Lo speclfy one of Lhe bullLln cell formaLLlng funcLlons provlded by LxL !S
such as usMoney or creaLe our own cell renderer LhaL reLurns a formaLLed value
LeLs Lake a look aL uslng Lhe bullLln cell renderers rsL 1hen we can look aL
creaLlng our own
lormaLLlng daLa uslng Lhe bullLln cell
renderers
Many bullLln formaLLlng funcLlons exlsL Lo Lake care of common renderlng
requlremenLs Cne LhaL l use qulLe ofLen ls Lhe daLe renderer
Some oLher renderers lnclude some commonlyrequlred formaLLlng such as money
caplLallze and lowercase
Pere are some renderers LhaL mosL people nd useful
8enderer uescrlpLlon usage
daLe8enderer lormaLs
a daLe for
dlsplay
Can be used Lo formaL Lhe daLa for Lhls column lnLo
your preferred daLe formaL Any Lype of daLe can be
Lransformed
uppercase
lowercase
upper and
lower case
converslon
ConverLs Lhe sLrlng Lo compleLely upper or lower
case LexL
caplLallze reLLy LexL lormaLs a LexL sLrlng Lo have correcL caplLallzaLlon
83
CreaLlng lookup daLa sLorescusLom
cell renderlng
Were golng Lo sLarL by Laklng Lhe genre column whlch has a numerlc value and
looklng up LhaL value ln Lhe daLa sLore we creaLed ln Lhe lorms chapLer Lo nd Lhe
LexLual represenLaLlon of our genre number
llrsL we add a cong opLlon Lo Lhe column model LhaL Lells lL whlch funcLlon Lo use
for renderlng Lhe cells conLenL
header Cenre daLalndex genre renderer genre_name
now leLs creaLe LhaL funcLlon 1he funcLlon call ls passed Lhe value of lLs cell as Lhe
rsL argumenL 1he second argumenL ls a cell ob[ecL whlle Lhe Lhlrd ls Lhe daLa sLore
for LhaL grldnelLher of whlch we wlll use for Lhls renderer So leLs [usL leave Lhem
funcLlon genre_name(val)
reLurn genresquery8y(funcLlon(rec)
lf (recdaLald val)
reLurn Lrue
else
reLurn false

)lLemAL(0)daLagenre

1he renderer funcLlon ls passed Lhe value of Lhe currenL cell of daLa 1hls value can
be LesLed and acLlons can be performed on lLwhaLever value ls reLurned by Lhe
funcLlon ls rendered Lo Lhe grld cell A query8y handler ls used Lo lLer Lhe daLa from
our sLore lL accepLs a funcLlon LhaL performs a comparlson agalnsL each row of daLa
and reLurns Lrue Lo use Lhe row LhaL maLches
!usL for good measure here ls a compacLed verslon of Lhe same funcLlon lLs noL as
easy Lo read as Lhe rsL verslon buL accompllshes Lhe same resulL
funcLlon genre_name(val)
reLurn genresquery8y(funcLlon(rec)
reLurn recdaLald val
)lLemAL(0)daLagenre

84
Comblnlng Lwo columns
1he lookup daLa sLore ls a very useful renderer Powever lLs more common for
developers Lo comblne Lwo columns Lo form a slngle cell for example Lo perform a
calculaLlon on a palr of columns Lo gure ouL a LoLal percenLage remalnder and so
on or Lo concaLenaLe Lwo or more LexL elds
LeLs [usL Lake Lhe LlLle of our movle and append Lhe Lagllne eld underneaLh Lhe
LlLle 1he rsL sLep wlll be Lo hlde Lhe Lagllne column slnce lL wlll be dlsplayed along
wlLh Lhe LlLle eldwe donL need lL shown ln Lwo places Pldlng Lhe column can be
done ln our column model
header 1agllne daLalndex Lagllne hldden Lrue
1he nexL sLep ls our renderer funcLlon LhaL wlll Lake care of comblnlng Lhe elds
funcLlon LlLle_Lagllne(val x sLore)
reLurn b+val+/bbr+sLoredaLaLagllne

l wenL ahead and bolded Lhe LlLle as well Lo provlde some conLrasL beLween Lhe
Lwo pleces of daLa As you can see P1ML Lags work [usL ne wlLhln grld cells 1he
nexL sLep would be Lo add Lhe renderer cong Lo our column model referenclng Lhe
LlLle_Lagllne funcLlon LhaL we [usL creaLed
header 1lLle daLalndex LlLle renderer LlLle_Lagllne
1hls wlll make Lhe LlLle column look llke Lhls
CeneraLlng P1ML and graphlcs
LeLs geL some vlsuals by placlng an lmage lnLo each row whlch wlll show Lhe cover
arL for each movle LlLle As we [usL found ouL we can use plaln P1ML wlLhln Lhe cell
So all LhaL needs Lo happen ls Lo creaLe a renderer LhaL grabs our eld conLalnlng Lhe
lename of Lhe lmage and wrlLe LhaL lnLo an lMC Lag as Lhe S8C aLLrlbuLe
funcLlon cover_lmage(val)
reLurn lmg srclmages/+val+

83
WlLh Lhls falrly sLralghLforward funcLlon and seLLlng a column renderer we have an
lmage ln our grld
header Cover daLalndex coverLhumb renderer
cover_lmage
lf you make all Lhese renderer addlLlons Lhe grld should now look llke Lhls
8ullLln feaLures
LxL has some very nlce bullLln feaLures Lo help compleLe Lhe spreadsheeLllke
lnLerface Columns have a bullLln menus LhaL provlde access Lo sorLlng dlsplaylng
and hldlng columns
86
CllenLslde sorLlng
unless specled as a serverslde (remoLely) sorLed grld an LxL grld ls able Lo sorL
columns on Lhe cllenL slde Serverslde sorLlng should be used lf Lhe daLa ls paged
or lf Lhe daLa ls ln such a formaL LhaL cllenLslde sorLlng ls noL posslble CllenLslde
sorLlng ls qulck easy and bullLln
header 1agllne daLalndex Lagllne sorLable Lrue
We can also accompllsh Lhls afLer Lhe grld has been rendered
var colmodel grldgeLColumnModel()
colmodelgeLColumn8yld(Lagllne)sorLable Lrue
Cur column model conLrols Lhe dlsplay of columns and column headers lf we
grab a reference Lo Lhe column model by asklng for lL from Lhe grld Lhen we can
make changes Lo Lhe columns afLer lL has been rendered We do Lhls by uslng Lhe
geLColumn8yld handler LhaL Lhe column model provldes us wlLh and whlch accepLs
Lhe column lu as Lhe argumenL
Pldden/vlslble columns
uslng Lhe column header menu columns can be hldden or shown 1hls can also be
changed aL a cong level Lo have columns hldden by defaulL as shown below
header 1agllne daLalndex Lagllne hldden Lrue
1he more exclLlng way ls Lo do Lhls afLer Lhe grld has been rendered by uslng Lhe
funcLlons LxL provldes
var colmodel grldgeLColumnModel()
colmodelseLPldden(colmodelgeLlndex8yld(Lagllne)Lrue)
Crabblng a reference Lo Lhe column model agaln wlll allow us Lhe make Lhls change
Column reorderlng
uragglng a column header wlll allow Lhe user Lo reorder Lhe enLlre column lnLo a
new order wlLhln Lhe grld All of Lhls ls enabled by defaulL as parL of Lhe bullLln
funcLlonallLy of Lhe grld
87
Any column can be dragged Lo a dlfferenL order ln Lhe grld 1hls screenshoL shows
Lhe rlce column belng moved Lo beLween Lhe 1lLle and ulrecLor columns
We can dlsable Lhls funcLlonallLy enLlrely by seLLlng a cong opLlon ln Lhe Crldanel
enableColumnMove false
1hls move evenLand many oLher evenLs ln Lhe grldcan be monlLored and
responded Lo lor example we could monlLor Lhe movemenL of columns and pop up
a message based on where Lhe column was moved Lo
grldgeLColumnModel()on(columnmoved
funcLlon(cmolndexnlndex)
var LlLle ?ou Moved +cmgeLColumnPeader(nlndex)
lf (olndex nlndex)
var dlrmsg (olndexnlndex)+ Column(s) Lo Lhe LefL
else
var dlrmsg (nlndexolndex)+ Column(s) Lo Lhe 8lghL

LxLMsgalerL(LlLledlrmsg)

)
Many dlfferenL evenLs can be monlLored uslng Lhe same Lechnlque 1he grld daLa
sLore and column model each have Lhelr own seL of evenLs LhaL can be monlLored all
of whlch we wlll learn abouL ln more deLall laLer ln Lhls chapLer
88
ulsplaylng serverslde daLa ln Lhe grld
WlLh LxL we can pull daLa lnLo our web page ln many ways We sLarLed by pulllng
ln local array daLa for use ln Lhe grld now we are golng Lo pull Lhe daLa ln from an
exLernal le and a web server
Loadlng Lhe movle daLabase from an xML flle
We have Lhls greaL movle daLabase now buL each Llme l wanL Lo add a new movle l
have Lo edlL Lhe !avaScrlpL array So why noL sLore and pull our daLa from an xML
le lnsLead? 1hls wlll be easler Lo updaLe and Lhe xML le could even be generaLed
from a daLabase query or a cusLom scrlpL
LeLs Lake a look aL an example of how our xML le would be lald ouL llke
?xml verslon10 encodlngu1l8?
daLaseL
row
ld1/ld
LlLleCfflce Space/LlLle
dlrecLorMlke !udge/dlrecLor
released19990219/released
genre1/genre
LagllneWork Sucks/Lagllne
coverLhumb84m[pg/coverLhumb
prlce1993/prlce
acLlve1/acLlve
/row
row
ld3/ld
LlLleSuper 1roopers/LlLle
dlrecLor!ay Chandrasekhar/dlrecLor
released20020213/released
genre1/genre
LagllneAlLered SLaLe ollce/Lagllne
coverLhumb42m[pg/coverLhumb
prlce1493/prlce
acLlve1/acLlve
/row
/daLaseL
89
1he oLher change we would need Lo make ls Lo alLer Lhe daLa reader and seL Lhe
locaLlon of our xML le so LhaL Lhe daLa sLore knows where Lo feLch Lhe daLa from
1here are four baslc changes LhaL need Lo happen when movlng from local Lo
remoLe daLa
1he url cong opLlon speclfylng Lhe locaLlon of our daLa needs Lo be
addedLhls wlll replace Lhe daLa cong opLlon LhaL we used Lo sLore
local daLa
1he reader ls changed from an Array8eader Lo an xml8eader Lo deal
wlLh Lhe dlfferences lnvolved ln readlng from an xML formaL lnsLead of
an array formaL
1he xml8eader ls Lold whlch elemenL conLalns a record or row of daLa by
seLLlng Lhe record cong opLlon
A call needs Lo be added Lo Lhe load funcLlon LhaL Lells our daLa sLore Lo pull
ln Lhe daLa from Lhe le and parse lL lnLo memory
url movlesxml
reader new LxLdaLaxml8eader(
recordrow
ldld

ld
coverLhumb
LlLle
dlrecLor
genre
Lagllne
name prlce Lype floaL
name avallable Lype bool
)
)
sLoreload()
1ry maklng Lhese changes and see lf your grld sLlll worksLhere should be no
noLlceable dlfference when changlng daLa sources or formaLs
noLe LhaL Lo make Lhe change from local Lo remoLe daLa and from an array formaL
Lo an xML formaL Lhe only changes we needed Lo make were Lo Lhe daLa sLore LxL
lsolaLes Lhese Lypes of changes by uslng a common daLa sLore LhaL ls able Lo use an
exLernal reader Lo read many formaLs
-
-
-
-
90
Loadlng Lhe movle daLabase from a !SCn flle
Were ln Lhe same boaL as xML wlLh Lhls daLa formaL !usL changlng Lhe reader and
seLLlng up some cong opLlons wlll Lake care of everyLhlng
1he !SCn rows of daLa are expecLed Lo be ln Lhe form of an array of ob[ecLs our
movles[son le wlll Lherefore conLaln daLa llke Lhls

successLrue
rows

ld1
LlLleCfflce Space
dlrecLorMlke !udge
released19990219
genre1
LagllneWork Sucks
coverLhumb84m[pg
prlce1993
acLlve1

ld3
LlLleSuper 1roopers
dlrecLor!ay Chandrasekhar
released20020213
genre1
LagllneAlLered SLaLe ollce
coverLhumb42m[pg
prlce1493
acLlve1


1he maln dlfference beLween seLLlng up a !SCn reader versus an xML reader ls LhaL
Lhe !SCn reader needs Lo know Lhe name of Lhe rooL elemenL LhaL holds our array
ob[ecLs (Lhe daLa) So lnsLead of speclfylng a record cong we need Lo speclfy a
rooL cong
url movles[son
rooLrows
91
ldld

ld
coverLhumb
LlLle
dlrecLor
genre
Lagllne
)
)
sLoreload()
1hls grld wlll have an ldenLlcal look and Lhe same funcLlonallLy as Lhe array and Lhe
xML grlds LhaL we creaLed earller
!SCn ls a formaL naLlve Lo !avaScrlpL and wlll end up belng Lhe qulckesL
formaL for Lhe daLa sLore Lo read whlch means LhaL our grld wlll be
dlsplayed much fasLer
Loadlng daLa from a daLabase uslng P
1he seLup for our Crldanel sLays Lhe same 8uL lnsLead of grabblng a sLaLlc le wlLh
Lhe !SCn daLa we can pull Lhe daLa from a P scrlpL LhaL wlll feLch Lhe daLa from a
daLabase and formaL lL lnLo !SCn LhaL LxL ls able Lo read
?php
// connecL Lo daLabase
$sql SLLLC1 * l8CM movles
$arr array()
lf (!$rs mysql_query($sql))
Lcho successfalse
else
whlle($ob[ mysql_feLch_ob[ecL($rs))
$arr $ob[

Lcho successLruerows[son_encode($arr)

?
92
1he P code used ln Lhese examples ls meanL Lo be Lhe bare mlnlmum
needed Lo geL Lhe [ob done ln a producLlon envlronmenL you would wanL
Lo accounL for securlLy agalnsL SCL ln[ecLlon aLLacks oLher error checklng
and probably user auLhenLlcaLlonwhlch Lhe example code does noL
accounL for
rogrammlng Lhe grld
MosL of Lhe code we have wrlLLen so far concerns congurlng Lhe grld prlor Lo lL
belng dlsplayed CfLen we wlll wanL Lhe grld Lo do someLhlng ln response Lo user
lnpuL Cne of Lhe common lnLeracLlons ln a grld ls Lo selecL or move Lhe rows of daLa
LxL !S refers Lo Lhls lnLeracLlon and how lLs handled as Lhe selecLlon model LeLs
see how Lo seL one up
Worklng wlLh cell and row selecLlons
LxL grlds provlde ways of monlLorlng user lnLeracLlon wlLh Lhe grlds rows cells
and columns wlLh a Lhlng called Lhe selecLlon model 1he selecLlon model ls used
Lo deLermlne how rows columns or cells are selecLed and how many lLems can be
selecLed aL a Llme 1hls allows us Lo creaLe llsLeners for Lhese selecLlon evenLs along
wlLh glvlng us a way Lo query whlch rows have been selecLed
Some of Lhe selecLlon models are
CellSelecLlonModel 1hls leLs Lhe user Lo selecL a slngle cell from
Lhe grld
8owSelecLlonModel 1hls leLs Lhe user selecL an enLlre row from Lhe grld
ColumnSelecLlonModel 1hls leLs Lhe user selecL an enLlre column from Lhe
grld
Check8oxSelecLlonModel 1hls one uses a checkbox Lo enable row selecLlons
Chooslng a selecLlon model ls someLhlng LhaL depends on your pro[ecLs
requlremenLs lor our movle daLabase we wlll use a row selecLlon model whlch ls
Lhe mosL commonly used Lype of selecLlon model
1he selecLlon model ls dened ln Lhe Crldanel cong by uslng Lhe sm cong opLlon
sm new LxLgrld8owSelecLlonModel(
slngleSelecL Lrue
)
-
-
-
-
93
We wlll also pass Lhe selecLlon model a cong LhaL specles slngle row selecLlons
only 1hls sLops Lhe user from selecLlng mulLlple rows aL Lhe same Llme
LlsLenlng Lo our selecLlon model for
selecLlons
LlsLeners for a grld can be lncluded ln many dlfferenL places dependlng on Lhe
deslred lnLeracLlon Larller we applled a llsLener Lo our column model because we
wanLed Lo llsLen for column acLlvlLy
Pere we wlll add a llsLener Lo Lhe selecLlon model because we wanL Lo know when
a user has selecLed a movle
sm new LxLgrld8owSelecLlonModel(
slngleSelecL Lrue
llsLeners
rowselecL
fn funcLlon(smlndexrecord)
LxLMsgalerL(?ou SelecLedrecorddaLaLlLle)

)
94
SelecLlng a row now brlngs up an alerL dlalog LeLs Lake a look aL whaL
ls happenlng here
A llsLener ls seL for Lhe rowselecL evenL 1hls walLs for a row Lo be selecLed
and Lhen execuLes our funcLlon when Lhls happens
Cur funcLlon ls passed a selecLlon model Lhe numerlc lndex of Lhe row
selecLed (sLarLlng wlLh zero for Lhe rsL row) and Lhe daLa record of Lhe row
LhaL was selecLed
uslng Lhe daLa record LhaL our funcLlon recelved we can grab Lhe LlLle of
Lhe movle selecLed and puL lL lnLo a message dlalog
ManlpulaLlng Lhe grld (and lLs daLa) wlLh code
Many funcLlons are avallable for manlpulaLlng Lhe grld and Lhe daLa ln Lhe
grld 1hese can be Lled lnLo oLher LxL wldgeLs Lo creaLe preLLy much any
funcLlonallLy needed
AlLerlng Lhe grld aL Lhe cllck of a buLLon
Pere we are golng Lo add a Lop Loolbar whlch wlll have a buLLon LhaL brlngs up a
prompL allowlng Lhe movle LlLle Lo be edlLed
Lbar
LexL Change 1lLle
handler funcLlon()
var sm grldgeLSelecLlonModel()
lf (smhasSelecLlon())
var sel smgeLSelecLed()
LxLMsgshow(
LlLle Change 1lLle
prompL Lrue
buLLons LxLMessage8oxCkCAnCLL
value seldaLaLlLle
fn funcLlon(bLnLexL)
lf (bLn ok)
selseL(LlLle LexL)

)

-
-
-
93
All we are really dolng here ls changlng Lhe daLa sLore 1he daLa ln our daLabase ln our daLabase
on Lhe web server has sLayed Lhe same and Lhe web server has no ldea wheLher
anyLhlng has changed lLs up Lo us Lo communlcaLe Lhls change Lo Lhe server vla an
A!Ax requesL or vla some oLher meLhod you may prefer Lo use
LeLs Lake a qulck look aL whaLs happenlng here
sm 1he selecLlon model ls reLrleved from our grld
sel We used Lhe selecLlon model Lo reLrleve Lhe row LhaL has been selecLed
seldaLa uslng Lhe daLa ob[ecL of Lhe selecLed lLem we can grab lLs daLa
1hls baslc meLhod can be used Lo creaLe many fun user lnLeracLlons Cur llmlLaLlon ls
LhaL Lhere are only 24 hours ln a day and sleep caLches up wlLh everyone!
Advanced grld formaLLlng
8ecause we are ln Lhe mood Lo creaLe some usergrld lnLeracLlons leL us add some
more buLLons LhaL do fun sLuff
-
-
-
96
Pere ls a buLLon we can add Lo Lhe Lop Loolbar Lo allow us Lo hlde or show a column
We wlll also change Lhe LexL of Lhe buLLon based on Lhe vlslblllLy of Lhe column

LexL Plde rlce
handler funcLlon(bLn)
var cm grldgeLColumnModel()
var pl cmgeLlndex8yld(prlce)
lf (cmlsPldden(pl))
cmseLPldden(plfalse)
bLnseL1exL(Plde rlce)
else
cmseLPldden(plLrue)
bLnseL1exL(Show rlce)

bLnrender()

We use a new handler heregeLlndex8yld whlch as you can lmaglne geLs Lhe
column lndex and wlll be a number from zero Lo one less Lhan Lhe LoLal number of
columns 1hls number ls an lndlcaLor of where LhaL column ls ln relaLlon Lo Lhe oLher
columns ln our grld code Lhe column prlce ls Lhe fourLh column whlch means LhaL
Lhe lndex ls 3 because lndexes sLarL aL zero
aglng Lhe grld
aglng requlres LhaL we have a serverslde elemenL (scrlpL) LhaL wlll break up our
daLa lnLo pages LeLs sLarL wlLh LhaL P ls wellsulLed Lo Lhls and Lhe code ls
easy Lo undersLand and lnLerpreL lnLo oLher languages So we wlll use P for our
example
When a paglng grld ls paged lL wlll pass sLarL and llmlL parameLers Lo Lhe
serverslde scrlpL 1hls ls Lyplcal of whaLs used wlLh a daLabase Lo selecL a subseL of
records Cur scrlpL can read ln Lhese parameLers and use Lhem preLLy much verbaLlm
ln Lhe daLabase query
Pere ls a Lyplcal P scrlpL LhaL would handle paglng We wlll name Lhe le
movlespaglngphp
?php
// connecL Lo daLabase
$sLarL ($_8LCuLS1sLarL ! ) ? $_8LCuLS1sLarL 0
$llmlL ($_8LCuLS1llmlL ! ) ? $_8LCuLS1llmlL 3
$counL_sql SLLLC1 * l8CM movles
$sql $counL_sql LlMl1 $sLarL $llmlL
97
$arr array()
lf (!$rs mysql_query($sql))
Lcho successfalse
else
$rs_counL mysql_query($counL_sql)
$resulLs mysql_num_rows($rs_counL)
whlle($ob[ mysql_feLch_ob[ecL($rs))
$arr $ob[

Lcho successLrueresulLs$resulLs
rows[son_encode($arr)

?
1hls P scrlpL wlll Lake care of Lhe serverslde parL of paglng So now we [usL need
Lo add a paglng Loolbar Lo Lhe grldlLs really qulLe slmple!
Larller we had used a Lop Loolbar Lo hold some buLLons for messlng wlLh Lhe grld
now we are golng Lo place a paglng Loolbar ln Lhe boLLom Loolbar sloL (mosLly
because l Lhlnk paglng bars look dumb on Lhe Lop)
98
1he followlng code wlll add a paglng Loolbar
bbar new LxLaglng1oolbar(
pageSlze 3
sLore sLore
)
And of course we need Lo change Lhe of course we need Lo change Lhe we need Lo change Lhe url of our
daLa sLore Lo Lhe url of Lhe P
serverslde paglng code A LoLalroperLy ls also requlred when paglng daLa 1hls
ls Lhe varlable name LhaL holds Lhe LoLal record counL of rows ln Lhe daLabase
url movlespagedphp
rooLrows
LoLalroperLy resulLs
ldld

// daLa column model removed for readablllLy
)
)
Crouplng
Crouplng grlds are used Lo provlde a vlsual lndlcaLlon LhaL seLs of rows are slmllar
Lo each oLher lL also provldes us wlLh sorLlng LhaL ls conned Lo each group So lf we
were Lo sorL by Lhe prlce column Lhe prlce would sorL only wlLhln each group
of lLems
Crouplng sLore
A speclal sLore ls requlred whlch ls calledwalL for lLLhe CrouplngSLoreLada!
1he seLup ls slmllar Lo a sLandard sLore We [usL need Lo provlde a few more
conguraLlon opLlons such as Lhe sorLlnfo and Lhe grouplleld no changes Lo Lhe
acLual daLa are needed because LxL !S Lakes care of grouplng on Lhe cllenL slde
var sLore new LxLdaLaCrouplngSLore(
url movles[son
sorLlnfo
fleld genre
dlrecLlon ASC

grouplleld genre
99
rooLrows
ldld
// reader column model here //)
)
We also need Lo add a vlew conguraLlon Lo Lhe grld panel 1hls vlew helps Lhe grld
Lo vlsually accounL for grouped daLa
frameLrue
helghL400
wldLh320
sLore sLore
auLoLxpandColumn LlLle
columns // column model goes here //
vlew new LxLgrldCrouplngvlew()
)
AfLer maklng Lhe changes needed for a grouplng grld we end up wlLh someLhlng
LhaL looks llke Lhls
100
lf you now expand Lhe conLexL menu for Lhe column headlngs you wlll see a new
lLem ln Lhe menu for Croup 8y 1hls lleld LhaL wlll allow Lhe user Lo change Lhe
grouplng column on Lhe y
Summary
We have learned a loL ln Lhls chapLer abouL presenLlng daLa ln a grld WlLh Lhls
newfound knowledge we wlll be able Lo organlze masslve amounLs of daLa lnLo easy
Lo undersLand grlds
Speclcally we covered
CreaLlng daLa sLores and grlds for dlsplay
8eadlng xML and !SCn daLa from a server and dlsplaylng lL ln a grld
8enderlng cells of daLa for a well formaLLed dlsplay
AlLerlng Lhe grld based on user lnLeracLlon
We also dlscussed Lhe lnLrlcacles of each of Lhese elemenLs such as readlng daLa
locally or from a serveralong wlLh paglng We also covered formaLLlng cells uslng
P1ML lmages and even lookups lnLo separaLe daLa sLores
now LhaL weve learned abouL sLandard grlds were ready Lo Lake lL Lo Lhe nexL level
by maklng our grld cells edlLable [usL llke a spreadsheeLwhlch ls Lhe Loplc of Lhe
nexL chapLer
-
-
-
-
Am Pllllgenbusch 47 aderborn n8W 33098LdlLor Crlds
ln Lhe prevlous chapLer we learned how Lo dlsplay daLa ln a sLrucLured grld LhaL
users could manlpulaLe 8uL one ma[or llmlLaLlon was LhaL Lhere was no way
for Lhe users Lo edlL Lhe daLa ln Lhe grld lnllne lorLunaLely LxL provldes an
LdlLorCrldanel whlch allows Lhe use of form eld Lype edlLlng lnllneand we
wlll learn abouL lL ln Lhls chapLer 1hls works much llke Lxcel allowlng Lhe user Lo
cllck on and edlL cell daLa lmmedlaLely
ln Lhls chapLer you wlll learn Lo
resenL Lhe user wlLh edlLable grlds LhaL are connecLed Lo a daLa sLore
Send edlLed daLa back Lo Lhe server enabllng users Lo updaLe serverslde
daLabases uslng Lhe LxL !S edlLor grld
ManlpulaLe Lhe grld from program code and respond Lo evenLs
use Lrlcks for advanced formaLLlng and creaLlng more powerful edlLlng grlds
8uL rsL leLs see whaL you can do wlLh an edlLable grld
WhaL can l do wlLh an edlLable grld?
1he LdlLorCrldanel ls very slmllar Lo Lhe forms we were worklng wlLh earller ln
facL an edlLor grld uses Lhe exacL same form elds as our form 8y uslng form elds
Lo perform Lhe grld cell edlLlng we geL Lo Lake advanLage of Lhe same funcLlonallLy
LhaL a form eld provldes 1hls lncludes resLrlcLlng lnpuL and valldaLlng values
Comblne Lhls wlLh Lhe power of an LxL Crldanel and we are lefL wlLh a wldgeL LhaL
can do preLLy much whaLever we wanL
-
-
-
-
102
All of Lhe elds ln Lhls Lable can be edlLed lnllne uslng form elds such as Lhe LexL
eld daLe plcker and combo box
Worklng wlLh edlLable grlds
1he change from a nonedlLable grld Lo an edlLable grld ls qulLe a slmple process Lo
sLarL wlLh 1he complexlLy comes lnLo Lhe plcLure when we sLarL Lo creaLe a process Lo
handle edlLs and send LhaL daLa back Lo Lhe server 8uL once you learn how Lo do lL
LhaL parL can be qulLe slmple as well
LeLs see how you would updaLe Lhe grld we creaLed aL Lhe sLarL of ChapLer 3 Lo make
Lhe LlLle dlrecLor and Lagllne edlLable Peres whaL Lhe modled code wlll look llke
var LlLle_edlL new LxLform1exLlleld()
var dlrecLor_edlL new LxLform1exLlleld(vLype name)
var Lagllne_edlL new LxLform1exLlleld(
maxLengLh 43
)
var grld new LxLgrldLdlLorCrldanel(
frameLrue
helghL200
wldLh320
cllcksLoLdlL 1
sLore sLore
columns
103
edlLor LlLle_edlL
edlLor dlrecLor_edlL
renderer genre_name
edlLor Lagllne_edlL

)
1here are four maln Lhlngs LhaL we need Lo do Lo make our grld edlLable 1hese are
1he grld denlLlon changes from belng LxLgrldCrldanel Lo LxLgrld
LdlLorCrldanel
We add Lhe cllcks1oLdlL opLlon Lo Lhe grld congLhls opLlon ls noL
requlred buL defaulLs Lo Lwo cllcks
CreaLe a form eld for each column LhaL we would llke Lo be edlLable
ass Lhe form elds lnLo our column model vla Lhe edlLor cong
1he edlLor can be any of Lhe form eld Lypes LhaL already exlsL ln LxL !S or a cusLom
one of your own We sLarL by creaLlng a LexL form eld LhaL wlll be used when edlLlng
Lhe movle LlLle
1hen add Lhls form eld Lo Lhe column model as Lhe edlLor
header 1lLle daLalndex LlLle edlLor LlLle_edlL
1he nexL sLep wlll be Lo change from uslng Lhe Crlpanel componenL Lo uslng Lhe
LdlLorCrldanel componenL and Lo add Lhe cllcks1oLdlL cong
frameLrue
helghL200
wldLh320
cllcksLoLdlL 1
// removed exLra code for clarlLy
)
-
-
-
-
104
Maklng Lhese changes has Lurned our sLaLlc grld lnLo an edlLable grld We can cllck
on any of Lhe elds LhaL we seL up edlLors for and edlL Lhelr values
Pere we see some changes have been made Lo Lhe LlLles of a few of Lhe movles
Lurnlng Lhem lnLo muslcals 1he edlLor geLs acLlvaLed wlLh a slngle cllck on Lhe cell of
daLa presslng LnLer Lhe 1ab key or cllcklng away from Lhe eld wlll save Lhe change
and presslng Lhe Lscape key wlll dlscard any changes 1hls works [usL llke a form
eld because well lL ls a form eld
1he llLLle red Llck LhaL appears ln Lhe upperlefL corner lndlcaLes LhaL Lhe cell ls
dlrLy whlch we wlll cover ln [usL a momenL llrsL leLs make some more complex
edlLable cells
LdlLlng more cells of daLa
lor our baslc edlLor grld we sLarLed by maklng a slngle column edlLable 1o seL up
Lhe edlLor we creaLed a reference Lo Lhe form eld
1hen we used LhaL form eld as Lhe edlLor for Lhe column
header 1lLle daLalndex LlLle edlLor LlLle_edlL
1haLs Lhe baslc requlremenLs for each eld now leLs expand upon Lhls knowledge
LdlL more fleld Lypes
now we are golng Lo creaLe edlLors for Lhe oLher elds ulfferenL daLa Lypes have
dlfferenL edlLor elds and can have opLlons speclc Lo LhaL elds needs
103
Any form eld Lype can be used as an edlLor 1hese are some of Lhe sLandard Lypes
1exLlleld
numberlleld
Combo8ox
uaLelleld
1lmelleld
Check8ox
1hese edlLors can be exLended Lo achleve speclal Lypes of edlLlng lf needed buL for
now leLs sLarL wlLh edlLlng Lhe oLher elds we have ln our grldLhe release daLe
and Lhe genre
LdlLlng a daLe value
A uaLelleld wlll work perfecLly for edlLlng Lhe release daLe column ln our grld So
leLs use LhaL We rsL need Lo seL up Lhe edlLor eld and speclfy whlch formaL Lo use
release_edlL new LxLformuaLelleld(
formaL m/d/?
)
1hen we apply LhaL edlLor Lo Lhe column along wlLh Lhe renderer LhaL we
used earller
header 8eleased daLalndex released renderer
LxLuLlllormaLdaLe8enderer(m/d/?) edlLor release_edlL
-
-
-
-
-
-
106
1hls column also Lakes advanLage of a renderer whlch wlll coexlsL wlLh Lhe
edlLor Cnce Lhe edlLor eld ls acLlvaLed wlLh a slngle cllck Lhe renderer passes Lhe
renderlng of Lhe eld Lo Lhe edlLor and vlce versa So when we are done wlLh edlLlng
Lhe eld Lhe renderer wlll Lake over formaLLlng Lhe eld agaln
LdlL wlLh a Combo8ox
LeLs seL up an edlLor for Lhe genres column LhaL wlll provlde us wlLh a llsL of Lhe
valld genres Lo selecL fromsounds llke a perfecL scenarlo for a combo box
var genre_edlL new LxLformCombo8ox(
LypeAhead Lrue
LrlggerAcLlon all
mode local
sLore genres
dlsplaylleldgenre
valuelleld ld
)
Slmply add Lhls edlLor Lo Lhe column model llke we dld wlLh Lhe oLhers
header Cenre daLalndex genre renderer genre_name
edlLor genre_edlL
now we end up wlLh an edlLable eld LhaL has a xed selecLlon of opLlons
8eacLlng Lo a cell edlL
Cf course we now need Lo gure ouL how Lo save all of Lhls edlLlng LhaL we have
been dolng l am sure Lhe end user would noL be so happy lf we Lhrew away all
of Lhelr changes We can sLarL Lhe process of savlng Lhe changes by llsLenlng for
parLlcular edlL evenLs and Lhen reacLlng Lo Lhose wlLh our own cusLom handler
8efore we sLarL codlng Lhls we need Lo undersLand a blL more abouL how Lhe edlLor
grld works
107
WhaLs a dlrLy cell?
A eld LhaL has been edlLed and has had lLs value changed ls consldered Lo be dlrLy
unLll Lhe daLa sLore ls Lold oLherwlse 1hls dlrLy value has been saved Lo a Lemporary
daLa sLore LhaL conLalns a verslon of our daLa wlLh all of Lhe changes made Cur
orlglnal daLa sLore sLays unchanged
We can save Lhe changes Lo Lhe prlmary daLa sLore by calllng Lhe commlL funcLlon
or we can dlscard Lhe changes by calllng Lhe re[ecL handler 1hese handlers can
be called for Lhe enLlre grld for a slngle cell of daLa or as Lhe resulL of an evenL LhaL
ls happenlng
LeLs lmaglne e ls an edlL evenL ob[ecL We could re[ecL a record by calllng Lhe
re[ecL handler
erecordre[ecL()
AlLernaLlvely we can save our change by commlLLlng lL
erecordcommlL()
8eacLlng when an edlL occurs
1o save our changes Lo Lhe daLa sLore we are golng Lo llsLen for an edlL belng
compleLed whlch ls accompllshed by llsLenlng for Lhe afLeredlL evenL
1he llsLener we need ls added Lo Lhe grld panel
// more conflg opLlons cllpped //
sLore sLore
columns // column model cllpped //
llsLeners
afLeredlL funcLlon(e)
lf (efleld dlrecLor evalue Mel Clbson)
LxLMsgalerL(LrrorMel Clbson movles noL allowed)
erecordre[ecL()
else
erecordcommlL()

)
As wlLh oLher llsLeners ln LxL Lhe edlLor grld llsLeners are glven a funcLlon Lo execuLe
when Lhe evenL occurs 1he funcLlon for afLeredlL ls called wlLh a slngle argumenL
an ob[ecL whlch has a number of useful properLles We can use Lhese properLles Lo
make a declslon abouL Lhe edlL LhaL [usL happened
108
roperLy uescrlpLlon
grld 1he grld LhaL Lhe edlL evenL happened ln
record 1he enLlre record LhaLs belng edlLed oLher column values can
be reLrleved uslng Lhls ob[ecLs daLa properLy
eld 1he name of Lhe column LhaL was edlLed
value A sLrlng conLalnlng Lhe new value of Lhe cell
orlglnalvalue A sLrlng conLalnlng Lhe orlglnal value of Lhe cell
row 1he lndex of Lhe row LhaL was edlLed
column 1he lndex of Lhe column LhaL was edlLed
lor lnsLance lf we wanLed Lo make sure LhaL movles dlrecLed by Mel Clbson never
made lL lnLo our daLabase we could puL a slmple check ln place for LhaL scenarlo
lf (efleld dlrecLor evalue Mel Clbson)
LxLMsgalerL(LrrorMel Clbson movles noL allowed)
erecordre[ecL()
else
erecordcommlL()

llrsL we check Lo see LhaL Lhe dlrecLor eld ls Lhe one belng edlLed nexL we make
sure Lhe new value enLered for Lhls eld ls noL equal Lo Mel Clbson lf elLher of Lhese
ls false we commlL Lhe record back Lo Lhe daLa sLore 1hls means LhaL once we call Lhe
commlL handler our prlmary daLa sLore ls updaLed wlLh Lhe new value
erecordcommlL()
We also have Lhe ablllLy Lo re[ecL Lhe changesendlng Lhe changed value lnLo Lhe
black hole of space losL forever
erecordre[ecL()
Cf course all we have done so far ls updaLe Lhe daLa LhaL ls sLored ln Lhe browsers
memory lm sure youre [usL dylng Lo be able Lo updaLe a web server We wlll geL Lo
LhaL soon enough
ueleLlng and addlng ln Lhe daLa sLore
We are golng Lo creaLe Lwo buLLons Lo allow us Lo alLer Lhe daLa sLoreLo add or
remove rows of daLa LeL us seL up a Lop Loolbar (Lbar) ln Lhe grld Lo house
Lhese buLLons
// more conflg opLlons cllpped //
109
Lbar
LexL 8emove Movle

8emovlng grld rows from Lhe daLa sLore
LeLs add a remove buLLon Lo Lhe Loolbar ln our grld When Lhls buLLon ls cllcked lL
wlll prompL Lhe user wlLh a dlalog LhaL dlsplays Lhe movle LlLle lf Lhe ?es buLLon ls
cllcked Lhen we can remove Lhe selecLed row from Lhe daLa sLore oLherwlse we wlll
do noLhlng

LexL 8emove Movle
lcon lmages/Lable_deleLepng
cls xbLnLexLlcon
handler funcLlon()
LxLMsgshow(
LlLle 8emove Movle
buLLons LxLMessage8ox?LSnCCAnCLL
msg 8emove +seldaLaLlLle+?
fn funcLlon(bLn)
lf (bLn yes)
grldgeLSLore()remove(sel)

)

110
LeLs Lake a look aL whaL ls happenlng here We have dened some varlables LhaL we
wlll use Lo deLermlne lf Lhere were selecLlons made and whaL Lhe selecLlons were
sm 1he selecLlon model ls reLrleved from our grld
sel We used Lhe selecLlon model Lo reLrleve Lhe row LhaL has been selecLed
grldgeLSLore()remove(sel) asslng Lhe daLa sLores remove funcLlon
a row wlll remove LhaL row from Lhe sLore and updaLe Lhe grld
lLs as slmple as LhaL 1he local daLa sLore LhaL resldes ln Lhe browsers memory
has been updaLed 8uL whaL good ls deleLlng lf you canL add anyLhlng[usL be
paLlenL grasshopper!
Addlng a row Lo Lhe grld
1o add a row we have a blL of a LwlsL We need Lo have a denlLlon of whaL
Lhe daLa looks llke ln order Lo be able Lo creaLe a new row[usL llke lL was creaLed for
Lhe daLa reader
var ds_model LxLdaLa8ecordcreaLe(
ld
coverLhumb
LlLle
dlrecLor
genre
Lagllne
)
Cnce we have Lhls denlLlon of Lhe daLa we can lnserL a new row falrly easlly A
buLLon can be added Lo Lhe same Lop Loolbar LhaL wlll be used Lo lnserL Lhe row

LexL Add Movle
lcon lmages/Lable_addpng
cls xbLnLexLlcon
handler funcLlon()
grldgeLSLore()lnserL(
0
new ds_model(
LlLlenew Movle
dlrecLor
genre0
Lagllne
-
-
-
111
)
)
grldsLarLLdlLlng(00)

1he rsL argumenL Lo Lhe lnserL funcLlon ls Lhe polnL aL whlch Lo lnserL Lhe record
l have chosen zero so Lhe record wlll be lnserLed aL Lhe very Lop lf we wanLed Lo
lnserL Lhe row aL Lhe end we could slmply reLrleve Lhe row counL for our daLa sLore
8ecause Lhe row lndex sLarLs aL zero and Lhe counL aL one lncremenLlng Lhe counL ls
noL necessary because Lhe row counL wlll always be one greaLer Lhan Lhe lasL lLem ln
Lhe lndex
grldgeLSLore()lnserL(
grldgeLSLore()geLCounL()
new ds_model(
LlLlenew Movle
dlrecLor
genre0
Lagllne
)
)
grldsLarLLdlLlng(grldgeLSLore()geLCounL()10)
now we are back Lo lnserLlng a row 1he second argumenL ls Lhe new record
denlLlon whlch can be passed wlLh some defaulL values
new ds_model(
LlLlenew Movle
dlrecLor
genre0
Lagllne
)
112
AfLer lnserLlng Lhe new row we call a funcLlon LhaL wlll acLlvaLe a cells edlLor
1hls funcLlon [usL needs a row and column lndex number Lo acLlvaLe Lhe edlLor for
LhaL cell
1hls glves our user Lhe ablllLy Lo sLarL Lyplng Lhe movle LlLle dlrecLly afLer cllcklng Lhe
Add Movle buLLon
Savlng edlLed daLa Lo Lhe server
LveryLhlng we have done so far ls relaLed Lo updaLlng Lhe local daLa sLore resldlng ln
Lhe memory of Lhe web browser More ofLen LhaL noL we wlll wanL Lo save our daLa
back Lo Lhe server Lo updaLe a daLabase le sysLem or someLhlng along Lhose llnes
1hls secLlon wlll cover some of Lhe more common requlremenLs of grlds used ln web
appllcaLlons Lo updaLe serverslde lnformaLlon
updaLlng a record
CreaLlng a new record
ueleLlng a record
Sendlng updaLes back Lo Lhe server
Larller we had seL up a llsLener for Lhe afLeredlL evenL We wlll be uslng Lhls
afLeredlL evenL Lo send changes back Lo Lhe server on a cellbycell basls
-
-
-
113
1o updaLe Lhe daLabase wlLh cellbycell changes we need Lo know Lhree Lhlngs
fleld WhaL eld has changed
value WhaL Lhe new value of Lhe eld ls
recordld Whlch row from Lhe daLabase Lhe eld belongs Lo
1hls glves us enough lnformaLlon Lo be able Lo make a dlsLlncL updaLe Lo a
daLabase We communlcaLe wlLh Lhe server (uslng A!Ax) by calllng Lhe
connecLlon requesL meLhod
llsLeners
afLeredlL funcLlon(e)
var conn new LxLdaLaConnecLlon()
connrequesL(
url movleupdaLephp
params
acLlon updaLe
ld erecordld
fleld efleld
value evalue

success funcLlon(respopL)
ecommlL()

fallure funcLlon(respopL)
ere[ecL()

)

1hls wlll send a requesL Lo Lhe movleupdaLephp scrlpL wlLh four parameLers ln
Lhe form of posL headers 1he params LhaL we pass as a cong ob[ecL lnLo Lhe daLa
connecLlon are all senL Lhrough Lhe headers Lo our scrlpL on Lhe server slde
1he movleupdaLephp scrlpL should be coded Lo recognlze Lhe updaLe acLlon
and Lhen read ln Lhe ld fleld and value daLa and Lhen proceed Lo updaLe Lhe le
sysLem or daLabase or whaLever else we need Lo make lL happen
-
-
-
114
1hls ls whaLs avallable Lo us when uslng Lhe afLeredlL evenL
CpLlon uescrlpLlon
grld 8eference Lo Lhe currenL grld
record Cb[ecL wlLh daLa from Lhe row belng edlLed
eld name of Lhe eld belng edlLed
value new value enLered lnLo Lhe eld
orlglnalvalue Crlglnal value of Lhe eld
row lndex of Lhe row belng edlLedLhls wlll help ln ndlng lL agaln
column lndex of Lhe column belng edlLed
ueleLlng daLa from Lhe server
When we wanL Lo deleLe daLa from Lhe server we can handle lL ln very much Lhe
same way as an updaLeby maklng a call Lo a scrlpL on Lhe server and Lelllng lL
whaL we wanL done
lor Lhe deleLe Lrlgger we wlll use anoLher buLLon ln Lhe grlds Loolbar

LexL 8emove Movle
lcon lmages/Lable_deleLepng
cls xbLnLexLlcon
handler funcLlon()
LxLMsgshow(
LlLle 8emove Movle
buLLons LxLMessage8ox?LSnCCAnCLL
msg 8emove +seldaLaLlLle+?
fn funcLlon(bLn)
lf (bLn yes)
connrequesL(
url movleupdaLephp
params
acLlon deleLe
ld erecordld

grldgeLSLore()remove(sel)
113

LxLMsgalerL(Lrror
unable Lo deleLe movle)

)

)

!usL as wlLh edlL we are golng Lo make a requesL Lo Lhe server Lo have Lhe row
deleLed 1he movleupdaLephp scrlpL would see LhaL Lhe acLlon ls deleLe and
execuLe Lhe approprlaLe acLlon
Savlng new rows Lo Lhe server
Pere we are golng Lo add anoLher buLLon LhaL wlll add a new row lL sends Lhe
requesL Lo Lhe server wlLh Lhe approprlaLe parameLers and reads Lhe lnserL ld from
Lhe servers response uslng Lhls lnserL ld we are able Lo add Lhe row Lo our daLa
sLore wlLh Lhe unlque ldenLler generaLed on Lhe server slde for LhaL row

LexL Add Movle
lcon lmages/Lable_addpng
cls xbLnLexLlcon
handler funcLlon()
connrequesL(
url movlesupdaLephp
params
acLlon lnserL
LlLlenew Movle

var lnserL_ld LxLuLll!SCndecode(
respresponse1exL
)lnserL_ld
grldgeLSLore()lnserL(0
new ds_model(
ldlnserL_ld
LlLlenew Movle
dlrecLor
genre0
Lagllne
116
)
)

LxLMsgalerL(Lrrorunable Lo add movle)

)

Much llke edlLlng and deleLlng we are golng Lo send a requesL Lo Lhe server Lo have
a new row lnserLed 1hls Llme we are acLually golng Lo Lake a look aL Lhe response Lo
geL Lhe lnserL ld (Lhe unlque ldenLler for LhaL row) Lo pass back Lo our grld so LhaL
when we sLarL edlLlng LhaL row lL wlll be easy Lo save our changes
respresponse1exL
)lnserL_ld
grldgeLSLore()lnserL(0
new ds_model(
ldlnserL_ld
LlLlenew Movle
dlrecLor
genre0
Lagllne
)
)

Cur success handler funcLlon has a couple of argumenLs Lhe rsL ls Lhe response
ob[ecL whlch conLalns Lhe response LexL from our movleupdaLephp scrlpL 8ecause
LhaL response ls ln a !SCn formaL were golng Lo decode lL lnLo a usable ob[ecL and
grab Lhe lnserL ld value
respresponse1exL
)lnserL_ld
When we lnserL Lhls row lnLo our daLa sLore we can use Lhe lnserL ld LhaL
was reLrleved
117
Summary
1he LxL !S grld funcLlonallLy ls one of Lhe mosL advanced porLlons of Lhe framework
WlLh Lhe backlng of Lhe LxLdaLa package Lhe grld can pull lnformaLlon from a
remoLe server ln an lnLegraLed mannerLhls supporL ls bullL lnLo Lhe grld class
1hanks Lo Lhe array of conguraLlon opLlons avallable we can presenL Lhls daLa easlly
ln a varleLy of forms and seL lL up for manlpulaLlon by our users
ln Lhls chapLer weve seen how Lhe daLa supporL provlded by Lhe grld offers an
approach Lo daLa manlpulaLlng LhaL wlll be famlllar Lo many developers 1he
amendand commlL approach allows negralned conLrol over Lhe daLa LhaL ls senL
Lo Lhe server when used wlLh a valldaLlon pollcy along wlLh Lhe ablllLy Lo re[ecL
changes As well as amendlng Lhe sLarLlng daLa weve seen how Lhe grld provldes
funcLlonallLy Lo add and remove rows of daLa
Weve also shown how sLandard LxL !S form elds such as Lhe Combo8ox can
be lnLegraLed Lo provlde a user lnLerface on Lop of Lhls funcLlonallLy WlLh such
sLrong supporL for daLa enLry Lhe grld package provldes a very powerful Lool for
appllcaLlon bullders
ln Lhe nexL chapLer well demonsLraLe how componenLs such as Lhe grld can be
lnLegraLed wlLh oLher parLs of an appllcaLlon screen by uslng Lhe exLenslve layouL
funcLlonallLy provlded by Lhe LxL !S framework
Am Pllllgenbusch 47 aderborn n8W 33098LayouLs
A layouL Lurns your forms grlds and oLher wldgeLs lnLo a Lrue web appllcaLlon
1he mosL wldelyused layouL sLyles can be found ln operaLlng sysLems such as
MlcrosofLs Wlndows whlch uses border layouLs reslzable reglons accordlons Labs
and [usL abouL everyLhlng else you can Lhlnk of
1o keep looks conslsLenL beLween browsers and Lo provlde common user lnLerface
feaLures LxL !S has a powerful layouL managemenL sysLem 1he secLlons are
manageable and can be moved or hldden and Lhey can appear aL Lhe cllck of a k of a of a
buLLon rlghL when and where you need Lhem Lo
ln Lhls chapLer you wlll learn Lo
Lay ouL an appllcaLlon sLyle screen
CreaLe Labbed secLlons
Manage LxL wldgeLs wlLhln a layouL
Learn advanced and nesLed layouLs
WhaL are layouLs reglons and
vlewporLs?
LxL uses anels whlch are Lhe basls of mosL layouLs We have used some of Lhese
such as lormanel and Crldanel already A vlewporL ls a speclal panelllke
componenL LhaL encloses Lhe enLlre layouL LLlng lL lnLo Lhe whole vlslble area of our
browser lor our rsL example we are golng Lo use a vlewporL wlLh a border layouL
LhaL wlll encapsulaLe many panels
-
-
-
-
120
A vlewporL has reglons LhaL are lald ouL ln Lhe same way as a compass wlLh norLh
SouLh LasL and WesL reglonsLhe CenLer reglon represenLs whaLs lefL over ln
Lhe mlddle 1hese dlrecLlons Lell Lhe panels where Lo allgn Lhemselves wlLhln Lhe
vlewporL and lf you use Lhem where Lhe reslzable borders are Lo be placed
norLh
WesL CenLer LasL
SouLh
1he example were creaLlng wlll look llke Lhe followlng lmage and comblnes many
of Lhe prevlous examples we have creaLed
121
1hls layouL ls whaLs called a border layouL whlch means LhaL each reglon ls
separaLed by a somewhaL Lhree dlmenslonal border bar LhaL can be dragged Lo reslze
Lhe reglons 1hls example conLalns four panel reglons
norLh 1he Loolbar
WesL A form
CenLer Crld ln a Lab panel
LasL A plaln panel conLalnlng LexL
noLe LhaL Lhere ls no SouLh panel ln Lhls examplenoL every reglon needs Lo be
used ln every layouL
Cur flrsL layouL
8efore we creaLe our layouL LhaL uses only four reglons leLs go ahead and creaLe a
layouL LhaL uLlllzes all Lhe reglons and Lhen remove Lhe SouLh panel We are golng
Lo creaLe all of Lhe reglons as panels whlch can be LhoughL of as blank canvases Lo
whlch we wlll add LexL P1ML lmages or even LxL !S wldgeLs
var vlewporL new LxLvlewporL(
layouL border
render1o LxLgeL8ody()
lLems
reglon norLh
xLype panel
hLml norLh

reglon wesL
xLype panel
spllL Lrue
wldLh 200
hLml WesL

reglon cenLer
xLype panel
hLml CenLer

reglon easL
xLype panel
spllL Lrue
wldLh 200
hLml LasL

reglon souLh
xLype panel
hLml SouLh

)
-
-
-
-
122
Lach reglon ls dened as one of Lhe four compass dlrecLlonsLasL WesL norLh and
SouLh 1he remalnder ln Lhe mlddle ls called Lhe cenLer reglon whlch wlll expand Lo
ll all of Lhe remalnlng space !usL Lo Lake up some blank space ln each reglon and Lo
glve a vlsual lndlcaLor as Lo where Lhe panels are we dened an P1ML cong LhaL
has [usL LexL (1hls could also conLaln complex P1ML lf needed buL Lhere are beLLer
ways Lo seL Lhe conLenLs of panels whlch we wlll learn abouL soon)
LxL !S provldes an easy crossbrowser compaLlble speedy way Lo geL a
reference Lo Lhe body elemenL by uslng LxLgeL8ody()
lf everyLhlng works ouL ok you should see a browser LhaL looks llke Lhls
now we have a layouL wlLh all ve reglons dened 1hese reglons can have oLher
LexL wldgeLs added lnLo Lhem seamlessly by uslng Lhe xLype cong AlLernaLlvely
Lhey can be dlvlded up separaLely lnLo more nesLed reglonsfor lnsLance Lhe cenLer
could be spllL horlzonLally Lo have lLs own SouLh secLlon
A CenLer reglon musL always be dened lf one ls noL dened Lhe layouL
wlll produce errors and appear as a [umbled seL of boxes ln Lhe browser
SpllLLlng Lhe reglons
1he dlvlders are seL up for each panel by seLLlng Lhe spllL agLhe poslLlonlng of
Lhe dlvlders ls deLermlned auLomaLlcally based on Lhe reglon Lhe panel ls ln
spllL Lrue
lor Lhls page we have seL Lhe WesL and LasL reglons as spllL reglons 1hls by
defaulL makes Lhe border lnLo a reslzlng elemenL for Lhe user Lo change Lhe slze of
LhaL panel
123
l wanL opLlons
1yplcally when a spllL ls used lLs comblned wlLh a few oLher opLlons LhaL make Lhe
secLlon more useful such as wldLh mlnSlze and collapseMode
Pere are some of Lhe more commonlyused opLlons
CpLlon value uescrlpLlon
spllL Lrue/false 8oolean value LhaL places a reslzable bar beLween Lhe
secLlons
collapslble Lrue/false 8oolean value LhaL adds a buLLon Lo Lhe LlLle bar
whlch leLs Lhe user collapse Lhe reglon wlLh a slngle
cllck
collapseMode Cnly opLlon ls
mlnl mode or
undened for
normal mode
When seL Lo mlnl Lhls adds a smaller collapse buLLon
LhaLs locaLed on Lhe dlvlder bar ln addlLlon Lo Lhe
larger collapse buLLon on LlLle bar Lhe panel also
collapses lnLo a smaller space
LlLle SLrlng 1lLle sLrlng placed ln Lhe LlLle bar
bodySLyle CSS CSS sLyles applled Lo Lhe body elemenL of Lhe panel
mlnSlze lxels le 200 1he smallesL slze LhaL Lhe user can drag Lhls panel Lo
maxSlze lxels le 230 1he largesL slze LhaL Lhe user can drag Lhls panel Lo
marglns ln plxels Lop
rlghL boLLom
lefL le 3 0 3 3
Can be used Lo space Lhe panel away from Lhe edges
or away from oLher panels spaclng ls applled ouLslde
of Lhe body of Lhe panel
cmarglns ln plxels Lop
rlghL boLLom
lefL le 3 0 3 3
Same ldea as marglns buL applles only when Lhe
panel ls collapsed
LeLs add a couple of Lhese opLlons Lo our wesL panel

reglon wesL
xLype panel
spllL Lrue
collapslble Lrue
collapseMode mlnl
LlLle Some lnfo
bodySLylepaddlng3px
wldLh 200
mlnSlze 200
hLml WesL

124
Addlng Lhese cong opLlons Lo our wesL panel would glve us Lhe followlng look
normal/Lxpanded Collapsed
Lxpandlng and collapslng a panel LhaL does noL have a wldLh specled
can produce renderlng problems 1herefore lLs besL Lo speclfy a wldLh
for panelsof course Lhls ls noL needed for Lhe cenLer as Lhls panel
auLomaLlcally lls Lhe remalnlng space
1ab panels
WlLh LxL !S Lab panels are also referred Lo as a card layouL because Lhey work
much llke a deck of cards where each card ls layered dlrecLly above or below Lhe
oLhers and can be moved Lo Lhe Lop of Lhe deck Lo be vlslble We also geL preLLy
much Lhe same funcLlonallLy ln our Lab panel as a regular panel lncludlng a LlLle
Loolbars and all Lhe oLher usual suspecLs (excludlng Lools)
Addlng a Lab panel
lf Lhe LxL !S componenL ls a panel Lype componenL for lnsLance for lnsLance Crldanel and
lormanel Lhen we can add lL dlrecLly Lo Lhe layouL uslng lLs xLype LeLs sLarL by
creaLlng a Labanel

reglon cenLer
xLype Labpanel
lLems
LlLle Movle Crld
hLml CenLer

123
1he lLems cong ls an array of ob[ecLs LhaL denes each of Lhe Labs conLalned ln
Lhls Labpanel 1he LlLle ls Lhe only opLlon LhaLs acLually needed Lo glve us a Lab
and rlghL now hLml ls [usL belng used as a placeholder Lo glve our empLy Lab
some conLenL
We wlll also need Lo add an acLlve1ab cong LhaL ls seL Lo zero Lo our Lab panel LhaL ls seL Lo zero Lo our
Lab panel Lo our Lab panel
1hls ls Lhe lndex of Lhe Labs ln Lhe panel lefL Lo rlghL sLarLlng wlLh zero and counLlng
up for each Lab 1hls Lells Lhe Lab panel aL poslLlon zero Lo make lLself acLlve by
defaulL oLherwlse we would have no Labs dlsplayed resulLlng ln a blank secLlon
unLll Lhe user cllcked a Lab

reglon cenLer
xLype Labpanel
acLlve1ab 0
lLems
LlLle Movle Crld
hLml CenLer

lf we Lake a look aL Lhls ln a browser we should see a Lab panel ln Lhe cenLer secLlon
of our layouL
Addlng more Labs ls as easy as addlng more lLems lnLo Lhe lLems array Lach Lab
lLem ls baslcally lLs own panel whlch ls shown or hldden based on Lhe Lab LlLle LhaL
has been cllcked on Lhe Lab panel

reglon cenLer
xLype Labpanel
acLlve1ab 0
lLems
LlLle Movle Crld
126
hLml CenLer

LlLle Movle uescrlpLlons
hLml Movle lnfo

8oLh Lhe Movle Crld and Movle uescrlpLlons Labs are [usL plaln panels rlghL now
So leLs add some more conguraLlon opLlons and wldgeLs Lo Lhem
WldgeLs everywhere
Larller l menLloned LhaL any Lype of panel wldgeL could be added dlrecLly Lo a
layouL [usL as we had done wlLh Lhe Labs LeLs explore Lhls by addlng anoLher
wldgeL Lo our layouLLhe grld
Addlng a grld lnLo Lhe Labpanel
As we now have Lhese Labs as parL of our layouL leLs sLarL by addlng a grld panel Lo
one of Lhe Labs Addlng Lhe xLype cong opLlon Lo Lhe grld cong code you creaLed
ln ChapLer 3 wlll produce a grld LhaL lls one enLlre Lab

reglon cenLer
xLype Labpanel
acLlve1ab 0
lLems
LlLle Movle Crld
xLype grldpanel
sLore sLore
auLoLxpandColumn LlLle
columns // add column model //
vlew // add grld vlew spec //

hLml Movle lnfo

127
xLypes offer a qulck way Lo lnsLanLlaLe a new componenL wlLh mlnlmal
Lyplng 1hls ls someLlmes referred Lo as lazy renderlng because Lhe
componenLs slL around walLlng Lo be dlsplayed before Lhey acLually
execuLe any code 1hls meLhod can help conserve memory ln your
web appllcaLlon
As we are addlng Lhls grld Lo a Labwhlch ls essenLlally [usL a panelLhere are some
Lhlngs LhaL we no longer need (llke Lhe render1o opLlon wldLh helghL and a frame)
1he slze LlLle and border for Lhe grld are now handled by our Lab panel
now we should have a layouL LhaL looks llke Lhls
128
Accordlons
1he accordlon ls a very useful layouL LhaL works somewhaL llke a Lab panel where
we have mulLlple secLlons occupylng Lhe same space wlLh only one showlng aL a
Llme 1hls Lype of layouL ls commonly used when were lacklng Lhe horlzonLal space
needed for a Lab panel buL lnsLead have more verLlcal space avallable When one of
Lhe accordlon panels ls expanded Lhe oLhers wlll collapse Lxpandlng and collapslng
Lhe panels can be done elLher by cllcklng Lhe panels LlLle bar or by cllcklng Lhe plus/
mlnus lcons along Lhe rlghLmosL slde of Lhe panel
nesLlng an accordlon layouL ln a Lab
We can nesL a layouL wlLhln a panel Lo creaLe a more complex layouL lor Lhls
example we wlll nesL an accordlon panel wlLhln one of our Labs
8y seLLlng Lhe layouL Lo accordlon and addlng Lhree lLems we wlll end up wlLh Lhree
panels ln our accordlon

layouL accordlon
lLems
LlLle Cfflce Space
auLoLoad hLml/1LxL

LlLle Super 1roopers
auLoLoad hLml/3LxL

LlLle Amerlcan 8eauLy
auLoLoad hLml/4LxL

1hls glves us a Lab LhaL has wlLhln lL Lhree accordlon panels whlch wlll load LexL les wlLhln lL Lhree
accordlon panels whlch wlll load LexL les Lhree accordlon panels whlch wlll load LexL les
lnLo Lhelr body secLlons noLe LhaL Lhe cong on Lhls ls very slmllar Lo a Lab panel
Lhe conslsLency beLween wldgeLs ln LxL !S makes lL easy Lo seL up dlfferenL Lypes of
wldgeLs wlLhouL havlng Lo look aL Lhe Al reference for each one
129
now we should have a layouL LhaL looks llke Lhls when we swlLch Lo Lhe Movle
uescrlpLlons Lab
Lach panel now has a descrlpLlon of Lhe movle whlch was loaded from a LexL le on
Lhe web server LeLs Lake a closer look aL LhaL
auLoLoad hLml/1LxL
1hls loads Lhe le from Lhe u8L specled lnLo Lhe body secLlon of Lhe panel 1he
le loaded can conLaln any Lype of P1ML whlch wlll show up [usL as lf lL were ln a
browser by lLself As Lhls ls done vla A!Ax lf youre runnlng Lhe examples from your
le sysLem lnsLead of a local web server Lhey wlll noL load
noLe LhaL Lhe !avaScrlpL conLalned wlLhln Lhe loaded conLenL wlll noL
be execuLed and any P1ML wlll be lgnored
laclng a Loolbar ln your layouL
nexL leLs add a Loolbar Lo Lhe norLh secLlon of our layouL We can use Lhe Loolbar for
menus buLLons and a couple of form elds or maybe [usL a bllnklng marquee wlLh
our name scrolllng across lL We can change Lhese easlly laLer
LeLs Lake our Loolbar lLems we used ln Lhe example code ln ChapLer 48uLLons
Menus and 1oolbarand add Lhem Lo Lhls Loolbar We should also copy over Lhe
Movles class we creaLed ln Lhe Loolbar chapLer lf we wanL Lhe buLLons Lo work
130
8y changlng Lhe xLype Lo Loolbar and copylng Lhe array of Loolbar lLems over we
wlll end up wlLh a snazzy menu bar aL Lhe Lop of Lhe screen

reglon norLh
xLype Loolbar
lLems
xLype Lbspacer

xLype LbbuLLon
LexL 8uLLon
handler funcLlon(bLn)
bLndlsable()

xLype Lbflll

// more Loolbar lLems here //

1hls glves us a Loolbar LhaL Ls nlcely lnLo Lhe Lop of our layouLllke an appllcaLlon
Loolbar or menu bar LhaL you would Lyplcally see ln deskLop appllcaLlons
?ou should end up wlLh someLhlng LhaL looks llke Lhls
131
Lven Lhough Lhls Loolbar does noL conLaln a bllnklng marquee wlLh my name ln lL lL
wlll be qulLe useful for our appllcaLlon All of Lhe navlgaLlon for your appllcaLlon can
be placed ln lL whlch mlghL Lrlgger new Labs Lo be added Lo Lhe cenLer reglon or be
used used Lo search for movle LlLles or whaLever else LhaL ls needed
A form Lo add new movles
A form panel wlll L nlcely lnLo LhaL currenLlyempLy WesL reglon and slnce lLs
a panel Lype componenL lL can be added dlrecLly Lo our layouL LeLs add Lhe
movle form LhaL we used ln Lhe forms chapLer Lo Lhe WesL secLlon 8uL lnsLead of
lnsLanLlaLlng lL leLs use Lhe xLype cong Lo perform lazy lnsLanLlaLlon for Lhe enLlre
form panel

reglon wesL
xLype form
lLems // form flelds //
buLLons // form panel buLLons //

1he lLems cong holds all of our form elds
lLems
xLype LexLfleld
fleldLabel ulrecLor
name dlrecLor
anchor 100
vLype name

xLype daLefleld
fleldLabel 8eleased
name released
dlsableduays 12343

xLype radlo
fleldLabel lllmed ln
name fllmed_ln
boxLabel Color
// more flelds go here //
Many xLypes exlsL and Lhe names are noL exacLly whaL you would
guessfor a full reference look under Lhe ComponenL secLlon ln Lhe
Al reference
132
AfLer addlng Lhe form lLems and buLLons our layouL should look llke Lhls
1rlcks and advanced layouLs
Some of Lhe more complex web appllcaLlons wlll need Lo do Lhlngs LhaL are noL as
slmple as seLLlng a few conguraLlon values for example nesLlng one layouL wlLhln
anoLher layouL or addlng lcons Lo your Labs 8uL wlLh LxL !S Lhese klnds of Lhlngs are
made easy
nesLed layouLs
When we nesL one layouL wlLhln anoLher layouLs reglon we wlll occupy LhaL enLlre
reglons body so lL cannoL be used any more lnsLead Lhe nesLed layouL reglons are
used for conLenL
133
lor example lf we wanLed Lhe cenLer reglon spllL lnLo Lwo horlzonLal reglons we could
add a nesLed layouL wlLh cenLer and norLh reglons 1hls ls Lyplcal of an appllcaLlon
where you have a daLa panel (CenLer) Lo llsL emall messages and a reader panel (SouLh)
Lo prevlew Lhe enLlre emall when lLs selecLed ln Lhe llsL ln Lhe norLh panel
norLh
norLh
WesL
CenLer
LasL
SouLh
A couple of Lhlngs are needed for a nesLed layouLLhe layouL Lype musL be seL
and ln Lhls case we are Lurnlng off Lhe border so we donL geL a doubledup border
as Lhe conLalner has lLs own border Lach of Lhe lLems represenLs one of our
nesLed reglons

LlLle nesLed LayouL
layouL border
border false
lLems
reglon norLh
helghL 100
spllL Lrue
hLml nesLed norLh

reglon cenLer
hLml nesLed CenLer

134
1hls produces a layouL LhaL would look llke Lhls
ercenLages are noL allowed ln border Lype layouLs 1here musL always be
a cenLer reglon LhaL lls Lhe remalnlng space noL Laken up by Lhe oLher
reglons whlch are all dened ln plxel slzes
lcons ln Labs
uonL you [usL love lL when you can have a vlsual lndlcaLor Lo show whlch Lab does
whaL? 1haLs where lcons come lnLo play 1he lcons on Labs work much llke Lhe lcons
we added Lo Lhe buLLons ln an earller chapLer All we need Lo do ls creaLe a sLyle wlLh
Lhe lcon and add LhaL sLyle Lo our Labs conguraLlon
1he sLyle would look llke Lhls
bomb
backgroundlmageurl(lmages/bombpng) !lmporLanL

1he Lab cong wlll need Lo have Lhe lconCls properLy seL Lo Lhe sLyle weve
[usL creaLed

LlLle 1he 8omb
lconCls bomb
hLml 8oom!

133
uonL cllck on LhaL Lab Loo qulckly lL mlghL go off!
rogrammaLlcally manlpulaLlng a layouL
We have Lhe ablllLy Lo modlfy [usL abouL anyLhlng afLer Lhe layouL has been
rendered lor example we can llke add new Labs hlde and dlsplay panels and
change Lhe conLenL of any of Lhe panels LeLs experlmenL wlLh a couple of dlfferenL
Lhlngs we can do
now you see me now you donL
Lxpandlng and collapslng secLlons of your layouL programmaLlcally ls a requlremenL
ln mosL appllcaLlons So lL should be no surprlse by now LhaL Lhls can be done ln LxL
!S as well
1he rsL Lhlng we need Lo do ls glve our panel and vlewporL lds so LhaL we can
locaLe Lhem We can do Lhls by seLLlng Lhe ld cong opLlon ln our layouL and
panel conguraLlons
var vlewporL new LxLvlewporL(
layouL border
ld movlevlew
lLems
// exLra code removed //
reglon easL
xLype panel
ld morelnfo

)
now LhaL boLh Lhe layouL and Lhe panel have been glven unlque lds we can use Lhe
lds Lo lnLeracL wlLh Lhese componenLs by uslng geLCmp
var morelnfo LxLgeLCmp(movlevlew)flnd8yld(morelnfo)
lf (!morelnfolsvlslble())
morelnfoexpand()

136
1hls llLLle blL of code wlll check Lo see lf Lhe panel ls vlslble (expanded) and lf lLs noL
wlll expand lL
Clve me anoLher Lab
Addlng a Lab ls as easy as creaLlng a slngle Lab We rsL need Lo locaLe Lhe Lab panel
wlLhln our layouL Lucklly we [usL need Lo add an ld cong Lo our Lab panel so LhaL
we can easlly locaLe lL easlly locaLe lL locaLe lL

reglon cenLer
xLype Labpanel
ld movleLabs
acLlve1ab 0
lLems
LlLle Movle Crld

hLml Movle lnfo

1hen we can call Lhe add handler for our Lab panel and pass a baslc cong lnLo lL
LxLgeLCmp(movlevlew)flnd8yld(movleLabs)add(
LlLle Cfflce Space
hLml Movle lnfo
)
1hls wlll add a Lab LhaL ls LlLled LhaL ls LlLled Cfflce Space Lo Lhe Lo Lhe movleLabs Lab panel
1he add funcLlon ls a way Lo add new lLems Lo a layouL or a wldgeL 1yplcally
anyLhlng LhaL you can pass lnLo Lhe lLems cong of a componenL can also be passed
Lo Lhe add handler
Summary
ln Lhls chapLer we have been able Lo use many of Lhe componenLs ouLllned ln Lhe
prevlous chapLers wlLhln a layouL 1he layouL really Lakes Lhe varlous componenLs
of LxL !S and uses Lhem Lo creaLe a Lrue web appllcaLlon We have seen LhaL Lhe layouL
can lnLegraLe Lhe dlfferenL componenLs of LxL !S lnLo one uld appllcaLlon We
also learned how Lo change Lhe sLaLe of panels creaLe nesLed layouLs and load
conLenL dynamlcally
Am Pllllgenbusch 47 aderborn n8W 33098LxL !S uoes Crow on 1rees
Plerarchlcal daLa ls someLhlng LhaL mosL developers are lnLlmaLely famlllar wlLh
1he rooLbranchleaf sLrucLure ls Lhe underlylng feaLure for many user lnLerfaces
from Lhe le and folder represenLaLlons ln Wlndows Lxplorer Lo Lhe classlc famlly
Lree showlng chlldren parenLs and grandparenLs 1he LxLLree package enables
developers Lo brlng Lhese daLa sLrucLures Lo Lhe user wlLh only a few llnes of
code and provldes for a range of advanced cases wlLh a number of slmple
conguraLlon opLlons
AlLhough Lhe defaulL LxL !S lcon seL shows Lree nodes as les and folders lL ls noL
resLrlcLed Lo Lhe le sysLem concepL 1he lcons and LexL of Lhe lLems or nodes ln your
Lree can be changed based on Lhe dynamlc or sLaLlc daLa used Lo populaLe lLand
wlLhouL requlrlng cusLom code Pow abouL a securlLy screen showlng permlsslon
groups conLalnlng a number of users wlLh lcons showlng a phoLo of each user or
a gallery showlng groups of phoLos or lmage prevlews ln Lhe lcons? LxL !Ss Lree
classes puLs all of Lhese scenarlos wlLhln your grasp
lanLlng for Lhe fuLure
ulLlmaLely Lhe LxL !S Lree doesnL care abouL Lhe daLa youre dlsplaylng because lLs
exlble enough Lo deal wlLh any scenarlo LhaL you can come up wlLh uaLa can be
lnsLrucLed Lo load upfronL or ln loglcal bursLs whlch can become a crlLlcal feaLure
when youve goL a loL of lnformaLlon Lo load ?ou can edlL daLa dlrecLly ln Lhe Lree
changlng labels and lLem poslLlons or you can modlfy Lhe appearance of Lhe
overall Lree or of each lndlvldual node all of whlch wlll conLrlbuLe Lo a cusLomlzed
enduser experlence
1he LxL !S Lree ls bullL on Lop of Lhe ComponenL model whlch underlles Lhe whole
LxL !S framework 1hls means LhaL developers recelve Lhe beneLs of worklng wlLh
Lhe famlllar ComponenL sysLem LhaL users geL a conslsLenL and lnLegraLed lnLerface
experlence and LhaL you can be sure your Lree wlll work seamlessly wlLh Lhe resL of
your appllcaLlon
Am Pllllgenbusch 47 aderborn n8W 33098LxL !S uoes Crow Cn 1rees
138
lrom Llny seeds
ln Lhls chapLer well see how you can bulld a Lree from rsL prlnclples wlLh a
mlnlmal of code Well also dlscuss Lhe unlque daLa sLrucLure LhaL ls used Lo populaLe
Lhe Lree and Lhe way ln whlch clever use of LhaL daLa can leL you harness lmporLanL
conguraLlon opLlons 1he LxL !S Lree naLlvely supporLs advanced feaLures such as
sorLlng and draganddrop so well be dlscusslng Lhose as well 8uL lf you need
a Lruly bespoke Lree well also explore Lhe way ln whlch conguraLlon opLlons
meLhods and evenLs can be overrldden or augmenLed Lo provlde lL
1he Lree lLself ls creaLed vla Lhe LxLLree1reeanel class whlch ln Lurn conLalns
many LxLLree1reenodes classes 1hese Lwo classes are Lhe core of Lhe LxL !S Lree
supporL and as such wlll be Lhe maln Loplcs of dlscusslon LhroughouL Lhls chapLer
Powever Lhere are a number of oLher relevanL classes LhaL well also cover Peres Lhe
full llsL from Lhe LxLLree package
Async1reenode Allows 1reenode chlldren Lo be loaded asynchronously
uefaulLSelecLlonModel SLandard slngleselecL for Lhe 1reeanel
MulLlSelecLlonModel rovldes supporL for mulLlple node selecLlon
8ooL1reenodeul Speclallzed 1reenode for Lhe rooL of 1reeanel
1reeuragZone rovldes supporL for 1reenode dragglng
1reeuropZone rovldes supporL for 1reenode dropplng
1reeLdlLor Allows node labels Lo be edlLed
1reelllLer lllLer supporL for 1reeanel chlld nodes
1reeLoader opulaLes a 1reeanel from a specled u8L
1reenode 1he maln class represenLlng a node wlLhln a 1reeanel
1reenodeul rovldes Lhe underlylng lnLerface for Lhe 1reenode
1reeanel A Lreellke represenLaLlon of daLaLhe maln Lree class
1reeSorLer SupporLs sorLlng of nodes wlLhln a 1reeanel
Cuch! lorLunaLely you donL have Lo use all of Lhem all aL once 1reenode and
1reeanel provlde Lhe baslcs and Lhe resL of Lhe classes are bolLed on Lo provlde
exLra funcLlonallLy Well cover each of Lhem ln Lurn dlscusslng how Lheyre used
and showlng a few pracLlcal examples along Lhe way
Cur flrsL sapllng
8y now youre probably Lhlnklng of Lhe varlous posslblllLles for Lhe LxL !S Lree and
wanL Lo geL your hands dlrLy uesplLe Lhe facL LhaL Lhe LxLLree classes are some of
Lhe mosL feaLurerlch avallable ln Lhe framework you can sLlll geL everyLhlng up and
runnlng wlLh only a few llnes of code
139
ln Lhe examples LhaL follow well assume LhaL you have a blankslaLe P1ML page
ready and walLlng wlLh all of Lhe LxL !S dependencles lncluded MosL of Lhe code we
wlll use bullds on whaL came before Lo make sure LhaL were only worklng wlLh
blLeslzed pleces 8ear Lhls ln mlnd when you look aL Lhem ln lsolaLlon
lL ls besL pracLlce Lo puL Lhe !avaScrlpL ln a separaLe le and wrap lL ln an LxL
on8eady call Powever you can also do lL accordlng Lo your lndlvldual codlng sLyle
reparlng Lhe ground
llrsL we need Lo creaLe a conLalnlng dlv elemenL on our P1ML page We wlll be
renderlng our 1reeanel lnLo Lhls conLalner So we have Lo seL lL Lo Lhe slze we wanL
our Lree Lo be
dlv ldLreeconLalner sLylehelghL300px wldLh200px/dlv
1he !avaScrlpL for Lhe Lree can be broken down lnLo Lhree parLs llrsLly we need
Lo speclfy Lhe manner ln whlch lLs golng Lo be populaLed 1he LxLLree
1reeLoader class provldes Lhls funcLlonallLy and here were golng Lo use lL ln Lhe
slmplesL manner
var LreeLoader new LxLLree1reeLoader(
daLaurlhLLp//localhosL/sample[sonphp
)
1he daLaurl conguraLlon parameLer specles Lhe locaLlon of Lhe scrlpL LhaL ls golng
Lo supply Lhe !avaScrlpL Cb[ecL noLaLlon (!SCn) used Lo populaLe our Lree lm noL
golng Lo go lnLo Lhe deLalls of Lhe sLrucLure of !SCn now leLs save LhaL for laLer
Lach Lree requlres a rooL node whlch acLs as a greaLgranddaddy for all of lLs
descendanLs 1o creaLe LhaL rooL node we use Lhe LxLLreeAsync1reenode class
var rooLnode new LxLLreeAsync1reenode(
LexL 8ooL
)
1he reason were uslng Async1reenode raLher Lhan Lhe baslc 1reenode LhaL ls also
avallable ls because were feLchlng our nodes from Lhe server and are expecLlng chlld
nodes Lo be populaLed branchbybranch raLher Lhan all aL once 1hls ls Lhe mosL
Lyplcal scenarlo for a Lree
Async1reenode uses A!Ax onLhey Lo ensure your users arenL
walLlng Loo long for your daLa Lo load and for Lhe rsL nodes Lo
be rendered
140
llnally we creaLe Lhe Lree lLself uslng Lhe LxLLree1reeanel class
var Lree new LxLLree1reeanel(
render1oLreeconLalner
loader LreeLoader
rooL rooLnode
)
1hls ls [usL a maLLer of passlng Lhe rooL node and Lhe 1reeLoader ln as conguraLlon
opLlons as well as uslng Lhe render1o cong Lo speclfy LhaL wed llke Lhe 1reeanel
rendered lnLo our LreeConLalner elemenL
Agaln you should remember LhaL you need Lo wrap all of Lhls code ln a call Lo
LxLon8eady Lo make sure LhaL Lhe uCM ls avallable when our code runs
A Lree canL grow wlLhouL daLa
Weve seen LhaL lL only Lakes eleven llnes of code Lo creaLe a Lree lnLerface uslng
LxL !S ?ou can see an example of Lhe nlshed producL here
l guess lL doesnL look llke much buL weve goL qulLe a blL of funcLlonallLy for
our eleven llnes of code Weve goL a conslsLenL and aLLracLlve look and feel wlLh
asynchronous remoLe loadlng of chlld nodes 1o be falr lLs noL as slmple as LhaL
because we sklmmed over a cruclal parL of bulldlng an LxL !S LreeLhe daLa
141
!SCn
1he sLandard 1reeLoader supporLs !SCn ln a speclc formaLan array of node
denlLlons Peres a cuLdown example

ld 1 LexL no Chlldren leaf Lrue
ld 2 LexL Pas Chlldren
chlldren
ld 3
LexL ?oungsLer
leaf Lrue

1he LexL properLy ls Lhe label of Lhe node as lL appears ln Lhe Lree 1he ld properLy ls
used Lo unlquely ldenLlfy each node and wlll be used Lo deLermlne whlch nodes are
selecLed or expanded uslng Lhe ld properLy can make your llfe a whole loL easler lf
youre uslng some of Lhe advanced feaLures of Lhe 1reeanel whlch well see laLer
1he chlldren properLy ls opLlonal 1he leaf properLy can be LhoughL of as marklng
a node as elLher a folder or a le As a leaf Lhe le ls conLalned wlLhln Lhe folder
ln Lhe Lree leaf nodes wlll noL be expandable and wonL have Lhe plus lcon whlch
ldenLles folders
A qulck word abouL lu
8y defaulL 1reenodes are asslgned an auLomaLlcallygeneraLed lu meanlng LhaL Lhe
lu conguraLlon properLy ls acLually opLlonal 1he generaLed lu ls a LexL sLrlng ln Lhe
form ynodexx wlLh xx belng replaced by a number lus can be useful for reLrlevlng
a node you have prevlously referenced Powever lL ls qulLe llkely LhaL youd wanL
Lo asslgn Lhe lu value yourself Whenever you expand a node wlLh chlldren Lo
Lrlgger an asynchronous load of daLa from Lhe server your server scrlpL needs Lo
know exacLly whlch node was cllcked ln order Lo send lLs chlldren back 8y expllclLly
seLLlng Lhe lu youll nd lL a loL easler Lo maLch nodes wlLh Lhelr acLlons when youre
worklng wlLh Lhe server
142
LxLra daLa
AlLhough Lhe ld LexL and leaf properLles are Lhe mosL commonlyused properLles
Lhe way ln whlch Lhey are populaLed by !SCn lsnL excluslve Lo Lhem ln facL any
conguraLlon properLy of a 1reenode can be lnlLlallsed by !SCn whlch wlll prove
Lo be a useful Lrlck when we begln Lo explore Lhe oLher feaLures of Lhe Lree ?oure
also able Lo lnclude appllcaLlonspeclc daLa perhaps your nodes are producLs and
you wanL Lo hold Lhe prlce of Lhem Any properLy LhaL lsnL recognlzed as a 1reenode
cong opLlon wlll sLlll be lncluded on Lhe 1reenodeaLLrlbuLes properLy for
laLer access
xML
xML ls noL naLlvely supporLed by Lhe Lree Powever lL ls posslble Lo use LxL !Ss daLa naLlvely supporLed
by Lhe Lree Powever lL ls posslble Lo use LxL !Ss daLa supporLed by Lhe Lree Powever lL ls posslble Lo
use LxL !Ss daLa
supporL Lo make Lhls happen Cenerally uslng !SCn wlll ease your paln alLhough
some appllcaLlons may use xML as Lhelr daLa LransporL So lLs worLh dlscusslng
some general approaches
We can use LxLdaLaPLLproxy Lo pull ln Lhe daLa buL we need Lo Lransform Lhe
xML as lL ls belng read
var xmlLree new LxLLree1reeanel(el LreeConLalner)
var proxy new LxLdaLaPLLproxy(url
hLLp//localhosL81/exL/Lreexmlphp)
proxyload(null
read funcLlon(xmluocumenL)
parsexmlAndCreaLenodes(xmluocumenL)

funcLlon() xmlLreerender() )
We creaLe a new 1reeanel and PLLproxy and speclfy LhaL when Lhe proxy
loads we wanL an LxLdaLa8eader Lo handle Lhe lncomlng xML daLa We Lhen
Lell Lhe reader Lo pass Lhe xML Lo parsexmlAndCreaLenodes ln Lhls funcLlon you
would creaLe a rooL 1reenode and chlldren based on Lhe xML daLa whlch ls preLLy
sLralghLforward glven LhaL PLLproxy ls xMLaware and passes you a Lrue xML
documenL raLher Lhan a plaln sLrlng
!avaScrlpL ls fully capable of handllng xML daLa alLhough you may be more
comforLable approachlng lL as you would approach Lraverslng Lhe uCM of an
xP1ML documenL 8y navlgaLlng and readlng Lhe xML documenL you can bulld
up a 1reenode hlerarchy lncorporaLlng xML aLLrlbuLes as exLra daLa for each node
and uslng LexLnodes as Lhe LexL label 8ecause you have access Lo Lhe raw xML
nodes ln Lhls manner you have full conLrol over Lhe resulLanL Lree sLrucLure and Lhe
1reenodes LhaL comprlse lL
143
1endlng your Lrees
Were now golng Lo dlscuss Lhe maln feaLures LhaL you can bolL on Lo your Lree Lo
make lL a llLLle blL more useful uraganddrop sorLlng and node edlLlng are Lhe
klnds of Lhlngs LhaL llfL Lhe 1reeanel from belng a clever way of dlsplaylng daLa Lo
belng a greaL way of manlpulaLlng lL
urag and drop
LxL !S Lakes care of all of Lhe draganddrop ul for you when youre uslng a
1reeanel !usL add enableuu Lrue Lo your conguraLlon and youll be able Lo
rearrange nodes wlLh a drop LargeL graphlc and add Lhem Lo folders wlLh a green
plus lcon Lo lndlcaLe whaL youre abouL Lo do
1he 1reeanel doesnL care abouL [usL lLs own nodes lf youve goL more
Lhan one 1reeanel on Lhe page Lhen you can happlly draganddrop
branches or leaves beLween Lhem
8uL LhaLs only half Lhe sLory When you refresh your page all of your rearranged
nodes wlll be back Lo Lhelr sLarLlng poslLlons 1haLs because Lhe 1reeanel doesnL
auLomaLlcally know how you wanL Lo perslsL your changes and ln order Lo educaLe
lL weve goL Lo hook lnLo some evenLs
144
1he 1reeanels beforemovenode evenL res aL [usL Lhe rlghL Llme for usafLer Lhe
mouse buLLon ls released Lo slgnlfy we wanL Lo do a drop buL before Lhe 1reeanel
ul ls updaLed Lo reecL LhaL We are mosL llkely Lo add code such as Lhe followlng Lo
Lell Lhe server abouL node move evenLs
Lreeon(beforemovenode funcLlon(Lree node
oldarenL newarenL lndex)
LxLA[axrequesL(
url hLLp//localhosL/nodemovephp
params
nodeld nodeld
newparenLld newarenLld
oldparenLld oldarenLld
droplndex lndex

)
)
AugmenLlng our prevlous code were addlng a new evenL handler for Lhe
beforemovenode evenL 1he handler funcLlon ls called wlLh a few useful argumenLs
1 Lree 1he 1reeanel LhaL ralsed Lhe evenL
2 node 1he 1reenode belng moved
3 oldarenL 1he prevlous parenL of Lhe node belng moved
4 newarenL 1he new parenL of Lhe node belng moved
3 lndex 1he numerlcal lndex where Lhe node was dropped
We use Lhese argumenLs Lo form Lhe parameLers of an A!Ax call Lo Lhe server As you
can pull ouL preLLy much any lnformaLlon you need abouL Lhe currenL sLaLe of Lhe
Lree your serverslde scrlpL can perform any acLlon LhaL lL needs Lo
ln some cases LhaL could lnclude cancellng Lhe move acLlon lf Lhe loglc you place
wlLhln Lhe beforemovenode handler falls you need Lo roll back your changes lf
youre noL dolng an A!Ax call Lhls ls preLLy sLralghLforward[usL reLurn false aL
Lhe end of Lhe handler and Lhe acLlon wlll be canceled lor A!Ax Lhough lLs more
dlfculL because Lhe xMLPLLp8equesL happens asynchronously and Lhe evenL
handler wlll proceed wlLh lLs defaulL acLlon whlch ls Lo allow Lhe move
ln Lhese clrcumsLances you need Lo make sure LhaL you provlde a fallure handler
for your A!Ax requesL and pass enough lnformaLlon back Lo LhaL fallure handler Lo
allow lL Lo manually reLurn Lhe Lree Lo lLs prevlous sLaLe 8ecause beforemovenode
provldes a loL of lnformaLlon Lhrough lLs argumenLs you can pass Lhe necessary daLa
Lo Lake care of Lhese error evenLs
143
SorLlng
We can sorL nodes ln a 1reeanel ln a very exlble manner by uslng Lhe
1reeSorLer Agaln bulldlng on our prevlous code we can creaLe a 1reeSorLer
such as Lhls
new LxLLree1reeSorLer(Lree
folderSorL Lrue
dlr asc
)
8ecause 1reeSorLer assumes a couple of defaulLsspeclcally LhaL your leaf nodes
are marked wlLh a properLy called leaf and LhaL your labels are ln a properLy called
LexLwe can perform an alphabeLlcal sorL very easlly 1he dlr parameLer Lells Lhe
1reeSorLer Lo sorL ln elLher ascendlng (wlLh Lhe asc value) or descendlng (desc)
order and Lhe folderSorL parameLer lndlcaLes LhaL lL should sorL leaf nodes LhaL are
wlLhln foldersln oLher words Lhe whole Lree hlerarchy
lf youve goL daLa LhaL lsnL slmple LexL you can speclfy a cusLom meLhod of sorLlng
wlLh Lhe sorL1ype conguraLlon opLlon sorL1ype Lakes a funcLlon as lLs value and
LhaL funcLlon wlll be called wlLh one argumenL a 1reenode
1he purpose of Lhe sorL1ype funcLlon ls Lo allow you Lo casL a cusLom properLy of
Lhe 1reenodepresumably someLhlng youve passed from Lhe server and LhaL ls
speclc Lo your buslness needsand converL lL Lo a formaL LhaL LxL !S can sorL ln
oLher words one of Lhe sLandard !avaScrlpL Lypes such as lnLeger sLrlng or daLe
1hls feaLure can be useful ln cases where daLa passed Lo Lhe Lree ls ln a formaL LhaL
lsnL conduclve Lo normal searchlng uaLa generaLed by Lhe server mlghL serve
mulLlple purposes and hence may noL always be rlghL for a parLlcular purpose lor
example we may need Lo converL daLes lnLo a sLandard formaLfrom uS sLyle
MM/uu/?? Lo ????MMuu formaL LhaL ls sulLable for sorLlngor maybe we need
Lo sLrlp exLraneous characLers from a moneLary value so LhaL lL can be parsed as
a declmal
sorL1ype funcLlon(node)
reLurn nodeaLLrlbuLescreaLlonuaLe

ln Lhe above example we reLurn some cusLom daLa from our node and because Lhls
value ls a valld !avaScrlpL daLe LxL !S wlll be able Lo sorL agalnsL lL 1hls ls a slmple
demonsLraLlon of how Lhe sorL1ype opLlon can be used Lo allow Lhe 1reeSorLer Lo
work wlLh any klnd of server daLa
146
LdlLlng
1here are many scenarlos ln whlch edlLlng Lhe value of your nodes could be useful
When vlewlng a hlerarchy of caLegorlzed producLs you may wlsh Lo rename elLher
Lhe caLegorles or Lhe producLs lnllne wlLhouL navlgaLlng Lo anoLher screen We can
enable Lhls slmple feaLure by uslng Lhe LxLLree1reeLdlLor class
var edlLor new LxLLree1reeLdlLor(Lree)
1he defaulLs of Lhe 1reeLdlLor mean LhaL Lhls wlll now glve your Lree nodes a
1exLlleld edlLor when you doublecllck on Lhelr label Powever as wlLh baslc
draganddrop funcLlonallLy enabllng Lhls feaLure doesnL auLomaLlcally mean LhaL
your changes wlll be perslsLed Lo Lhe server We need Lo handle Lhe evenL LhaL res
when youve nlshed edlLlng Lhe node
edlLoron(beforecompleLe funcLlon(edlLor newvalue orlglnalvalue)

// osslble A[ax call?
)
1he beforecompleLe evenL handler geLs called wlLh Lhree argumenLs
1 edlLor 1he edlLor eld used Lo edlL Lhe node
2 newvalue 1he value LhaL was enLered
3 orlglnalvalue 1he value before you changed lL
Powever lL ls lmporLanL Lo noLe LhaL Lhe edlLor parameLer ls no ordlnary
LxLformlleld lL ls augmenLed wlLh exLra properLles Lhe mosL useful of whlch ls
edlLnode a reference Lo Lhe node LhaL was edlLed 1hls allows you Lo geL lnformaLlon
such as Lhe node lu whlch would be essenLlal ln maklng a serverslde call Lo
synchronlze Lhe edlLed value ln Lhe daLabase
As wlLh Lhe 1reeanels beforemovenode evenL beforecompleLe allows
cancellaLlon of Lhe edlL acLlon by reLurnlng lalse aL Lhe end of lLs handler processlng
A!Ax requesLs wlll need Lo provlde a fallure handler Lo manually resLore Lhe
edlLed value
147
1hls has been a qulck overvlew of how Lo creaLe a very slmple lnllne edlLor
1here are also means of uslng Lhls class Lo creaLe more compllcaLed feaLures 1he
1reeLdlLor consLrucLor can Lake up Lo Lwo opLlonal parameLers on Lop of Lhe slngle
mandaLory parameLer shown ln Lhe example above 1hese are a eld conguraLlon
ob[ecL and a conguraLlon ob[ecL for Lhe 1reeLdlLor 1he eld cong can be one of
Lwo Lhlngs a eld conflg ob[ecL Lo be applled Lo Lhe sLandard 1exLlleld edlLor or
an alreadycreaLed lnsLance of a dlfferenL form eld lf lL ls Lhe laLLer lL wlll be used
lnsLead of Lhe defaulL whlch means LhaL you can add numberlleld uaLelleld or
anoLher LxLformlleld ln a slmllar manner
1he second parameLer allows you Lo congure Lhe 1reeLdlLor and ls more for
neLunlng raLher Lhan lnLroduclng any exclLlng funcLlonallLy lor example we can use
cancelCnLsc Lo allow Lhe user Lo cancel any edlLlng by presslng Lhe Lscape key or use
lgnorenoChange Lo avold rlng compleLlon evenLs lf a value has noL changed afLer
an edlL
1rlmmlng and prunlng
1here a few oLher Lrlcks LhaL Lhe 1reeanel supporLs whlch asslsL ln Lhe creaLlon of
rlch appllcaLlons varylng selecLlon models node lLerlng and conLexL menus are
commonlyused feaLures ln many soluLlons So leLs Lake a look aL Lhese now
SelecLlon models
ln our prevlous example code we dragged and edlLed 1reenodes Lo alLer Lhem
lmmedlaLely 8uL nodes can also be selecLed for furLher processlng 1he 1reeanel
uses a slngleselecLlon model by defaulL ln our prevlous code weve already done
everyLhlng we need Lo enable node selecLlon As wlLh many aspecLs of Lhe Lree
slmply selecLlng Lhe node doesnL do anyLhlng lnsLead we need Lo hook ln Lo some of
Lhe feaLures provlded Lo manlpulaLe Lhe selecLlon
A greaL example of Lhls would be Lo selecL a node and have an lnformaLlon panel
auLomaLlcally populaLed wlLh furLher deLalls of LhaL node erhaps you have a Lree
of named producLs and cllcklng a node wlll dlsplay Lhe prlce and sLock level of
Lhe selecLed producL We can use Lhe selecLlonchange evenL Lo make Lhls happen
Agaln uslng our prevlous code as a sLarLlng polnL we could add Lhe followlng
LreeselModelon(selecLlonchange funcLlon(selModel node)
var prlce nodeaLLrlbuLesprlce
)
1he second node argumenL LhaL ls passed Lo Lhe selecLlonchange evenL makes lL
very easy Lo grab any cusLom aLLrlbuLes ln your node daLa
148
WhaL lf we wanL Lo allow mulLlple nodes Lo be selecLed? Pow can we do LhaL and
how can we handle Lhe selecLlonchange evenL ln LhaL conguraLlon? We can use
LxLLreeMulLlSelecLlonModel when creaLlng our 1reeanel
var Lree new LxLLree1reeanel(
render1oLreeConLalner
loader LreeLoader
rooL rooLnode
selModel new LxLLreeMulLlSelecLlonModel()
)
ConguraLlon ls as slmple as LhaL AlLhough handllng Lhe selecLlonchange
evenL ls very slmllar Lo Lhe defaulL selecLlon model Lhere ls an lmporLanL dlfference
1he second argumenL Lo Lhe evenL handler wlll be an array of nodes raLher Lhan a
slngle node
SelecLlon models donL [usL expose Lhe means of reLrlevlng selecLlon lnformaLlon
1hey also allow manlpulaLlon of Lhe currenL selecLlon lor example Lhe
MulLlSelecLlonModelclearSelecLlons() meLhod ls useful for wlplng Lhe
slaLe clean afLer you have nlshed handllng an evenL lnvolvlng mulLlple nodes
uefaulLSelecLlonModel has meLhods (selecLnexL and selecLrevlous) for
navlgaLlng Lhe Lree movlng up or down Lhe node hlerarchy as requlred
8oundup wlLh conLexL menus
Weve already covered a loL of Lhe funcLlonallLy LhaL Lhe 1reeanel can provlde
so leLs consolldaLe a llLLle blL wlLh a pracLlcal example Addlng a conLexL menu LhaL
appears when you rlghLcllck a 1reenode ls a Lrlvlal Lask wlLh LxL !S Powever lL can
be an exLremely useful means of addlng shorLcuLs Lo your lnLerface Well be bulldlng
on Lhe code LhaL has been used ln Lhe prevlous secLlons llrsL leLs creaLe Lhe menu LhaL has been used
ln Lhe prevlous secLlons llrsL leLs creaLe Lhe menu has been used ln Lhe prevlous secLlons llrsL leLs
creaLe Lhe menu
and Lhen well hook lL up Lo Lhe 1reeanel
var conLexLMenu new LxLmenuMenu(
lLems
LexL ueleLe handler deleLePandler
149
LexL SorL handler sorLPandler

)
Lreeon(conLexLmenu LreeConLexLPandler)
1he 1reeanel provldes a conLexLmenu evenL whlch res when Lhe user rlghLcllcks
on a node noLe LhaL our llsLeners are noL anonymous funcLlons as Lhey have been ln
Lhe prevlous exampleslnsLead Lhey have been spllL off for easy readlng
llrsL Lhe LreeConLexLPandler LhaL handles Lhe conLexLmenu evenL
funcLlon LreeConLexLPandler(node)
nodeselecL()
conLexLMenushow(nodeulgeLAnchor())

1he handler geLs called wlLh a node argumenL so we need Lo selecL Lhe node Lo allow
us Lo acL upon lL laLer We Lhen pop up Lhe conLexL menu by calllng Lhe show meLhod
wlLh a slngle parameLer LhaL Lells Lhe popup menu where Lo allgn lLselfln Lhls case
lLs Lhe LexL of Lhe 1reenode weve cllcked on
Pandllng Lhe menu
Weve goL Lwo conLexL menu enLrlesueleLe and SorL LeLs rsL Lake a look aL Lhe
handler for ueleLe
funcLlon deleLePandler()
LreegeLSelecLlonModel()geLSelecLednode()remove()

uslng our prevlous knowledge of selecLlon models we geL Lhe node LhaL we selecLed
ln Lhe LreeConLexLPandler and slmply call lLs remove meLhod 1hls wlll deleLe Lhe
node and all of lLs chlldren from Lhe 1reeanel noLe LhaL were noL deallng wlLh
perslsLlng Lhls change Lo Lhe server buL lf Lhls was someLhlng LhaL you needed Lo do
1reeanel has a remove evenL LhaL you could use a handler for Lo provlde
LhaL funcLlonallLy
130
1he handler for our SorL menu enLry ls glven here
funcLlon sorLPandler()
LreegeLSelecLlonModel()geLSelecLednode()sorL(
funcLlon (lefLnode rlghLnode)
reLurn (lefLnodeLexLLoupperCase() rlghLnodeLexL
LoupperCase() ? 1 1)

)

Agaln we use Lhe selecLlon model Lo geL Lhe selecLed node LxL !S provldes a sorL
meLhod on Lhe 1reenode LhaL Lakes a funcLlon as lLs rsL parameLer 1hls funcLlon
geLs called wlLh Lwo argumenLs Lhe Lwo nodes Lo compare ln Lhls example we are
sorLlng by Lhe nodes LexL properLy ln descendlng order buL you can sorL by any
cusLom node aLLrlbuLe you llke
?ou can use Lhls sorLlng meLhod ln con[uncLlon wlLh a 1reeSorLer
wlLhouL lssues 1haLs because 1reeSorLer only monlLors Lhe
beforechlldrenrendered append lnserL and LexLchange
evenLs on Lhe 1reeanel Any oLher changes wlll be unaffecLed
1he ueleLe conLexL menu acLlon wlll compleLely remove Lhe selecLed node from Lhe
1reeanel whlle Lhe SorL acLlon wlll order lLs chlldren accordlng Lo Lhelr LexL label
lllLerlng
1he LxLLree1reelllLer class ls marked as experlmenLal ln LxL !S 22 so lm
golng Lo Louch upon lL only brley lLs deslgned for scenarlos where Lhe user needs
Lo search for nodes based on a parLlcular aLLrlbuLe 1hls aLLrlbuLe could be Lhe LexL
Lhe lu or any cusLom daLa LhaL was passed when Lhe node was creaLed LeLs Lake Lhe
conLexL menu LhaL we [usL bullL and use lL Lo demonsLraLe lLerlng llrsL we have Lo
creaLe Lhe 1reelllLer
var fllLer new LxLLree1reelllLer(Lree)
?ou need Lo go back Lo Lhe conguraLlon for Lhe conLexL menu and add a new enLry
Lo Lhe lLems conguraLlon properLy
LexL lllLer handler fllLerPandler
We now need Lo creaLe a fllLerPandler funcLlon LhaL performs Lhe lLer acLlon
funcLlon fllLerPandler()
var node LreegeLSelecLlonModel()geLSelecLednode()
fllLerfllLer(8ee LexL node)

131
As wlLh our oLher handler funcLlons we sLarL by geLLlng Lhe currenLlyselecLed node
ln Lhe Lree and Lhen call Lhe fllLer funcLlon 1hls funcLlon Lakes Lhree argumenLs
1 1he value Lo lLer by
2 1he aLLrlbuLe Lo lLer on Lhls ls opLlonal and defaulLs Lo LexL
3 1he sLarLlng node for Lhe lLer
We pass Lhe selecLed node as Lhe sLarLlng node for Lhe lLer whlch means LhaL Lhe
node we rlghLcllcked on ln order Lo Lo pop up Lhe menu wlll have lLs chlldren
lLered by Lhe specled value
Cur aardvark bee and cockroach examples donL really requlre Lhls level of lLerlng
buL Lhere are oLher slLuaLlons ln whlch Lhls could prove Lo be a useful user feaLure
Cnllne sofLware documenLaLlon wlLh mulLlple levels of deLall could be represenLed
ln a Lree and a 1reelllLer could be used Lo search by Loplc ln a more advanced
scenarlo you could use checkboxes or popup dlalogs Lo geL Lhe users lnpuL for Lhe
lLer provldlng a much more exlble experlence
1he rooLs
AlLhough weve demonsLraLed a number of powerful Lechnlques uslng Lhe LxL Lree
supporL lLs real sLrengLh lles ln Lhe wealLh of seLLlngs meLhods and hook polnLs LhaL
Lhe varlous classes expose Weve already revlewed a number of ways of congurlng
Lhe 1reeanel and 1reenode classes whlch glve access Lo a number of powerful
feaLures Powever Lhere are more conguraLlon opLlons LhaL can be used Lo Lweak
and enhance your Lree and were golng Lo revlew some of Lhe more lnLeresLlng
ones now
1reeanel Lweaks
8y defaulL Lhere are a number of graphlcal enhancemenLs enabled for Lhe 1reeanel
whlch dependlng on your appllcaLlon requlremenLs may noL be deslrable lor
example seLLlng anlmaLe Lo false wlll prevenL Lhe smooLh anlmaLed effecL belng
used for Lhe expanslon and conLracLlon of nodes 1hls can be parLlcularly useful ln
slLuaLlons where nodes wlll be repeaLedly expanded and collapsed by a user and
slower anlmaLed LranslLlons can be frusLraLlng
8ecause 1reeanel exLends from LxLanel lL supporLs all of Lhe sLandard anel
feaLures 1hls ls easy Lo remember because lL means LhaL supporL for Loolbars aL Lhe
Lop and Lhe boLLom (vla Lhe Lbar and bbar cong opLlons) separaLe header and
fooLer elemenLs and expand/collapse funcLlonallLy for Lhe anel are all supporLed
1he 1reeanel can also be lncluded ln any LxLvleworL or LxLlayouL
132
CosmeLlc
ln Lerms of purely cosmeLlc opLlons 1reeanel provldes Lhe llnes opLlon whlch
when seL Lo false wlll dlsable Lhe guldellnes LhaL show Lhe hlerarchy of Lhe
1reenodes wlLhln Lhe panel 1hls can be useful lf youre creaLlng a very slmple Lree
for whlch llnes would [usL cluLLer Lhe lnLerface
hlColor ls appllcable for draganddrop enabled Lrees and conLrols Lhe sLarL color
for Lhe fadlng hlghllghL (supplled as a hex sLrlng such as 990000) whlch ls Lrlggered
when a node ls dropped 1hls can be compleLely dlsabled by seLLlng dlurop Lo
false SeLLlng LrackMouseCver Lo false wlll dlsable Lhe hlghllghL LhaL appears
when you hover over a node
1weaklng 1reenode
ln many cases you wonL be manually creaLlng 1reenodes oLher Lhan your rooL
node so you mlghL Lhlnk LhaL Lhe conguraLlon opLlons arenL of much use Lo you
noL so because lLs noL [usL Lhe ld and LexL properLles from your !SCn LhaL are used
when generaLlng nodesany properLy ln your !SCn LhaL maLches wlLh a conflg
opLlon on Lhe 1reenode wlll be used Lo creaLe Lhe node lf you have a !SCn LhaL
llke Lhls

LexL My node dlsabled Lrue href hLLp//exL[scom

133
?oull geL a node LhaL sLarLs off as dlsabled buL when enabled wlll acL as a llnk Lo Lhe
LxL !S webslLe
1hls feaLure ls exLremely useful for passlng appllcaLlonspeclc lnformaLlon Lo your
1reenodes lor example your server loglc may dlcLaLe LhaL parLlcular nodes cannoL
have chlldren SeLLlng allowChlldrenfalse means LhaL Lhe node canL be used as a
drop LargeL for a node LhaL ls belng dragged Slmllarly you can seL lndlvldual nodes
Lo be dlsallowed for dragglng by uslng Lhe draggable false opLlon We can seL Lhe
sLaLus of a checkbox on Lhe node by uslng checked Lrue ln facL slmply speclfylng
Lhe checked opLlonwheLher Lrue or falsewlll cause Lhe checkbox Lo appear
nexL Lo Lhe node 1hese conguraLlon opLlons allow you Lo seL Lhe behavlor of your
nodes based on some server loglc buL do noL requlre any manual handllng ln order
Lo see your preferences enacLed
1here are a few oLher useful conguraLlon opLlons avallable for 1reenode ?ou can
provlde cusLom lcons by uslng Lhe lcon opLlon or provlde a CSS sLyllng hook by
uslng Lhe cls opLlon 1he qLlp opLlon leLs you provlde a popup LoolLlp perhaps
provldlng a descrlpLlon of Lhe node whlle Lhe LexL label shows lLs name
ManlpulaLlng
Cnce Lhe 1reeanel ls congured we can begln Lo work wlLh lLs nodes 1he panel
mosLly allows for navlgaLlon of Lhe hlerarchy sLarLlng aL a selecLed node and movlng
Lo a parenL or chlld or up and down Lhe currenL branch We can also selecL nodes or
expand Lhem by Lhelr paLh whlch could be used Lo search for speclc nodes
1he expandAll and collapseAll meLhods are preLLy selfexplanaLory and can be
useful for reseLLlng Lhe Lree Lo a defaulL sLaLe Lach meLhod Lakes a slngle 8oolean
parameLer Lo sLaLe wheLher Lhe change should be anlmaLed or noL
134
1he expandaLh meLhods rsL parameLer ls Lhe paLh of a node 1he paLh unlquely
ldenLles Lhe node wlLhln Lhe hlerarchy and Lakes Lhe form of a sLrlng whlch fully
qualles Lhe locaLlon of a node ln Lhe Lree lor example a paLh could look llke Lhls
/n13/n36/n101
Pere we have a represenLaLlon of Lhe locaLlon of Lhe node wlLh Lhe lu n101 n13
ls Lhe rooL node wlLh a chlld n36 and n101 ls ln Lurn a chlld of n36 lf youre
famlllar wlLh xaLh Lhen Lhls noLaLlon wlll be wellknown Lo you lf youre noL
famlllar wlLh xaLh Lhen you can Lhlnk of lL as a posLal address or a web l address
a unlque way of referrlng Lo Lhls node
8y passlng Lhls value Lo expandaLh Lhe Lree wlll drlll down Lo Lhe specled node
expandlng branches as necessary lmaglne Lhe followlng code
LxLMsgprompL(node lease enLer a producL name
funcLlon(bLn LexL)
lf (bLn ok)
var paLh CeLnodeaLhlromname(LexL)
LreeexpandaLh(paLh)

)
1he CeLnodeaLhlromname funcLlon could perform a server lookup and reLurn
Lhe node lu enabllng qulck navlgaLlon of Lhe Lree based on Lhe users lnpuL
AlLernaLlvely 1reeanelgeLnode8yld could be used ln a slmllar way 8aLher Lhan
expand Lo Lhe node furLher manlpulaLlon could occur
ln some clrcumsLances you may need Lo perform Lhe reverse acLlon LhaL ls you have
a node buL you need Lo geL Lhe paLh for lL 1reenodegeLaLh ls provlded for [usL
Lhls purpose and can be used as a means of sLorlng Lhe locaLlon of a node
lurLher meLhods
1he 1reenode has a number of oLher useful meLhods as well Weve already
covered sorL and remove buL now we can add some baslc uLlllLy meLhods such
as collapse and expand enable and dlsable as well as some handy exLras such
as expandChlldnodes and collapseChlldnodes whlch can Lraverse all chlld
nodes of an arblLrary rooL and change Lhelr expanslon sLaLes 1he flndChlld and
flndChlld8y meLhods allow boLh slmple and cusLom searchlng of chlld nodes as
shown ln Lhe followlng example where we search for Lhe rsL node wlLh a prlce
aLLrlbuLe of 300
var node rooLflndChlld(prlce 300)
133
ln some cases you may need Lo massmanlpulaLe Lhe aLLrlbuLes of your node
hlerarchy ?ou can do Lhls by uslng Lhe 1reenodeeachChlld meLhod
rooLeachChlld(funcLlon(currenLnode)
currenLnodeaLLrlbuLesprlce + 30
)
8ecause Lhe rsL parameLer Lo eachChlld ls a funcLlon we can perform any loglc LhaL
ls requlred of our appllcaLlon
LvenL capLure
Weve already demonsLraLed a couple of meLhods of waLchlng for user lnLeracLlon
wlLh Lhe Lree buL Lhere are many evenLs avallable as hooks for your cusLom code
Larller we dlscussed Lhe use of Lhe checked conguraLlon opLlon on a 1reenode
When Lhe node checkbox ls Loggled Lhe checkchange evenL ls red 1hls could be
useful for vlsually hlghllghLlng Lhe check sLaLus
Lreeon(checkchange funcLlon(node checked)
nodeeachChlld(funcLlon(currenLnode)
currenLnodeulLoggleCheck()
)

Were propagaLlng Lhe check down Lhrough Lhe chlldren of Lhe 1reenode We could
also hlghllghL Lhe nodes ln quesLlon Lo clearly show LhaL Lhelr check sLaLus has
changed or perform some oLher loglc such as addlng lnformaLlon abouL Lhe
newlychecked nodes Lo an lnformaLlonal dlsplay elsewhere on Lhe page
A more common use of Lhe 1reeanel evenLs ls Lo verlfy changes or perslsL Lhem
Lo a serverslde sLore lor example a Lree of caLegorlzed producLs may have some
loglcal resLrlcLlonscerLaln bargaln caLegorles may speclfy Lhe maxlmum prlce of a
producL We could use Lhe beforeappend evenL Lo check for Lhls
Lreeon(beforeappend funcLlon(Lree parenL node)
reLurn nodeaLLrlbuLesprlce parenLaLLrlbuLesmaxlmumrlce
)
136
1hls example demonsLraLes a paLLern LhaL you have seen LhroughouL
LxL !SreLurnlng false from an evenL handler wlll cancel Lhe acLlon ln Lhls case lf
Lhe prlce of Lhe node belng added ls greaLer Lhan Lhe maxlmumrlce asslgned Lo lLs
parenL Lhe funcLlon wlll reLurn false and Lhe node wlll noL be added
8ememberlng sLaLe
ln many appllcaLlons 1reeanels are used as navlgaLlon alds showlng a
hlerarchlcal sLrucLure wlLh lLs nodes belng P1ML llnks Lo node deLall pages ln Lhls
scenarlo lf a user wlshes Lo vlew mulLlple node deLall pages one afLer Lhe oLher Lhe
defaulL behavlor of Lhe 1reeanel can lead Lo frusLraLlon 1hls ls because Lhe Lree
doesnL save lLs sLaLe beLween page refreshes so any expanded node wlll be rendered
as collapsed when Lhe user navlgaLes back Lo Lhe page lf Lhe user needs Lo drlll down
Lo Lhe branch Lhey are lnLeresLed ln every Llme Lhey navlgaLe back Lo Lhe Lree Lhey are
qulckly golng Lo lose paLlence wlLh Lhe lnLerface
SLaLeManager
now LhaL we have a good grasp of Lhe way we can manlpulaLe Lhe 1reeanel
worklng ouL how we can save and resLore lLs sLaLe should be falrly sLralghLforward
LssenLlally whaL we need Lo do ls record each expanslon of a 1reenode and when
Lhe page reloads playback Lhose expanslons We can use LxLsLaLeManager
wlLh a Cooklerovlder Lo sLore our expanslon We can lnlLlallze Lhls wlLh
LxLsLaLeManagerseLrovlder(new LxLsLaLeCooklerovlder())
1hls ls sLandard fare for seLLlng up a sLaLe provlder We now need Lo esLabllsh
exacLly whaL were golng Lo sLore and Lhe loglcal cholce would be Lhe paLh of Lhe lasL whaL were golng
Lo sLore and Lhe loglcal cholce would be Lhe paLh of Lhe lasL
expanded node 1hls means LhaL we can slmply expand ouL LhaL paLh and presenL
Lhe user wlLh Lhe lasL parL of Lhe hlerarchy Lhey were lnLeresLed ln Peres a nalve
lmplemenLaLlon of LhaL ldea
Lreeon(expandnode funcLlon (node) LxLsLaLeManager
seL(LreesLaLe nodegeLaLh())
)
ln Lhls code we slmply handle Lhe 1reeanels expandnode evenL Lo record Lhe
paLh uslng 1reenodegeLaLh of any node LhaL ls expanded 8ecause we overwrlLe
LhaL value on each expanslon Lhe LreesLaLe should hold Lhe paLh of Lhe lasL node
LhaL was expanded We can Lhen check for LhaL value when Lhe page ls loaded
var LreeSLaLe LxLsLaLeManagergeL(LreesLaLe)
lf (LreeSLaLe)
LreeexpandaLh(LreeSLaLe)
137
lf LreesLaLe has prevlously been recorded we use LhaL Lo expand Lhe Lree ouL Lo Lhe prevlously been
recorded we use LhaL Lo expand Lhe Lree ouL Lo Lhe been recorded we use LhaL Lo expand Lhe Lree ouL
Lo Lhe
lasLexpanded node
CaveaLs
As menLloned Lhls ls a nalve lmplemenLaLlon lL doesnL handle cases where Lhe
user expands and Lhen collapses a node and Lhen navlgaLes away and back ln such
cases Lhe collapse of Lhe node wouldnL be saved So when we resLore Lhe sLaLe Lhe
user wlll see lL expanded agaln 8y handllng Lhe collapsenode evenL we could
Lake Lhls lssue lnLo accounL We also have a problem wlLh Lhe expanslon of mulLlple
nodes lf more Lhan one branch ls expanded our code wlll only expand Lhe one Lhe
user cllcked mosL recenLly SLorlng an array of expanded nodes ls one approach LhaL
could address Lhls shorLcomlng
Summary
CeLLlng a feaLurerlch Lree lnLerface such as LxLLree1reeanel up and runnlng
ln eleven llnes of code ls preLLy lmpresslve and weve shown LhaL lL ls posslble
Cver and above LhaL Lhls chapLer has demonsLraLed LhaL Lhe 1reeanels sLrengLh
ls noL slmply ln lLs ease of use buL ln Lhe way we can use lLs wealLh of conguraLlon
opLlons Lo dellver appllcaLlonspeclc funcLlonallLy
1he use of asynchronous loadlng ls an lmporLanL feaLure of Lhe 1reeanel because
lL provldes a way of consumlng large amounLs of dynamlc daLa ln a scalable fashlon
lLs also handled LransparenLly by LxLLree whlch means LhaL Lhe lmplemenLaLlon ls
as beneclal for Lhe developer as lL ls for Lhe end user
uesplLe all of Lhelr power Lhe LxLLree classes sLlll manage Lo feel preLLy
llghLwelghL ln use lLs easy Lo Lame LhaL power by uslng Lhe conguraLlon opLlons
Lhe meLhods and Lhe evenLs LhaL Lhe 1reeanel and 1reenode provlde buL lLs noL
[usL abouL Lhese classes 1reeSorLer and 1reenodeul are key parLs of Lhe puzzle
addlng funcLlonallLy and allowlng cusLomlzaLlon for a sLandardlzed look and feel
8ecause Lhe LxL1reeanel exLends Lhe anel whlch ln Lurn exLends
8oxComponenL we geL all of Lhe sLrong componenL and layouL supporL LhaL comes
from a fullyedged LxL !S componenL 8oxComponenL supporL wlll be parLlcularly
lnLeresLlng as we move forward because lL means LhaL Lrees can easlly be lncluded
ln varlous conguraLlons wlLhln an LxLWlndow Whlch [usL happens Lo be our
nexL Loplc
Am Pllllgenbusch 47 aderborn n8W 33098Wlndows and ulalogs
ln Lhe olden days of Lhe web users of LradlLlonal backend sysLems would spend
Lhelr Llme crunchlng daLa ln llsL and formbased lnLerfaces lck an lLem from a llsL
of cusLomer orders Lhen navlgaLe Lo a deLall form rlnse and repeaL 1he Lrouble ls
LhaL were Lalklng abouL Lhousands of enLrles ln a llsL and loLs of deLall ln Lhe forms
1he chances are LhaL ln our cusLomer order example we mlghL even need subforms
Lo show all of Lhe lnformaLlon LhaL ls avallable and each Llme we move Lo anoLher
screen were refreshlng Lhe whole page and geLLlng all of LhaL daLa all over agaln
1haLs ne lLs how Lhe web works 8uL ln a daLa processlng scenarlo where
your users are golng back and forLh LhroughouL Lhe day Lheres a real beneL ln
opLlmlzlng Lhe speed aL whlch screens appear and daLa ls refreshed 1he LxL !S
grld plays a key parL ln Lhls as weve seen by brlnglng A!Axpowered paglng and
sorLlng of Crldvlews lnLo play Lo replace Lhe oldsLyle sLaLlc llsLs
now were golng Lo Lake a look aL Lhe oLher parL of Lhe puzzleLxL !S Wlndow and
dlalog supporL 1hese classes allow developers Lo presenL any klnd of lnformaLlon Lo
Lhelr users wlLhouL forclng Lhe users Lo navlgaLe Lo anoLher screen 8y popplng up as
an overlay on Lop of Lhe currenL page a wlndow or dlalog can presenL deLalled daLa
ln Lhe form of grlds Lree lmages and LexL We can also use Lhem ln a slmplled form
Lo show lnformaLlonal alerLs or Lo qulckly capLure user daLa
Cpenlng a dlalog
ln Lhls chapLer well Lalk abouL Lhe maln LxLWlndow class and Lhe LxLMessage8ox
subclass boLh of whlch have exLenslve appllcaLlons ln our enhanced user lnLerface
Whlle Lhe Wlndow lLself ls deslgned Lo be a exlble mulLlpurpose componenL Lhe
Message8ox ls a more speclallzed soluLlon lL ls used ln a slmllar way Lo sLandard
!avaScrlpL pop ups such as alerL and prompL albelL wlLh many more behavloral and
presenLaLlonal opLlons avallable for lL
160
LxLWlndow ls anoLher fullyblown LxLConLalner glvlng lL a wealLh of underlylng
seLLlngs whlch wlll be famlllar from Lhe oLher parLs of Lhe LxL !S framework lL also
hlnLs aL Lhe Lypes of lnLerfaces LhaL we can bulld ln a Wlndow glven LhaL we can seL
Lhe lnLernal layouL of a ConLalner Lo a range of dlfferenL opLlons
Were also golng Lo cover some exLra classes whlch help us Lo manlpulaLe mulLlple
Wlndows LxLWlndowCroup and LxLWlndowManager ln advanced appllcaLlons
we can use more Lhan one wlndow Lo presenL drllldown vlews of lnformaLlon or
we can allow Lhe user Lo vlew more Lhan one record aL once ln separaLe wlndows
Wlndow groups asslsL wlLh Lhese appllcaLlons glvlng us Lhe power Lo acL upon many
wlndows aL once
uesplLe Lhe facL LhaL dlalogs bulld on LxLWlndow were golng Lo address dlalogs
rsL 1haLs because Lhe dlalogs absLracL away many of Lhe powerful opLlons of LxL
Wlndow maklng lL a cuLdown verslon of Lhe superclass
ulalogs
As prevlously menLloned dlalogs can be llkened Lo Lhe prompL and alerL funcLlons
LhaL are avallable ln mosL browser lmplemenLaLlons of !avaScrlpL AlLhough Lhe
appearance of Lhose pop ups ls conLrolled by Lhe browser and operaLlng sysLem and
Lhelr behavlor ls llmlLed Lo Lhe mosL common cases Lhese resLrlcLlons donL apply Lo
Lhe LxL !S dlalogs
AlLhough Lhe dlalog class ls acLually LxLMessage8ox LxL !S provldes
a shorLhand verslon LxLMsg 1hls shorLhand verslon can make your
code a llLLle more conclse buL lLs up Lo you whlch one you use as Lheyre
boLh funcLlonally equlvalenL
LeLs Lake a look aL Lhe readymade pop ups LhaL LxL !S makes avallable
Cff Lhe shelf
Weve Lalked abouL how LxL provldes a replacemenL for Lhe !avaScrlpL alerL so leLs
have a look aL LhaL rsL
LxLMsgalerL(Pey! SomeLhlng happened)
161
1he rsL Lhlng Lo noLlce ls LhaL MsgalerL Lakes Lwo parameLers whereas Lhe
sLandard alerL Lakes only one 1he rsL allows you Lo speclfy a LlLle for Lhe alerL
dlalog and Lhe second specles Lhe body LexL 1he prevlous code resulLs ln a
messagebox llke Lhls
As you can see lL performs very much Lhe same funcLlon as a sLandard alerL buL wlLh
LhaL famlllar LxL !S look and feel We can also convey a llLLle blL more lnformaLlon
by uslng Lhe LlLle bar Showlng MsgalerL doesnL Lemporarlly halL scrlpL execuLlon
ln Lhe same way LhaL a normal alerL wlll be consclous of Lhls when uslng Lhe LxL
verslon LaLer well look aL ways Lo use callbacks Lo repllcaLe LhaL halL funcLlonallLy
should you need lL
?ou can only use a slngle LxLMessage8ox aL a Llme lf you Lry Lo pop
up Lwo boxes aL Lhe same Llme Lhe rsL wlll be replaced by Lhe second So
ln some cases youll wanL Lo check for Lhe presence of an exlsLlng dlalog
ln case you lnadverLenLly overwrlLe Lhe message lL ls presenLlng
LeLs Lake a look aL anoLher replacemenL Lhe LxLMsgprompL 1hls allows Lhe
capLure of a slngle llne of LexL ln Lhe same way LhaL Lhe !avaScrlpL prompL does
Powever lnsLead of slmply reLurnlng a value lL glves you a few more opLlons
Peres a comparlson of dolng Lhe same Lhlng wlLh each meLhod
var daLa prompL(1ell me someLhlng)
LxLMsgprompL(Pey! 1ell me someLhlng funcLlon(bLn LexL)
lf (bLn ok)
var daLa LexL

Lhls false )
162
Agaln MsgprompL allows you Lo pass a LlLle as Lhe rsL argumenL and Lhe body
LexL ls Lhe second 1he Lhlrd argumenL ls a callback funcLlon LhaL wlll be called when
a buLLonelLher Ck or Cancells cllcked ln Lhe prompL 1he callback has Lwo
argumenLs Lhe buLLon LhaL was cllcked and Lhe LexL LhaL was provlded by Lhe user
you can use Lhese as demonsLraLed ln Lhe example code
noLe Lhe oLher Lhree opLlons LhaL come afLer Lhe callback funcLlon 1hey are
scope mulLlllne and lnlLlal value respecLlvely 1he mulLlllne argumenL ls
lnLeresLlngaccepLlng a boolean value lL allows a more exlble capLure of LexL
Lhan Lhe sLandard prompL
ConflrmaLlon
Cur nal replacemenL messagebox ls for Lhe conrm pop up whlch allows Lhe user
Lo choose beLween conrmlng an acLlon or re[ecLlng lL 1he code should be preLLy
famlllar by now
LxLMsgconflrm(Pey! ls Lhls ok? funcLlon(bLn LexL)
lf (bLn yes)
// go ahead and do more sLuff
else
// aborL aborL!

)
Agaln were uslng Lhe LlLle body LexL and callback argumenLs LhaL we saw ln Lhe
MsgprompL so Lhere are no surprlses here An lnLeresLlng dlfference beLween Lhls
and Lhe sLandard conrm ls LhaL whereas Lhe sLandard conrm glves Lhe opLlons Ck
and Cancel Lhe LxL !S one glves Lhe user Lhe cholce of ?es and no 1hls ls arguably a
beLLer defaulL parLlcularly when you use a quesLlon ln Lhe body LexL of Lhe
conrm messagebox
163
lLs all progresslng nlcely
1heres a fourLh sLandard messagebox whlch ls lncluded wlLh LxL !S one LhaL
lsnL [usL a replacemenL for a baslc !avaScrlpL pop up 1hls ls Lhe progress dlalog
LxLMsgprogress lsnL deslgned Lo be used lndependenLly llke Lhe oLher LxL
messageboxes and doesnL need user lnpuL ln facL lf you Lrlgger lL llke Lhls
LxLMsgprogress(Pey! Were walLlng progresslng)
1hen youre golng Lo be walLlng for a whlle because youll geL a modal dlalog whlch
never progresses anywhere 1he rsL Lwo argumenLs are Lhe LlLle and body LexL as ln
Lhe prevlous examples whlle Lhe Lhlrd ls Lhe LexL LhaL wlll appear ln Lhe progress bar
So lf we donL wanL Lo be sLuck wlLh an eLernal progress bar how can we geL Lhlngs
movlng? 1he LxLMsgupdaLerogress meLhod ls provlded [usL for Lhls purpose
Peres an example whlch lllusLraLes lLs use
var counL 0
var lnLerval wlndowseLlnLerval(funcLlon()
counL counL + 004

LxLMsgupdaLerogress(counL)

lf(counL 1)
wlndowclearlnLerval(lnLerval)
LxLMsghlde()

100)
1hls ls a very conLrlved example ln whlch were calllng updaLerogress every 100
mllllseconds vla a Llmer and lncremenLlng Lhe progress uslng Lhe counL varlable
every Llme 1he rsL argumenL Lo updaLerogress ls a value beLween zero and one
wlLh zero represenLlng sLarL and one represenLlng nlsh Lhe second allows you Lo
updaLe Lhe progress bar LexL and Lhe Lhlrd leLs you change Lhe body LexL updaLlng
Lhe LexL can be handy lf youd llke Lo provlde addlLlonal feedback Lo Lhe user
even lf Lhls ls [usL Lo show a percenLage represenLaLlonx compleLeof Lhe
currenL progress
8ack ln our example code noLe LhaL you musL also call LxLMsghlde ln order Lo
clear Lhe progress dlalog from Lhe screenupdaLerogress doesnL handle Lhls for
you even lf you seL Lhe currenL progress Lo a value of greaLer Lhan one
1he four lncluded messageboxes alerLprompL conrm and progressare Lhe
foundaLlon of Lhe LxL !S dlalog supporL buL we can also weak Lhelr funcLlonallLy Lo
supporL some cusLom scenarlos
164
8oll your own
1he four meLhods for creaLlng messageboxes LhaL weve [usL covered are essenLlally
shorLcuLs Lo a fLh meLhod LxLMsgshow 1hls meLhod Lakes a conguraLlon ob[ecL
as lLs slngle argumenL and Lhe conguraLlon opLlons wlLhln Lhls ob[ecL allow Lhe
creaLlon of a messagebox LhaL supporLs all of Lhe feaLures avallable vla our shorLcuL
meLhods 1he slmplesL example of Lhls meLhod ls
LxLMsgshow(
msg AWLSCML
)
1hls ls closer repllcaLlon of Lhe !avaScrlpL alerL Lhan Lhe sLandard LxL !S onebuL lLs
noL as funcLlonal SomeLhlng a llLLle beLLer would be
LxLMsgshow(
LlLle Pey!
msg lcons and 8uLLons! AWLSCML
lcon LxLMessage8oxlnlC
buLLons LxLMessage8oxCk
)
now weve goL our LlLle back as well as our buLLon buL Lheres an lcon as well
1he means of congurlng buLLons and lcons ls lnLeresLlng pass ln one of Lhe
consLanLs LhaL LxL !S provldes and youll geL a precongured buLLon or CSS class
LhaL shows an lcon Peres Lhe llsL of Lhe lcon consLanLs
LxLMsgL88C8
LxLMsglnlC
LxLMsgCuLS1lCn
LxLMsgWA8nlnC
And Lhe buLLon consLanLs
LxLMsgCAnCLL
LxLMsgCk
-
-
-
-
-
-
163
LxLMsgCkCAnCLL
LxLMsg?LSnC
LxLMsg?LSnCCAnCLL
1hls varleLy of readymade opLlons provldes you wlLh a falr blL of exlblllLy
when lL comes Lo Lhe appearance of your messageboxes buL we can go furLher As
menLloned Lhe lcon consLanLs are slmply sLrlngs represenLlng CSS class names
lor example LxLMsgCuLS1lCn provldes Lhe exLmbquesLlon sLrlng 1hls Lles
ln Lo Lhe LxL !S sLylesheeLs and provldes Lhe sLyles for a quesLlon lcon 1he loglcal
concluslon ls LhaL we can provlde our own sLrlngs ln place of Lhese consLanLs
allowlng full cusLomlzaLlon of Lhe lcon areas
1he buLLon consLanLs are a blL less exlble and conLaln ob[ecL llLerals speclfylng
how Lhe dlalog buLLons should be dlsplayed lor example LxLMsg?LSnCCAnCLL
conLalns Lhe followlng (represenLed ln !avaScrlpL Cb[ecL noLaLlon for easy readlng)
cancelLrue yes Lrue noLrue
1hls ls speclfylng LhaL all of Lhe yes cancel and no buLLons should be lncluded
?ou can use Lhls Lo selecLlvely Lurn off parLlcular buLLons buL you canL change Lhe
order or add new buLLons ln Lhls manner 1hls means LhaL provldlng cusLom buLLon
denlLlons ln Lhls way ls of llmlLed use
ln addlLlon Lo accepLlng Lhe LxLMsg buLLon consLanLs Lhe show meLhod
opLlons wlll also accepL a sLandard LxL !S buLLon conguraLlon ob[ecL
Powever we can Lweak Lhe dlalog ln oLher ways lLs posslble Lo supply LxLMsg
show wlLh wldLh and helghL opLlons Lo resLrlcL Lhe dlmenslons of your pop up 1hls
could be handy ln a slLuaLlon where you have a long message Lo dlsplay and would
llke Lo prevenL lL from sLreLchlng Lo one long llne across Lhe screen
1he show conguraLlon ob[ecL also allows us Lo use Lhe cls opLlon Lo speclfy a CSS
class Lo apply Lo Lhe conLalner of Lhe dlalog A developer could use Lhls Lo LargeL any
chlld ob[ecLs of Lhe conLalner by uslng cusLom CSS rules poLenLlally pavlng Lhe way
for mulLlple dlalogs LhaL have LoLally dlfferenL appearances uo you need Lo provlde
a brlghLplnk pop up for your users? 1hls conguraLlon opLlon allows you Lo do Lhls
8ehavlor
So far Lhe conguraLlon opLlons for LxLMsgshow have addressed appearance
buL Lhere are a few opLlons LhaL can also ad[usL behavlor lf we use Lhe progress
properLy Lhen we can repllcaLe Lhe sLandard LxL !S progress dlalog
LxLMsgshow(progressLrue)
-
-
-
166
8y uslng Lhls ln Landem wlLh oLher opLlons such as LlLle and msg you can creaLe a
cusLom progress dlalog
Slmllarly Lhe prompL and mulLlllne opLlons allow Lhe creaLlon of a cusLom
lnpuL pop up
LxLMsgshow(prompLLrue mulLlllneLrue)
Pere we creaLe a pop up LhaL accepLs mulLlple llnes of lnpuL 8uL by omlLLlng Lhe
mulLlllne value or seLLlng lL Lo false we can llmlL Lhe pop up Lo a slngle llne
Agaln uslng Lhe oLher conguraLlon opLlons for LxLMsgshow allows us Lo expand
Lhls sample code lnLo a fullyfeaLured lnpuL dlalog
AnoLher opLlon LhaL changes Lhe defaulL behavlor of a pop up ls modal 1hls opLlon
allows you Lo speclfy wheLher Lhe user can lnLeracL wlLh Lhe lLems behlnd Lhe pop up
When seL Lo Lrue a semlLransparenL overlay wlll prevenL lnLeracLlon
As we have dlscussed earller Lhe LxLMsg pop ups donL block scrlpL execuLlon ln
Lhe same way as sLandard !avaScrlpL pop ups 1hls means LhaL we need Lo use a
callback Lo Lrlgger code afLer Lhe dlalog ls dlsmlssed We can do Lhls uslng shows
fn conguraLlon opLlon whlch geLs called wlLh Lwo argumenLs Lhe lu of Lhe buLLon
LhaL has been cllcked and Lhe LexL enLered lnLo Lhe LexL eld ln Lhe dlalog (where
Lhe dlalog lncludes an lnpuL eld) Cbvlously for a slmple alerL prompL youre noL
golng Lo recelve any LexL back buL Lhls funcLlon does provlde a conslsLenL means of
consumlng callbacks across Lhe whole range of dlalogs LhaL you can bulld uslng LxL
Msgshow
We brley Louched on Lhe facL LhaL Lhe LxLMsg messageboxes are acLually
cusLomlzed LxLWlndows lf you Lhlnk were able Lo Lweak LxLMsg a loLwalL Llll
you see whaL LxLWlndow can leL us do
Wlndows
Any compuLer user wlll be famlllar wlLh Lhe concepL of wlndows an lnformaLlonal
panel LhaL appears on Lhe screen Lo provlde more daLa on Lhe currenL users acLlons
We can repllcaLe Lhls concepL uslng Lhe LxLWlndow class a powerful componenL
LhaL supporLs many advanced scenarlos
SLarLlng examples
We can open a wlndow uslng a very mlnlmal amounL of code
var w new LxLWlndow(helghL100 wldLh 200)
wshow()
167
8unnlng Lhls glves you an empLy pop up wlndow LhaL ln lLself lswell compleLely
useless buL lL does show off a few of Lhe lnLeresLlng defaulL feaLures of an LxL
Wlndow SLralghL ouL of Lhe box wlLhouL any conguraLlon your wlndow wlll be
draggable reslzable and wlll have a handy close lcon ln Lhe upper rlghL corner of
Lhe dlalog box lLs sLlll noL a very lmpresslve demonsLraLlon however because our
wlndow doesnL acLually show anyLhlng
1he easlesL way Lo populaLe a wlndow ls wlLh plaln old P1ML Peres an exLended
example LhaL demonsLraLes Lhls feaLure
var w new LxLWlndow(
helghL 130 wldLh 200
LlLle A Wlndow
hLml h1Ch/h1pPl 1PL8L LvL8?CnL/p
)
wshow()
Weve added Lwo new conguraLlon opLlons here llrsL a LlLle opLlon LhaL allows
you Lo seL Lhe LexL ln Lhe LlLle bar of Lhe wlndow and second an hLml opLlon LhaL
accepLs a sLrlng of raw P1ML LhaL wlll be dlsplayed ln Lhe wlndow
1he use of Lhls approach ls lmmedlaLely apparenLwe can go back Lo baslcs and
ln[ecL whaLever P1ML we requlre dlrecLly lnLo Lhe conLenL area of Lhe wlndow 1hls
allows us Lo Lweak our wlndow rlghL down Lo Lhe markup level and provlde loLs
of CSS hooks for sLyllng Lven so lLs noL Lhe Lruly lnLegraLed experlence LhaL weve
come Lo expecL from LxL !S Powever anoLher conguraLlon opLlon leLs us Lake a
more famlllar approach
anellng poLenLlal
8emember LhaL Wlndow ls a subclass of anel and anel has all klnds of lnLeresLlng
Lrlcks up lLs sleeve 1he lLems conguraLlon opLlon accepLs an array of conguraLlon
ob[ecLs or componenL lnsLances
lLems
xLype LexLfleld fleldLabel llrsL name
new LxLform1exLlleld(fleldLabel Surname)

)
wshow()
168
ln Lhe above example we have added Lwo LexLflelds Lhe rsL one uslng lazy
xLype lnlLlallzaLlon and Lhe second one uslng sLandard ob[ecL lnlLlallzaLlon 1hese
Lwo lLems wlll be added Lo Lhe wlndows lnLernal panel buL Lhe manner ln whlch
Lhey are dlsplayed can be conLrolled based on Lhe wlndows layouL properLy
LayouL
LxL !S denes a number of layouL models wlLhln Lhe LxLlayouL package and
each of Lhese layouLs ls used wlLh a panel Lo allow Lhe componenLs wlLhln lL Lo be
arranged ln a speclc manner ln our prevlous example we showed how we can add
a couple of LexLboxes Lo a Wlndow buL we can also enhance Lhe appearance of Lhe
wlndow slmply by uslng Lhe approprlaLe layouL ln Lhls case we need LxLlayouL
lormLayouL whlch provldes supporL for eld labels and Lhe general spaclng and
poslLlonlng youd expecL from an edlL form
layouL form
lLems
xLype LexLfleld fleldLabel llrsL name
new LxLform1exLlleld(fleldLabel Surname)

)
wshow()
We use Lhe layouL conguraLlon opLlon Lo speclfy LhaL we wanL Lo use a form layouL
and lmmedlaLely Lhe dlfference ln appearance becomes clear ln Lhe nexL gure Lhe
rsL dlalog box does noL use a layouL and Lhe second one does
1hls ls noL a feaLure of LxLWlndow lL comes sLralghL from Lhe anel superclass 8uL
Lhe facL LhaL Wlndow supporLs Lhls feaLure ls exLremely lmporLanL for an appllcaLlon
developerespeclally when you conslder how long lL would Lake Lo creaLe a rlch
form uslng our prevlous P1ML ln[ecLlon Lechnlque 1he oLher layouLs wlLhln Lhe
LxLlayouL package provlde many more approaches Lo wlndows deslgn expandlng
Lhe scenarlos LhaL a wlndow can supporL
169
ConflguraLlon
ln addlLlon Lo Lhe varlous ways of lllng Lhe wlndows conLenL area we also have
a greaL deal of exlblllLy when lL comes Lo Lhe appearance and behavlor of each
pop up 1here are many conguraLlon opLlons provlded by Lhe LxLWlndows
superclass hlerarchy whlch sLarLs wlLh LxLanel whlle also havlng a wealLh of
opLlons of lLs own
When lm cleanlng wlndows
ln our very rsL wlndow example l demonsLraLed how we geL a number of greaL
feaLures for freereslzlng dragglng and a close buLLon Wlndows wlLh sLrlcL
layouLs arenL really meanL Lo be reslzed so we can prevenL Lhls behavlor wlLh Lhe
conguraLlon opLlon reslzable seL Lo false uragglng ls ofLen [usL a maLLer of
preference and ln mosL cases Lheres llLLle harm ln leavlng lL enabled 1haL sald Lhere
are Llmes when lLs slmply noL necessary funcLlonallLy so l prefer Lo dlsable lL by
uslng Lhe draggable opLlon seL Lo false
helghL30
wldLh 100
closable false
draggable false
reslzable false
)
wshow()
When uslng a form wlndow lLs ofLen preferable Lo have LexL buLLons explalnlng
LhaL dlfferenL acLlons wlll for example elLher save a record or cancel any changes
LhaL have been made and ln such cases Lhe close lcon can be dlsabled by havlng
Lhe closable opLlon seL Lo false 1heres a second opLlon LhaL glves a llLLle blL more
conLrol over Lhls behavlor closeAcLlon can be seL Lo elLher hlde or close wlLh
hlde slmply causlng Lhe wlndow Lo vanlsh buL noL desLroylng lL and close acLually
removlng Lhe wlndow from Lhe uCM 1hls ls an lmporLanL dlfference lf you Lhlnk
youre golng Lo be reuslng Lhe wlndow laLer as slmply hldlng and
reshowlng lL ls more efclenL Lhan recreaLlng Lhe wlndow every Llme
1he exLras
WlLh Lhe defaulL funcLlonallLy under conLrol we can begln Lo revlew Lhe ways we
can furLher Lweak and augmenL Lhe feaLures of Lhe LxLWlndow Weve already
demonsLraLed Lhe use of Lhe helghL and wldLh opLlons LhaL seL Lhe xed dlmenslons
of Lhe wlndow and crop any conLenL LhaL exceeds Lhese dlmenslons dlmenslons
170
We do have anoLher opLlon 1he auLoPelghL and auLoWldLh cong seLLlngs whlch
are boLh booleans allow you Lo ll your wlndow wlLh componenLs wlLhouL havlng Lo
Lo worry abouL ensurlng LhaL your helghL and wldLh values are absoluLely correcL
1hls ls a really useful Lool durlng developmenL when lLs unllkely LhaL you know Lhe
exacL dlmenslons of whaLever youre creaLlng [usL seL auLoPelghL and auLoWldLh
Lo Lrue and forgeL abouL lL Lven beLLer Lhese opLlons can be used separaLely so LhaL
you can seL your wldLh buL have Lhe helghL auLomaLlcally calculaLed 1hls ls useful
lf youre puLLlng dynamlc conLenL lnLo a wlndow because you wlll need Lo make
sure LhaL lL doesnL sLreLch Lhe wlndow off Lhe sldes of your screen
ueskLopplng
1he mosL pervaslve example of a wlndowlng sysLem ls Lhe compuLer deskLop wlLh
mulLlple wlndows represenLlng appllcaLlons or elemenLs of Lhe lesysLem ln such
sysLems users are allowed Lo hlde wlndows for laLer use or mlnlmlze Lhem Lheyre
also able Lo expand wlndows Lo ll Lhe screen or maxlmlze lL (also referred Lo as
maxlmlzlng Lhe wlndow) 1hese are famlllar Lerms and are of course supporLed by
LxLWlndow vla Lhe maxlmlzable and mlnlmlzable boolean conguraLlon opLlons
171
1hese feaLures are dlsabled by defaulL buL Lhey are fullyfeaLured and work ln much
Lhe same way as Lhelr deskLop equlvalenLs When seL Lo Lrue new lcons appear
ln Lhe upper rlghL of Lhe wlndow LhaL are slmllar ln appearance Lo Lhe ones on Lhe
Wlndows operaLlng sysLem Maxlmlzable allows Lhe wlndow Lo be expanded Lo ll
Lhe whole of Lhe browser vlewporL as expecLed buL mlnlmlzable ls a llLLle Lrlckler
LxL !S doesnL know where you wanL Lhe wlndow Lo vanlsh Loon Lhe Wlndows
operaLlng sysLem lL would be Lhe Lask bar buL for oLher operaLlng sysLems lL could
be somewhere else So youve goL Lo provlde Lhe mlnlmlze funcLlonallLy yourself
LxL only glves you Lhe lcon and a mlnlmlze evenL LhaL musL be handled ln a
manner approprlaLe Lo your appllcaLlon LaLer ln Lhls chapLer well provlde a
brlef example on how Lhls can be achleved uslng Lhe evenLs avallable for Lhe
LxLWlndow class
lurLher opLlons
LxL !S wlndows supporL anoLher means of cuLLlng down Lhe realesLaLe of your
wlndow and Lhls ls bullL rlghL lnLo Lhe framework 1he collapslble boolean adds
anoLher buLLon Lo Lhe upper rlghL of Lhe wlndow and allows Lhe user Lo shrlnk lL
down Lo cause only Lhe LlLle bar Lo be shown A second cllck expands Lhe wlndow
back Lo lLs orlglnal sLaLe
We can also use Lhe expandCnShow conguraLlon Lo speclfy LhaL a hldden wlndow
wlll always be expanded Lo lLs full dlmenslons when lL ls shown 1hls ls useful for
wlndows LhaL have been prevlously hldden and need Lo be broughL back Lo Lhe
users aLLenLlon
lramlng our wlndow
As well as Lhe sLandard LlLle bar and body conLenL area we also have Lhe ablllLy Lo
add furLher conLenL areas Lo a wlndow Some of Lhese areas can be fully cusLomlzed
and some are a llLLle blL more resLrlcLlve buL LogeLher Lhey provlde yeL anoLher
meLhod for creaLlng funcLlonal wlndows
Lvery wlndow has Lhe bullLln capablllLy Lo add Loolbars Lo Lhe Lop and Lhe boLLom
1hese Loolbars can lnclude any valld Loolbar lLems be lL buLLons menus or LexL ln
addlLlon we can use Lhe fooLer elemenL Lo conLaln some furLher buLLons vla Lhe
buLLons conguraLlon opLlon
172
uependlng on your requlremenLs you may choose Lo use one or more of Lhese
conLenL areas Lo provlde Lools Lo allow your users Lo manlpulaLe and consume Lhe
lnformaLlon wlLhln Lhe wlndow A Lyplcal example would be Lo creaLe a wlndow
wlLh a form layouL whlch Lhen lncludes Lhe Save and Cancel buLLons wlLhln Lhe
fooLer 1hls reecLs Lhe Lyplcal sLyle of a daLa enLry form and wlll be poslLloned
auLomaLlcally by LxL !S wlLh llLLle conguraLlon belng requlred
ManlpulaLlng
When our wlndows are onscreen we have a range of meLhods LhaL we can use Lo
change Lhelr poslLlon appearance and behavlor ln facL weve already used one of
Lhese meLhods ln our examplesshowwhlch ls used Lo dlsplay Lhe wlndow ln Lhe
rsL place AlLhough weve always used show ln lLs mosL slmple form lL can Lake up
Lo Lhree argumenLsall of whlch are opLlonal
myWlnshow(anlm1argeL funcLlon() alerL(now Showlng) Lhls)
llrsLly we can speclfy an elemenL or Lhe lu of an elemenL Lo form Lhe sLarLlng polnL
from whlch Lhe wlndow should anlmaLe when openlng 1hls cosmeLlc effecL can also
be specled uslng Lhe anlmaLe1argeL conguraLlon opLlon 1he second argumenL
ls a callback funcLlon red when Lhe renderlng of Lhe wlndow ls compleLe and Lhe
Lhlrd argumenL ls slmply Lhe scope for Lhe callback lL Lurns ouL Lhe show meLhod lsnL
so baslc afLer all!
1he obvlous companlon Lo show ls hlde lndeed lL Lakes Lhe same argumenLs and
wlll cause Lhe wlndow Lo vanlsh from Lhe screen for laLer use lf youre sure LhaL you
donL wanL Lo use Lhe wlndow laLer Lhen lLs probably beLLer Lo use Lhe close meLhod
whlch wlll remove lL from Lhe uCM and desLroy lL
173
1he funcLlonallLy dellvered by Lhe close and hlde meLhods has already been
demonsLraLedlL ls provlded by Lhe wlndows close lcon 1here are a few more
meLhods LhaL allow programmaLlc conLrol over lLems LhaL weve already covered
such as Lhe mlnlmlze and maxlmlze meLhods 1hls baslc funcLlonallLy ls augmenLed
by Lhe resLore meLhod whlch ls used afLer maxlmlze Lo reLurn Lhe wlndow Lo lLs
prevlous dlmenslons and LoggleMaxlmlze whlch ls slmply a shorLcuL Lo swlLch
beLween maxlmlze and resLore And ln Lerms of seLLlng Lhe wlndow back Lo lLs
defaulLs we can also use Lhe cenLer meLhod whlch seLs Lhe wlndow ln Lhe mlddle of
Lhe browsers vlewporL
We can furLher manlpulaLe Lhe poslLlon of our wlndows allgn1o allows a
developer Lo programmaLlcally move a wlndow Lo nexL Lo a specled elemenL
1hls meLhod has Lhree parameLers
1he elemenL Lo allgn Loas a sLrlng or full elemenL
1he poslLlon Lo allgn wlLhas deLalled ln Lhe LlemenLallgn1o
documenLaLlon and brley dlscussed ln ChapLer 10LffecLs
A poslLlonlng offseL specled as an xy array
1hls meLhod ls useful when you have an appllcaLlon wlLh a dynamlc
workspaceyou need Lo ensure LhaL your wlndows appear ln Lhe correcL place ln
relaLlon Lo oLher lLems belng dlsplayed A useful compllmenL Lo Lhls feaLure ls Lhe
anchor1o meLhod whlch Lakes Lhe same argumenLs and allows a wlndow Lo remaln
anchored Lo anoLher elemenL even when Lhe browser wlndow has been reslzed
or scrolled
Whlle many of Lhe LxLWlndow meLhods slmply glve a developer access Lo exlsLlng
funcLlonallLy vla Lhelr code Lhere are a few addlLlonal ones LhaL provlde for
advanced scenarlos or for feaLures LhaL would be laborlous Lo code by hand
LvenLs
reLLy much all of Lhe acLlons weve covered so far have Lhelr own evenLs LhaL serve
as hooks for your cusLom code Mlnlmlze ls one whlch weve expllclLly menLloned
earller because you have Lo handle Lhls evenL lf you wanL Lhe mlnlmlze lcon
Lo do anyLhlng ldeally youd expecL Lhe wlndow Lo be sLored ln some klnd of
LaskbarsLyle area for laLer reLrleval
helghL 30
wldLh 100
mlnlmlzable Lrue
)
won(mlnlmlze doMln)
wshow()
-
-
-
174
ln Lhe above example were creaLlng a new wlndow whlch we seL as mlnlmlzable
and Lhen add an evenL llsLener for Lhe mlnlmlze evenL We Lhen show Lhe wlndow on
Lhe screen Cur doMln evenL handllng funcLlon looks llke Lhls
funcLlon doMln()
wcollapse(false)
wallgn1o(documenLbody blbl)

We slmply Lell our wlndow Lo collapse down Lo Lhe LlLle bar (passlng ln a parameLer
of false slmply lndlcaLes LhaL we donL wanL Lo anlmaLe Lhe collapse) and Lhen use
Lhe allgn1o meLhod whlch weve dlscussed prevlously WlLh Lhe parameLers weve
chosen Lhe wlndows boLLom lefL wlll be allgned Lo Lhe boLLom lefL of Lhe documenL
body[usL llke Lhe rsL wlndow ln a Laskbar would be
Cf course wlLh furLher wlndows youd end up wlLh an overlapplng sLack ln Lhe
boLLomlefL noL ldeal for a real world appllcaLlon Powever lL does show how
Lhe mlnlmlze evenL can be handled and can be used as an alLernaLlve Lo Lhe
collapse meLhod
SLaLe handllng
SLaLe handllng wlLh wlndows ls a relaLlvely slmple process Wlndows are fully
lnLegraLed wlLh Lhe sLandard LxL !S sLaLe managemenL faclllLles vla Lhe sLaLeful
conguraLlon ag Assumlng LhaL we wanL Lo Lrack Lhe poslLlon mlnlmlze sLaLus
slze and zorder of a wlndow Lhrough page refreshes and user sesslons we can
use code such as Lhls
sLaLeful Lrue
sLaLeevenLsreslze // Lrack Lhe reslze evenL reslze // Lrack Lhe reslze evenL reslze // Lrack Lhe
reslze evenL // Lrack Lhe reslze evenL // Lrack Lhe reslze evenL
)
We use Lhe sLaLeevenLs opLlon Lo seL an array of wlndow evenLs whlch wlll
cause Lhe componenL Lo save lLs sLaLe unllke sLaLe handllng wlLh Lhe 1reenodes
ln ChapLer 8LxL !S uoes Crow Cn 1rees we donL need Lo hook lnLo Lhe
beforesLaLesave evenL Lhls Llme around 1he wlndow componenL wlll look afLer
lLself and auLomaLlcally seL lLs conguraLlon Lo reecL lLs prevlous sLaLe
173
Wlndow managemenL
ln a rlch lnLerneL appllcaLlon lL can be deslrable Lo allow Lhe user Lo have many
wlndows open slmulLaneously revlewlng a varleLy of lnformaLlon wlLhouL havlng
Lo navlgaLe Lo separaLe pages LxL !S allows for Lhls you can creaLe any number
of nonmodal wlndows and manlpulaLe Lhem as you see L Powever we face a
problem when uslng a mulLlLude of wlndowshow do we manage Lhem as a group?
lor example Lhe users may wlsh Lo clear Lhelr workspace by mlnlmlzlng all open
wlndows We can achleve Lhls funcLlonallLy and more by uslng a wlndow group
uefaulL wlndow manager behavlor
When you creaLe an LxLWlndow lL wlll auLomaLlcally be asslgned Lo a defaulL
LxLWlndowCroup whlch by defaulL can always be referred Lo vla Lhe
LxLWlndowMgr class Powever you can creaLe as many addlLlonal WlndowCroups
as your appllcaLlon requlres asslgnlng wlndows Lo Lhem vla Lhe manager
conguraLlon opLlon
Why would your appllcaLlon requlre a meLhod of grouplng wlndows? Well mulLlple
wlndows are affecLed by zorder ln LhaL Lhey can be sLacked on Lop of each oLher
We can use WlndowMgrbrlng1olronL Lo brlng a parLlcular wlndow Lo Lhe Lop of
Lhe sLack perhaps lf lL has been updaLed wlLh new lnformaLlon and we wanL Lo
draw Lhe users aLLenLlon Lo Lhls ln some slLuaLlons Lhls would be Lhe same as uslng
LxLWlndowLolronL Powever Lhe WlndowMgr approach wlll respecL Lhe zorder
grouplng of lndlvldual WlndowCroups and so ls a safer meLhod when bulldlng a
large appllcaLlon wlLh many wlndowlng opLlons
1he grouplng and zorderlng of wlndows ls a confuslng Loplc so leLs puL Lhese
advanced feaLures lnLo a realworld conLexL
MulLlple wlndow example
Were golng Lo bulld a very baslc slmulaLlon of a cusLomer servlce appllcaLlon Cur
user wlll be Lhe supervlsor of a llve chaL sysLem where cusLomers who are onllne
can ask quesLlons and geL answers sLralghL away 1he supervlsor wlll Lake some of
Lhese quesLlons buL Lhey also monlLor Lhe sLaLus of oLher agenLs who are deallng
wlLh cusLomer sesslons Well only be lnLeresLed ln Lhe wlndowlng aspecL of Lhls
appllcaLlon so lLs golng Lo be lled wlLh a loL of dummy daLa Lo lllusLraLe our polnL
176
Peres a screenshoL of Lhe a slmple appllcaLlon developed Lo supporL Lhls
1he llsLs have dellberaLely been lefL plaln Lo avold Lhe need for exLra !avaScrlpL dellberaLely been lefL
plaln Lo avold Lhe need for exLra !avaScrlpL been lefL plaln Lo avold Lhe need for exLra !avaScrlpL
codean appllcaLlon such as Lhls could really beneL from grlds or daLa vlews
dlsplaylng Lhe sesslons and agenLs buL we really donL need Lhem [usL Lo demonsLraLe
our wlndowlng code
Were golng Lo use a !avaScrlpL ob[ecL llLeral Lo sLrucLure our example Peres
Lhe shell
var cusLomerServlce
sesslonsCroup null
agenLsCroup null

lnlL funcLlon()

LxLon8eady(cusLomerServlcelnlL cusLomerServlce)
We have a couple of local varlables LhaL wlll hold our wlndow groups and an empLy
lnlL funcLlon LhaL geLs called wlLh Lhe cusLomerServlce ob[ecL as lLs scope from
Lhe LxLon8eady sLaLemenL now LhaL weve goL our !avaScrlpL skeleLon we need Lo
Lake a look aL Lhe markup LhaL ls golng Lo power our cusLomer servlce app
dlv ldmySesslons
h2My Sesslons
buLLon ldhldeSesslonsPlde All/buLLon
buLLon ldLlleSesslons1lle/buLLon
/h2
dlv ldsp1
177
h38lll/h3
pSLarLed aL 1231pm/p
dlv classconLenL/dlv
/dlv
/dlv
dlv ldagenLs
h2AgenLs
buLLon ldhldeAgenLsPlde All/buLLon
buLLon ldLlleAgenLs1lle/buLLon
/h2
dlv ldah1
h3Peldl/h3
pls deallng wlLh 3 sesslons/p
dlv classconLenL/dlv
/dlv
/dlv
1hls ls Lhe P1ML LhaL wlll go sLralghL lnLo Lhe body of our documenL Weve goL
Lwo maln conLalnersmySesslons and agenLswhlch Lhen conLaln h2 Lags wlLh
a few buLLons and some dlv Lags lor example wlLhln mySesslons we have Lhe
dlv #sp1 conLalnlng an h3 a paragraph and anoLher dlv wlLh Lhe conLenL class
1he #sp1 dlv ls one of many LhaL could appear wlLhln mySesslons wlLh Lhese dlvs
belng named as #sxxx wlLh xxx belng a unlque ldenLler for LhaL sesslon
WlLhln agenLs we have a slmllar sLrucLure wlLh sllghLly dlfferenL lusfor example
Lhe agenL dlvs are named as #axxx 1he varlous lus ln Lhe P1ML are exLremely
lmporLanL for our !avaScrlpL as Lheyll be used Lo hook up evenL handlers as well
see ln a momenL LeLs Lake a look aL our full lnlL funcLlon (noLe LhaL each code
snlppeL wlll bulld on whaL came before)
lnlL funcLlon()
var s LxLselecL
var g LxLgeL
LhlssesslonsCroup new LxLWlndowCroup()
LhlsagenLsCroup new LxLWlndowCroup()

s(#mySesslons dlv)on(cllck LhlsshowSesslon Lhls)
s(#agenLs dlv)on(cllck LhlsshowAgenL Lhls)

1he rsL Lwo llnes of Lhls block of code are [usL shorLcuLs Lo clean up our codewere
sLorlng references Lo Lhe LxL funcLlons ln a varlable wlLh a smaller name noLhlng
fancy 1he nexL Lwo llnes see us creaLlng Lwo dlsLlncL wlndow groupsone LhaL wlll
hold our sesslon lnformaLlon wlndow and one for Lhe agenL lnformaLlon wlndows
178
1he nexL few llnes make more sense glven Lhe P1ML we dlscussed prevlously
We use our shorLcuL Lo LxLselecL Lo add evenL llsLeners Lo all of Lhe dlvs
wlLhln #mySesslonshandled by Lhe showSesslon funcLlonand wlLhln
#agenLshandled by showAgenL 1he Lhlrd argumenL Lo Lhe on funcLlon ensures
LhaL we malnLaln scope when Lhe handlers are called LeLs Lake a look aL Lhe
showSesslon funcLlon
showSesslon funcLlon(e)
var LargeL egeL1argeL(dlv 3 Lrue)
var sesslonld LargeLdomld + wln
var wln LhlssesslonsCroupgeL(sesslonld)
lf(!wln)
wln new LxLWlndow(
manager LhlssesslonsCroup
ld sesslonld
wldLh 200
helghL 200
reslzable false
closable false
LlLle LargeLdown(h3)domlnnerP1ML
hLml LargeLdown(conLenL)domlnnerP1ML
)

wlnshow()
wlnallgn1o(LargeL)

1heres a loL happenlng here 1he rsL llne ensures LhaL our LargeL varlable conLalns
Lhe sesslon dlv LhaL was cllcked on regardless of wheLher lL was acLually one of Lhe
sesslons chlld elemenLs LhaL was cllcked We Lhen sLore a unlque sesslonld by
Laklng Lhe lu of Lhe LargeL sesslon dlv and appendlng wln Lo lL llnally we check lf
Lhe sesslon wlndow group already has a reference Lo Lhe wlndow LhaL were abouL Lo
creaLe by looklng lL up uslng Lhe unlque sesslonld
lf Lhe wlndow doesnL exlsL Lhen we need Lo creaLe lL MosL of Lhe conguraLlon
opLlons shown wlll be famlllar from earller ln Lhls chapLer buL Lake noLe of our
expllclL asslgnmenL of Lhe sesslonsCroup as Lhe managlng group for Lhls wlndow
Were also uslng Lhe sesslonld as Lhe lu for Lhe wlndow raLher Lhan relylng on Lhe
auLomaLlcallygeneraLed lu LhaL wlll be used by defaulL WlLh Lhe LlLle and hLml
opLlons were uslng Lhe LxLLlemenL uCM Lraversal faclllLles Lo asslgn Lhe LexL of
Lhe sesslon dlvs h3 and dlvconLenL elemenLs respecLlvely
179
Were now sure LhaL Lhe wln varlable holds a valld reference Lo a wlndow so we
can go ahead and show Lhe wlndow AfLer we do so we wanL Lo allgn lL wlLh Lhe
dlv LhaL was cllcked Lo show lL so Lhe wlndows allgn1o funcLlon ls called 1haLs
a whlsLlesLop Lour of Lhe showSesslon funcLlon 1he showAgenL funcLlon ls almosL
ldenLlcal buL refers Lo agenLsCroup raLher Lhan sesslonsCroup 1ogeLher Lhese Lwo
funcLlons make sure LhaL our sesslon and agenL wlndows pop up successfully so lLs
now Llme Lo Lake a look aL how our WlndowCroups can be used Lo manage Lhem as
a unlL
CusLomer servlce WlndowCroups
We can add Lwo llnes Lo our lnlL funcLlon LhaL use wlndow groups Lo perform a
clearouL of our cusLomer servlce workspace
g(hldeSesslons)on(cllck LhlssesslonsCrouphldeAll)
g(hldeAgenLs)on(cllck LhlsagenLsCrouphldeAll)
We can add evenL llsLeners Lo our hldeSesslons and hldeAgenLs buLLons LhaL are
dlrecLly handled by Lhe hldeAll funcLlons of Lhe sesslonsCroup and agenLsCroup
1hls shorL code snlppeL allows us Lo hlde all of Lhe agenL or sesslon wlndows wlLh
a cllck on Lhe assoclaLed buLLon ln a slmllar veln were golng Lo add a couple more
evenL llsLeners Lo our oLher buLLons LhaL wlll cause our wlndows Lo be Llled across Lhe
screenorganlsed lnLo an easy overvlew
g(LlleAgenLs)on(cllck LhlsLlleAgenLs Lhls)
g(LlleSesslons)on(cllck LhlsLlleSesslons Lhls)
1hls Llme Lhe evenLs are handled by LlleAgenLs and LlleSesslons LhaL look
llke Lhls
LlleAgenLs funcLlon(e)
LhlssesslonsCrouphldeAll()
LhlsLlle(LhlsagenLsCroup)

LlleSesslons funcLlon(e)
LhlsagenLsCrouphldeAll()
LhlsLlle(LhlssesslonsCroup)

Agaln we call Lhe hldeAll funcLlon Lo make sure LhaL Lhe oLher seL of wlndows ls
cleared from Lhe screen When weve prepared Lhe workspace we can Lhen pass Lhe
relevanL wlndow group Lo Lhe Llle funcLlon
Llle funcLlon(group)
var prevlousWln null
groupeach(funcLlon(wln)
180

lf(prevlousWln)
lf(wlngeLLl()geLWldLh() + prevlousWlngeLLl()geL8lghL()
LxLgeL8ody()geLWldLh())
wlnallgn1o(documenLbody LlLl
0 prevlousWlngeLLl()geLPelghL())
else
wlnallgn1o(prevlousWlngeLLl() LlLr)

else
wlnallgn1o(documenLbody LlLl)

prevlousWln wln
)

1he key here ls Lhe WlndowCroupeach funcLlon whlch allows us Lo loop Lhrough
every wlndow asslgned Lo Lhe group and perform furLher acLlons and calculaLlons
ln Lhls case lf lLs our rsL lLeraLlon Lhen we allgn Lhe wlndow Lo documenLbody
lor furLher lLeraLlons Lhe wlndows are allgned Lo Lhe prevlous wlndow ln Lhe
loop Laklng care Lo add a verLlcal offseL lf Lhe wlndow would have pushed off Lhe
rlghLmosL slde of Lhe screen
hldeAll and each are useful ways of manlpulaLlng mulLlple wlndows ln Lhls
example weve shown how Lwo dlsLlncL groups of wlndows can be handled wlLh
very llLLle codlng overhead
Summary
lor me Lhe LxLWlndow ls one of Lhe mosL fundamenLal aspecLs of a rlch LxL !S
appllcaLlon Many of Lhe oLher blg componenLs wlLhln Lhe framework such as Lhe
grld and Lree can dlsplay lnformaLlon ln an easllyconsumable and browsable
manner buL Lhe chances are LhaL lf you need Lo dlsplay or manlpulaLe a record wlLh
a loL of lnformaLlon need and do so wlLhouL dlsrupLlng Lhe users workow by
navlgaLlng Lo a dlfferenL page youre golng Lo wanL Lo use a wlndow
181
1he greaL Lhlng ls LhaL Wlndow ls exlble enough Lo sloL sLralghL lnLo any appllcaLlon
you may wanL Lo bulld wlLh lL lor ulLlmaLe power slmply ll lL wlLh cusLom
P1ML or Lo creaLe an lnLegraLed experlence use LxL componenLs 1he facL ls LhaL Lhe
wlndow subclasses panel provldes you wlLh Lhe ablllLy Lo consLrucL complex pop
ups by uslng Lhe mosL sulLable LxLlayouLbe LhaL of a form or an accordlon or
whaLeverand have lL look and feel Lhe same as Lhe resL of your appllcaLlon
AlLhough wlndows and dlalogs wlll mosL llkely have a place ln your appllcaLlon
Lhey should be used wlLh care 1heres a Lendency Lo ldenLlfy a requlremenL for
dlsplaylng exLra lnformaLlon and slmply popplng lL up ln Lhe users face lL could be
LhaL a less dlsrupLlve lnLerface would be more sulLable ulLlmaLely Wlndow and Msg
slL alongslde Lhe oLher parLs of LxL !S as Lools LhaL can be easlly lnLegraLed lnLo any
appllcaLlon LhaL requlres Lhem
Am Pllllgenbusch 47 aderborn n8W 33098LffecLs
1he easlesL Lhlng Lo do when wrlLlng a sofLware appllcaLlon ls Lo swlLch lnLo
programmer modeLo focus on Lhe code and noL on Lhe end user experlence 1he
archlLecLure of a sysLem ls exLremely lmporLanL buL lf Lhe user ls noL saLlsed wlLh
Lhelr lnLeracLlons wlLh Lhe sysLem Lhen Lhe pro[ecL can only be seen as a fallure
LxL !S conLrlbuLes Lo solvlng Lhls lssue by provldlng many sllck componenLs LhaL
reacL well Lo user lnpuL and malnLaln a conslsLenL look and feel across Lhe enLlre
framework leel ls a very fuzzy word when lL comes Lo sofLware deslgn Lhe way
a llnk acLs when you hover over lL or Lhe way ln whlch a wlndow appears onscreen
can be Lhe dlfference beLween a pleasurable experlence and a confuslng one
Many of LxL !Ss componenLs have LranslLlonal anlmaLlons bullL ln by defaulL
allowlng you Lo smooLhly expand a Lreenode raLher Lhan suddenly pop lL open or Lo
shrlnk down a wlndow Lo a specled buLLon LhaL can be used Lo reacLlvaLe lL laLer
leaLures llke Lhls arenL [usL an added layer on Lop of Lhe resL of Lhe LxL framework
Lheyre baked ln aL a low level Lo provlde a conslsLenL experlence for boLh Lhe
developer and Lhe end user
lLs elemenLary
1he LxLLlemenL underlles many of Lhe feaLurerlch wldgeLs ln LxL !S lndeed Lhe
LxLComponenLgeLLl meLhod reecLs Lhe facL LhaL wldgeLs such as wlndows form
elds and Loolbars are supporLed by Lhls fundamenLal bulldlng block
LxLLlemenL mlxes many meLhods from LxLlx Lhe class LhaL ls deslgned Lo
provlde sllck LranslLlons and anlmaLlons for P1ML elemenLs and componenLs allke
Were golng Lo dlscuss Lhe exclLlng posslblllLles LhaL LxLlx provldes and also Lalk
abouL Lhe way ln whlch lL works LogeLher wlLh LxLLlemenL
184
lancy feaLures
As well as Lhe bulldlng blocks of anlmaLlon were golng Lo examlne varlous pleces of
eye candy LhaL you can nd doLLed around Lhe LxL framework 1here are a number
of classes LhaL provlde added funcLlonallLy Lo glve your users feedback or asslsLance
when Lheyre uslng your appllcaLlon and many componenLs supporL Lhese feaLures
sLralghL ouL of Lhe box We can also use Lhem ln a sLandalone manner Lo creaLe
rlch LoolLlps mask lLems LhaL are ln Lhe process of loadlng new daLa or hlghllghL
lndlvldual parLs of Lhe screen Lo draw Lhe users aLLenLlon Lo Lhem
lLs ok Lo love
ln LruLh many of Lhe funcLlons were golng Lo cover ln Lhls chapLer are superclal
ln naLure 1hey add some whlzzbang LranslLlons LhaL are noL sLrlcLly essenLlal
1here are Lwo llnes of defense for crlLlclsm llrsLly a good developer undersLands
LhaL users are noL machlnesLheyre peopleand a llLLle blL of whlzzbang ls good
for everyone Secondly and perhaps more sclenLlcally lLs much beLLer Lo have
a LranslLlon Lo slgnlfy a change Lhan slmply have someLhlng appear A LranslLlon
draws Lhe eye and glves Lhe user Lhe opporLunlLy Lo consume Lhe vlsual cue LhaL
was presenLed
A sudden change on screen resulLs ln a whaL happened response a smooLh
LranslLlon provldes a hlnL as Lo whaLs golng on As we Lour Lhe varlous feaLures of
LxLlx bear ln mlnd LhaL Lhey can be used for more Lhan [usL eyecandy Lheyre
greaL for addlng value Lo your user experlence
lxcellenL funcLlons
LxLlx ls presenLed as a sLandalone class archlLecLurally lndependenL of LxL
LlemenL buL ln reallLy lL cannoL be used on lLs own lnsLead lL ls auLomaLlcally
mlxed lnLo Lhe meLhods and properLles of Lhe LxLLlemenL class so LhaL each acLlon
from LxLlx ls avallable for each LxLLlemenL lnsLance 1he examples LhaL follow
wlll lllusLraLe Lhls polnL
MeLhodlcal madness
As menLloned earller LxLlx has a range of meLhods LhaL are called upon Lo perform
Lhe maglc Lach of Lhese meLhods ls avallable for LxLLlemenL lnsLances So ln Lhe
examples LhaL follow were golng Lo assume LhaL you have a dlv elemenL wlLh an lu
of LargeL on your readyLogo P1ML page
183
ladlng
1he Lerm fadlng ls used ln LxLlx Lo refer Lo a change ln opaclLyfrom 100
opaque Lo 0(fade ouL) and vlce versa(fade ln) ln oLher words were maklng
someLhlng dlsappear and reappearbuL as Lhls ls Lhe LffecLs chapLer Lhe LranslLlon ls
anlmaLed 1he Lwo meLhods LhaL perform Lhese LranslLlons are LxLlxfadeCuL and
LxLlxfadeln and boLh supporL slmple zeroargumenL usage
LxLgeL(LargeL)fadeCuL()
wlndowseL1lmeouL(funcLlon()
LxLgeL(LargeL)fadeln()
3000)
1hls usage wlll cause Lhe LargeL elemenL Lo fade away slowly unLll lL ls compleLely
lnvlslble 1he LlmeouL happens Lhree seconds laLer and causes Lhe LargeL Lo slowly
reappear or fade ln unLll lL ls fully vlslble agaln
?ou can Lweak Lhe behavlor of Lhese meLhods uslng Lhe endCpaclLy conguraLlon
opLlon ln Lheory Lhls allows you Lo speclfy LhaL Lhe elemenL wlll noL fade ouL Lo
compleLe lnvlslblllLy whlch can be useful lf you slmply wanL Lo lndlcaLe LhaL an lLem
ls now less lmporLanL AlLernaLlvely you can use lL Lo dlcLaLe LhaL an lLem wlll noL
reLurn Lo LoLal solldlLy
LxLgeL(LargeL)fadeCuL(endCpaclLy023)
LxLgeL(LargeL)fadeln(endCpaclLy 073)
3000)
noLe LhaL l say ln Lheory acLually a llmlLaLlon ln LxL !S 22 means LhaL Lhe lLem ln
quesLlon wlll acLually [usL vanlsh afLer reachlng Lhe endCpaclLy ld expecL Lhls Lo be
xed ln Lhe nexL release of Lhe framework
ln Lhe example [usL glven Lhe lnlLlallysolld lLem ls supposed Lo fade ouL Lo
one quarLer opaclLy before belng resLored afLer Lhree seconds Lo only Lhree Lo only Lhree
quarLers opaclLy
186
ln addlLlon Lo Lhe conguraLlon opLlons such as endCpaclLy LhaL are speclc Lo
lndlvldual effecLs meLhods Lhere are also a number of common opLlons shared by all
LxLlx meLhods 1hese allow you Lo Lweak Lhe behavlor of your effecLs even furLher
Well dlscuss Lhese laLer ln Lhls chapLer
lramlng
lramlng ls remlnlscenL of a vldeo game radar plng lL radlaLes ouL from Lhe polnL
of orlgln fadlng away wlLh dlsLance A greaL use of Lhls feaLure ls Lo hlghllghL a
parLlcular elemenL on Lhe screenand Lhe LxLlxframe meLhod also allows us Lo
ensure LhaL Lhe users aLLenLlon ls drawn by uslng mulLlple plngs 1he slmplesL way
of uslng lL ls wlLhouL argumenLs
LxLgeL(LargeL)frame()
1hls causes Lhe LargeL elemenL Lo radlaLe a slngle llghL blue plng Lo draw aLLenLlon Lo
Lhe elemenL whlch may be useful ln some scenarlos Powever Lo make sure LhaL Lhe
user knows abouL a more lmporLanL evenL we could use someLhlng llke Lhls
LxLgeL(LargeL)frame(ff0000 3)
1he rsL argumenL ls Lhe hexadeclmal color of Lhe framlng effecL ln Lhls case an
angry red 1he second argumenL specles Lhe number of Llmes Lhe plng ls Lo be
repeaLed So here were uslng Lhree red pulses Lo lndlcaLe LhaL someLhlng preLLy bad
ls abouL Lo happen
1hese are Lhe real sLrengLhs of Lhe frame meLhod repeLlLlon and Lhe ablllLy Lo use
dlfferenL colors Lo represenL dlfferenL slLuaLlons and prlorlLles
Woooo ghosLlng
ChosLs!or raLher ghosLlngLhls ls Lhe Lerm LxL !S glves Lo fadlng an elemenL whlle
lL moves ln a specled dlrecLlon 1hls effecL ls used Lo glve Lhe lmpresslon LhaL an
elemenL ls LranslLlonlng from one area Lo anoLher for example Lhe acL of paglng
Lhrough a number of lmages could Lrlgger ghosLlng when Lhe nexL or prevlous llnk
ls selecLed 1he defaulL usage of ghosL causes Lhe elemenL Lo drop down whlle
fadlng ouL
LxLgeL(LargeL)ghosL()
187
1he defaulL seLLlngs could be used Lo dlscard elemenLs LhaL are no longer
neededperhaps deleLlon evenLs could be slgnled wlLh a call Lo LxLlxghosL As
menLloned prevlously we can also caLer for oLher slLuaLlons by speclfylng dlfferenL
dlrecLlon for Lhe ghosLlng dependlng on Lhe slLuaLlon 1he sLandard LxLlx anchor
polnLs used ln anlmaLlon and allgnmenL can also be used wlLh Lhe ghosL meLhod
LxLgeL(LargeL)ghosL(Lr)
Pere we lndlcaLe LhaL Lhe LargeL wlll ghosL ouL ln Lhe dlrecLlon of lLs upperrlghL
corner buL any anchor polnL ls accepLed Well Lalk more abouL anchorlng laLer ln
Lhe chapLer 8uL lL ls Lhls parameLer LhaL would allow us Lo repllcaLe Lhe paglng
funcLlonallLy whlch was descrlbed earller LhaL ls we can use lefL and rlghL anchor
polnLs Lo move Lhe ghosL ln Lhe relevanL dlrecLlons
PlghllghLlng
lf youre famlllar wlLh Lhe Lerm Web 20 Lhen you may also have heard of Lhe
yellow fade Lechnlque A qulck web search wlll Lurn up numerous references Lo
Lhls !avaScrlpL feaLure whlch became popular when Web 20 was rsL becomlng a
buzzword 1yplcally used when an acLlon has been compleLed and Lhe user has been
redlrecLed Lo a new page Lhls effecL causes a porLlon of Lhe pageofLen an error
messageLo have lLs background hlghllghLed ln a dlfferenL color 1he hlghllghL
slowly fades away over a few seconds 1radlLlonally Lhe hlghllghLed color has been a
frlendly yellow buL for error messages we mlghL favor someLhlng sLronger Pavlng
sald LhaL yellow ls Lhe defaulL for LxLlxhlghllghL
188
1hls ls Lrlggered by Lhe followlng baslc code
LxLgeL(LargeL)hlghllghL()
LxL !S Lakes hlghllghLlng Lo Lhe nexL level Whlle Lhe sLandard usage affecLs Lhe CSS
background color of Lhe LargeL elemenL you can choose any CSS properLy such as
Lhe color or border color ?ou can also speclfy Lhe endColor of Lhe hlghllghL ln our
second and more complex example we can cause Lhe LexL lLself Lo sLarL ouL whlLe and
end up green
LxLgeL(LargeL)hlghllghL(ffffff
aLLr color
endColor 00ff00
)
1hls ls an exLremely exlble meLhod LhaL can be used Lo hlghllghL large porLlons of
a pageperhaps a eldseL ln a form or [usL a block of LexLperhaps ln an onllne
spellchecker 1he polnL Lo be noLed ls LhaL we can use lL Lo respond and reacL Lo
user lnpuL and use lLs exlblllLy Lo lndlcaLe Lhe sLaLe of our sysLem ln a
noLlceable manner
Pufflng and pufflng
LxLlxs puff meLhod Lrles Lo repllcaLe Lhe look of a puff of smoke slowly
dlsslpaLlng lnLo Lhe alr Whlle some of Lhe LxLlx effecLs are used Lo hlghllghL areas
puff ls used Lo LranslLlon an elemenL off Lhe screen 1o do Lhls Lhe elemenL expands
whlle becomlng more LransparenL evenLually fadlng away compleLely uff doesnL
have any speclal opLlons of lLs own so Lhe defaulL usage ls preLLy obvlous
LxLgeL(LargeL)puff()
uff could be used wlLh a qulck LranslLlon Lo dlsmlss a wlndow from Lhe workspace
or a slower LranslLlon could lllusLraLe Lhe removal of an elemenL maybe an lmage
from a gallery Powever Lhere ls one lmporLanL polnL Lo noLe abouL Lhls meLhod
when used wlLhln Lhe documenL ow lL wlll affecL Lhe poslLlon of Lhe elemenLs
around lL
AlLhough absoluLelyposlLloned wlndows wlll noL affecL Lhelr surroundlngs ln our
gallery example lL ls posslble LhaL when you use puff youll geL unexpecLed resulLs
as Lhe expandlng dlmenslons push your oLher lmages ouL of Lhe way
uevelopers who are aware of Lhe poLenLlal slde effecLs of uslng LxLlxpuff can
add lL Lo Lhelr LoolklL provldlng anoLher lnLeresLlng meLhod of creaLlng dynamlc
LranslLlons ln Lhelr appllcaLlons
189
Scallng Lhe LxL !S helghLs
Scallng ls one of Lhe few LxL !S effecLs LhaL has a speclc use raLher Lhan slmply
belng an overlay on Lop of anoLher acLlon lL changes Lhe dlmenslons of an elemenL
uslng a smooLh LranslLlon whlch has numerous appllcaLlons We can expand LexL
areas Lo glve more space for user lnpuL we can repllcaLe maxlmlze and resLore effecLs
seen ln Lhe wlndowlng appllcaLlons we can change Lhe focus of a workspace by
shrlnklng one porLlon and expandlng anoLher 1he baslc usage of LxLlxscale
looks llke Lhls
LxLgeL(LargeL)scale(30 130)
ln Lhls example Lhe LargeL elemenL wlll be smooLhlyscaled Lo a wldLh of 30 plxels
and a helghL of 130 plxels 8oLh of Lhese opLlons also accepL null values whlch
lndlcaLe LhaL Lhey should noL be changed 1hls ls useful lf you wanL Lo resLrlcL Lhe
scale Lo only horlzonLally or verLlcally
LxLlxscale works only wlLh Lhose elemenLs LhaL have Lhelr dlsplay
sLyle seL Lo block Lo allow Lhe wldLh and helghL changes Lo Lake effecL
uslng lL on lnllne elemenLs wonL Lrlgger an error buL you wlll noL see any
change ln Lhe dlmenslons of Lhe elemenL elLher
Slldlng lnLo acLlon
WlLhln LxL !S slldlng refers Lo Lhe LranslLlon of an elemenL lnLo or ouL of vlew 1hls ls
Lhe same effecL used ln Lhe LxLlxghosL meLhod so weve seen lL ln acLlon already
8uL ln reallLy Lhere are Lwo meLhods LhaL fall under Lhls headlngLxLlxslldeln
and LxLlxslldeCuL
We can use Lhese meLhods Lo elLher drop ouL an elemenL LhaL ls no longer requlred
or lnLroduce a new elemenL onLo Lhe screen An obvlous appllcaLlon for Lhls would
be addlLlon and deleLlon of records where new lLems slldeln Lo Lhe llsL and deleLed
lLems slldeCuL
LxLgeL(LargeL)slldeCuL()
LxLgeL(LargeL)slldeln()
3000)
ln Lhe above example we move Lhe LargeL ouL of vlew and Lhree seconds laLer brlng
lL back ln 8y defaulL elemenLs wlll slldeln and slldeCuL from Lhelr Lop edge
buL Lhe rsL argumenL Lo boLh funcLlons allows you Lo use anchors Lo speclfy Lhe
dlrecLlon of Lhe movemenL
LxLgeL(LargeL)slldeCuL(Lr)
190
Pere we dlcLaLe LhaL Lhe LargeL wlll slldeCuL Lo Lhe Lop rlghL As wlLh LxLlxpuff
you musL be aware of Lhe elemenLs LhaL surround Lhe lLem youre slldlng LexL and
oLher nonabsoluLelyposlLloned elemenLs may be pushed around durlng Lhe sllde
SwlLchlng from seen Lo unseen
1he swlLchCff meLhod ls anoLher means of removlng an elemenL from Lhe screen
1hls one comblnes Lwo acLlons rsLly a Lhe elemenL fades sllghLly Lo acknowledge
Lhe sLarL of Lhe effecL and Lhen Lhe elemenL slowly collapses from Lhe Lop and Lhe
boLLom unLll lL dlsappears 1hls LwosLage effecL means lL can be used Lo draw Lhe
users eye before Lhe real vanlshlng acL Lakes place We can use LxLlxswlLchCff ln
Lhe followlng way
LxLgeL(LargeL)swlLchCff()
As you can see Lhere are no unlque argumenLs for Lhls meLhod so lL would seem LhaL
youre sLuck wlLh Lhe defaulL effecL 8uL laLer well dlscuss Lhe conguraLlon opLlons
LhaL are avallable for all of Lhe LxLlx meLhodsLhe secreL Lo compleLe conLrol over
your effecLs
SwlLchCff comes ln preLLy handy ln slLuaLlons where youd llke Lo cause an elemenL
Lo vanlsh wlLhouL user lnLeracLlon lor example you mlghL have some klnd of
monlLorlng screen on your webslLe LhaL dlsplays Lhe currenL vlslLors Lo your slLe
and Lracks Lhem as Lhey move beLween pages When Lhelr sesslon explres Lhey wlll
be removed from Lhe llsL 8aLher Lhan slmply LranslLlonlng off Lhe screen you can
hlghllghL Lo Lhe user LhaL Lhls ls abouL Lo happen uslng swlLchCff a qulck ash Lo
lndlcaLe LhaL Lhe acLlon ls abouL Lo occur and Lhen Lhe acLual collapse LranslLlon
ShlfLlng
1he LxLlxshlfL meLhod may sound llke a funcLlon ln Lhe same veln as ghosL
and slldeCuL buL ln acLual facL lLs a llLLle dlfferenL 1heres no defaulL behavlor
assoclaLed wlLh Lhe meLhod so slmply call lL ln Lhls fashlon
LxLgeL(LargeL)shlfL()
1hls wlll have no effecL lnsLead shlfL musL be supplled wlLh a llLeral conLalnlng
one or more values from Lhe followlng
wldLh
helghL
x
y
-
-
-
-
191
8y seLLlng one of Lhese values and passlng lL Lo shlfL we can cause Lhe LargeL
elemenL Lo move Lo Lhe xy coordlnaLes and reslze Lo Lhe wldLh helghL
dlmenslonsln Lhe smooLh manner whlch weve come Lo expecL of LxLlx Peres
an example
LxLgeL(LargeL)shlfL(
x 3
y 300
wldLh 300
helghL 200
)
ln Lhls example our LargeL elemenL wlll move Lo a poslLlon of 3 plxels from Lhe
lefL and 300 from Lhe Lop of Lhe vlewporL and wlll reslze Lo 300x200 plxels 1hese
changes happen slmulLaneously wlLh Lhe elemenL reslzlng as lL moves
LffecLlvely shlfL ls a verslon of LxLlxscale LhaL adds Lhe ablllLy Lo reposlLlon Lhe
elemenL 1hls ls a greaL mechanlsm for reorganlzlng a workspaceshlfLlng panels
of daLa from a place of promlnence Lo a place more unobLruslve and dolng so ln a
smooLh dynamlc manner
And now Lhe lnLeresLlng sLuff
All of Lhe meLhods LhaL weve [usL covered have some broad slmllarlLles 8uL each of
Lhem has cerLaln dlsLlncL dlfferences whlch make Lhem appllcable as soluLlons for a
range of very dlfferenL problems Were now golng Lo dlscuss how an exLra feaLure of
LxLlx can Lweak and Lallor Lhe effecLs weve already revlewed
ln many of Lhe above examples Lhe funcLlonallLy on offer ls sllghLly llmlLed WhaLs
been glossed over unLll now ls LhaL each of Lhe meLhods weve dlscussesd also
accepLs a sLandard conguraLlon ob[ecL LhaL provldes a hosL of common opLlons Lo
brlng Lhelr full funcLlonallLy Lo your ngerLlps
1he lx ls ln
Weve brley Louched upon Lhe way ln whlch anchorlng opLlons are used wlLhln
LxLlx for example meLhods such as a ghosL accepLlng a sLrlng represenLlng Lhe
dlrecLlon ln whlch Lo move Cver Lhe nexL few pages well noL only dlscuss Lhls ln
deLall buL well also go over Lhe numerous conguraLlon opLlons LhaL are common Lo
all of Lhe LxLlx meLhods
192
Anchorlng yourself wlLh LxL
Speclfylng dlrecLlons anchors allgnmenL and more ls all based around a scheme
of anchor poslLlons 1hese are used by LxL !Ss anlmaLlon sysLem Lo deLermlne Lhe
dlrecLlon of movemenL and Lhey have a preLLy slmple namlng convenLlon
Anchor oslLlon SLrlng uescrlpLlon
Ll 1op lefL corner
L CenLer of Lhe Lop edge
Lr 1op rlghL corner
l CenLer of Lhe lefL edge
r CenLer of Lhe rlghL edge
bl 8oLLom lefL corner
b CenLer of Lhe boLLom edge
br 8oLLom rlghL corner
1hese opLlons allow elghLway movemenL when uslng meLhods such as
LxLlxghosL 8uL Lhe same concepL ls seen ln meLhods such as LxLLlemenL
allgn1o and LxLLlemenLanchor1o where Lwo anchor polnLs can be comblned
and Lhe ? characLer can be used Lo dlcLaLe LhaL Lhe allgnmenL wlll be consLralned
Lo Lhe vlewpolnL
ln shorL lL pays Lo famlllarlze yourself wlLh Lhe LxL !S anchor poslLlons as youll
almosL cerLalnly use Lhem ln your appllcaLlonelLher Lo move elemenLs or Lo
[usL bend Lhem Lo sulL your many needs More Lhan LhaL LxLComponenLs have
underlylng elemenLs So youll mosL llkely use Lhese feaLures when developlng a
soluLlon wlLh rlch wldgeLs
now back Lo Lhe Loplc aL handLamlng Lhe LxLlx class
CpLlons
As menLloned earller each of Lhe LxLlx meLhods weve covered can Lake an opLlonal
conguraLlon llLeral as lLs lasL parameLer whlch provldes 11 seLLlngs for Lweaklng
your effecLs 1he slmplesL ls probably duraLlon whlch specles how long Lhe effecL
should lasL 1hls ls useful for ensurlng LhaL your LranslLlons lasL long enough for your
users Lo caLch Lhem AlLhough Lhe defaulL duraLlons of each effecL are usually preLLy
senslble Lhere are many usecases for overrldlng Lhls value Peres an example of uslng
duraLlon and lndeed Lhe conguraLlon opLlon argumenL ln general
LxLgeL(LargeL)swlLchCff(
duraLlon 10
)
193
ln Lhls example we pass a sLandard ob[ecL llLeral Lo Lhe swlLchCff meLhod and Lhe
duraLlon properLy ls seL Lo 10 lndlcaLlng LhaL Lhe swlLchCff should Lake place over
Len seconds
WlLh Lhe defaulL behavlor of some of Lhe LxLlx meLhods you end up wlLh some
subopLlmal LranslLlons lor example many of Lhe effecLs LhaL cause an elemenL Lo
vanlsh wlll acLually [usL leave a blg gap where Lhe elemenL used Lo be 1hls ls because
Lhey compleLe Lhe LranslLlon by seLLlng Lhe vlslblllLy of Lhe elemenL Lo hldden raLher
Lhan removlng lL from Lhe uCM or from Lhe documenL ow We can recLlfy Lhls
uslng Lwo more conguraLlon opLlons remove and useulsplay
1he rsL remove slgnles LhaL wed llke Lo compleLely desLroy Lhe elemenL when
Lhe LranslLlon has compleLed 1he second useulsplay means LhaL Lhe elemenL
wlll be hldden uslng dlsplaynone raLher Lhan vlslblllLyhldden so LhaL lL
wlll no longer affecL Lhe nodes around lL uslng remove and useulsplay LogeLher
ls redundanL lf Lhe node ls compleLely removed lL makes no dlfference how lLs
hldden lf youre plannlng on reuslng or reshowlng Lhe elemenL ln quesLlon Lhen
sLlck wlLh useulsplay oLherwlse you may as well be Lldy (and avold poLenLlal
memory leaks) and use remove
1he conguraLlon opLlons also allow us Lo dlcLaLe whaL else happens when Lhe effecL
has compleLed We have Lwo opLlons LhaL conLrol Lhe look of our elemenL afLerCls
and afLerSLyle whlch allow a CSS class or raw CSS rules Lo be applled Lo Lhe
elemenL aL Lhe end of our LranslLlon 1hls can be used Lo add a permanenL change Lo
Lhe elemenL ln quesLlon perhaps hlghllghLlng lL as a newlylnLroduced lLem
We have Lwo more opLlons LhaL glve us Lhe power Lo perform furLher acLlons when
Lhe effecL has compleLed callback whlch allows us Lo speclfy a funcLlon Lo be called
aL Lhe end of Lhe LranslLlon and scope whlch ls Lhe scope of Lhe callback funcLlon
lor example
LxLgeL(LargeL)swlLchCff(
callback funcLlon()
alerL(LffecL compleLe!)

)
1he LxLlx class handles Lhe queulng of effecLs auLomaLlcally so donL use Lhls Lo
Lrlgger anoLher effecL lnsLead use lL Lo Lrlgger acLlons assoclaLed wlLh Lhe anlmaLlon
194
Lasy does lL
Cur nexL conguraLlon opLlon ls easlng ln anlmaLlon Lermlnology easlng refers Lo
Lhe means by whlch Lhe LranslLlon eases from a sLop Lo movemenL and back Lo a sLop
agaln 8y defaulL LxL !S effecLs wlll abrupLly sLarL and sLop buL by uslng Lhe easlng
opLlon we can speclfy how lL wlll acceleraLe and deceleraLe aL Lhe sLarL and end of
Lhe effecL respecLlvely
1he easlng effecLs supporLed by LxL !S vary dependlng on whlch adapLer
youre uslng lf youre uslng Lhe LxL !S 8ase adapLer Lhen youll geL Lhe
full works
A baslc example of Lhls ln acLlon ls Lhe ease8oLh value 1hls causes Lhe
anlmaLlon Lo gradually speed up and Lhen slow down ln order Lo provlde a
smooLhlooklng LranslLlon
LxLgeL(LargeL)scale(30 130 easlng ease8oLh)
Pere were applylng Lhe easlng opLlon Lo Lhe scale effecL and by uslng ease8oLh
we can have a less [arrlng movemenL as lL progresses 1here are many more
easlng opLlons
easenone
easeln
easeCuL
ease8oLh
easelnSLrong
easeCuLSLrong
ease8oLhSLrong
elasLlcln
elasLlcCuL
elasLlc8oLh
backln
backCuL
back8oLh
bounceln
bounceCuL
bounce8oLh
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
193
1haLs a llsL of Lhe opLlons supporLed by LxL !S 8ase Cnes llke bounceln provlde a blL
of a sprlng Lo Lhe effecL whlch ls perhaps more useful ln a gamlng appllcaLlon Lhan
ln daLa enLry buL Lhe beauLy of havlng such a wlde cholce ls LhaL you are llkely Lo
nd someLhlng LhaL Ls your requlremenLs
1he nal few conguraLlon opLlons apply Lo Lhe way your currenL effecL lnLeracLs
wlLh oLher effecLs LhaL may occur wlLhln lLs llfeLlme lor example block wlll speclfy
LhaL no oLher effecLs are queued up whlle Lhls one ls runnlng whlch ls useful ln
scenarlos where Lrlggerlng furLher changes could adversely affecL your appllcaLlons
sLaLe 1he block opLlon Lells all oLher effecLs Lo blde your Llme unLll Lhlngs have
calmed down
LxLgeL(LargeL)shlfL(
x 3
y 300
wldLh 300
helghL 200
block Lrue
)
Pere we see an lnLeresLlng usage of Lhe LxLlxshlfL meLhod ln whlch Lhe
shlfLspeclc conguraLlon opLlons are augmenLed by Lhe common lx ones
We also have Lhe sLoplx and concurrenL opLlons sLoplx allows us Lo cancel
all effecLs LhaL geL Lrlggered afLer Lhls one whlle concurrenL specles wheLher
subsequenL effecLs wlll run ln parallel wlLh Lhls one or wlll be queued up unLll afLer
Lhls one has compleLed 8y defaulL Lheyll queue up and run ln sequence buL Lhere
are slLuaLlons ln whlch you wlll be able Lo apply mulLlple effecLs aL a Llme and well
Lalk more abouL LhaL ln Lhe nexL few secLlons
MulLlple effecLs
MosL of Lhe Llme youll use effecLs one aL a Llme on dlfferenL elemenLs Lo achleve Lhe
look youre afLer buL ln some clrcumsLances lL can be useful Lo use mulLlple effecLs
1here are a few dlfferenL ways of handllng Lhls scenarlo and ln Lhe nexL few secLlons
were golng Lo revlew Lhese ways Were also golng Lo see how we can lnuence any
runnlng effecLs from our code
Chalnlng
An easy way Lo seL up a second effecL Lo run afLer your rsL ls compleLed ls Lo
use meLhod chalnlng 8ecause each of Lhe maln LxLlx meLhods reLurns Lhe LxL
LlemenL LhaL was Lhe LargeL of Lhe effecL you can Lhen call furLher LxLLlemenL
meLhods lncludlng Lhose provlded by LxLlx
LxLgeL(LargeL)slldeln()hlghllghL()
196
As you can see from Lhls example were calllng slldeln followed by hlghllghL
whlch lndlcaLes LhaL hlghllghL wlll be added Lo Lhe effecLs queue Lo run afLer
slldeln compleLes
Cueulng
Cueulng ls Lhe defaulL behavlor for effecLs seL up elLher by meLhod chalnlng or
by mulLlple calls 1he followlng code sample ls funcLlonallyldenLlcal Lo our
prevlous example
LxLgeL(LargeL)slldeln()
LxLgeL(LargeL)hlghllghL()
ln boLh cases Lhe hlghllghL effecL wlll be queued up behlnd slldeln 1hls negaLes
Lhe need for any compllcaLed Llmlng or callbackbased seLups Lo Lrlgger effecLs LhaL
run sequenLlally
Concurrency
AlLhough queulng ls Lhe defaulL we also have Lhe opLlon of runnlng effecLs ln
parallel by uslng Lhe prevlouslydlscussed concurrenL conguraLlon opLlon 1hls
glves us Lhe opporLunlLy Lo comblne effecLsfor example we could hlghllghL an
elemenL as lL scales up
LxLgeL(LargeL)scale(300 200
concurrenLLrue
)hlghllghL()
1hls provldes a very powerful capaclLy for cusLomlzaLlon
8locklng and LxLlx uLlllLy meLhods
1here are a number of exLra meLhods wlLhln Lhe LxLlx class LhaL arenL dlrecLly
responslble for creaLlng effecLs lnsLead Lhey can be used Lo manage and monlLor
effecLs LhaL are already ln Lhe queue A greaL example of Lhls ls Lhe sLoplx meLhod
whlch ls as slmple as lL soundswe can call lL Lo cancel any anlmaLlons LhaL are
currenLly runnlng lL also clears Lhe effecLs queue and prlmes Lhe elemenL for user
lnLeracLlon or furLher manlpulaLlon
lnLeresLlngly sLoplx reLurns Lhe LargeL LxLLlemenL allowlng Lhe developer Lo
chaln up furLher meLhods erhaps you have seL up a slldeln LhaL ls subsequenLly
canceled and replaced wlLh slldeCuL
LxLgeL(LargeL)sLoplx()slldeCuL()
197
Such code ls useful lf we need Lo lnLerrupL an anlmaLlon Lo glve conLrol back Lo Lhe
useran ablllLy LhaL can be cruclal ln glvlng Lhe user Lhe responslveness Lhey requlre
Powever ln oLher clrcumsLances you may wanL Lo prevenL Lhe user from lnLerferlng
wlLh Lhe currenL sLaLe of Lhe appllcaLlon and lf LhaLs Lhe case we have Lhe haslx8lock
meLhod 1yplcally Lhls ls used Lo make sure LhaL Lhe user canL queue up Lhe same
effecL many Llmeswe can prevenL addlLlonal effecL calls Lo Lhe elemenL lf haslx8lock
reLurns Lrue
LlemenLal
As weve seen Lhe LxLLlemenL ls Lhe key Lo uslng LxLlx lLs lmporLanL LhaL when
rolllng your own cusLom verslons of LxL !S you make sure LhaL you lnclude LxL
lx lf you wanL Lo be able Lo use lLs meLhods for LxLLlemenL Powever even when
used sLandalone LxLLlemenL has a number of meLhods all of lLs own LhaL can
provlde some lnLeresLlng posslblllLles for anlmaLlon
Maklng a move
1here are many meLhods on LxLLlemenL LhaL can be used Lo manlpulaLe a LargeL
elemenL buL some of Lhem have a free exLra ass ln a Lrue value as Lhe lasL
parameLer and Lhe manlpulaLlon wlll be anlmaLed
LxLgeL(LargeL)move1o(300 300 Lrue)
ln Lhls case Lhe LargeL elemenL wlll move Lo a locaLlon 300 plxels from Lhe lefL and 300
from Lhe Lop of Lhe vlewporL 8uL because of Lhls lasL parameLer lL wlll noL slmply
[ump Lo LhaL locaLlon buL wlll smooLhly LranslLlon Lo Lhe specled polnL
ln addlLlon Lo slmply passlng ln Lrue as Lhe Lhlrd parameLer we can pass ln a full
conguraLlon ob[ecL lnsLead 1hls uses Lhe same anlmaLlon opLlons for LxLlx LhaL
we dlscussed earller ln Lhe chapLer
LxLLlemenL anlmaLlons can be used aL Lhe same Llme as Lhe ones from
LxLlx buL Lhey are noL guaranLeed Lo supporL Lhe queulng feaLures LhaL
are always avallable wlLh Lhe LxLlx meLhods
1here are many meLhods such as seLCpaclLy and scroll LhaL can be used ln LhaL can be used ln
Lhls fashlon Lo provlde Lhe means for addlng slmple LranslLlons 1hls ls a good Lo provlde Lhe means for
addlng slmple LranslLlons 1hls ls a good
foundaLlon whlch LxLlx bullds upon
198
1heres anoLher plece of Lhe anlmaLlon puzzle LhaL were yeL Lo Louch upon
LxLLlemenLanlmaLe 1hls ls Lhe generlc means of applylng anlmaLlons Lo
an elemenL and ls a shorLcuL Lo Lhe same underlylng meLhods LhaL are used by
all of Lhe LxLLlemenL meLhods LhaL supporL anlmaLlon
Advanced appllcaLlons of Lhls meLhod lnvolve uslng Lhe LxLllbanlm enLrles
LhaL reglsLer all of Lhe sLock anlmaLlon Lypes avallable Lo LxL !S and addlng new
reglsLered anlmaLlon handlers Lo supporL cusLom scenarlos ln mosL cases uslng Lhe
sLock LxLLlemenL meLhods or Lhe LxLlx meLhods wlll be sufclenL even for
advanced cases
uslng LxL componenLs
1he anlmaLlons whlch are avallable on LxLLlemenL are parLlcularly lnLeresLlng
when you conslder LhaL many LxLComponenLs such as Lhe Wlndow or lormanel
have an underlylng LlemenL as Lhelr conLalner 1hls means LhaL you can apply Lhese
effecLs Lo full componenLs as well as Lo sLandard elemenLs provldlng an added uLlllLy
for Lhese meLhods
8rlng ouL Lhe flash
Weve covered LxLlx and Lhe oLher anlmaLlon Lechnlques LhaL LxL !S offers ln depLh
now 8uL weve sLlll goL a few more feaLures Lo cover when lL comes Lo showlng off
wlLh Lhe framework 1here are a number of LxL classes LhaL provlde a llLLle exLra
sparkle Lo Lhe Lop of Lhe sLandard soluLlons Weve goL LoadMask LhaL allows you Lo
mask off a porLlon of Lhe screen whlle lLs belng refreshed and Culck1lp LhaL offers a
rlch congurable LoolLlp sysLem
1hese classes open up a new range of opLlons when lL comes Lo creaLlng compelllng
userexperlences and were golng Lo examlne Lhem ln deLall over Lhe nexL few pages
A key feaLure of each ls LhaL Lhey are reasonably slmple Lo use whlch ls parLly Lhe
reason why youll wanL use Lhem ln many of your LxL !S appllcaLlons
?oure maskln lm Lellln
1he LxLLoadMask class has a couple of dlfferenL use cases We can use lL Lo
slmply dlsplay a message LhaL keeps Lhe user lnformed or we can use lL Lo prevenL
lnLeracLlon wlLh a componenL LhaL ls belng refreshed
199
LeLs look aL Lhe rsL scenarloLhaL ls uslng an LxLLoadMask Lo slmply overlay an
elemenL wlLh a message
var LargeL LxLgeL(LargeL)
var mask new LxLLoadMask(LargeL)
maskshow()
ln Lhe above example once we obLaln an elemenL uslng LxLgeL we pass lL lnLo
Lhe LxLLoadMask consLrucLor and call Lhe show meLhod on Lhe LoadMask lnsLance
1here ls also an opLlonal second parameLer for Lhe LxLLoadMask consLrucLor a
conguraLlon ob[ecL wlLh four properLles
roperLy name uescrlpLlon
msg 1he loadlng message Lo be dlsplayed ln Lhe cenLer of Lhe mask
msgCls 1he CSS class Lo use for Lhe loadlng message conLalner
removeMask 8oolean seL Lo 1rue Lo desLroy Lhe mask afLer Lhe load ls compleLe
sLore ulscussed laLer
When creaLlng a load mask ln Lhls way we can dlsmlss lL by calllng Lhe maskhlde
meLhod AlLhough Lhls masklng approach ls preLLy sLralghLforward lLs also a
llLLle verbose So ln some cases lLs beLLer Lo use Lhe shorLcuL meLhod LhaL
LxLLlemenL provldes
LxLgeL(LargeL)mask(Loadlng xmaskloadlng)
ln Lhls example were expllclLly passlng Lhe message LexL and message CSS class
as Lhe rsL and second argumenLs respecLlvely 1hls allows us Lo repllcaLe Lhe
funcLlonallLy provlded by a baslc LxLLoadMask call as shown ln Lhe rsL example
buL Lheyre boLh opLlonal When youre done wlLh Lhe mask you can hlde lL by calllng
Lhe unmask meLhod of your LxLLlemenL lnsLance lf you have sLored a reference Lo
Lhe mask you can call Lhe hlde meLhod of LhaL lnsLance lnsLead
200
uaLa blndlng and oLher Lales
AlLhough lL lnlLlally seems LhaL Lhe LxLLlemenL approach ls beLLer Lhere are
acLually a few compelllng reasons for uslng Lhe full LoadMask 1he mosL lnLeresLlng
reason ls LhaL lL can be Lled Lo a specled LxLdaLaSLore lnsLance allowlng you Lo
auLomaLlcally mask and unmask your elemenL based on when Lhe sLore ls loadlng
1hls cuLs down on your code when showlng Lhe mask buL lL also negaLes Lhe need Lo
hook up an evenL llsLener for your load compleLe evenLs LeLs Lake a look aL how Lhls
feaLure can be used
var slowSLore CeLSlowSLore()
var mask new LxLLoadMask(LxLgeL(LargeL)
sLoreslowSLore
)
slowSLoreload()
Were noL lnLeresLed ln how Lo creaLe a sLore so LhaLs been hldden away ln a
funcLlon call All we care ls LhaL our example sLore ls golng Lo Lake a couple of
seconds Lo nlsh loadlng We lnsLanLlaLe a new LoadMask wlLh an elemenL as Lhe
rsL consLrucLor parameLer and a conguraLlon llLeral as Lhe second one 1he sLore
properLy accepLs our slowSLore as lLs value
now LhaL everyLhlngs seL up we slmply call Lhe load meLhod of Lhe sLore 1hls wlll
mask over our LargeL elemenL and ln a few seconds when lL has nlshed loadlng Lhe
mask wlll auLomaLlcally be dlsmlssed
Conslderlng componenLs
As weve seen Lhere are a number of ways of manually masklng elemenLs and
you could use any of Lhese approaches Lo Lhe LxLLlemenLs LhaL underlle many
LxLComponenLs Powever lLs lmporLanL Lo noLe LhaL some componenLs provlde
Lhls funcLlonallLy for you cuLLlng down on Lhe code LhaL you need Lo wrlLe ln order
Lo enable Lhls feaLure ln your appllcaLlons lor example Lhe LxLgrldCrldanel
has a boolean loadMask conguraLlon opLlon whlch noL only masks Lhe panel buL
also auLomaLlcally Lles ln Lo Lhe daLasource LhaL ls feedlng Lhe Crldanel
Culck1lpplng
lLs ofLen very useful Lo be able Lo supply furLher lnformaLlon for a buLLon or
form eld [usL ln case your users are unclear as Lo lLs purpose ln many cases
lLs lmpracLlcal Lo puL Lhls lnformaLlon lnllne nexL Lo Lhe lLem ln quesLlon slmply
because lL would make Lhe lnLerface hlghly cluLLered ln Lhls slLuaLlon LoolLlps are a
greaL alLernaLlve Lo lnllne lnformaLlon and wlLh LxL !S Lhese llLLle popup snlppeLs
can conLaln any P1ML LhaL youd llke Lo show
201
1he LxLCulck1lps class ls a slngleLon LhaL provldes a very easy meLhod of creaLlng
rlch LoolLlps lL allows you Lo puL your Culck1lp seLup lnformaLlon dlrecLly lnLo Lhe
markup of your pagea greaL meLhod for reduclng Lhe conguraLlon requlred ln
many cases havlng Lhe descrlpLlon LexL wlLhln your maln P1ML makes Lhe mosL
sense 1hls approach ls supporLed by Lhe use of a number of exLra aLLrlbuLes for any
P1ML elemenL LhaL youd llke Lo Lle Lhe Culck1lp Lo wlLh exLqwldLh exLqLlLle
and exLqLlp belng Lhe mosL commonlyused
lnpuL LypeLexL exLqLlLlelnformaLlon exLqLlp
1hls fleld can conLaln LexL! exLqwldLh200 /
We need Lo acLlvaLe Lhe global Culck1lps handler before Lhls wlll sLarL worklng
LxLCulck1lpslnlL()
lLs also worLh menLlonlng LhaL nonsLandard aLLrlbuLes wlll cause AfLer compleLlng
Lhese Lwo sLeps youll end up wlLh Lhe LoolLlp you see here
As well as uslng markupbased LoolLlps we can also programmaLlcally creaLe
more cusLomlzable ones wlLh Lhe LxL1ool1lp class 1hls provldes a range of
conguraLlon opLlons Lo change Lhe behavlor and appearance of Lhe LoolLlps and also
allows you Lo pull LoolLlp daLa from an exLernal source by uslng Lhe power of A!Ax
1he slmplesL usage of Lhls class ls as follows
new LxL1ool1lp(
LargeL Llp1argeL
hLml 1hls ls where our lnformaLlon goes!
)
1he consLrucLor for LxL1ool1lp accepLs a conguraLlon llLeral as lLs only argumenL
and here were uslng Lhe mandaLory LargeL properLy Lo speclfy whlch elemenL wlll
Lrlgger Lhe LoolLlp ln Lhls case lL wlll be Lhe one wlLh Lhe lu Llp1argeL noLe LhaL
were uslng a sLrlng Lo refer Lo Lhe lu buL ln facL you can pass ln an LxLLlemenL
reference or a sLandard P1ML node Were Lhen seLLlng Lhe hLml properLy Lo Lhe LexL
LhaL wed llke Lo show ln Lhe LoolLlp As Lhe name of Lhe properLy lndlcaLes you can
add any exLra markup you llkeeven lmages
202
LxL1ool1lp has a number of oLher lnLeresLlng opLlons such as Lhe ablllLy Lo Lweak
Lhe Llme lL Lakes for Lhe LoolLlp Lo appear and Lhen vanlsh by uslng Lhe showuelay
and hldeuelay conguraLlon properLles 1hls can be useful lf you need Lhe LoolLlp Lo
appear prompLly when Lhe user hovers over lLs assoclaLed elemenL or lf you wanL Lo
make sure LhaL Lhe lnformaLlon ls onscreen long enough Lo be Laken ln
Weve also goL Lhe ablllLy Lo seL Lhe LlLle of Lhe LoolLlp ln Lhe same way as we dld
wlLh Lhe markupbased soluLlon LhaL ls by uslng Lhe LlLle opLlon ln facL many
of Lhe opLlons such as LlLle come from Lhe facL LhaL LxL1ool1lp ls a subclass of
LxLanel 1hls means LhaL we can use feaLures such as Lhe auLoLoad conguraLlon
opLlon Lo grab conLenL from a u8L or use Lhe closable opLlon Lo force Lhe user Lo
dlsmlss Lhe LoolLlp uslng a close wldgeL
Culck1lps and 1ool1lps are greaL examples of LxL !S classes LhaL arenL essenLlal Lo
an appllcaLlon buL LhaL provlde a layer of funcLlonallLy LhaL can Lake your soluLlon
from someLhlng ordlnary Lo someLhlng hlghly usable
Summary
1heres a ne llne beLween vlsual cues and annoylng effecLs AlLhough weve revlewed
many of Lhe LxL !S feaLures LhaL allow you Lo gear your appllcaLlon Lowards elLher
exLreme Lhls chapLer has only been abouL Lhe LoolsnoL how you should use Lhem
1haL sald weve also looked aL a couple of examples LhaL lllusLraLe [usL how useful
eye candy can be when helplng ouL your users 8y provldlng a llLLle someLhlng
exLra when youre deleLlng a record or closlng a daLa dlsplay you can Lurn a
poLenLlallyconfuslng experlence lnLo one LhaL ls supporLed by gradual changes ln
vlsual sLaLe raLher Lhan lmmedlaLe shlfLs from one cllck Lo anoLher
1he key ls Lo ensure LhaL Lhose gradual changes arenL Loo gradual LhaL your
anlmaLlons arenL lnyourface and LhaL Lhey arenL Lrlggered every Llme Lhe user
presses a buLLon SofLware appllcaLlons are abouL geLLlng Lhlngs done and havlng
porLlons of Lhe page whlzzlng around Lhe screen lsnL llkely Lo help wlLh LhaL
LxL !S lsnL [usL abouL Lhese fancy effecLs Lhough Weve demonsLraLed a couple of
classes LhaL are uLlllLy Lools wlLh sLyle 1ool1lps and LoadMasks are genulnely useful
ln many scenarlos and could rarely be used ln an ln your face manner
uslng 1ool1lps can add a loL of value Lo a busy appllcaLlon removlng cluLLer by
movlng lnllne LexL lnLo pop ups and provldlng unled and aLLracLlve asslsLance Lo
your users lmages and even P1ML llnks can provlde more lnformaLlon Lhan could
posslbly be shown nexL Lo a form eld
203
1he second of Lhe classes we covered LoadMask can form a crlLlcal parL of a sysLem
ensurlng noL only LhaL your users are prevenLed from lnLerrupLlng a load operaLlon noL only LhaL your
users are prevenLed from lnLerrupLlng a load operaLlon LhaL your users are prevenLed from lnLerrupLlng
a load operaLlon your users are prevenLed from lnLerrupLlng a load operaLlon are prevenLed from
lnLerrupLlng a load operaLlon
buL also LhaL Lhe mask LhaL appears ls aLLracLlve conslsLenL and can conLaln
cusLomlzed lnformaLlon LhaL keeps Lhe users lnformed
ln Lhe nexL chapLer were golng Lo Lake a look aL one of Lhe mosL Lyplcal examples of
Web 20 gllLz draganddrop ln a Lyplcal LxL !S manner were golng Lo see how lLs
noL only slmple Lo use buL also powerful ln lLs funcLlonallLy
Am Pllllgenbusch 47 aderborn n8W 33098uragandurop
ln Lhe world of sofLware developmenL deskLop appllcaLlons are sLlll number one
AlLhough web slLes and laLLerly web appllcaLlons are developlng rapldly uslng
frameworks such as LxL !S Lhey are yeL Lo reach Lhe level of complexlLy LhaL we see ln
our mosL exLenslve deskLop programs
uraganddrop Lhe sub[ecL maLLer of Lhls chapLer ls a good example of Lhls
Movlng lLems across Lhe screen uslng Lhe mouse on a sLandard compuLer deskLop ls
allpervaslve lL ls avallable for a greaL many acLlons and lL ls avallable ln vlrLually
every appllcaLlon even lf Lhls ls ln a llmlLed form
arL of Lhe reason for Lhls ls LhaL lmplemenLlng draganddrop uslng !avaScrlpL ls
preLLy hard Comlng up wlLh a conslsLenL meLhodology for Lurnlng any elemenL lnLo
a draggable wldgeL LhaL can Lhen be placed on anoLher elemenL and have lL work ln
every browser and have lL supporL scrolllng and Lake lnLo accounL lframes ls Lo say
Lhe leasL problemaLlc
AL Lhe sLarL of Lhe Web 20 revoluLlon we sLarLed Lo see some more conslsLenL
lmplemenLaLlons of draganddrop appearlngones LhaL fullled many of Lhe
crlLerla weve [usL ouLllned 8uL even Lhen Lhe Web dldnL sLarL uslng lL ln such a free
and easy manner as Lhe deskLop perhaps because of Lhe poor use cases LhaL were
used as demonsLraLlons for Lhls new funcLlonallLy AfLer all does anyone really wanL
Lo work wlLh a draganddrop shopplng carL sysLem?
urop whaL youre dolng
1he lmplemenLaLlon of draganddrop LhaL LxL !S provldes succeeds on many levels
lL ls crossbrowser and easy Lo use buL more lmporLanLly lL ls used ln mulLlple
wldgeLs wlLhln Lhe framework such as Lhe Crldanel and 1reeanel maklng lL
easy Lo lmplemenL ln useful realworld appllcaLlons
206
ln addlLlon Lhe LxLdd package conLalns a number of classes LhaL allow you Lo
creaLe slmple draganddrop feaLures wlLh easeshopplng carLs lncluded 1here ls
sufclenL granularlLy Lo supporL more advanced scenarlos as well provldlng you
wlLh a means of creaLlng cusLom draganddrop soluLlons LhaL are fully lnLegraLed
lnLo your LxL appllcaLlon
ln Lhls chapLer well revlew Lhe LxLdd package and ways ln whlch lL can exLend
your LoolklL buL well also be looklng aL how Lo exLend Lhe draganddrop
funcLlonallLy provlded by Lhe varlous LxL componenLs
Llfes a drag
1here are clearly Lwo parLs Lo creaLlng a worklng draganddrop feaLureLhe
dragglng and Lhe dropplng As Lhese are Lwo separaLe operaLlons well handle Lhem
separaLely for our slmple use case
Sourclng a soluLlon
1he rsL parL we need Lo look aL ls Lhe drag acLlon LxL wlll enable Lhls uslng Lhe LxL
dduragSource whlch acLually makes Lhe whole Lhlng a breeze Assume LhaL youve
goL a dlv elemenL on your page wlLh an lu dragMe
new LxLdduragSource(dragMe)
1haLs all you need Lo geL up and runnlng!
1ry runnlng Lhls code and grab hold of your elemenL ?ou can now drag lL around
Lhe page buL Lheres a llLLle blL more Lo lL Lhan LhaL LxL !S provldes a few exLra
feaLures by defaulL whlch wlll be demonsLraLed by Lhls code
ApproxlmaLlng
When you begln dragglng Lhe elemenL youll see LhaL you donL acLually drag Lhe full
elemenL as you would ln some draganddrop lmplemenLaLlons LhaL you mlghL have
seen lnsLead LxL !S auLomaLlcally provldes a proxya llghLwelghL represenLaLlon of
whaLever elemenL youre dragglng 1hls faclllLy ls provlded by LxL ln Lhe form of Lhe
LxLddSLaLusroxy class
207
lf youre uslng an elemenL wlLh a llLLle blL of LexL ln youll see LhaL LxL uses LhaL as
Lhe conLenLs of Lhe sLaLus proxy buL LhaLs as far as lL goes ln Lrylng Lo repllcaLe your
elemenL when creaLlng a vlsuallzaLlon of Lhe drag acLlon 1he dlmenslons of your
elemenL wlll be dlscarded and Lhe proxy wlll Lry and L Lhe conLenL ln as besL lL can
8uL lf youve goL a loL of daLa lnslde your elemenL you may nd LhaL Lhe sLaLus proxy
ls somewhaL ouL of shape
WhaLs Lhe advanLage of havlng a sLaLus proxy raLher Lhan [usL uslng Lhe elemenL
lLself? Well one Lhlng LhaL youll also see from our demonsLraLlon code ls LhaL LxL
provldes a llLLle noenLry lcon as you move Lhe proxy around 1haL changes Lo a
green Llck when you move Lhe proxy over a valld drop polnL as well see shorLly 8uL
Lhe greaL Lhlng ls LhaL uslng a proxy wlll glve you Lhls lndlcaLor for free
AnoLher advanLage of uslng Lhe sLaLus proxy lnsLead of Lhe full elemenL ls LhaL lLs
much more workable boLh ln Lerms of processlng power and ln Lerms of Lhe acLual
sLuff youre golng Lo be dragglng across Lhe screen movlng a 10 column 200 row
Lable lsnL golng Lo be smooLh and lsnL golng Lo look good elLher A sLaLus proxy
makes for a neaL soluLlon Lo Lhese klnds of problems and has some bonus feaLures
Looas well see laLer
Snap!
AnoLher bullLln feaLure of an LxLdduragSource ls Lhe acLlon LhaL occurs when
you drop Lhe elemenL ln a place LhaL lsnL a valld drop LargeLLhaL ls when Lhe
proxys red no enLry slgn ls showlng lL lmmedlaLely snaps back Lo where lL came
from hlghllghLlng Lhe orlglnal elemenL ln llghLblue Lo noLlfy Lhe user LhaL lL has
reLurned Lo lLs orlglnal poslLlon
urop me off
now LhaL weve managed Lo drag someLhlng around we can move Lo Lhe second parL
of Lhe plandropplng 1he ldea ls LhaL we have a drop LargeLan elemenL LhaL
Lrlggers LhaL green Llck ln Lhe proxy Lo slgnlfy LhaL you can drop Lhe proxy lnLo lL
ln order Lo do Lhls we make use of Lhe LxLddurop1argeL class ln preLLy much Lhe
same way as we used urag1argeL
new LxLddurop1argeL(dropPere)
208
1he urop1argeL consLrucLor accepLs a mlxed elemenL ob[ecLln Lhls case Lhe lu
of an elemenL on our pageand denes LhaL elemenL as a valld LargeL for any drop
operaLlons 8unnlng Lhese Lwo examples LogeLher wlll lllusLraLe Lhe changlng sLaLus
of Lhe drag proxy lconfrom red Lo green when lLs hoverlng over a drop LargeL
8uL walL noLhlngs happenlng!
1he Lrlcky Lhlng abouL Lhls klnd of baslc draganddrop ls LhaL noLhlng really
happens when you perform Lhe drop acLlon ln facL Lhe dragged elemenL [usL snaps
back Lo lLs source [usL as lL would lf youd dropped lL when Lhe proxy lcon was red
1he Lrlck lles ln provldlng a funcLlon LhaL overrldes Lhe urop1argeLnoLlfyurop
meLhod 8y defaulL Lhls meLhod has no lmplemenLaLlon and slmply reLurns false
causlng Lhe dragged elemenL Lo snap back Lo lLs source 8y wrlLlng a llLLle blL of
cusLom code we can make Lhe drop acLlon compleLe ln whlchever way we see L
Why ls Lhls sLep necessary? Surely LxL !S should know LhaL we wanL Lo drag
LhaL over Lo Lhere? 1here are so many varlaLlons of draganddrop LhaL lLs
lmposslble for LxL Lo undersLand whaL youre Lrylng Lo do lnsLead lL makes
lL Lrlvlal Lo add your own acLlons Lo draganddrop operaLlons
Were golng Lo Lake a look aL some sample code LhaL hooks lnLo Lhls faceL of Lhe
draganddrop supporL by creaLlng a slmple example LhaL causes Lhe dragged
elemenL Lo be lnserLed wlLhln Lhe drop LargeL 1hls ls probably Lhe behavlor LhaL
you expecLed Lo see wlLh Lhe defaulL seLup AlLhough lL wonL be LhaL useful wlLhln
lLself lL should help ll ln some of Lhe gaps
Assumlng LhaL we have Lhe same code as ln our prevlous few examples wlLh
a uragSource and a urop1argeL we now need Lo add an lmplemenLaLlon of
noLlfyurop Lo Lhe urop1argeL
new LxLdduragSource(drag)
new LxLddurop1argeL(drop
noLlfyurop funcLlon() reLurn Lrue
)
1hls slmple addlLlon whlch overrldes Lhe defaulL lmplemenLaLlon of noLlfyurop
reLurns Lrue and slgnles LhaL we do noL wlsh Lhe drag LargeL Lo snap back Lo lLs
orlglnal poslLlon 1hls ls enough Lo parLlally fulll our expecLaLlons of whaL our
draganddrop code should have done ln Lhe rsL place 1he drag source can
be released over Lhe drop LargeL wlLhouL snapplng back Lo lLs orlglnal poslLlon
Powever we do need Lo do a llLLle more work Lo acLually make Lhe elemenL move
lnLo Lhe LargeL and well look aL how Lo do Lhls shorLly
209
lnLeracLlng Lhe fool
Whlle Lhe prevlous examples are lnLeresLlng ln Lhe absLracL senseLhey glve us an
ldea of how Lhe LxL !S draganddrop sysLem worksLhey arenL golng Lo be seLLlng
your newesL developmenL allghL lor LhaL we need Lo conslder how mulLlple drag
LargeLs and drop LargeLs can lnLeracL and how we can seL up more compllcaLed
sysLems for dragglng around lLems of daLa
Zones of conLrol
Weve seen how Lo hook up a slngle draggable lLem buL ofLen youll wanL Lo have a
number of elemenLs ready Lo be moved around Lhe screen 1he soluLlon here ls Lo use
LxLdduragZone and LxLdduropZone Lo enable Lhe movemenL of mulLlple nodes
Were golng Lo repllcaLe a slmple Lodo llsL appllcaLlon whlch wlll allow Lhe user Lo
move lLems from one llsL Lo anoLher Powever Lhls funcLlonallLy wlll be serlously
llmlLed allowlng us Lo focus only on Lhe relevanL Loplcs llrsL we need Lo seL up
some baslc P1ML
h11oday/h1
ul ldLoday
llShopplng/ll
llPalrcuL/ll
/ul
h11omorrow/h1
ul ldLmrw
llWash car/ll
/ul
Weve goL Lwo llsLs one wlLh an ld of Loday and one wlLh an ld of Lmrw Cur user
wlll be able Lo move lLems beLween Lhe Lwo llsLs Lo slmulaLe reorganlzaLlon of Lhelr
nexL few days Lasks Cur rsL snlppeL of !avaScrlpL wlll use Lhe LxLdduragZone Lo
seL Lhese llsLs as conLalners of draggable lLems 8emember LhaL your !S code needs Lo
go lnslde an LxLon8eady call
new LxLdduragZone(Loday)
new LxLdduragZone(Lmrw)
1hls looks preLLy sLralghLforward buL Lhere ls one sLlcklng polnL 1esLlng Lhe
code aL Lhls polnL wlll hlghllghL Lhe facL LhaL lL doesnL acLually enable any
funcLlonallLynoLhlng happens AlongwlLh seLLlng up Lhe uragZone we need Lo
expllclLly say whlch chlld nodes wlLhln Lhose uragZones are golng Lo be draggable
210
Why Lhe exLra sLep? ln complex appllcaLlons we may have many nesLed
chlld nodes So auLomaLlcally seLLlng all of Lhem up as draggable could
cause performance problems and unexpecLed behavlor lnsLead we could
do so manually avoldlng Lhese poLenLlal lssues
ln order Lo make our llsL lLems draggable we need Lo reglsLer Lhem wlLh Lhe
LxLdd8eglsLry
var drags documenLgeLLlemenLs8y1agname(ll)
for(var l 0 l dragslengLh l++)
LxLdd8eglsLryreglsLer(dragsl)

1hls ls a preLLy naive lmplemenLaLlon slmply reglsLerlng all of Lhe ll elemenLs on
Lhe page buL lL should glve you an ldea of whaL ls requlred lf you LesL Lhe code now
youll see LhaL all of Lhe lLems can be dragged around as youd expecL So we need Lo
move on Lo provldlng a place Lo drop Lhem
var cfg onnodeurop drop
new LxLdduropZone(Lmrw cfg)
new LxLdduropZone(Loday cfg)
We creaLe a cfg ob[ecL whlch holds conguraLlon daLa common Lo boLh of our
LxLdduropZone lnsLances 1he onnodeurop meLhod of uropZone ls called
by uropZonenoLlfyurop auLomaLlcally when lL reallzes LhaL youve dropped
a reglsLered node ln Lhls case were polnLlng Lo a funcLlon called drop LhaL
wlll overrlde Lhe exlsLlng empLy lmplemenLaLlon of onnodeurop 1he new
lmplemenLaLlon looks llke Lhls
// dropnodeuaLadrop node daLa ob[ecL
// sourcedrag zone whlch conLalned Lhe dragged elemenL
// evenLLhe drag drop evenL
// dragnodeuaLadrag source daLa ob[ecL
// LhlsdesLlnaLlon drop zone
funcLlon drop(dropnodeuaLa source evenL dragnodeuaLa)
var dragged sourcedraguaLaddel
var sourceConLalner sourceeldom
var desLlnaLlonConLalner LhlsgeLLl()
sourceConLalnerremoveChlld(dragged)
desLlnaLlonConLalnerappendChlld(dragged)
reLurn Lrue

211
We use Lhe argumenLs passed Lo Lhls funcLlon Lo geL hold of Lhree elemenLs Lhe lLem
LhaL ls belng dragged Lhe llsL LhaL lL came from and Lhe llsL lLs belng dragged Lo
WlLh Lhls lnformaLlon we can remove Lhe lLem from Lhe source llsL and Lhen append
lL Lo Lhe desLlnaLlon llsL We Lhen reLurn a value of Lrue Lo prevenL Lhe lLems proxy
from snapplng back Lo lLs polnL of orlgln
Changlng our llsLs
WlLh Lhls sample code weve demonsLraLed Lhe use of LxL !S draganddrop
funcLlonallLy ln a pracLlcal manner lLs a very slmple appllcaLlon of course buL lLs
good We can see how Lhe powerful aspecLs of Lhe LxLdd package can be applled ln
a sLralghLforward manner
LaLer well see how many aspecLs of Lhe LxL !S framework supporL draganddrop
wlLh very llLLle conguraLlon and how a knowledge of how Lhe underlylng classes
work ls essenLlal lf such supporL ls Lo be shaped Lo your requlremenLs
8eglsLerlng an lnLeresL
Weve already dlscussed how Lhe chlld nodes of a uragZone musL be reglsLered ln
Lhe LxLdd8eglsLry before Lhey can be dragged around 1hls exLra sLep can be a
llLLle palnful and well see ways around Lhls laLer buL for now leLs concenLraLe on
Lhe advanLages you geL when a node ls added Lo Lhe LxLdd8eglsLry
212
ln our prevlous examples we used Lhe LxLdd8eglsLryreglsLer meLhod wlLh
a slngle parameLer Lhe elemenL Lo be reglsLered Powever reglsLer also Lakes a
second opLlonal parameLer LhaL allows you Lo add an exLra meLadaLa ob[ecL Lo Lhe
lLem belng dragged around 1hls meLadaLa can be leveraged ln any way you see L
for your appllcaLlon buL a posslble use would be Lo pass compaLlblllLy lnformaLlon
Lo Lhe drop evenL lmaglne you are produclng an appllcaLlon LhaL leLs you assemble a
vlrLual ouLL by dragglnganddropplng lLems of cloLhlng We could use meLadaLa
Lo make sure LhaL only lLems of cloLhlng from Lhe summer range can be comblned
by lncludlng range lnformaLlon as parL of Lhe drag daLa 1here are many dlfferenL
appllcaLlons for Lhe meLadaLa faclllLy buL because lLs [usL an arblLrary ob[ecL lL really
ls up Lo you Lo declde how lL can be used
AlLhough Lhere ls overhead assoclaLed wlLh Lhe use of LxLdd8eglsLry weve
shown LhaL lL also has lmporLanL beneLs whlch dependlng on Lhe needs of your
appllcaLlon could ouLwelgh Lhe hassle of wrlLlng exLra reglsLraLlon code
LxLreme draganddrop
Cne of Lhe greaL Lhlngs abouL draganddrop ln LxL !S ls LhaL you can use lL wlLh
many of Lhe supplled LxL ComponenLs wlLhouL havlng Lo delve lnLo Lhe guLs of how
Lhey work Were golng Lo examlne Lhe use of draganddrop Lo creaLe a masLerdeLall
layouL wlLh an LxLuaLavlew and an LxLlormanel 1hls way we can demonsLraLe
Lhe lnLegraLlon of draganddrop wlLh commonlyused componenLs Much of whaL
were golng Lo cover wlll be famlllar Lo you from our prevlous example buL Lhe
appllcaLlon of LhaL knowledge wlll be sllghLly dlfferenL
Were golng Lo be worklng wlLh some very slmple P1ML
dlv ldpeople/dlv
dlv lddeLall/dlv
1he people dlv wlll conLaln our uaLavlew llsLlng a group of people pulled from a
sLore 1he deLall dlv wlll conLaln Lhe form LhaL we can drag lLems onLo
uaLavlew dragglng
1he rsL sLep ls Lo creaLe our LxLuaLavlew and enable Lhe dragglng of lLs nodes
1he code Lo lnlLlallze Lhe vlew looks llke Lhls
var personvlew new LxLuaLavlew(
Lpl Lpl for +
dlv classperson +
h1name/h1 +
dlvlmg srclmg/lmage alLname //dlv +
213
/dlv +
/Lpl
lLemSelecLor dlvperson
sLore personSLore
)
personvlewrender(people)
?oull noLlce LhaL Lhe lmplemenLaLlon of Lhe personSLore lsnL shown buL lL needs
Lo have an lu name lmage clLy and counLry lLems wlLhln lLs records ln order Lo
supporL whaL were golng Lo do noLe LhaL wlLhln our LemplaLe were showlng a
header conLalnlng Lhe name of Lhe person and an lmage represenLlng Lhem
8ased on our experlence wlLh llsL lLems we can seL up a uragZone for Lhe uaLavlew
conLalner and reglsLer Lhe dlv elemenLs wlLh a class person uslng Lhe LxL
dd8eglsLry lf you Lry Lhls approach youll see why lLs noL Lhe rlghL one for Lhls
parLlcular appllcaLlonlL slmply doesnL work! 1he person nodes canL be dragged
around as youd expecL
1he reason for Lhls lles wlLh Lhe LxLdd8eglsLry As Lhe chlldren of a uragZone
need Lo be reglsLered wlLh Lhe LxLdd8eglsLry before Lhey can be dragged
around we would need Lo ensure LhaL every posslble chlldln our case Lhe h1
and lmg Lagsls reglsLered 1hls ls clearly noL a very pracLlcal soluLlon and so we
musL Lake a dlfferenL approach
ueallng wlLh drag daLa
We need Lo deal wlLh Lhls lssue on a sllghLly hlgher level 8aLher Lhan deallng wlLh
each lndlvldual chlld node we wlll look aL overrldlng Lhe defaulL behavlor of LxL
dduragZone ln order Lo achleve our goal
1he geLuraguaLa meLhod of Lhe uragZone class ls called whenever a mousedown
occurs wlLhln Lhe uragZone conLalner 1hls means LhaL we can use lL Lo llsLen for Lhe
sLarL of a drag evenL no maLLer whlch chlld node ls cllcked ln our clrcumsLances
well examlne Lhe LargeL of Lhe mousedown evenL and navlgaLe up Lhrough Lhe uCM
unLll we nd Lhe person node LhaL represenLs Lhe lLem we really wanL Lo use ln our
drag operaLlon So Lhe code for seLLlng up our uragZone would look llke Lhls
new LxLdduragZone(personvlewgeLLl()
geLuraguaLa funcLlon(e)
var conLalner egeL1argeL(dlvperson 3 Lrue)
reLurn
ddel conLalner

)
214
As menLloned earller we geL Lhe person conLalner node from Lhe mousedown evenL
and we use lL Lo populaLe Lhe ddel properLy of Lhe ob[ecL LhaL ls reLurned from
geLuraguaLa Larller ln Lhe chapLer when deallng wlLh dropplng a node onLo a
uropZone we looked aL Lhe draguaLaddel properLy Lo nd Lhe node LhaL was belng
dropped 1hls ls Lhe same daLa buL from Lhe oLher polnL of vlewLhls ls how lL
geLs populaLed
now weve goL our uaLavlew worklng as we expecLed buL Lhere are a couple of
lnLeresLlng addlLlons LhaL we can make aL Lhls polnL LeLs examlne Lhose now
roxles and meLadaLa
When we specled Lhe ddel properLy ln geLuraguaLa we were essenLlally
populaLlng Lhe proxy LhaL was golng Lo follow Lhe mouse polnLer as we dragged our
node around 1hls ls a useful conslderaLlon Conslder Lhe followlng code
reLurn
ddel conLalnerdown(h1)dom

now lnsLead of our proxy appearlng as Lhe full node lLll only appear as Lhe h1 Lag
wlLhln our node When weve Lalked abouL proxles before weve menLloned LhaL
dragglng a cuLdown verslon of Lhe full lLem can be a very useful approach and Lhls
ls how lL can be achleved when uslng uragZones
We also have Lhe opLlon of passlng exLra daLa lnLo Lhe drag by uslng oLher properLles
of draguaLa ln facL any lnformaLlon LhaL we add Lo Lhe ob[ecL wlll be avallable when
Lhe lLem ls dropped Peres whaL were golng Lo do ln our example code
reLurn
ddel conLalnerdown(h1)dom
record personvlewgeL8ecord(conLalnerdom)

213
We can acLually pass Lhe record assoclaLed wlLh Lhe lLem LhaL was cllcked as a daLa
lLem ln our drag operaLlon 1hls ls golng Lo come ln very handy when we come Lo
populaLe our lormanel
uropplng ln Lhe deLalls
1hls ls Lhe oLher slde of Lhe colnhandllng Lhe drop acLlon LhaL ls Lrlggered when we
release a dragged node from our uaLavlew 1he concepLs behlnd Lhls wlll be famlllar
from our prevlous examples We need Lo creaLe a urop1argeL from Lhe lormanel
and Lhen overrlde lLs noLlfyurop meLhod Lo dlcLaLe whaL wlll happen when Lhe drop
acLlon occurs
LeLs Lake a look aL Lhe code for our lormanel
var deLalllorm new LxLformlormanel(
wldLh 230
helghL 80
defaulL1ype LexLfleld
lLems
fleldLabel name namename
fleldLabel ClLy nameclLy
fleldLabel CounLry namecounLry

)
1hls ls all preLLy sLandard sLuff buL noLe LhaL Lhe names of Lhe form elds maLch up
wlLh Lhe names of Lhe elds ln our daLa record LhaL was used Lo populaLe Lhe drag
node We can now seL up Lhe urop1argeL
new LxLddurop1argeL(deLalllormbodydom
noLlfyurop funcLlon(source e daLa)

var record sourcedraguaLarecord
deLalllormgeLlorm()load8ecord(record)
reLurn Lrue

)
noLe LhaL we can grab Lhe full record sLralghL from Lhe draguaLa on Lhe drag source
and load lL lnLo Lhe form 1haLs Lhe sLrengLh of belng able Lo puL any daLa we llke
lnLo draguaLa and here lL shows how we can populaLe Lhe form wlLh a mlnlmum
amounL of code
216
uragdrop groups
We sLarLed off our Lour of LxLdd by looklng aL how lndlvldual nodes could be
moved around Lhe screen and placed ln deslgnaLed conLalners lrom Lhere we
descrlbed Lhe meLhods used Lo enable dragglng for many nodes aL once and how
Lhese could be dropped wlLhln conLalners wlLh chlld nodes
When youre deallng wlLh loLs of draggable elemenLs Lheres a Lhlrd faclllLy LhaL can
be used Lo make sure LhaL your nodes behave ln Lhe way youd expecL dragdrop
groups uragSource uragZone urop1argeL and uropZone accepL Lhe conguraLlon
opLlon ddCroup LhaL ln Lurn accepLs a sLrlng ldenLler lndlcaLlng whlch group youd
llke Lo asslgn your lnsLance Lo
8uL whaL does Lhls conguraLlon opLlon acLually do ln pracLlcal Lerms and whaL
new feaLures does lL provlde for your appllcaLlons? Well sLrlcLly speaklng lL means
LhaL a dragdrop class lnsLance wlll only be able Lo lnLeracL wlLh oLher dragdrop only be able Lo lnLeracL
wlLh oLher dragdrop be able Lo lnLeracL wlLh oLher dragdrop
lnsLances ln Lhe same group buL LhaLs a raLher dry way of explalnlng lL LeLs look aL
a realworld use case
nurslng our dragdrop Lo healLh
lmaglne LhaL you have a screen ln your appllcaLlon wlLh four separaLe conLalners
each of whlch ls specled as boLh uragZone and uropZone WlLhouL dragdrop
groups Lhe defaulL behavlor here would be LhaL Lhe user could drag from any one of
Lhese dened areas Lo any of Lhe oLher Lhree
ln many cases youre llkely Lo wanL Lo llmlL Lhese klnds of lnLeracLlons LeLs say LhaL
conLalners one and Lwo represenL Loday and Lomorrows appolnLmenLs for a docLor
and conLalners Lhree and four are appolnLmenLs for a nurse AppolnLmenLs for Lhe
docLor canL be Lransferred Lo Lhe nurse and ones for Lhe nurse canL be glven Lo Lhe
docLor So Lhe appllcaLlon needs Lo lmplemenL Lhls resLrlcLlon
We could do Lhls very easlly by speclfylng a ddCroup of docLor for conLalners one
and Lwo and ddCroup of nurse for conLalners Lhree and four 1hls would mean LhaL
an aLLempL Lo drag a nurse appolnLmenL lnLo a docLor conLalner would fall as Lhe
nurse dragdrop ob[ecLs are noL allowed Lo lnLeracL wlLh lLems ouLslde Lhelr own
draganddrop groups
1hls klnd of advanced funcLlonallLy becomes essenLlal when youre wrlLlng
appllcaLlons LhaL make exLenslve use of draganddrop We donL need Lo wrlLe
code Lo check wheLher Lhe drop LargeL ls correcL as dragdrop groups Lake care of
Lhls for us
217
lLs all ln Lhe deLalls
Weve had a good overvlew of Lhe maln classes wlLhln Lhe LxLdd package now
So lLs Llme Lo sLarL looklng aL some of Lhe lnLeresLlng conguraLlon opLlons
properLles meLhods and evenLs LhaL allow us Lo Lweak Lhe behavlor of Lhe
draganddrop classes
ConflguraLlon
1he blg four of LxLdduragSource uragZone urop1argeL and uropZoneare
noLable wlLhln Lhe LxL !S framework for belng lmporLanL classes LhaL donL really
offer much ln Lhe way of conguraLlon opLlons 1haLs because desplLe belng
lmporLanL Lheyre all relaLlvely slmple Lo seL up deslgnaLe a llnked node and
away you go 1haL sald weve already covered one opLlon LhaL all of Lhese classes
supporLddCroupand Lhere are a couple more common opLlons avallable
1he dropAllowed and dropnoLAllowed opLlons are boLh sLrlngs LhaL dlcLaLe Lhe CSS
classes Lo be passed Lo Lhe drag source when Lhe respecLlve condlLlons are Lrue lor
example lf Lhe lLem ls hoverlng over an lnvalld drop LargeL Lhen Lhe class specled
by dropnoLAllowed wlll be used
urop1argeL and uropZone have Lhe overClass opLlon ln common 1hls allows
you Lo change Lhe CSS class applled Lo Lhe drop LargeL elemenL when a drag source
moves over lL 1hls ls blank by defaulL and so ls a useful meLhod of augmenLlng Lhe
graphlcal cue provlded by Lhe sLaLus proxy
lLs all under conLrol
1he draganddrop supporL wlLhln LxL !S ls sLrucLured a llLLle dlfferenLly Lo Lhe resL of
Lhe framework 1yplcally Lo add ln your own behavlor you wlll handle evenLs LhaL a
class res off as weve seen when dlscusslng Lhe 1reeanel and oLher componenLs
WlLh LxLdd Lhere are very few evenLs Lo handle lnsLead a number of absLracL
meLhods are provlded for Lhe developer Lo overrlde
LxL !S descrlbes Lhese meLhods as absLracL meLhods a concepL rarely
seen ln !avascrlpL as lL ls noL sLrlcLly supporLed Pere Lhe Lerm slmply
refers Lo an empLy lmplemenLaLlon LhaL needs Lo be replaced by Lhe
developer ln order Lo achleve Lhe deslred funcLlonallLy
218
Weve already seen how Lhe noLlfyurop and onnodeurop meLhods for uropZone
need Lo be overrldden Lo compleLe Lhe drop process buL Lhere are plenLy of oLher
absLracL meLhods LhaL we can hook ln Lo ln facL even for Lhe drop acLlon Lhere are a
number of slmllarsoundlng meLhods avallable for use ln cerLaln slLuaLlons
noLlfyurop
onConLalnerurop
onnodeurop
Cn Lhe face of lL all of Lhese could apply Lo Lhe same scenarlo handllng Lhe acLlon
performed when an lLem ls dropped on a LargeL 1he Lrlck ls LhaL Lhe rsL Lhree are
acLually relaLed Cn uropZone noLlfyurop lsnL acLually absLracL lnsLead lL slmply
esLabllshes wheLher onnodeurop or onConLalnerurop wlll be called lLs Lhese Lwo
meLhods LhaL need Lo be overrldden lf you wanL Lo perform a drop acLlon
Managlng our movemenL
1he LxLdd package lncludes a uraguropMgr class whlch ls generally lnLended
for use as an lnLernal helper for Lhe framework lLself Powever Lhere are a few
lnLeresLlng polnLs Lo noLe abouL Lhe class LeLs brley revlew Lhe way LhaL Lhls
manager can L lnLo your own appllcaLlons
Clobal properLles
As uraguropMgr ls used Lo Lrack all of Lhe draganddrop manlpulaLlons LhaL occur
we can use lL Lo globally change Lhe way Lhose manlpulaLlons are handled lor
example Lhe cllcklxel1hresh properLy can be changed Lo seL Lhe mlnlmum
number of plxels LhaL Lhe mouse needs Lo move before a drag ls lnlLlaLed 1hls can be
useful ln slLuaLlons where your drag LargeLs also accepL a cllck evenLyou may wlsh
Lo lncrease Lhls value Lo prevenL accldenLal drags
Slmllarly Lhe cllck1lme1hresh normally seL Lo 1000 mllllseconds or 1 second
dlcLaLes Lhe delay Llme beLween cllcklng an elemenL and sLarLlng Lhe drag 1hls could
be decreased Lo make Lhe sLarL of Lhe process seem more responslve or lncreased lf
lLs lnLerferlng wlLh oLher acLlons
We can also neLune Lhe way ln whlch Lhe drop acLlon ls handled 8y defaulL Lhe
draganddrop mode ls seL Lo Cln1 where Lhe poslLlon of Lhe mouse polnLer ls used
Lo deLermlne wheLher Lhe ob[ecL belng dragged ls wlLhln Lhe drop LargeL We can
change Lhls behavlor Lo ln1L8SLC1 mode
LxLdduraguropMgrmode LxLdduraguropMgrln1L8SLC1
-
-
-
219
1hls means LhaL Lhe edges of Lhe drag source and drop LargeL are used Lo esLabllsh
lnLeracLlon lf Lhe Lwo lLems overlap Lhem Lhen Lhe drop LargeL ls consldered valld
1hls can be handy lf Lhe lLems you wlsh Lo drag are golng Lo be large as lL could
be easler for Lhe user Lo slmply make Lhe edges Louch raLher Lhan move Lhe mouse
polnLer dlrecLly over Lhe LargeL
1hese properLles are only llkely Lo be used ln edgecases buL would come ln handy
as parL of our LoolklL
Scroll managemenL
Cne very sllck parL of Lhe draganddrop puzzle LhaL can be handled auLomaLlcally
ls scrolllng a conLalner whlle Lrylng Lo drag an lLem lnLo an offscreen reglon 1he
LxLddScrollManager means LhaL you can elLher drag lLems off bounds from Lhe
documenL body or cause an elemenL wlLh scrollbars Lo shlfL as you drag Lhe elemenLs
wlLhln lL SeLLlng Lhls faclllLy up ls preLLy slmple
LxLddScrollManagerreglsLer(myConLalner)
WlLh Lhls code weve seL up Lhe myConLalner elemenL Lo be scrollmanaged noLe
LhaL Lhe scrolls occur ln shorL bursLs as you reach Lhe edges of Lhe conLalner We
can Lweak Lhe behavlor of Lhe scroll as well by seLLlng Lhe ddScrollConflg of Lhe
elemenL Lo be reglsLered
var el LxLgeL(myConLalner)
elddScrollConflg
LxLddScrollManagerreglsLer(el)
1he ddScrollConflg conslsLs of a conguraLlon ob[ecL conLalnlng a number of
opLlons 1he bursLs of scrolllng are anlmaLed by defaulL and lL can be dlsabled by
seLLlng anlmaLe Lo false or can have lLs duraLlon changed by seLLlng anlmuuraLlon
Lo a value oLher Lhan Lhe defaulL of 04 seconds
elddScrollConflg
anlmuuraLlon 02 // anlm Lakes 02 seconds Lo compleLe

We can lncrease Lhe frequency of scroll bursLs by seLLlng Lhe frequency Lo a
mllllsecond value and change Lhe amounL of plxels by whlch Lo scroll by uslng
Lhe lncremenL opLlon We can also conLrol Lhe wldLh of Lhe Lrlgger area on boLh Lhe
horlzonLal and Lhe verLlcal sldes by uslng Lhe vLhresh and hLhresh opLlons whlch
are boLh specled as plxel numbers
220
AlLhough Lhe LxLddScrollManager performs a slmple purpose and does so wlLh
very llLLle code Lhe uLlllLy of Lhls class should noL be underesLlmaLed SeLLlng up Lhls
funcLlonallLy manually would be Laxlng and lL ls such a cruclal parL of draganddrop
LhaL wlLhouL ScrollManager wed be handcodlng lL ln every appllcaLlon we wrlLe
So whlle LxLddScrollManager ls a falrly slmple uLlllLy class lLs Lhe one LhaL
makes many common draganddrop scenarlos a greaL deal easler Lo develop
uragglng wlLhln componenLs
As weve seen prevlously Lhere are a couple of componenLs LhaL offer draganddrop
supporL compleLely ouL of Lhe box lLs lmporLanL Lo remember LhaL Lhese feaLures
exlsL Clven our new draganddrop knowledge we could lmplemenL Lhem from
scraLch lnsLead well qulckly revlew Lhe maln LxL componenLs LhaL have Lhls faclllLy
baked ln
1reeanel
1he defaulL LxL1reeanel noL only enables draganddrop vla Lhe provlded
conguraLlon opLlon buL exposes a number of evenLs such as beforenodedrop LhaL
allow us Lo hook our own funcLlonallLy lnLo Lhe componenL
8y uslng A!Ax requesLs we can perslsL Lhe resulLs of our draganddrop acLlons
Lo Lhe server for reLrleval laLer lf youre uslng mulLlple 1reeanels you can even
draganddrop beLween Lhem and resLrlcL Lhe dlrecLlon of movemenL uslng Lhe
enableurag and enableurop conguraLlon opLlons
221
Crldanel
1he LxLgrldCrldanel also provldes draganddrop supporL ouL of Lhe box wlLh
Lhe use of Lhe enableuragurop conguraLlon opLlon SeLLlng Lhls Lo Lrue wlll allow
you Lo begln dragglng rows ouL of your grld 8uL you would sLlll need Lo provlde a
cusLom urop1argeL for Lhe row desLlnaLlon 1hls could even be anoLher Crldanel
buL lL means LhaL youll have Lo leverage Lhe knowledge you galned earller ln Lhls
chapLer Lo really puL grld draganddrop Lo good use
1he cusLom LxLgrlduragZone ls also provlded Lo faclllLaLe Lhese acLlons glvlng
you a shorLcuL Lo boLh Lhe daLa belng dragged and Lhe grld LhaL holds lL 1hls class
means LhaL Lheres a blL less heavy llfLlng requlred when you wanL Lo drag rows
wlLhln your appllcaLlon
uslng lL ln Lhe real world
1here are many cases where draganddrop ls acLually a barrler for Lhe usersuch
as when addlng an acLlon LhaL Lakes longer Lo compleLe Lhan Lhe more sLandard
approach Why draganddrop someLhlng when cllcklng lL could be [usL as effecLlve?
1he vlsual cue of Lhe draganddrop sLaLus proxy may look greaL ln a screenshoL buL
ln a realworld slLuaLlon Lhere may be a more loglcal approach
222
1haL sald Lhe vlsual elemenL of draganddrop ls sLlll lLs mosL lmporLanL feaLure
1here ls no beLLer way of organlzlng a llsL or a Lree of lnformaLlon Lhan by pulllng lL
around Lhe screen uslng Lhe mouse When compleLlng Lasks llke Lhese a graphlcal
represenLaLlon of whaLs golng on wlll noL only help your users Lo geL Lhe [ob
done more qulckly buL when backed by LxL !S could also Lurn ouL Lo be Lhe leasL
developmenLlnLenslve approach as well
LxLdd ls a package LhaL doesnL supply any wldgeLs of lLs own lnsLead lL supporLs
oLher segmenLs of Lhe framework and works as a behlndLhescenes faclllLaLor of
exclLlng end user funcLlonallLy As such lL can be a llLLle dlfculL Lo come Lo grlps
wlLh lL especlally as lL provldes a varleLy of approaches Lo solve slmllar lssues
ln Lhls chapLer weve covered all of Lhe ma[or pleces of Lhe LxL !S draganddrop
puzzle So when you do come up wlLh a problem LhaL can be Lackled uslng
draganddrop you can use uragZones urop1argeLs and SLaLusroxles Lo
achleve Lhe look and feel LhaL your appllcaLlon requlres
Summary
lL feels as lf our knowledge of draganddrop on Lhe Web has come preLLy far from
our undersLandlng ln Lhe earller chapLers We sLarLed off by dlscusslng some of Lhe
Lyplcal demonsLraLlons of draganddrop whlch were developed Lo show off Lhe
Web 20 funcLlonallLy Some of Lhose demonsLraLlons suffered from a lack of real
uLlllLy buL Lhey were undenlably compelllng We showed how Lo creaLe a few fancy
buL polnLless effecLs of our own Lo geL a grasp of Lhe underlylng concepLs of Lhe
LxLdd package and Lhen qulckly expanded our knowledge Lo harness Lhe
draganddrop classes LhaL allow our appllcaLlons Lo Lake advanLage of Lhls feaLure
1he wlde range of lnbullL supporL LhaL LxL provldes ls only parL of Lhe sLory
albelL a very lmporLanL parL 1he 1reeanel for example cerLalnly wouldnL be
as lmpresslve a componenL were lL noL for lLs ablllLy Lo rearrange nodes wlLhln
a hlerarchy uslng slmple draganddrop 8uL Lhe oLher parL of our Lale ls [usL as
lnLeresLlngLhe ways ln whlch we can cusLomlze LhaL bullLln funcLlonallLy and Lhen
replace exLend and lmplemenL our own soluLlons whlch would enable Lhe nexL level
of deskLopllke lnLeracLlvlLy
Am Pllllgenbusch 47 aderborn n8W 33098lLs All abouL Lhe uaLa
LxL !S ls an exLremely powerful crossbrowser llbrary provldlng any developer
wlLh a beauLlful conslsLenL seL of Lools for laylng ouL browserbased appllcaLlons
8uL Lheres a loL more here Lhan [usL preLLy boxes and grlds As Lhe LlLle says lLs all
abouL Lhe daLa! An appllcaLlon wlLhouL daLa ls really noLhlng more Lhan an lnLeracLlve
sLaLlc page and our users are golng Lo wanL Lo manlpulaLe real lnformaLlon Cne of
Lhe wonders of web appllcaLlons ls LhaL Lheyve Laken compuLlng full clrcle back Lo
Lhe days of Lhe cllenL/server appllcaLlon model LxL !Ss A!Axled ob[ecLs provlde
us wlLh Lhe means Lo work wlLh realLlme daLa sLralghL from Lhe server and ln Lhls
chapLer well cover Lhe many dlfferenL ways you can reLrleve from and posL daLa Lo
your LxL !S based appllcaLlons
undersLandlng daLa formaLs
We have dozens of componenL ob[ecLs avallable Lo us wlLhln LxL !S and mosL of
Lhem can Lake dynamlc daLa from Lhe server lLs all ln knowlng whaL klnd of daLa a
componenL can Lake and whaL formaLs are accepLable
8aslc remoLe panel daLa
?ouve probably noLlced LhaL many componenLs are baslcally [usL a box 1ab anels
Accordlon anels and Lhe conLenL area of a wlndow are all [usL large boxes (a dlv
elemenL) or panels Lach of Lhese unlque ob[ecLs has lLs own meLhods and properLles
yeL each of Lhem exLends Lhe LxLanel ob[ecL
Am Pllllgenbusch 47 aderborn n8W 33098lL's All AbouL 1he uaLa
224
Applylng dynamlc daLa Lo a baslc panel ls super slmple because lL Lakes Lhe slmplesL
of formaLs sLralghL LexL or P1ML Cur rsL example wlll load a slmple P1ML page
lnLo a panel llrsL well need Lhe renderlng page
Lxample 1 ch12ex1hLml
dlv ldmalnConLenL
dlv ldchap12_ex01/dlv
/dlv

Pere we have shown whaL wlll go lnslde Lhe body Lag of our example P1ML
page nexL well need a serverslde LemplaLe Lo call for conLenL
Lxample 1 chapLer_12example1a[axhLml
bWllllam Sheakespeare/b loeL LauraeLLe/lbr /
1he lasL Lhlng well need ls Lhe acLual scrlpL Lo creaLe our example anel
Lxample 1 scrlpLschapLer12_01[s
var example1 new LxLanel(
apply1ochap12_ex01
LlLleChapLer 12 Lxample 1
wldLh230
helghL230
frameLrue
auLoLoad
urlexample1a[axhLml

)
)
Calllng Lhe ch12ex1hLml LemplaLe ln Lhe browser wlll run Lhls baslc scrlpL LeLs
look over Lhe code Lo see whaL were dolng
1 We walL unLll Lhe uCM ls rendered (LxLon8eady() funcLlon)
2 We creaLe new LxLanel ob[ecL rendered Lo Lhe chap12_ex01 elemenL (a
dlv on Lhe rendered page)
3 We load ln Lhe conLenLs of Lhe exLernal u8L example1a[axhLml
lL ls very slmple Lo pull ln an P1ML LemplaLe as conLenL for a panel lLem 8uL we
would really llke dynamlc daLa LeLs bulld on Lhls example and pull ln daLa from
an appllcaLlon server We can use Lhe same auLoLoad aLLrlbuLe Lo call an appllcaLlon
server processlng page Lo reLurn daLa
223
AuLhors noLe
LxL !S ls a cllenLslde scrlpLlng llbrary and as such you can use any
serverslde programmlng language LhaL you feel comforLable wlLh ?ou
may have noLlced LhaL some earller examples ln Lhls book are coded ln
P Lxamples wlLhln Lhls chapLer requlre Lhe Adobe Coldluslon server
Lo process Lhe dynamlc daLa and requlre you Lo download and lnsLall Lhe
free uevelopers LdlLlon Lo run Lhe examples Were uslng Coldluslon aL
Lhls polnL Lo lllusLraLe Lwo dlfferenL polnLs
1) 1haL any serverslde processor can feed daLa Lo LxL !S
2) 1haL noL every appllcaLlon server or remoLe appllcaLlon wlll
reLurn daLa ln a sLandard formaL Cur examples of CusLom uaLa
8eaders laLer ln Lhls chapLerwlll lLeraLe Lhls polnL furLher laLer ln Lhls chapLerwlll lLeraLe Lhls polnL
furLher wlll lLeraLe Lhls polnL furLher
1he free Adobe Coldluslon uevelopers LdlLlon server ls avallable aL
hLLp//wwwadobecom 8evlew Lhe sample 8LAuMLLxL le for more
deLalled lnsLrucLlons on accesslng Lhe example les for Lhls chapLer
lor Lxample 2 well change our dlv ld Lo chap12_ex02 and use Lhe chapLer12_
02[s le Lo load Lhe daLa uslng a dlfferenL approach whlch now reads as follows
var example2 new LxLanel(
apply1ochap12_ex02
LlLleChapLer 12 Lxample 2
wldLh230
helghL230
frameLrue
auLoLoad
urlChapLer12Lxamplecfc
params
meLhodexample1
reLurnlormaLplaln
ld1289

)
226
?oull noLlce LhaL Lhe u8L ls now calllng an Adobe Coldluslon ComponenL(ClC)
passlng ln some parameLers Lo geL lLs resulLs We have a very baslc ClC whlch runs
a small query based on Lhe passed parameLers Lo generaLe Lhe conLenL LhaL ls passed
back Lhrough Lhe A!Ax call
Lxample 2 chapLer_12ChapLer12Lxamplecfc
cfcomponenL ouLpuLfalse
cffuncLlon nameexample2 accessremoLe ouLpuLfalse
reLurnLypesLrlng
cfargumenL nameld Lypenumerlc requlredLrue /
cfseL var ouLpuL /
cfseL var q /
cfLry
cfquery nameq daLasourcechapLer12
SLLLC1 flrsLname
lasLname
occupaLlon
l8CM eople
WPL8L lu cfqueryparam cfsqlLypecf_sql_lnLeger
value#A8CuMLn1Sld# /
/cfquery
cfcaLch LypedaLabase
! lace Lrror Pandllng Pere
/cfcaLch
/cfLry
cflf lsueflned(qrecordcounL) and qrecordcounL
cfsaveconLenL varlableouLpuLcfouLpuL
#qflrsLname# #qlasLname# #qoccupaLlon#br /
/cfouLpuL/cfsaveconLenL
/cflf
cfreLurn ouLpuL /
/cffuncLlon
/cfcomponenL
As Lhe purpose of Lhls book lsnL Lo Leach you a serverslde language leLs break Lhls
down ln Lhe slmplesL way 1he ClC Lakes an argumenL of lu whlch ls passed lnLo
a query of Lhe eople Lable lf a record ls reLurned from Lhe query a baslc sLrlng ls
reLurned ln a predeLermlned formaL llrsLname LasLname CccupaLlon 1he A!Ax
call (auLoLoad) ls passlng several parameLers Lhe meLhod Lo run wlLhln Lhe ClC
Lhe formaL Lype Lo reLurn (plaln LexL ln Lhls case) and Lhe meLhod argumenLs (ln Lhls
case ld)
227
CoLchas wlLh P1ML daLa
?ou musL remember LhaL you should call daLa only vla A!Ax from Lhe domaln of your
slLe ALLempLlng Lo reference daLa from a slLe ouLslde of your domaln wlll error ouL aL
Lhe browser level as lLs consldered Lo be crossslLe scrlpLlng CrossslLe scrlpLlng ls a
means of dellverlng mallclous scrlpLs Lo an unsuspecLlng user generally from ouLslde
of Lhe slLe whlch Lheyre vlslLlng MosL modern browsers now have bullLln faclllLles Lo
prevenL Lhls Lype of aLLack LxL !S does provlde faclllLles for bypasslng Lhls resLrlcLlon
vla Lhe LxLdaLaScrlpL1agroxy buL Lhls should only be used lf you are condenL
of Lhe securlLy of Lhe daLa you are requesLlng and lLs effecL on your appllcaLlon
CLher formaLs
LxL !S has Lhe capablllLy Lo consume exLernal daLa ln a varleLy of formaLs
lormaL Lxample
laln 1exL Lrlc ClapLon ls a consummaLe gulLarlsL
P1ML b!lml Pendrlx ls consldered by some Lo have been one of Lhe nesL
blues gulLarlsLs LhaL ever llved/b
!SCn var Lhe8eaLles
members 4
band
ld1flrsL_name!ohn
lasL_nameLennon
ld2flrsL_nameaul
lasL_nameMcCarLney
ld3flrsL_nameCeorge
lasL_nameParrlson
ld4flrsL_name8lngo
lasL_nameSLarr

xML band
members4/members
member
flrsLname!lmmy/flrsLname
lasLnamealge/lasLname
/member
member
flrsLname8oberL/flrsLname
lasLnamelanL/lasLname
/member

228
lormaL Lxample
!avaScrlpL
Array
var lnklloyd
1uavldCllmour
28ogerWaLers
38lchardWrlghL
4nlckMason

1he formaL LhaL you choose may be declded accordlng Lo Lhe LxL !S ob[ecL you are
uslng Many developers llke Lo use xML as many daLabases (MS SCL Cracle
MySCL osLgreSCL and u82 Lo name a few)can reLurn lL naLlvely and many can reLurn lL naLlvely and
many and many
8LS1ful web servlces use lL AlLhough Lhls ls a good Lhlng especlally when worklng
wlLh varylng exLernal appllcaLlons xML can be very verbose aL Llmes uaLa calls LhaL
reLurn small seLs of daLa can qulckly clog up Lhe blL sLream because of Lhe verboslLy
of Lhe xML synLax AnoLher conslderaLlon wlLh xML ls Lhe browser englne An xML
daLa seL LhaL looks ne Lo Mozllla llrefox may be re[ecLed by lnLerneL Lxplorer and
lnLerneL Lxplorers xML parslng englne ls slow as well !SCn or !avaScrlpL Cb[ecL
noLaLlon daLa packages Lend Lo be much smaller Laklng up less bandwldLh lf Lhe
ob[ecL youre uslng can accepL lL a slmple array can be even smaller alLhough you
wlll lose Lhe descrlpLlve naLure LhaL Lhe !SCn or xML synLaxes provlde
1he daLa sLore ob[ecL
MosL LxL !S ob[ecLs (and even panels wlLh some addlLlonal work) Lake daLa
as 8ecords or nodes 8ecords are Lyplcally sLored wlLhln a daLa sLore ob[ecL 1hlnk
of a SLore as belng slmllar Lo a spreadsheeL and each 8ecord as belng a row wlLhln
Lhe spreadsheeL
1he daLa package conLalns many ob[ecLs for lnLeracLlng wlLh daLa ?ou have several
dlfferenL SLore Lypes
!sonSLore SLore ob[ecL speclcally for worklng wlLh !SCn daLa
SlmpleSLore SLore ob[ecL for worklng wlLh arrays and xML daLa
CrouplngSLore SLore ob[ecL LhaL holds grouped daLaseLs
Any SLore wlll requlre some klnd of 8eader ob[ecL Lo parse Lhe lnbound daLa and
agaln Lhe daLa package has several
Array8eader lor worklng wlLh !avaScrlpL arrays
!son8eader lor worklng wlLh !SCn daLaseLs
xml8eader lor worklng wlLh xML daLaseLs
-
-
-
-
-
-
229
1he 1reeanel ob[ecL doesnL use a LradlLlonal daLa SLore buL has lLs
own speclallzed sLore called a 1reeLoader whlch ls passed lnLo Lhe
conguraLlon Lhrough Lhe loader cong opLlon 1he 1reeLoader
accepLs slmple arrays of denlLlon ob[ecLs much llke Lhose expecLed by an
Array8eader See Lhe LxL !S Al (hLLp//exL[scom/deploy/dev/
docs/) for more lnformaLlon
ueflnlng daLa
SLore ob[ecLs are easlly congured requlrlng Lhe source of Lhe daLa and a descrlpLlon
of Lhe expecLed records Cur appllcaLlons know Lo expecL daLa buL we have Lo
Lell Lhem whaL Lhe daLa ls supposed Lo look llke LeLs say for lnsLance LhaL our
appllcaLlon manages medla asseLs for our slLe We would have a serverslde ob[ecL
LhaL querles a folder ln our le sysLem and reLurns lnformaLlon on Lhe les LhaL Lhe
folder conLalns 1he daLa reLurned mlghL look someLhlng llke Lhls

flles
name beaLles[pg paLh/lmages/ slze463 lasLmod
12/21/2001
name led_zepplln[pg paLh/lmages/ slze432
lasLmod 20011221 000000
name Lhe_doors[pg paLh /lmages/ slze246 lasLmod
20011221 000000
name [lml_hendrlx[pg paLh /lmages/ slze643
lasLmod 20011221 000000

1hls ls a small !SCn daLaseL lLs rooL ls flles followed by an array of ob[ecLs now
we have Lo dene Lhls daLa for our appllcaLlon
var recordCb[ new LxLdaLa8ecordcreaLe(
name name
mapplng name

name llleaLh
mapplng paLh

name llleSlze
mapplng slze
Lype floaL
230

name LasLModlfled
mapplng lasLmod
Lype daLe
daLelormaL m/d/?
)
Weve applled a name LhaL each eld wlll be referenced by wlLhln our appllcaLlon
mapplng lL Lo a varlable wlLhln a daLaseL ob[ecL Many varlables wlll auLomaLlcally
be Lyped buL you can force (casL) Lhe Lype of a varlable for greaLer denlLlon and
easler manlpulaLlon
1he varlous varlable Lypes are
auLo (Lhe defaulL whlch lmplles no converslon)
sLrlng
lnL
floaL
boolean
daLe
Weve also applled speclal sLrlng formaLLlng Lo our daLe ob[ecL Lo have our ouLpuL
Lhe way we wanL
uaLes are Lyplcally passed as sLrlngs whlch usually have Lo be casL lnLo
uaLe ob[ecLs for proper manlpulaLlon 8y speclfylng a daLe Lype LxL !S
wlll handle Lhe converslon uslng Lhe daLelormaL we dene 1he LxL
!S documenLaLlon for Lhe uaLe ob[ecL provldes an exLenslve formaL llsL
whlch we can use Lo dene Lhe hundreds of uaLe sLrlng permuLaLlons we
may come across ln our code
More on mapplng our daLa
ln Lhe prevlous example we covered Lhe denlLlon of a slmple !SCn ob[ecL 1he
same Lechnlque ls used for xML ob[ecLs wlLh Lhe only dlfference belng how
Lo map a 8ecord eld Lo a speclc node 1haLs where Lhe mapplng cong opLlon
comes ln 1hls opLlon can Lake a uCM paLh Lo Lhe node wlLhln Lhe xML 1ake Lhe
followlng example
band
members4/members
member
flrsLname!lmmy/flrsLname
-
-
-
-
-
-
231
lasLnamealge/lasLname
/member
member
flrsLname8oberL/flrsLname
lasLnamelanL/lasLname
/member

1o creaLe a mapplng of Lhe flrsL_name node you would have Lhe cong look
llke Lhls
mapplngmember flrsL_name
!avaScrlpL arrays are easler as Lhey donL requlre mapplng oLher Lhan denlng each
eld ln Lhe same order lL would be seen ln Lhe array
var lnklloyd
1uavldCllmour
28ogerWaLers
38lchardWrlghL
4nlckMason

noLe here LhaL we wonL creaLe() a 8ecord ob[ecL buL [usL use Lhe flelds cong
opLlon of Lhe SLore
flelds
nameld
nameflrsL_name
namelasL_name

ulllng daLa lnLo Lhe sLore
lL ls almosL as easy Lo reLrleve daLa from Lhe server as lL was Lo populaLe LhaL anel
ob[ecL earller and we can do so uslng a very slmllar synLax
var recordCb[ new LxLdaLa8ecordcreaLe(
name nAML
mapplng name

name ul8LC1C8?
mapplng paLh

name SlZL
mapplng slze
232
Lype floaL

name uA1LLAS1MCulllLu
mapplng lasLmod
Lype daLe
daLelormaL m/d/?
)
var ourSLore new LxLdaLa!sonSLore(
basearams
meLhod geLlllelnfo
reLurnlormaL!SCn
sLarLaLh /lmages/

rooLflles
ldname
flelds recordCb[
llsLeners
beforeload
fn funcLlon(sLore opLlons)
lf (opLlonssLarLaLh (opLlonssLarLaLhlengLh 0))
sLorebasearamssLarLaLh fleldval

scope Lhls

)
ourSLoreload()
1hls Lles all of our pleces LogeLher Lo creaLe our daLa SLore ob[ecL llrsL we use Lhe
url cong opLlon Lo dene Lhe locaLlon from where we wlll geL our daLa 1hen we
seL Lhe lnlLlal seL of parameLers Lo pass on Lhe load requesL llnally lL may be LhaL
we wanL Lo condlLlonally pass dlfferenL parameLer values for each requesL lor Lhls
we can dene a speclal llsLener Lo pass new lnformaLlon ln Lhls case whenever Lhe
load() meLhod ls called lf Lhe sLarLaLh properLy ls passed lnLo Lhe meLhod as
an argumenL before Lhe SLore reLrleves Lhe daLa lL wlll change Lhe sLarLaLh base
parameLer Lo maLch Lhe value passed ln
Wheres Lhe screenshoL?
Ck LhaLs a valld quesLlon A daLa SLore by lLself has no vlslble
ouLpuL ln Lhe browser dlsplay 1hls ls why Lools llke llrefox wlLh Lhe
llrebug plugln or Lhe ApLana developmenL luL can be so lmporLanL
when dolng !avaScrlpL developmenL 1hese Lools can allow you Lo dlrecL
processlng ouLpuL Lo speclal wlndows Lo monlLor whaLs golng on wlLhln
your appllcaLlon
233
uslng a uaLa8eader Lo map daLa
Some appllcaLlons can naLlvely reLurn daLa ln xML or even !SCn buL lL mlghL noL
always be ln Lhe formaL LxL !S ls expecLlng As an example Lhe !sonSLore wlLh lLs
bullLln !son8eader expecLs an lncomlng daLaseL ln Lhe followlng formaL

rooLname

varlablename1 llrsL record
varlablename2 0

varlablename1 Second record
varlablename2 33

1hls (!SCn) ob[ecL has a rooLname properLy whlch ls Lhe name of Lhe rooL of Lhe
daLaseL conLalnlng an array of ob[ecLs Lach of Lhese ob[ecLs has Lhe same aLLrlbuLes
1he aLLrlbuLe names are ln quoLes values are Lyplcally ln quoLes wlLh Lhe excepLlon
of numbers whlch may or may noL be ln quoLes
So lf a serverslde call reLurns daLa ln Lhls expecLed formaL Lhen Lhe base !son8eader
lncluded wlLhln Lhe !sonSLore wlll auLomaLlcally parse Lhe recelved daLaseLs
Lo populaLe Lhe SLore ob[ecL 8uL whaL happens lf Lhe serverslde appllcaLlon
uses a sllghLly dlfferenL formaL? As an example Lhe Adobe Coldluslon 8 server
can auLomaLlcally reLurn !SCn daLaseLs for remoLe requesLs LranslaLlng any of
Coldluslons naLlve daLa Lypes lnLo !SCn daLa 8uL Coldluslons !SCn formaLLlng ls
Lyplcally dlfferenL especlally when deallng wlLh query daLa (whlch ls whaL a daLaseL
would usually be creaLed from) Peres an example of a !SCn daLaseL belng reLurned
from a Coldluslon query ob[ecL

CCLuMnSnAMLSlZL1?LuA1LLAS1MCulllLuA118l8u1LS
MCuLul8LC1C8?
uA1A
lMC1[pg382360llle!une 13 2003
233008PwwwrooLLxL8ooklmages
lMC2!C1108490llle!une 13 2003
lMC3!C1136108llle!une 13 2003
lMC4!C1338306llle!une 13 2003

234
All of Lhe daLa we need ls here buL Lhe formaL canL be properly parsed by Lhe base
!son8eader So whaL do we do now?
uslng a cusLom uaLa8eader
LxL !Ss bullLln classes provlde ouLsLandlng ease of use ouLofLhebox buL (as we
can see) someLlmes we need someLhlng a llLLle speclal posslbly due Lo a dlfferenL
lmplemenLaLlon for a speclc appllcaLlon server (such as Coldluslon) or posslbly
due Lo an exLernal appllcaLlon Al (lllckr for example) We could probably
lmplemenL someLhlng on Lhe serverslde Lo puL our daLa ln Lhe necessary formaL buL
Lhls creaLes unnecessary overheads on our serverslde plaLform Why noL [usL use
Lhe cllenL Lo handle Lhese mlnor LransformaLlons? 1hls helps dlsLrlbuLe Lhe load ln
our appllcaLlons and makes more effecLlve use of all of Lhe resources LhaL we have
on hand
LxL !S provldes us wlLh Lhe faclllLles for creaLlng cusLom uaLa8eaders for mapplng
our daLa as well as slmple means (Lhe reader cong opLlon) for denlng Lhese
readers ln our sLore
ln our currenL exerclse were lucky ln LhaL we donL have Lo wrlLe our own
uaLa8eader 8ecause Lhe Adobe Coldluslon server plaLform ls so wldely used Lhe
LxL !S communlLy has already produced a cusLom reader [usL for Lhls Lask A slmple
search of Lhe LxL !S lorums (hLLp//exL[scom/forum/) wlll help you nd many
cusLom readers for daLa ln a varleLy of formaLs !usL Lake Lhe Llme Lo verlfy (read)
Lhe code prlor Lo use because lL ls ls belng provlded by a Lhlrd parLy 8y uslng Lhe
Cl!son8eader wlLh a few mlnor modlcaLlons Lo our scrlpL we can easlly read Lhe
!SCn daLa formaL belng reLurned by Coldluslon
llrsL leLs converL our 8ecord ob[ecL lnLo a slmple array whlch wlll become a
model of our records lnclude a scrlpL Lag ln your calllng LemplaLe Lo lnclude Lhe
Cl!son8eader[s le prlor Lo Lhe scrlpL Lag for your cusLom scrlpL 1hen well make
Lhe followlng ad[usLmenLs Lo our cusLom scrlpL
var recordModel
nameflle_namemapplngnAML
nameflle_slzemapplngSlZL
nameLypemapplng1?L
namelasLmodmapplnguA1LLAS1MCulllLu
nameflle_aLLrlbuLesmapplngA118l8u1LS
namemodemapplngMCuL
namedlrecLorymapplngul8LC1C8?

233
now well dene our new uaLa8eader as a Cl!sonSLore ob[ecL
var our8eader new LxLdaLaCl!son8eader(recordModel
ld nAML rooL uA1A)
nexL well change our daLa SLore from belng a !sonSLore Lo belng Lhe base SLore
ob[ecL Lype and apply our reader cong opLlon Lo our8eader
var ourSLore new LxLdaLaSLore(

reader our8eader
We also remove Lhe flelds ld and rooL properLles from Lhe sLore denlLlon as
Lhese are now all handled from wlLhln Lhe readers denlLlon
1he lasL Lhlng well do ls apply anoLher cusLom llsLener Lo our scrlpL so LhaL we can
verlfy wheLher Lhe daLaseL ls properly loaded LeLs modlfy our llsLeners cong
opLlon so LhaL we can aLLach a funcLlon Lo Lhe SLores load evenL llsLener
llsLeners
beforeload
sLorebasearamssLarLaLh fleldval

scopeLhls

load
fn funcLlon(sLore records opLlons)
consolelog(records)

scope Lhls

lf youre uslng lnLerneL Lxplorer for developmenL Lhen Lhls llne of code wlll break
as Lhe consolelog() meLhod lsnL naLlvely supporLed ln LhaL envlronmenL (you can
lnclude addlLlonal scrlpLs Lo use Lhe consolelog() meLhod ln lL llke Lhe one found
aL (url hLLp//wwwmoxleysLraLLoncom/arLlcle/leconsole) ) llrefox
wlLh Lhe llrebug plugln however wlll now glve you some ouLpuL once Lhe daLa has however wlll now
glve you some ouLpuL once Lhe daLa has wlll now glve you some ouLpuL once Lhe daLa has
been reLrleved parsed and loaded lnLo Lhe daLa SLore so LhaL we can see LhaL Lhe
daLa ls now ln our SLore
236
A word abouL evenLs
Many LxL !S ob[ecLs have evenLs LhaL are red when cerLaln acLlons are
Laken upon Lhem or when Lhey reach a cerLaln sLaLe An evenLdrlven
appllcaLlon unllke a procedural programmlng model can llsLen for
changes ln Lhe appllcaLlon such as Lhe recelpL of daLa or Lhe change of a
8ecords value LxL !S provldes an exLenslve Al glvlng us Lhe ablllLy Lo
apply cusLom evenL llsLeners Lo key acLlons wlLhln Lhe appllcaLlon lor
more lnformaLlon revlew Lhe ob[ecL lnformaLlon wlLhln Lhe
LxL !S Al hLLp//exL[scom/deploy/dev/docs/
Cur nal scrlpL mlghL now look llke Lhls
var recordModel
nameLypemapplng1?L
namemodemapplngMCuL

var our8eader new LxLdaLaCl!son8eader(recordModelldnAMLro
oLuA1A)
basearams
meLhod geLlllelnfo8yaLh
reLurnlormaL !SCn
querylormaL column
sLarLaLh /lmages/

reader our8eader
llsLeners
beforeload
sLorebasearamssLarLaLh opLlonssLarLaLh

scopeLhls

237
load
fn funcLlon(sLorerecordsopLlons)
consolelog(records)

scopeLhls

)
ourSLoreload()
1hls now wraps up our code pleces denlng whaL our daLa wlll look llke
congurlng our cusLom reader and seLLlng up our daLa SLore Lo pull ln our !SCn
daLa 1he load llsLener wlll dlsplay Lhe 8ecords reLrleved from Lhe server LhaL are
now ln our SLore
CeLLlng whaL you wanL llndlng daLa
now LhaL we have daLa well Lyplcally need Lo manlpulaLe lL Cnce weve loaded our
daLa SLore wlLh 8ecords Lhe enLlre daLaseL remalns resldenL ln Lhe browser cache
ready for manlpulaLlon or replacemenL 1hls daLa ls perslsLenL unLll we move away
from Lhe page or desLroy Lhe daLaseL or Lhe daLa SLore
LxL !S provldes many dlfferenL opLlons for deallng wlLh our daLa all of whlch are
documenLed wlLhln Lhe Al Pere well explore some of Lhe mosL common Lhlngs
Lo do
llndlng daLa by fleld value
1he rsL Lhlng we mlghL wanL Lo do ls nd a speclc 8ecord LeLs say we
needed Lo know whlch 8ecord from our prevlous examples conLalns Lhe plcLure from our prevlous
examples conLalns Lhe plcLure conLalns Lhe plcLure
of !lml Pendrlx
var [lmllclndex ourSLoreflnd(nAML!lml0falsefalse)
1hls meLhod would reLurn Lhe lndex of Lhe rsL record LhaL had !lml as parL of Lhe
value of Lhe nAML eld lL would sLarL lLs search from Lhe rsL record(0) as lL ls ln
!avaScrlpL array noLaLlon) look for Lhe sLrlng from Lhe beglnnlng of Lhe elds value
(uslng Lrue here wlll search for Lhe sLrlng ln any locaLlon of Lhe nAML eld wlLhln any
record) and perform a caselnsenslLlve search
llndlng daLa by record lndex
Pavlng Lhe lndex ls nlce aL leasL we know whlch 8ecord lL ls now 8uL we also need
Lo reLrleve Lhe 8ecord
var ourlmg ourSLoregeLAL([lmllclndex)
238
1he geLAL() meLhod of Lhe SLore ob[ecL wlll geL a 8ecord aL a speclc lndex poslLlon
wlLhln Lhe SLore
llndlng daLa by record lu
1he besL way Lo look for a unlque record ls by lu lf you already know Lhe lu of your
record Lhls process [usL becomes easler We used Lhe nAML eld as our lu so leLs nd
Lhe record for LhaL same record
var ourlmg ourSLoregeL8yld([lml_hendrlx[pg)
So now we can nd a 8ecord by parLlal value wlLhln a eld geL a 8ecord by lLs
speclc lndex or reLrleve a 8ecord by lLs lu value
CeLLlng whaL you wanL lllLerlng daLa
SomeLlmes you only need a speclc subseL of daLa from your SLore ?our SLore
conLalns a compleLe daLaseL (for cachlng and easy reLrleval) buL you need lL lLered
Lo a speclc seL of 8ecords As an example Lhe cfdlrecLory Lag we used ln our
Coldluslon serverslde call can reLurn an enLlre dlrecLory llsLlng lncludlng all
subdlrecLorles AfLer reLrlevlng Lhe daLa lL may be LhaL we only need Lhe names of
Lhe les wlLhln Lhe sLarLaLh LhaL we posLed lor Lhls we can lLer our cllenLslde
cached daLaseL Lo geL only Lhe 8ecords of Lype llle
ourSLorefllLer(1?Llllefalsefalse)
1hls lLers our daLaseL uslng Lhe 1?L eld 1he daLaseL wlll now only conLaln
8ecords LhaL have a 1?L eld wlLh a value of llle (maLched from Lhe beglnnlng
and caselnsenslLlve)
AfLer worklng wlLh our lLered daLaseL Lhere wlll come a Llme when we wanL our
orlglnal daLaseL back When we lLered Lhe daLaseL Lhe oLher 8ecords dldnL go
away 1heyre sLlll slLLlng ln cache Lo Lhe slde walLlng Lo be recalled 8aLher Lhan
query Lhe server agaln we can slmply clear our lLer
ourSLoreclearlllLer()
8emoLe fllLerlng 1he why and Lhe how
CllenLslde lLerlng ls greaL reduclng our Lrlps Lo Lhe server SomeLlmes however
our record seL ls [usL Loo large Lo pull ln aL once A greaL example of Lhls ls a paglng
grld Many Llmes well only be pulllng ln 23 8ecords aL a Llme 1he cllenLslde
lLerlng meLhods are ne lf we only wanL Lo lLer Lhe resldenL daLaseL buL mosL of
Lhe Llme well wanL a lLer applled Lo all of our daLa
239
SorLlng daLa on remoLe calls ls preLLy easy as we can seL Lhe SLores remoLeSorL
properLy Lo Lrue So lf our SLore was aLLached Lo a grld ob[ecL cllcklng on a column
headlng Lo sorL Lhe dlsplay would auLomaLlcally pass Lhe value ln lLs A!Ax requesL
lllLerlng daLa on remoLe requesLs ls a blL harder 8aslcally we would pass parameLers
Lhrough Lhe SLores load evenL and acL on Lhose argumenLs ln our serverslde meLhod
So Lhe rsL Lhlng well need ls some serverslde code for handllng our lLerlng and
sorLlng Well reLurn Lo our Coldluslon componenL Lo add a new meLhod
Lxample 3 ChapLer_12ChapLer12Lxamplecfc
!
/ ML1PCu geLulrecLoryConLenLs
/
/ [param sLarLaLhsLrlng
/ [param recurseboolean (opLlonal)
/ [param fllelllLersLrlng (opLlonal)
/ [param dlrlllLersLrlng (opLlonal llle|ulr)
/ [param sorLlleldsLrlng (opLlonal
nAML|SlZL|1?L|uA1LLAS1MCulllLu|A118l8u1LS|MCuL|ul8LC1C8?)
/ [param sorLulrecLlonsLrlng (opLlon ASC|uLSC
defaulLs Lo ASC)
/ [reLurn reLCquery

cffuncLlon namegeLulrecLoryConLenLs accessremoLe
ouLpuLfalse reLurnLypequery
cfargumenL namesLarLaLh requlredLrue LypesLrlng /
cfargumenL namerecurse requlredfalse Lypeboolean
defaulLfalse /
cfargumenL namesorLulrecLlon requlredfalse LypesLrlng
defaulLASC /
! SeL some funcLlon local varlables
cfseL var q /
cfseL var reLC /
cfseL var aLLrArgs /
cfseL var ourulr LxpandaLh(A8CuMLn1SsLarLaLh) /
! CreaLe some llsLs of valld argumenLs
cfseL var fllLerLlsL llleulr /
cfseL var sorLulrLlsL ASCuLSC /
cfseL var columnLlsL
nAMLSlZL1?LuA1LLAS1MCulllLuA118l8u1LSMCuLul8LC1C8? /
cfLry
cfseL aLLrArgsrecurse A8CuMLn1Srecurse /
! verlfy Lhe dlrecLory exlsLs before conLlnulng
cflf ulrecLoryLxlsLs(ourulr)
240
cfseL aLLrArgsdlrecLory ourulr /
cfelse
cfLhrow LypeCusLom errorcodeCur_CusLom_Lrror message1he
dlrecLory you are Lrylng Lo reach does noL exlsL /
/cflf
! CondlLlonally apply some opLlonal fllLerlng and sorLlng

cflf lsueflned(A8CuMLn1SfllelllLer)
cfseL aLLrArgsfllLer A8CuMLn1SfllelllLer /
/cflf
cflf lsueflned(A8CuMLn1SsorLlleld)
cflf LlsLllndnoCase(columnLlsLA8CuMLn1SsorLlleld)
cfseL aLLrArgssorL A8CuMLn1SsorLlleld
A8CuMLn1SsorLulrecLlon /
cfelse
cfLhrow LypecusLom errorcodeCur_CusLom_Lrror
message?ou have chosen an lnvalld sorL fleld
lease use one of Lhe followlng columnLlsL /
/cflf
/cflf
cfdlrecLory acLlonllsL nameq
aLLrlbuLeCollecLlon#aLLrArgs# /
! lf Lhere are flles and/or folders
and you wanL Lo sorL by 1?L
cflf qrecordcounL and lsueflned(A8CuMLn1SdlrlllLer)
cflf LlsLllndnoCase(fllLerLlsLA8CuMLn1SdlrlllLer)
cfquery namereLC dbLypequery
SLLLC1 #columnLlsL#
l8CM q
WPL8L 1?L cfqueryparam cfsqlLype cf_sql_varchar
value#A8CuMLn1SdlrlllLer# maxlengLh4 /
/cfquery
cfelse
cfLhrow LypeCusLom errorcodeCur_CusLom_Lrror
message?ou have passed an lnvalld dlrlllLer
1he only accepLed values are llle and ulr /
/cflf
cfelse
cfseL reLC q /
/cflf
cfcaLch Lypeany
! lace Lrror Pandler Pere
/cfcaLch
/cfLry
cfreLurn reLC /
/cffuncLlon
241
1hls mlghL look compllcaLed buL lL really lsnL! Agaln our mlsslon here lsnL Lo
learn Coldluslon buL lL ls lmporLanL Lo have some undersLandlng of whaL your
serverslde process ls dolng WhaL we have here ls a meLhod LhaL Lakes some opLlonal
parameLers relaLed Lo sorLlng and lLerlng vla an P11 CS1 sLaLemenL We use relaLed Lo sorLlng and
lLerlng vla an P11 CS1 sLaLemenL We use vla an P11 CS1 sLaLemenL We use
Lhe same cfdlrecLory Lag Lo query Lhe le sysLem for a llsL of les and folders 1he
dlfference here ls LhaL we now condlLlonally apply some addlLlonal aLLrlbuLes Lo Lhe
Lag so LhaL we can lLer on a speclc le exLenslon or sorL by a parLlcular column
of Lhe query We also have a CueryofCuery sLaLemenL Lo query our reLurned
recordseL lf we wanL Lo lLer furLher by Lhe record 1?L whlch ls a lLerlng
mechanlsm noL bullL lnLo Lhe cfdlrecLory Lag LasLly Lheres also some cusLom error
handllng Lo ensure LhaL valld argumenLs are belng passed lnLo Lhe meLhod
Well make a few modlcaLlons Lo our prevlous SLore scrlpL as well llrsL well need
a few meLhods LhaL can be called Lo remoLely lLer our recordseL
fllLerSLore8y1ype funcLlon (Lype)
ourSLoreload(dlrlllLerLype)

fllLerSLore8yllle1ype funcLlon (flle1ype)
ourSLoreload(fllelllLerflle1ype)

clearlllLers funcLlon ()
ourSLorebasearams new cloneConflg(lnlLlal8asearams)
ourSLoreload()

We have meLhods here for lLerlng our SLore by 1?L for lLerlng by le exLenslon
and for clearlng Lhe lLers 1he values passed lnLo Lhese meLhods are mapped
Lo Lhe proper remoLe meLhod argumenL names Cur SLores beforeload llsLener
auLomaLlcally applles Lhese argumenLs Lo Lhe basearams prlor Lo maklng Lhe A!Ax
call back Lo Lhe server 1he lmporLanL Lhlng Lo remember here ls LhaL each added
parameLer sLays ln basearams unLll Lhe lLers are cleared
lLs also lmporLanL Lo noLe LhaL Lhe load() meLhod can Lake four argumenLs params
callback (a meLhod Lo perform on load) scope (Lhe scope wlLh whlch Lo call Lhe
callback) and add (Lo add Lhe load Lo Lhe alreadyexlsLlng daLaseL) ln Lhe formaL
used above Lhe ob[ecL used as an argumenL for Lhe load() meLhod ls assumed Lo
be Lhe params argumenL because no oLhers are passed lf you are uslng all of Lhe
argumenLs (or aL leasL Lhe rsL Lhree) Lhey would have Lo be wlLhln an ob[ecL
ourSLoreload(dlrlllLerLypesomeMeLhod1oCallLhlsfalse)
242
1he clearlllLer() meLhod does noL work wlLh remoLe lLerlng so we need Lo have
a way Lo recall our lnlLlal basearams when we need Lo clear our lLers and geL our
orlglnal daLaseL back lor Lhls we rsL absLracL our basearams conguraLlon
var lnlLlal8asearams
meLhod geLulrecLoryConLenLs
reLurnlormaL !SCn
querylormaL column
sLarLaLh /LesLdocs/

We Lhen need a way Lo clone Lhe cong ln our acLual SLore conguraLlon lf we
passed Lhe lnlLlal8asearams lnLo Lhe basearams cong opLlon dlrecLly and Lhen
lLered our daLaseL Lhe lLer would be added Lo Lhe lnlLlal8asearams varlable as
Lhe varlable geLs passed by reference 8ecause we wanL Lo be able Lo recall our acLual
beglnnlng basearams well need Lo clone Lhe lnlLlal8asearams ob[ecL 1he clone
geLs seL as Lhe basearams cong opLlon lllLers donL Louch our orlglnal ob[ecL and
we can recall Lhem whenever we need Lo clearlllLer()
lor Lhls well need a slmple meLhod of clonlng a !avaScrlpL ob[ecL
cloneConflg funcLlon (conflg)
for (l ln conflg)
lf (Lypeof conflgl ob[ecL)
Lhlsl new cloneConflg(conflgl)

else
Lhlsl conflgl

We can Lhen change our basearams aLLrlbuLe ln our SLore conguraLlon
basearams new cloneConflg(lnlLlal8asearams)
We used Lhe same funcLlon wlLhln our clearlllLers() meLhod Lo reseL
our basearams Lo Lhelr lnlLlal conguraLlon Pere ls whaL our enLlre scrlpL
looks llke now
Lxample 4 chapLer12_04[s
cloneConflg funcLlon (conflg)
for (l ln conflg)
lf (Lypeof conflgl ob[ecL)
Lhlsl new cloneConflg(conflgl)

243
else
Lhlsl conflgl

var recordModel
nameLypemapplng1?L
namemodemapplngMCuL

var our8eader new LxLdaLaCl!son8eader(ldnAMLrooLuA1A
recordModel)
var lnlLlal8asearams
meLhod geLulrecLoryConLenLs
reLurnlormaL !SCn
querylormaL column
sLarLaLh /LesLdocs/

basearams new cloneConflg(lnlLlal8asearams)
reader our8eader
flelds recordModel
llsLeners
beforeload
for(var l ln opLlons)
lf(opLlonsllengLh 0)
sLorebasearamsl opLlonsl

scopeLhls

load
fn funcLlon(sLorerecordsopLlons)
consolelog(records)

244

scopeLhls

)
ourSLoreload(recurseLrue)
fllLerSLore8y1ype funcLlon (Lype)
ourSLoreload(dlrlllLerLype)

fllLerSLore8yllle1ype funcLlon (flle1ype)
ourSLoreload(fllelllLerflle1ype)

clearlllLers funcLlon ()
ourSLorebasearams new cloneConflg(lnlLlal8asearams)
ourSLoreload()

)
1o LesL our changes we can puL some llnks on our P1ML page Lo call Lhe meLhods
LhaL weve creaLed for lLerlng daLa whlch we can Lhen monlLor ln llrebug
Lxample 4 ch12ex4hLml
dlv ldchap12_ex04
a oncllckfllLerSLore8y1ype(llle)
href[avascrlpLvold(0)lllLer by llles/abr /
a oncllckfllLerSLore8yllle1ype(*doc)
href[avascrlpLvold(0)lllLer by doc llles/abr /
a oncllckclearlllLers() href[avascrlpLvold(0)
Clear lllLers/abr /
/dlv
AfLer Lhe page has loaded we see Lhe console logglng Lhe lnlLlal recordseL belng
loaded lnLo Lhe SLore Cllcklng our rsL llnk wlll remove all of Lhe dlrecLory 8ecords
Lhrough lLerlng Cllcklng our second llnk Lakes lL a sLep furLher and lLers ouL any
les oLher Lhan Lhose endlng ln doc 1he lasL llnk reseLs Lhe lLers Lo Lhe orlglnal
basearams and reloads Lhe lnlLlal recordseL
ueallng wlLh 8ecordseL changes
Cne of greaL Lhlngs abouL LxL !S daLa SLores ls change managemenL Cur appllcaLlons
mlghL aLLack changlng 8ecords ln a varleLy of ways from edlLable daLa Crlds Lo
slmple lorms buL maklng changes really only means someLhlng when we acL on lL
We mlghL only change our dlsplay buL we are more Lhan llkely Lo send changes back
Lo Lhe server
243
Cne of Lhe easlesL Lhlngs Lo do ls Lo apply an updaLe evenL llsLener Lo our SLore
ob[ecL Weve applled Lwo oLher llsLeners ln Lhe pasL Lhe beforeload and load
llsLeners now leLs apply an updaLe llsLener Lo our scrlpL
llsLeners
beforeload
for(var l ln opLlons)
lf(opLlonsllengLh 0)
sLorebasearamsl opLlonsl

scopeLhls

load
fn funcLlon(sLore records opLlons)
consolelog(records)

scope Lhls

updaLe
fn funcLlon(sLore record operaLlon)
swlLch (operaLlon)
case LxLrecordLul1
// uo someLhlng wlLh Lhe edlLed record
break
case LxLrecord8L!LC1
// uo someLhlng wlLh Lhe re[ecLed record
break
case LxLrecordCCMMl1
// uo someLhlng wlLh Lhe commlLLed record
break

scopeLhls

When a 8ecord ls updaLed Lhe updaLe evenL res ln Lhe SLore passlng several
ob[ecLs lnLo Lhe evenL 1he rsL ls Lhe SLore lLself whlch ls good for reference 1he
second ls Lhe 8ecord LhaLs been updaLed 1he lasL ob[ecL ls Lhe sLaLe of Lhe 8ecord
LhaL was updaLed Pere we have lald ouL a qulck swlLch/case sLaLemenL Lo Lrlgger
dlfferenL acLlons accordlng Lo Lhe sLaLe of Lhe 8ecord We can add code lnLo Lhe acLlon
block for Lhe LxLrecordLul1 sLaLe Lo auLomaLlcally send every edlL Lo Lhe server
for lmmedlaLe 8ecord revlslon
246
Cne oLher opLlon LhaL we can address ls Lhe LxLrecordCCMMl1 sLaLe lL ls
someLlmes beLLer Lo leL Lhe user affecL many dlfferenL changes Lo many dlfferenL
records and Lhen send all Lhe updaLes aL once
ourSLorecommlLChanges()
1hls wlll collecL all of Lhe edlLed 8ecords ag Lhem by uslng LxLrecordCCMMl1
and Lhen Lhe updaLe evenL would re and affecL each 8ecord Cur lasL operaLlon
sLaLe ls perfecL for processlng Lhls slLuaLlon for whlch we can add addlLlonal
cllenLslde valldaLlon or A!Ax valldaLlon or whaLever our process mlghL call for
1he LxLrecord8L!LC1 sLaLe ls generally seL dlrecLly by Lhe daLa SLore whereby
Lhe SLore re[ecLs any changes made Lo Lhe 8ecord and wlll reverL Lhe 8ecords eld
values back Lo Lhelr orlglnal (or lasL commlLLed) sLaLe 1hls mlghL occur lf a value of
Lhe wrong daLa Lype ls passed lnLo a eld
Many ob[ecLs Lake a SLore
1he beauLy of Lhe SLore ob[ecL ls ln lLs many uses So many ob[ecLs wlLhln Lhe LxL !S
llbrary can consume a SLore as parL of Lhelr conguraLlon auLomaLlcally mapplng
daLa ln many cases
SLore ln a Combo8ox
lor example Lhe Combo8ox ob[ecL can Lake a SLore or any of lLs subclasses as a daLa
provlder for lLs values
var combo new LxLformCombo8ox(
sLore sLaLes
dlsplaylleld sLaLe
valuelleld abbrevlaLlon
LypeAhead Lrue
mode remoLe
LrlggerAcLlon all
empLy1exL SelecL a sLaLe
selecLCnlocus Lrue
apply1o sLaLeCombo
)
1hls Combo8ox Lakes a SLore ob[ecL called sLaLes and maps lLs sLaLe eld Lo Lhe
dlsplay whlle mapplng Lhe abbrevlaLlon eld Lo lLs underlylng selecLed value
247
SLore ln a uaLavlew
1he uaLavlew ob[ecL ls one of Lhe mosL powerful ob[ecLs wlLhln LxL 1hls ob[ecL can
Lake a SLore ob[ecL leL us apply a 1emplaLe or x1emplaLe Lo each 8ecord (whlch
Lhe uaLavlew refers Lo as a node) and have each lLem render wlLhln Lhe uaLavlew
conLlguously wrapplng lLems as Lhey run ouL of space 1he uaLavlew opens up
some very lnLeresLlng ways Lo vlsually produce conLacL llsLs lmage gallerles and le
sysLem explorers and opens up our appllcaLlons Lo be able Lo exchange daLa among a
varleLy of ob[ecLs Lhrough cusLom draganddrop funcLlonallLy
SLores ln Crlds
Weve seen examples of applylng a daLa SLore Lo a Crld ln a prevlous chapLer
(ChapLer 3) of Lhls book 1here are several dlfferenL Lypes of Crlds (LdlLor Crouplng
roperLy and 8aslc Crlds) buL all of Lhem Lake SLore ob[ecLs as lnpuL and Lhe
appllcable ColumnModel Lo coordlnaLe Lhelr daLa dlsplay
248
1he Crld ob[ecLs and Lhe Combo8ox are probably Lhe mosL prevalenL uses of SLore
ob[ecLs wlLh Lhe Crld and Lhe uaLavlew belng Lhe Lwo prlmary means of dlsplaylng
mulLlple 8ecords of daLa 1he 1ree ob[ecL Lakes a speclal daLa source called a
1reeLoader 1he 1reeLoader ls acLually parL of Lhe 1ree package of classes and
does noL exLend Lhe base SLore ob[ecL alLhough lL operaLes ln much Lhe same way
8aLher Lhan 8ecord ob[ecLs Lhe 1reeLoader Lakes an array of ob[ecLs whlch lL Lhen
converLs lnLo nodes 1he sLrucLure Lo lLs lncomlng daLa ls someLhlng llke Lhls
var daLaseL
ld 1
LexL node 1
leaf false

ld 2
LexL node 2
leaf Lrue

When a leaf ls Lrue Lhen lL ls an expandable lLem whlch wlll query Lhe server
for furLher daLa when passlng Lhe node daLa A leaffalse sLaLemenL says LhaL Lhe
node has no chlldren
Summary
ln Lhls chapLer weve learned how Lo pull dynamlc serverslde daLa lnLo our
appllcaLlons LxL !Ss SLore ob[ecLs wlLh Lhelr versaLlllLy and mappable synLax are
easllycongured daLasources for a loL of LxL !S ob[ecLs ln Lhls chapLer weve bound
slmple exLernal daLa Lo a anel ob[ecL gone over Lhe varlous daLa formaLs LhaL LxL
!S can consume and seen a baslc overvlew of Lhe daLa SLore ob[ecL and some of lLs
more lmporLanL subclasses
CeLLlng lnLo Lhe meaL of Lhlngs we learned how Lo dene our daLa uslng Lhe 8ecord
ob[ecL afLer whlch we learned how Lo populaLe our SLore wlLh 8ecords from a remoLe
daLa source We also learned abouL Lhe purpose behlnd uaLa8eaders Lhe dlfferenL
ones avallable Lo you and how Lo congure a cusLom uaLa8eader
ulllng lL all LogeLher we goL busy learnlng SLore manlpulaLlon Lechnlques such
as ndlng 8ecords by eld values lndexes or lus We also Louched on lLerlng our
SLores Lo geL a worklng subseL of daLa 8ecords We also Lalked abouL deallng wlLh
local daLa changes vla Lhe updaLe evenL llsLener
llnally we covered some of Lhe oLher LxL !S ob[ecLs LhaL use Lhe SLore openlng Lhe
doors Lo exLernal daLa wlLhln mulLlple faceLs of our appllcaLlons
Am Pllllgenbusch 47 aderborn n8W 33098Code for 8euse LxLendlng
LxL !S
ln Lhls chapLer well dlscuss how we can creaLe our own cusLom componenLs
by exLendlng Lhe LxL !S llbrary Well Lalk abouL how we can creaLe our own
namespaces dlfferenLlaLlng our cusLom componenLs from oLhers Well also dlscuss
some oLher core ob[ecLorlenLed concepLs ([usL enough Lo undersLand whaL we need
here) and Lhe concepL of LvenLurlven appllcaLlon archlLecLure
Cb[ecLorlenLed !avaScrlpL
Cver Lhe lasL several years weve seen a drasLlc shlfL wlLh regards Lo cllenLslde
scrlpLlng ln browserbased web appllcaLlons !avaScrlpL has become Lhe defacLo
sLandard ln cllenLslde scrlpLlng wlLh supporL for lL bullL lnLo every ma[or
browser avallable
1he lssue has always been ln each browsers lmplemenLaLlon of Lhe uocumenL
Cb[ecL Model MlcrosofLs lnLerneL Lxplorer havlng Laken Lhe ma[orlLy share of MlcrosofLs lnLerneL
Lxplorer havlng Laken Lhe ma[orlLy share of
Lhe browser markeLplace helped Lo gaLher supporL for a modern uocumenL Cb[ecL gaLher supporL for a
modern uocumenL Cb[ecL
Model Lo whlch all oLher browsers had Lo adapL Powever afLer Lhe release of
lnLerneL Lxplorer 6 MlcrosofL halLed new developmenL of Lhelr browser for several
years oLher Lhan Lo provlde securlLy xes Added Lo Lhls was MlcrosofLs play Lo
Lry and creaLe new sLandards 8aLher Lhan lmplemenL !avaScrlpL lnLerneL Lxplorer
acLually lmplemenLed !ScrlpL whlch ran !avaScrlpL les buL had a sllghLly dlfferenL
lmplemenLaLlon LhaL never garnered momenLum (oLher Lhan ln lnLerneL Lxplorer)
posslbly because lL dld noL adhere Lo Lhe LCMAScrlpL sLandard 1hls creaLed several
lssues 1he World Wlde Web ConsorLlum (W3C) had creaLed a sLandard for Lhe
uocumenL Cb[ecL Model whlch companles llke Mozllla and Cpera adhered Lo and
furLhered ?eL lnLerneL Lxplorer (Lhe domlnanL browser) was sLagnanL
Am Pllllgenbusch 47 aderborn n8W 33098Code lor 8euse LxLendlng LxL !S
230
1hese evenLs led Lo very hard Llmes for cllenLslde developers as a greaL deal of
Llme and efforL wenL lnLo creaLlng cllenLslde code LhaL was crossbrowser compllanL
neLscape and lnLerneL Lxplorer had been waglng Lhe browser war over several
verslons slowly growlng more dlvergenL ln Lhelr sLandards accepLance wlLh
crossbrowser developmenL conslsLenLly becomlng more of a challenge 1he
landscape had changed ln LhaL a large degree of cllenLslde developmenL had
become relegaLed Lo baslc form valldaLlon and lmage rollovers because few
developers were lnLeresLed ln lnvesLlng Lhe Llme and efforL necessary Lo wrlLe
large crossbrowser compllanL cllenLslde appllcaLlons
LnLer Web 20 1he buzzword of Lhe day was A!Ax or Asynchronous !avaScrlpL
And xML A!Ax wasnL a new Lechnology buL lLs use had been falrly mlnlmal and
obscure uevelopers wlLh a deep knowledge of !avaScrlpL looklng Lo creaLe greaLer
and more dynamlc web slLes had begun Lo lmplemenL Lhe Lechnology as a way of
relnvlgoraLlng Lhe cllenLslde movemenL creaLlng rlcher and more lnLeracLlve
user experlences
WlLh Lhls renewed lnLeresL ln cllenLslde scrlpLed appllcaLlons buL Lhe same lssues
exlsLlng around crossbrowser compaLlblllLy several crossbrowser !avaScrlpL
llbrarles (uo[o roLoLype ?ahoo ul and so on) had begun llfe ln response Lo
mlnlmlzlng Lhe prevlous woes lnvolved ln crossbrowser cllenLslde developmenL
1he developers of Lhese llbrarles wlLh Lhelr knowledge of !avaScrlpL had kepL
pace wlLh Lhe changes ln Lhls language as well !avaScrlpL had Lravelled well beyond
Lhe connes of a solely procedural scrlpLlng language wlLh full supporL for
ob[ecLorlenLed developmenL ln developlng Lhelr llbrarles Lhese developers Look
full advanLage of an ob[ecLorlenLed sLyle of developmenL LhaL !avaScrlpLs
proLoLypebased model allowed creaLlng small ob[ecLs of funcLlonallLy LhaL could
bulld upon one anoLher Lo provlde exLenslve resources of reusable code
AuLhors noLe
ln Lhe comlng pages l wlll ofLen use Lhe words ob[ecL and class
lnLerchangeably because lL seems a llLLle easler Lo undersLand
1echnlcally !avaScrlpL ls a classless language and our ob[ecLs are bullL
wlLh !avaScrlpLs proLoLypebased programmlng model
231
Cb[ecLorlenLed programmlng wlLh LxL !S
LxL !S ls a perfecL example of Lhls shlfL 1he LxL !S llbrary ls an exLremely exLenslve
collecLlon of packages of classes of reusable code small pleces of funcLlonallLy LhaL
can be Laken on Lhelr own or comblned Lo creaLe some Lruly fanLasLlc cllenLslde
maglc An addlLlonal parL of lLs beauLy ls Lhe ablllLy Lo exLend Lhe llbrary furLher
creaLlng our own cusLom componenLs as exLenslons of Lhose already Lhere 1hls
glves us Lhe ablllLy Lo creaLe our own reusable pleces of code We can wrlLe our own
ob[ecLs as exLenslons of Lhe llbrary 1hls means LhaL we donL have Lo wrlLe all of our
funcLlonallLy on our own as much of Lhls work has already been done for us We
expand upon Lhe foundaLlon provldlng our own cusLom funcLlonallLy
lnherlLance
1o galn a full undersLandlng of whaL we need Lo do we have Lo undersLand one of
Lhe key concepLs of ob[ecLorlenLed programmlnglnherlLance
As we wrlLe our own componenLs Lhese componenLs wlll usually lnherlL some oLher
componenL of LxL !S exLendlng LhaL componenLs funcLlonallLy by provldlng our
own properLles and overrldlng Lhe componenLs exlsLlng meLhods We are creaLlng
new classes from an exlsLlng LxL !S class Lo deLermlne wheLher Lhe meLhod LhaL has
been called ls LhaL of our new class Lhe meLhod of Lhe exLended (parenL) class or a
comblnaLlon of Lhe Lwo
8reak lL down and make lL slmple
Confused yeL? lLs a loL Lo Lake ln LeLs break Lhls down lnLo a baslc example LhaL
may clarlfy a few Lhlngs Say we are wrlLlng a CusLomer 8esource ManagemenL
appllcaLlon for a company 1hls company has salespeople who have cllenLs (and
cllenL conLacLs) and Lhe company also has vendors LhaL Lhey uLlllze who also have
conLacLs Pere weve ldenLled Lhree slmllar ob[ecLs wlLhln our appllcaLlon lf we
Lake Lhese ob[ecLs down Lo Lhe base level we noLlce LhaL each one of Lhese ob[ecLs ls a
erson (Lhe CllenLs and vendors would more clearly be Companles)
Salesperson
CllenL ConLacL
vendor ConLacL
Lach one of Lhese erson ob[ecLs wlll share some baslc aLLrlbuLes and meLhods
because each person has a name an emall address a phone number and an
address Well creaLe a qulck class dlagram Lo vlsually represenL Lhe erson ob[ecL
-
-
-
232
AuLhors noLe
Class dlagrams and uML dlagrammlng ln general are a greaL way Lo
vlsually represenL dlfferenL programmlng consLrucLs A full explanaLlon
ls ouLslde Lhe purvlew of Lhls LexL buL l hlghly recommend LhaL you
become famlllar wlLh Lhem Cur dlagrams here show Lhe class name Lhe
aLLrlbuLes and meLhods of Lhe class
noLe LhaL Lhe erson ob[ecL has four aLLrlbuLes name emallAddress phonenumber
and address Also noLe LhaL Lhe address aLLrlbuLe ls ln lLself anoLher ob[ecL Weve
lncluded some slmple meLhods for Lhe ob[ecL as well Lo geL and seL our aLLrlbuLes
Lach one of Lhese ob[ecLs also has lLs own ob[ecLspeclc properLles such as a
salesersonlu a cllenLConLacLlu or a vendorConLacLlu
noLe LhaL ln our dlagram of Lhe Saleserson ob[ecL you do noL see any of Lhe
ersonspeclc properLles and meLhods 8ecause Saleserson exLends (lnherlLs) Lhe
erson ob[ecL all of Lhe properLles and meLhods of Lhe erson ob[ecL become a parL
of Lhe Saleserson ob[ecL as well We can now creaLe a Saleserson
var sp new Saleserson()
233
1hls creaLes a new lnsLance of Lhe Saleserson ob[ecL wlLh all of Lhe aLLrlbuLes and
meLhods of Lhe Saleserson ob[ecL lncludlng Lhose of Lhe parenL erson ob[ecL
by exLenslon
Sounds cool buL whaL does lL mean?
8y defaulL Lhe Saleserson ob[ecL belng an exLenslon of erson allows you Lo seL
LhaL Salesersons name as
SalesersonseLname(Zlg Zlggler)
?ou donL have Lo reference Lhe meLhods or Lhe aLLrlbuLes by calllng on Lhe
ob[ecLs (Saleserson) parenL ob[ecL (erson) dlrecLly because Lhrough lnherlLance
Saleserson ls a erson
now whaL was Lhls overrldlng sLuff?
1hrough lnherlLance all of Lhe meLhods and aLLrlbuLes of a parenL ob[ecL become Lhe
chllds as well Powever Lhere wlll be Llmes when you may wanL Lhe chlld ob[ecLs
meLhod Lo be dlfferenL from LhaL of lLs parenL Case ln polnL leLs say our erson
ob[ecL had lLs own valldaLe() meLhod whlch has valldaLed all of Lhe aLLrlbuLes
and reLurned lLs own error array buL your Saleserson ob[ecL has some addlLlonal
aLLrlbuLes Lo valldaLe as well 8y denlng a valldaLe() meLhod wlLhln Lhe
Saleserson ob[ecL you are overrldlng Lhe valldaLe() meLhod of lLs erson
parenL ob[ecL
valldaLe funcLlon()
// Some valldaLlon code here

8uL ln Lhls case you would wanL LoLal aLLrlbuLe valldaLlon boLh Lhe lnLernal
ob[ecLspeclc properLles as well as Lhose of Lhe parenL ob[ecL So here you would
also need Lo call Lhe valldaLe() meLhod of Lhe parenL ob[ecL
valldaLe funcLlon()
var errorArr ourCb[ecLssalespersonsuperclassvalldaLe
call(Lhls)
// 1he salesperson speclflc valldaLe sLuff appendlng Lhe errorArr
reLurn errorArr

1hese are Lhe baslc pleces of CC LhaL we need Lo undersLand so LhaL we can begln Lo
creaLe our own cusLom classes wlLh LxL !S Well almosL
234
undersLandlng packages classes and
namespaces
1here are a few nal pleces LhaL of Lhe ob[ecLorlenLed puzzle we need ln order Lo we need ln order Lo
ln order Lo
keep a solld grasp of our goals Weve Lalked abouL how LxL !S ls a large collecLlon
of ob[ecLs exLendlng oLher ob[ecLs buL lLs also lmporLanL Lo undersLand a few oLher
pleces of baslc CC Lermlnology and how Lhey help ln keeplng Lhlngs organlzed
ackages
A package ls a collecLlon of classes LhaL share someLhlng ln common lor lnsLance
Lhe LxLdaLa package ls a collecLlon of classes for deallng wlLh daLa such as Lhe
dlfferenL Lypes of daLa SLores 8eaders and 8ecords 1he LxLgrld package ls a
collecLlon of classes for Lhe varlous grld ob[ecLs lncludlng all of Lhe dlfferenL grld
Lypes and selecLlon models Llkewlse Lhe LxLform package conLalns classes for
bulldlng forms Lo lnclude all of Lhe classes of Lhe dlfferenL eld Lypes
Classes
A class ls whaL we call a speclc !avaScrlpL ob[ecL denlng LhaL ob[ecLs aLLrlbuLes
and meLhods Colng back Lo our prevlous examples erson and Saleserson
would boLh be wrlLLen as class ob[ecLs and boLh would probably be parL of Lhe
same package
namespaces
Classes are a parL of packages and packages generally have Lhelr own namespace
namespaces are conLalners of loglcally grouped packages and class ob[ecLs As an
example Lhe LxL !S llbrary falls lnLo Lhe LxL namespace lorms wlLhln LxL !S fall
lnLo Lhe LxLforms namespace where forms ls a package of Lhe varlous classes
used Lo make up forms lLs a hlerarchal relaLlonshlp uslng doL noLaLlon Lo separaLe
Lhe namespace from Lhe package from Lhe class varlables from one namespace
musL be passed lnLo anoLher namespace so applylng a namespace helps Lo
encapsulaLe lnformaLlon wlLhln lLself LxLgrld LxLform and LxLdaLa are all
cusLom namespaces
WhaLs nexL?
now LhaL we have our Lermlnology down and a baslc undersLandlng of Lhese core
ob[ecLorlenLed concepLs we can nally geL down Lo applylng Lhem wlLhln Lhe
conLexL of creaLlng LxL !S cusLom componenLs
233
Ck whaL do we exLend?
1yplcally well be wrlLlng an appllcaLlon and wlll see ourselves wrlLlng Lhe same
baslc plece over and over agaln Cr we may be lucky enough Lo ldenLlfy lL early
enough LhaL we can [usL choose Lhe besL plece and move forward rlghL away lL
usually comes down Lo decldlng whlch LxL !S componenL ls Lhe besL one Lo exLend
LeLs revlslL our prevlous scenarlo a CusLomer 8esource ManagemenL sysLem We
know LhaL we have several erson ob[ecLs wlLhln our appllcaLlon lrom a dlsplay
perspecLlve we wlll probably need someLhlng Lo dlsplay a persons conLacL deLalls
1here are several dlfferenL componenLs for Lhe dlsplay of lnformaLlon and we musL
choose Lhe rlghL one A grld ob[ecL would work buL a Labular dlsplay across so many
dlfferenL values mlghL cluLLer our appllcaLlon and ln Lhls scenarlo we probably only
need Lo see Lhe deLalls of one person aL a Llme A roperLyCrld ls a llLLle dlfferenL
from a sLandard grld buL were [usL golng Lo ouLpuL a name and an address We
really donL need Lhe user Lo see Lhe eld names so much as Lhe daLa lLself We can
preLLy much ellmlnaLe Lhe uaLavlew as well for Lhe same reasons as re[ecLlng Lhe
grld We really need only one record aL a Llme
1hls brlngs us Lo a form or a anel lorms lmply edlLlng of lnformaLlon so for a
dlsplayonly appllcaLlon you really come back Lo a anel anel ob[ecLs are exLremely
versaLlle ob[ecLs belng Lhe core of many oLher ob[ecLs wlLhln LxL !S 1he body of a
Wlndow ob[ecL ls a anel 1he dlfferenL pleces of an Accordlan are anel ob[ecLs 1he
bodles of Lhe Labs ln a 1abanel are anel ob[ecLs CreaLlng a cusLom componenL LhaL
exLends Lhe anel ob[ecL opens Lhe doors Lo a varleLy of dlfferenL dlsplay areas wlLhln
an LxL !S appllcaLlon
CreaLlng a cusLom namespace
We wanL Lo creaLe our cusLom componenLs wlLhln Lhelr own cusLom namespace for
encapsulaLlon qulck reference and Lo help us organlze our code lL may be LhaL our
packages or class may be named Lhe same as oLher packages and classes already
wlLhln LxL !S A cusLom namespace prevenLs conlcLs from occurrlng beLween classes
of Lhe same name as long as each ls dened wlLhln lLs own separaLe namespace A
common namlng convenLlon for userdened ob[ecLs ls Lo use Lhe LxLux namespace
LxLnamespace(LxLux)
8ecause were golng Lo be creaLlng a collecLlon of dlsplay anels for our C8M
appllcaLlon well really seL our namespace aparL from Lhe resL
LxLnamespace(C8Mpanels)
236
We need Lo place Lhls llne aL Lhe Lop of each class denlLlon LemplaLe
Cur flrsL cusLom class
llrsL leLs Lake a look aL a falrly slmple scrlpL LhaL Lakes a slngle record of lnformaLlon
and lays lL ouL ln a anel on Lhe screen
Lxample 1 ch13ex1[s
var useruaLa

lu1ll8S1nAML!ohnLAS1nAMLLennonLMAlL[ohn[beaLlescom
ASSWC8uapple1Auu8LSS1?LPome (Malllng)S18LL11117 Abbey 8oad
S18LL12S18LL13Cl1?new ?orkS1A1Ln?Zl12343PCnL1?
LCellPCnL1234367890
lu2ll8S1nAMLaulLAS1nAMLMcCarLney
LMAlLpaul[beaLlescomASSWC8ullndaAuu8LSS1?LWork
(Malllng)S18LL11108 enny LaneS18LL12S18LL13
Cl1?Los AngelesS1A1LCAZl67890PCnL1?LPome
PCnL4367890123
lu3ll8S1nAMLCeorgeLAS1nAMLParrlson
LMAlLgeorge[beaLlescomASSWC8uLlmebandlL
Auu8LSS1?LPome (Shlpplng)S18LL11302 Space
WayS18LL12S18LL13Cl1?8llllngsS1A1LM1
Zl98763PCnL1?LCfflcePCnL8901234367
lu4ll8S1nAML8lngoLAS1nAMLSLarr
LMAlLblgnose[beaLlescomASSWC8ubarble
Auu8LSS1?LPome (Malllng)S18LL11789 Zlldlzhan l
S18LL12S18LL13Cl1?Mallbu
S1A1LCAZl43210PCnL1?LPomePCnL3678901234

var userueLall new LxLanel(
apply1o chap13_ex01
wldLh 330
helghL 230
LlLle ChapLer 13 Lxample 1
daLa useruaLa0
Lpl new LxLx1emplaLe(
lmg src/resources/lmages/sglf wldLh21 helghL16
/bll8S1nAML LAS1nAML/bbr /
lmg src/resources/lmages/lcons/sllk/daLabase_edlLglf
wldLh16 helghL16 ldemallLdlL_lu classlconLnk allgnLdlL
Lmall Address border0 /LMAlLbr /
237
wldLh16 helghL16 ldphoneLdlL_lu classlconLnk allgnLdlL
hone border0 /PCnL (PCnL1?L)br /
bAuu8LSS1?L Address/bbr /
wldLh16 helghL16 ldaddrLdlL_lu classlconLnk allgnLdlL
Address border0 /S18LL11br /
Lpl lfS18LL12lengLh gL 0
/S18LL12br /
/Lpl
/S18LL13br /
/Lpl
/Cl1? S1A1L Zl
)
llsLeners
render
fn funcLlon(el)
LhlsLploverwrlLe(LhlsbodyLhlsdaLa)

)
WhaL we have here ls a slmple array of daLa ob[ecLs and a anel denlLlon Were
passlng a slngle daLa lLem lnLo Lhe anels conguraLlon denlng an x1emplaLe
for Lhe records dlsplay and applylng a llsLener whlch wlll apply Lhe daLa Lo Lhe
x1emplaLe when Lhe anel ls rendered
238
1urnlng Lhls lnLo a reusable componenL ls very easy as Lhe ma[orlLy of our
code wlll [usL be moved lnLo our cusLom class denlLlon llrsL well creaLe a
new class LemplaLe ConLacLueLalls[s and dene lLs lnlLlal class declaraLlon
as exLendlng Lhe LxLanel class LxL !S acLually provldes cusLom meLhods for
exLendlng componenLs
Lxample 2 ConLacLueLalls[s
C8MpanelsConLacLueLalls LxLexLend(LxLanel
// 1he panel deflnlLlon goes here
)
Cur nexL sLep ls Lo begln denlng Lhe cusLom properLles and meLhods of our
componenL We begln wlLh Lhe defaulL properLles LhaL are speclc Lo our componenL
Some of Lhese properLles may be overrldden ln our ob[ecL conguraLlon buL Lhese
defaulLs allow us Lo only pass ln whaL we mlghL need Lo change for our
lndlvldual appllcaLlon
wldLh 330
helghL 230
daLa
lu 0
ll8S1nAML
LAS1nAML
LMAlL
Auu8LSS1?L Pome (malllng)
S18LL11
S18LL12
S18LL13
Cl1?
S1A1L
Zl
PCnL1?L Pome
PCnL

239
/S18LL12br /
/Lpl
/S18LL13br /
/Lpl
/Cl1? S1A1L Zl
)
lL sLop!
uoes anyLhlng look famlllar here? ?es lL should especlally afLer looklng aL
Lhe records wlLhln useruaLa A class ls an ob[ecL [usL llke each record
ln Lhe useruaLa array ls an ob[ecL AL lLs mosL base level an ob[ecL ls a
collecLlon of name/value palrs 1he only Lrue dlfference ls LhaL a class wlll
also have funcLlons as Lhe value of an aLLrlbuLe name of Lhe ob[ecL and Lhe
ob[ecL can be referenced by lLs class (Lhe name of Lhe class) Lach of Lhese
name/value palrs forms Lhe consLrucLor of Lhe ConLacLueLalls class
Cverrldlng meLhods
ConLlnulng Lo bulld our rsL cusLom class we geL lnLo overrldlng meLhods As
we have prevlously menLloned we can overrlde a meLhod of our parenL class by
denlng a meLhod of Lhe same name ln Lhe chlld class A key componenL of Lhe anel
class ls Lhe lnlLComponenL() meLhod whlch (as Lhe name suggesLs) lnlLlallzes Lhe
anel componenL MosL meLhods wlll never need Lo be overrldden buL someLlmes
well need Lo overrlde a speclc meLhod Lo add Lo or change Lhe defaulL behavlor of
a componenL
lnlLComponenL funcLlon()
C8MpanelsConLacLueLallssuperclasslnlLComponenLcall(Lhls)
lf (Lypeof LhlsLpl sLrlng)
LhlsLpl new LxLx1emplaLe(LhlsLpl)

260
AuLhors noLe
LxL !S uses superclass as Lhe programmaLlc reference Lo Lhe ob[ecLs
parenL class ob[ecL as C8MpanelsConLacLueLalls ls a subclass of
lLs parenL (superclass) LxLanel
WlLh our componenL we needed a way Lo apply a new x1emplaLe Lo our
componenL should one be passed lnLo our ConLacLueLalls class 8ecause a
developer can pass ln Lhe LemplaLe conguraLlon vla Lhe Lpl argumenL lnsLead of an
acLual x1emplaLe ob[ecL lL ls lmporLanL Lo valldaLe LhaL lnpuL and ad[usL accordlngly
Cur rsL acLlon ls Lo call Lhe lnlLComponenL() meLhod of our parenL anel class and
Lhen ad[usL Lhe value of Lhe Lpl argumenL as needed
undersLandlng Lhe order of evenLs
ln our prevlous example (Lxample 1) we used Lhe render evenL Lo apply our
x1emplaLe Lo our anel ob[ecL ln our cusLom componenL we Lake Lhe same Lack by
wrlLlng an overrldlng meLhod for Lhe on8ender() meLhod
on8ender funcLlon(cL poslLlon)
C8MpanelsConLacLueLallssuperclasson8endercall
(Lhls cL poslLlon)
lf (LhlsdaLa)
LhlsupdaLe(LhlsdaLa)

Pere weve called Lhe on8ender() meLhod of our parenL anel (super) class AfLer
LhaL we verlfy LhaL we have a value for our daLa aLLrlbuLe before calllng Lhe cusLom
updaLe() meLhod of our componenL
updaLe funcLlon(daLa)
LhlsdaLa daLa
LhlsLploverwrlLe(Lhlsbody LhlsdaLa)

1he updaLe() meLhod Lakes an argumenL of daLa (a record ob[ecL from our array)
applles LhaL argumenL Lo Lhe componenLs daLa aLLrlbuLe and Lhen applles Lhe
componenLs x1emplaLe Lo Lhe body of Lhe componenL 1hls ls a cusLom meLhod
of Lhe componenL noL an overrldden meLhod of Lhe parenL anel class WhaLs
lmporLanL Lo our dlscusslon ls Lhe need for Lhls meLhod
261
When can we do whaL?
Cur x1emplaLe does noL geL lmmedlaLely applled Lo our componenL as lL lsnL able
Lo overwrlLe Lhe anel body unLll Lhe anel body has acLually been rendered 1hls ls
whaL we mean by order of evenLs and can lnlLlally be very confuslng unLll you puL
a llLLle LhoughL lnLo lL lor lnsLance say we had dynamlcally Lrled Lo apply a cusLom
lu argumenL as parL of our consLrucLor
ld ConLacLueLalls_ + LhlsdaLalu
1hls would have broken our componenL Why? 8ecause LhlsdaLa ls also an lLem
wlLhln our consLrucLor and doesnL acLually exlsL unLll Lhe componenL ls lnsLanLlaLed
lnLo memory 1he same Lhlng would have happened lf we had Lrled Lo apply our
x1emplaLe wlLhln Lhe lnlLComponenL() meLhod

1hls would have falled when lnlLComponenL() beglns Lhe process of creaLlng Lhe
componenL 1he componenL aL Lhls sLage sLlll lsnL parL of Lhe browsers uocumenL
Cb[ecL Model so Lhere lsnL any body for Lhe x1emplaLe Lo be applled Lo yeL CeLLlng
a handle on Lhe order of evenLs ls one of Lhe blggesL challenges ln learnlng LxL !S lf
you donL know abouL lL and Lhe order of evenLs may be dlfferenL wlLh dlfferenL LxL
!S classes as well
WhaL ls an evenLdrlven appllcaLlon?
now we geL down Lo Lhe real [ulce Cne huge barrler Lo cross when LranslLlonlng
from a procedural programmlng sLyle lnLo ob[ecLorlenLed developmenL ls
undersLandlng Lhe evenLdrlven appllcaLlon model noL all CC programs are
evenLdrlven buL Lhe paradlgm ls denlLely shlfLlng ln LhaL dlrecLlon and LxL !S ls
no excepLlon 8aslcally Lhe ow of an appllcaLlon ls deLermlned by senslng some
change of sLaLe or user lnLeracLlon called an evenL When Lhe evenL occurs Lhe
appllcaLlon broadcasLs LhaL Lhe evenL has Laken place AnoLher plece of Lhe appllcaLlon
(a llsLener also known as an observer) ls llsLenlng for Lhe evenL broadcasL When lL sees
LhaL Lhe evenL has been broadcasL lL Lhen performs some oLher acLlon
Cur ConLacLueLalls class ls no dlfferenL As an exLenslon of Lhe anel class lL
auLomaLlcally conLalns all of Lhe evenLs and evenL llsLeners LhaL are a parL of Lhe anel
class An evenL render was prevlously dened 1he process of bulldlng Lhe dlsplay
of Lhe anel res off a broadcasL of Lhe render evenL
LhlsflreLvenL(render)
262
1he LxLanel ob[ecL has already dened an evenL llsLener for Lhe render evenL
Cnce Lhe render evenL has been handled lL calls Lhe on8ender() meLhod
LhlsaddLlsLener(renderLhlson8enderLhls
cLLhlscLposlLlonLhlsposlLlon)
An evenL has been reached whlch ls Lhen broadcasL An evenL llsLener ls llsLenlng
for LhaL broadcasL upon hearlng Lhe broadcasL lL execuLes addlLlonal precongured
acLlons LhaL have been dened for LhaL evenL undersLandlng Lhls process plays a
key parL ln how we develop evenLdrlven appllcaLlons and our own appllcaLlons
wlLh LxL !S
Some speclflc
appllcaLlon
change or user
lnLerracLlon
occurs
(flres evenL broadcasL)
preconflgured
llsLener
(or observer) hears
LhaL Lhe evenL has
happened
(calls assoclaLed
evenL meLhods)
MeLhod called
accordlng Lo Lhe
evenL LhaL
occurred
CreaLlng our own cusLom evenLs
We may [usL as easlly apply our own cusLom evenLs wlLhln our LxL !S
appllcaLlons We can elLher reglsLer new evenLs LhaL an end developer can Lhen
add llsLeners Lo or we can add our own llsLeners Lo klck off oLher meLhods wlLhln
our cusLom componenL
263
8y way of example leLs creaLe a new updaLe evenL wlLhln our cusLom componenL
Well ad[usL our lnlLComponenL() meLhod Lo reglsLer our new evenL

LhlsaddLvenLs(updaLe)

1hls new code ls all lL Lakes Lo reglsLer our new evenL Well also go ahead and
reglsLer a new lnLernal evenL llsLener whlch well use Lo call a new meLhod LhaL
well wrlLe ln a momenL

LhlsaddLlsLener(
updaLe
fn LhlsonupdaLe
scope Lhls

)

WhaL Lhls sLaLes ls LhaL whenever Lhe updaLe evenL ls broadcasL our appllcaLlon wlll
Lurn around and call Lhe onupdaLe() meLhod of our ConLacLueLalls componenL
onupdaLe funcLlon(daLa)
consolelog(ln onupdaLe)

1he onupdaLe() meLhod ln Lhls case only ouLpuLs a shorL message Lo Lhe debugglng
console whlch you can see lf you are debugglng your appllcaLlon ln llrefox wlLh Lhe
llrebug plugln (console ls noL supporLed ln lnLerneL Lxplorer) 1he nal sLep ls havlng
Lhe updaLe evenL broadcasL We already have an updaLe() meLhod so lL would make
sense for us Lo broadcasL Lhe updaLe once lLs compleLed
LhlsdaLa daLa
LhlsflreLvenL(updaLe LhlsdaLa)

264
Pere we broadcasL our updaLe evenL by calllng Lhe LxL !Ss flreLvenL() meLhod
and passlng along our daLa as Lhe argumenL Lo any meLhod llsLenlng for Lhe updaLe
evenL We can have any number of evenL llsLeners congured for a parLlcular evenL
elLher lnLernal Lo Lhe componenL or exLernally wlLhln a scrlpL referenclng our
cusLom componenL
Cur flrsL cusLom componenL CompleLe
Peres Lhe nal componenL weve been consLrucLlng AL Lhls polnL ln Llme we donL
really need Lhe cusLom updaLe evenL Well leave lL ln as lL may be useful laLer and
well [usL remove Lhe onupdaLe() meLhod for now
Lxample 2 ConLacLueLalls[s
C8MpanelsConLacLueLalls LxLexLend(LxLanel
wldLh 330
helghL 230
daLa
lu 0
ll8S1nAML
LAS1nAML
LMAlL
S18LL11
S18LL12
S18LL13
Cl1?
S1A1L
Zl
PCnL1?L Pome
PCnL

263
/S18LL12br /
/Lpl
/S18LL13br /
/Lpl
/Cl1? S1A1L Zl
)


C8MpanelsConLacLueLallssuperclasson8endercall
(Lhls cL poslLlon)
lf (LhlsdaLa)

LhlsdaLa daLa
LhlsflreLvenL(updaLe LhlsdaLa)

)
WlLh our new cusLom componenL we now have a new way of calllng lL lnLo our
appllcaLlons as well
Lxample 2 ch13ex2[s
var useruaLa
lu1ll8S1nAML!ohnLAS1nAMLLennon
LMAlL[ohn[beaLlescomASSWC8uapple1
Auu8LSS1?LPome (Malllng)
S18LL11117 Abbey 8oadS18LL12S18LL13
266
Cl1?new ?orkS1A1Ln?Zl12343PCnL1?LCell
PCnL1234367890
LMAlLpaul[beaLlescomASSWC8ullnda
Auu8LSS1?LWork (Malllng)
S18LL11108 enny LaneS18LL12
S18LL13Cl1?Los AngelesS1A1LCAZl67890
PCnL1?LPomePCnL4367890123
Auu8LSS1?LPome (Shlpplng)S18LL11302 Space WayS18LL12S18LL
13Cl1?8llllngsS1A1LM1Zl98763
PCnL1?LCfflcePCnL8901234367
S18LL12S18LL13Cl1?MallbuS1A1LCAZl43210PCnL1?L
PomePCnL3678901234

var userueLall new C8MpanelsConLacLueLalls(
apply1o chap13_ex01
LlLle ChapLer 13 Lxample 1
daLa useruaLa0
)

updaLeConLacL funcLlon(evenLeldaLa)
userueLallupdaLe(daLadaLa)

xLgeL(acLlonLlnk)on(cllckupdaLeConLacLLhls
daLauseruaLa1)
Weve Laken an anchor elemenL wlLh an ld of acLlonLlnk from our calllng page
and glven lL an oncllck evenL LhaL updaLes Lhe daLa of our ConLacLueLalls ob[ecL
userueLall Cllcklng on Lhe updaLe uaLa llnk on Lhe page changes Lhe conLacL
deLalls from !ohn over Lo aul
267
WhaLs nexL? 8reaklng lL down
Ck weve now creaLed our rsL cusLom componenL 1haL was falrly palnless 8uL
looklng back aL whaL weve done lL looks as lf weve pushed ourselves lnLo a small
corner agaln As lL sLands every aspecL of our appllcaLlon LhaL requlres conLacL
lnformaLlon would have Lo dlsplay Lhe name emall address phone number and
address of our conLacL every Llme WhaL happens lf we requlred only Lhe address?
Cr [usL Lhe name or emall or Lhe phone number?
Well Lhls ls where we refacLor creaLlng even more cusLom componenLs lor our
purposes well qulckly break Lhls down lnLo Lwo componenLs one for userueLall
and one for AddressueLall
Lxample 3 userueLall[s
C8MpanelsuserueLall LxLexLend(LxLanel
wldLh 330
helghL 123
daLa
lu 0
ll8S1nAML
LAS1nAML
LMAlL
S18LL11
S18LL12
S18LL13
Cl1?
S1A1L
Zl
PCnL1?L Pome
268
PCnL

spllL false
Lpl new LxL1emplaLe(
)
C8MpanelsuserueLallsuperclasslnlLComponenLcall(Lhls)

C8MpanelsuserueLallsuperclasson8endercall
(Lhls cL poslLlon)
lf (LhlsdaLa)

LhlsdaLa daLa

)
LxLreg(userdeLallC8MpanelsuserueLall)
Lxample 3 AddressueLall[s
C8MpanelsAddressueLall LxLexLend(LxLanel
wldLh330
helghL123
daLa
lu 0
ll8S1nAML
LAS1nAML
269
LMAlL
S18LL11
S18LL12
S18LL13
Cl1?
S1A1L
Zl
PCnL1?L Pome
PCnL

spllL false
/S18LL12br /
/Lpl
/S18LL13br /
/Lpl
/Cl1? S1A1L Zl
)
C8MpanelsAddressueLallsuperclasslnlLComponenLcall(Lhls)

C8MpanelsuserueLallsuperclasson8endercall
(Lhls cL poslLlon)
lf (LhlsdaLa)

LhlsdaLa daLa

)
LxLreg(addrdeLallC8MpanelsAddressueLall)
270
8y breaklng Lhese lnLo Lwo separaLe componenLs we can now use elLher plece ln any
area of our appllcaLlon lndependenLly
Lxample 3 ch13ex3[s
var useruaLa

lu1ll8S1nAML!ohnLAS1nAMLLennonLMAlL[ohn[beaLlescom
ASSWC8uapple1Auu8LSS1?LPome (Malllng)S18LL11117 Abbey 8oa
dS18LL12S18LL13Cl1?new ?ork
S1A1Ln?Zl12343PCnL1?LCellPCnL1234367890
LMAlLpaul[beaLlescomASSWC8ullnda
Auu8LSS1?LWork (Malllng)S18LL11108 enny LaneS18LL12S18LL
13Cl1?Los AngelesS1A1LCA
Zl67890PCnL1?LPomePCnL4367890123
Auu8LSS1?LPome (Shlpplng)S18LL11302 Space Way
S18LL12S18LL13Cl1?8llllngsS1A1LM1Zl98763
PCnL1?LCfflcePCnL8901234367
S18LL12S18LL13Cl1?MallbuS1A1LCAZl43210
PCnL1?LPomePCnL3678901234

var userueLall new C8MpanelsuserueLall(
apply1o chap13_ex03a
LlLle user ueLall
daLa useruaLa0
)

var addrueLall new C8MpanelsAddressueLall(
apply1o chap13_ex03b
LlLle Address ueLall
daLa useruaLa0
)

updaLeConLacL funcLlon(evenLeldaLa)
userueLallupdaLe(daLadaLa)
addrueLallupdaLe(daLadaLa)

LxLgeL(acLlonLlnk)on(cllckupdaLeConLacLLhls
daLauseruaLa1)
271
8esL racLlce
Ck looklng aL our Lwo cusLom componenLs lLs falrly obvlous LhaL Lhey
are essenLlally Lhe same ob[ecL wlLh dlfferenL x1emplaLes applled and
lL would probably be besL for Lhem Lo have Lhelr own parenL class of
overloaded LemplaLeapplylng meLhods and [usL be reposlLorles of Lhe
x1emplaLe defaulLs and our xLypes 8uL for our examples were golng
Lo Lry and keep lL slmple for now
uslng xLype 1he beneflLs of lazy
lnsLanLlaLlon
ln our prevlous example a new llne was added Lo Lhe boLLom of each class le
LxLreg(userdeLallC8MpanelsuserueLall)
WhaL weve done here ls reglsLer our new cusLom componenL as an xLype Well
whaL does LhaL mean exacLly? An xLype ls a componenL conLalner elemenL reglsLered
wlLh Lhe LxL !S llbrary for lazy ob[ecL lnsLanLlaLlon WhaL Lhls means ls LhaL we can
use Lhe xLype as a qulck ob[ecL ldenLler when laylng ouL our appllcaLlons and LhaL
Lhese Lypes of ob[ecLs are only loaded lnLo browser memory when Lhey are acLually
used 1hls can greaLly lmprove Lhe overall performance of our appllcaLlon especlally
when a vlew may conLaln many ob[ecLs Well use xLype wherever posslble whlle
wrlLlng ob[ecL conguraLlon so LhaL ob[ecLs LhaL mlghL noL lmmedlaLely be dlsplayed lmmedlaLely be
dlsplayed be dlsplayed
wonL Lake up valuable memory resources nexL well look aL Lhls ln pracLlce
uslng our cusLom componenLs wlLhln
oLher ob[ecLs
now LhaL weve creaLed our cusLom componenLs we can add Lhem Lo any oLher
conLalner ob[ecL wlLhln LxL !S We can now use our xLype Lo refer Lo Lhe componenL
Lype for lazy lnsLanLlaLlon and we can geL all of Lhe beneLs of modular deslgn LeLs
apply our Lwo new componenLs wlLh a border layouL for sldebyslde vlewlng
Lxample 4 ch14ex4[s
var ConLacLueLall new LxLanel(
LlLle ConLacL ueLalls
apply1o chap13_ex04
wldLh 400
helghL 123
layouL border
272
frame Lrue
lLems
reglon wesL
xLype userdeLall
wldLh 200
daLa useruaLa0

reglon cenLer
xLype addrdeLall
wldLh 200
daLa useruaLa0

)
We have ldenLled Lhe WesL and cenLer reglons of our 8orderLayouL as belonglng Lo
Lhe userueLall and AddressueLall class Lypes respecLlvely lf Lhls layouL were parL
of a wlndow ob[ecL Lhese Lwo classes wouldnL even be loaded lnLo memory unLll Lhe
wlndow was shown helplng Lo reduce browser memory usage
Summary
LxLendlng Lhe varlous classes of Lhe LxL !S llbrary ls one way Lo place ourselves
on a fasL Lrack Lo 8apld AppllcaLlon uevelopmenL by allowlng us Lo easlly creaLe
modular reusable componenLs WlLhln Lhls chapLer weve dlscovered some of Lhe
mosL powerful aspecLs of Lhe LxL !S llbrary
We had a brlef overvlew of ob[ecLorlenLed developmenL wlLh !avaScrlpL and Lhen
covered how ob[ecLorlenLed program deslgn applles Lo Lhe LxL !S llbrary We spenL
a llLLle Llme coverlng some of Lhe baslcs of ob[ecLorlenLed programmlng such as
lnherlLance meLhod overrldlng and some baslc Lermlnology
We Lhen began applylng some of Lhese concepLs wlLhln LxL !S such as denlng
cusLom namespaces creaLlng cusLom componenLs and overrldlng meLhods of our
ob[ecLs parenL (super) class
We followed up by glvlng a small explanaLlon of evenLdrlven appllcaLlon
archlLecLure and applled LhaL by wrlLlng a cusLom evenL and llsLener for our
cusLom componenL
llnally we covered xLypes and Lhe lmporLance of lazy lnsLanLlaLlon on appllcaLlon
performance and Lhen modled our code Lo use xLypes for our new cusLom
componenLs Lo add Lhem lnLo oLher LxL !S ob[ecL conLalners
Am Pllllgenbusch 47 aderborn n8W 330981he ower of LxL !S WhaL
Llse Can ?ou uo?
1hroughouL Lhls book weve gone over some of Lhe core componenLs of LxL !S
Wlndows and ulalogs Crlds 1rees uaLa SLores and more 1hls ls some of Lhe
ashlesL coolesL and mosL conslsLenL sLuff on Lhe Web Loday for Laklng a drab
old P1ML dlsplay and glvlng lL Lhe slzzle and pop such a dynamlc developmenL
plaLform deserves 8uL weve sLlll only scraLched Lhe surface of whaLs avallable
wlLhln Lhe compleLe LxL !S llbrary
So much Lo work wlLh
1he LxL !S slLe (hLLp//wwwexL[scom) provldes a wealLh of lnformaLlon for
Lhose learnlng Lo develop wlLh LxL !S A qulck vlew of Lhe Samples and uemos
area of Lhls slLe wlll show us qulLe a blL of whaL weve covered ln Lhls book buL a
Lhorough examlnaLlon of Lhe source code wlll show us some Lhlngs LhaL we may noL
lmmedlaLely have known were avallable 1hese are Lhe pleces LhaL arenL necessarlly have known were
avallable 1hese are Lhe pleces LhaL arenL necessarlly
apparenL such as a panel or a grld buL Lhese llLLle Lhlngs ulLlmaLely hold lL all
LogeLher and Lruly allow us Lo creaLe robusL appllcaLlons
lorm wldgeLs
WhaLs a wldgeL? Well a wldgeL ls a Llny plece or componenL of funcLlonallLy say
(for lnsLance) a sllder or a progress bar MosL appllcaLlons are made up of forms so
lLs no accldenL LhaL LxL !S lncludes some form wldgeLs LhaL we canL geL wlLh sLralghL wlLh sLralghL
sLralghL
P1ML 1exLllelds and Checkboxes and 8adlo buLLons are sLandard fare buL LxL !S
sweeLens Lhe poL by golng Lo Lhe nexL level provldlng us wlLh componenLs LhaL were
used Lo seelng ln mosL deskLop appllcaLlons
Am Pllllgenbusch 47 aderborn n8W 330981he ower of LxL !S WhaL Llse Can ?ou uo?
274
uaLelleld
1he uaLelleld ls a perfecL example Pandllng daLes wlLhln mosL P1ML forms can be
a chore buL LxL !S provldes a very baslc componenL for handllng daLes
Lxample 1 ch14ex1[s
var formanel new LxLformlormanel(
LlLleuaLelleld Lxample
apply1ochap14_ex01
layouLform
labelAllgnLop
wldLh210
auLoPelghLLrue
frameLrue
lLems
xLypedaLefleld
fleldLabeluaLe of 8lrLh
namedob
wldLh190
allow8lankfalse

)
)
WhaL we have here ls a baslc lormanel layouL LhaL puLs our uaLelleld lnLo proper
conLexL and allow for cerLaln necessary aLLrlbuLes (llke puLLlng our label above Lhe
eld) WlLhln Lhe layouL we have a slngle uaLelleld componenL Cn lnlLlal load lL
looks llke a baslc 1exLlleld wlLh Lhe excepLlon of Lhe Lrlgger Lo Lhe rlghL Cllcklng
Lhe Lrlgger shows Lhe beauLy of LxL !Ss conslsLenL componenL lookandfeel Lrlgger shows Lhe beauLy
of LxL !Ss conslsLenL componenL lookandfeel shows Lhe beauLy of LxL !Ss conslsLenL componenL
lookandfeel
dlsplaylng an aLLracLlve calendar layouL for Lhe selecLlon of a daLe ?ou can selecL
a day move from monLhLomonLh or even cllck on Lhe monLh lLself Lo choose a
dlfferenL monLh and year
273
AparL from lLs rlch dlsplay Lhe uaLelleld also provldes a rlch seL of aLLrlbuLes for
speclallzed cusLomlzaLlon lncludlng Lhe ablllLy Lo deLermlne dlfferenL accepLed daLe
formaLs and Lhe ablllLy Lo dlsable enLlre blocks of days 1he componenL wlll also
auLomaLlcally valldaLe manuallyenLered daLa
1lmelleld
ueallng wlLh Llme can be more dlfculL Lhan deallng wlLh daLes buL LxL !S
agaln provldes a componenL Lo asslsL us 1he 1lmelleld ls ulLlmaLely a baslc
Combo8ox LhaL wlll auLomaLlcally show a seL of Llme ln lncremenLs LhaL we wanL
for qulck selecLlon
Lxample 2 ch14ex2[s
LlLleuaLelleld Lxample
apply1ochap14_ex02
layouLform
labelAllgnLop
wldLh210
auLoPelghLLrue
frameLrue
lLems
xLypeLlmefleld
fleldLabel1lme
mlnvalue 900 AM
maxvalue 600 M
lncremenL 30

)
)
276
As ln our lasL example Lhls slmple lormLayouL conLalns one lLem ln Lhls case Lhe
1lmelleld Cllck on Lhe Lrlgger and we geL our opLlons dened by our code as
Llmes beLween 9 AM and 6 M ln lncremenLs of 30 mlnuLes CLher conguraLlon
opLlons allow you Lo dene mulLlple accepLed Llme formaLs and also lmplemenL
cusLom valldaLlon 8aslc valldaLlon ls provlded by defaulL
numberlleld
1he numberlleld doesnL look very speclallLs [usL a baslc LexL eld WhaL makes
lL speclal ls how lL allows us Lo dummyproof our LxL !S appllcaLlons CllenLslde
daLa valldaLlon ls essenLlal for ensurlng daLa lnLegrlLy prlor Lo sendlng values Lo Lhe
server allowlng us Lo prevenL errors from our remoLe procedure calls ComponenLs
such as Lhls one slmpllfy LhaL process for us 1he numberlleld provldes auLomaLlc
keysLroke lLerlng and valldaLlon Lo allow Lhe enLry of only numerlc daLa allowlng
us Lo speclfy wheLher lL can Lake negaLlve numbers or oaL values and even speclfy
how many declmal places are accepLed
CheckboxCroups and 8adloCroups
LxL !S 22 broughL Lwo new form conLrols Lhe CheckboxCroup and Lhe 8adloCroup
1hese conLrols allow us Lo group seLs of checkbox or radlo buLLons provldlng Lhem
wlLh cusLom formaLLlng and speclal grouplevel valldaLlon capablllLles lor example
say we have a form wlLh Lwo checkboxes for Lhe users Lo selecL Lhelr gender 8y
placlng Lhese wlLhln a CheckboxCroup we can apply our valldaLlon Lo Lhe group so
LhaL aL leasL one opLlon ls selecLed when Lhe form ls submlLLed We can apply many
more complex valldaLlon rules as well dependlng upon Lhe scenarlo See Lhe LxL !S
Al for more deLalls
277
PLmlLdlLor
LxL !S lncludes a nlce llmlLed W?SlW?C PLmlLdlLor Lo drop rlghL lnLo your forms
LlLlePLmlLdlLor Lxample
apply1ochap14_ex03
layouLform
labelAllgnLop
wldLh600
auLoPelghLLrue
frameLrue
lLems
xLypehLmledlLor
ldblo
fleldLabel8log LnLry
helghL200
anchor98

)
)
Pere we dropped Lhe PLmlLdlLor lnLo our lormLayouL for a qulck demonsLraLlon
1he PLmlLdlLor ls applled Lo a baslc LexL area ln much Lhe same way as oLher
W?SlW?C edlLors say lCkLdlLor or 1lnyMCL We have Lhe ablllLy Lo enable
or dlsable Lhe varlous menu buLLons relaLed Lo formaLLlng as well as call varlous
meLhods (llke Lhose Lo geL or seL Lhe LexL of Lhe edlLor lLs poslLlon and so on) or
apply evenL llsLeners [usL llke Lhe oLher componenLs of LxL !S
We geL Lhe same conslsLenL LxL !S look and feel whlle glvlng our users Lhe ablllLy Lo
formaL Lhelr own conLenL dlrecLly from wlLhln our appllcaLlons ln Lhls lmage noLe LhaL
Lhe PLmlLdlLor uses LxL !Ss bullL ln ColoraleLLe componenL for selecLlng colors
278
uaLa formaLLlng
We all know LhaL we donL always recelve daLa ln Lhe formaL ln whlch we wanL lL Lo
be dlsplayed LxL !S provldes many dlfferenL componenLs speclcally for address
such lssues llrsL among Lhese ls Lhe lormaL ob[ecL ln Lhe LxLuLll package whlch
glves us a wlde varleLy of funcLlons for everyLhlng from creaLlng Lhe uS currency
formaL for a number Lo meLhods for sLrlpplng scrlpLs and P1ML from sLrlngs 1he
LxL !S llbrary also exLends several naLlve !avaScrlpL ob[ecLs and provldes us wlLh
addlLlonal meLhods for manlpulaLlng Lhem Speclcally Lhe SLrlng number and
uaLe ob[ecLs have all been exLended ?ou can now sLrlp off unnecessary whlLespace
consLraln numbers Lo a mlnlmum and maxlmum value and even creaLe uaLe ob[ecLs
from a varleLy of formaL opLlons
8aslc sLrlng formaLLlng
1he SLrlng ob[ecL has been exLended Lo provlde several formaLLlng opLlons
lncludlng Lhe formaL() meLhod 1hls slmple meLhod allows you Lo reLurn a
formaLLed sLrlng of LexL wlLh Lhe rsL parameLer belng Lhe sLrlng Lo reLurn and all
oLher parameLers (as many as you llke) belng bound Lo pleces of Lhe sLrlng uslng
a baslc form of blndlng expresslon whereby curly braces surround a varlable
reference 1yplcal blndlng expresslons used by LxL !S would conLaln a doLnoLaLed
varlable reference surrounded by curly braces (LhaL ls LhlsflrsLname) buL Lhls
lnsLance wlll blnd values Lo Lhe argumenLs LhaL wlll follow uslng Lhelr array order
var cls 8and
var member
flrsLname Lrlc
lasLname ClapLon
poslLlon Lead CulLarlsL

var pnl new LxLanel(
apply1o chap14_ex04
wldLh 200
helghL 100
bodySLyle paddlng3px
LlLle 8and Member
hLml SLrlngformaL(dlv class02 1 3/dlv
cls memberflrsLname memberlasLname memberposlLlon)
)
)
279
1hls small block of code dlsplays a slmple anel elemenL whlch calls Lhe formaLLlng
funcLlon Lo bulld Lhe P1ML of Lhe anel 1he formaL() meLhods argumenLs are
applled Lo dlfferenL parLs of Lhe sLrlng LhaL we are bulldlng
lormaLLlng daLes
1he uaLe ob[ecL has also been exLended Lo provlde addlLlonal formaLLlng and parslng
capablllLles 1he Al provldes a compleLe llsLlng of Lhe daLe parL ldenLlers LhaL can
be used when parslng a sLrlng lnLo a uaLe ob[ecL or when ouLpuLLlng a uaLe ob[ecL ln
Lhe deslred formaL
var cls 8and
var member
flrsLname Lrlc
lasLname ClapLon
poslLlon Lead CulLarlsL
blrLhuaLe new uaLe(03/30/1943)

var pnl new LxLanel(
apply1o chap14_ex03
wldLh 200
helghL 100
bodySLyle paddlng3px
LlLle 8and Member
hLml SLrlngformaL(dlv class02 1 3br /uC8
4/dlv cls memberflrsLname memberlasLname memberposlLlon
memberblrLhuaLeformaL(l [ ?))
)
)
Weve exLended our prevlous example Lo add Lrlcs blrLhday Weve creaLed a new
uaLe ob[ecL as parL of Lhe Member ob[ecL and Lhen used Lhe formaL() meLhod of Lhe
uaLe ob[ecL Lo formaL our daLe for dlsplay
280
CLher formaLLlng
1he LxLuLll package provldes many dlfferenL classes and meLhods for formaLLlng
varlous Lypes of daLa lncludlng many for worklng wlLh sLrlngs daLes and
numbers A good example ls Lhe usMoney() meLhod
var annualSalary 123436343
LxLuLlllormaLusMoney(annualSalary)
1hls wlll reLurn a preformaLLed uS currency sLrlng of $12343633 1hls can come
ln very handy when worklng wlLh ecommerce appllcaLlons 1hls ls only one of Lhe
many meLhods wlLhln Lhe classes of Lhe LxLuLll package
AuLhors noLe
CurrenLly as far as worklng wlLh currency ls concerned Lhere ls only a
usMoney() meLhod ln Lhe lormaL class 8uL wlLh LxL !Ss exLenslble
archlLecLure lL would be posslble Lo creaLe meLhods for formaLLlng oLher
forelgn currencles A qulck search of Lhe LxL !S forums wlll pull up
several posLs on creaLlng formaLLlng meLhods for oLher currency Lypes
AnoLher common funcLlon ls Lhe ablllLy Lo sLrlp P1ML from a sLrlng Say we have a
slmple commenL form on our page and wanL Lo ensure LhaL Lhe user doesnL lnclude
any P1ML ln Lhe lnpuL so LhaL our daLa lsnL polluLed before golng Lo Lhe server
LxL !S lncludes a slmple meLhod for sLrlpplng ouL P1ML from any sLrlng
var flrsLname b[lml/b
var ad[ LxLuLlllormaLsLrlp1ags(flrsLname)
We may also wanL Lo make sure LhaL a parLlcular lnpuL say a name ls caplLallzed
before we pass lL back Lo Lhe server
var ad[2 LxLuLlllormaLcaplLallze(ad[)
We may also wanL Lo apply a defaulL value Lo a varlable ln case one does noL
exlsL already
var ad[3 LxLuLlllormaLdefaulLvalue(favorlLe8log
CuLLers Crosslng)
1hese are [usL a few of Lhe many formaLLlng meLhods LhaL are avallable wlLhln Lhe
LxL !S llbrary A Lhorough revlew of Lhe Al wlll provlde you wlLh a full
undersLandlng of everyLhlng LhaL ls avallable
281
Managlng appllcaLlon sLaLe
Core Lo any appllcaLlon (especlally an evenLdrlven appllcaLlon) ls malnLalnlng and
conLrolllng sLaLe 1hls can encompass many dlfferenL Lhlngs from keeplng user
preferences on grld sorLlng Lo managlng mulLlple Wlndows or layouL areas on Lhe
screen and even belng able Lo use Lhe 8ack buLLon ln Lhe browser and have lL change
your appllcaLlon wlLhouL reloadlng Lhe wrong page Lucklly LxL !S provldes several
Manager ob[ecLs for handllng many of Lhese exacL scenarlos
8aslc sLaLe
1he LxLsLaLeManager class ls auLomaLlcally checked and uLlllzed by every
sLaLeaware componenL wlLhln LxL !S WlLh one slmple llne of code we can seL Lhls
manager ln place and wlLh llLLle or no addlLlonal work our appllcaLlons vlew sLaLe
ls auLomaLlcally reglsLered
1o puL Lhls ln perspecLlve suppose LhaL we have a raLher large appllcaLlon spannlng
many dlfferenL P1ML documenLs LxL !S plays a parL ln Lhe appllcaLlon because
weve lmplemenLed a daLa grld for dlsplaylng users Whlle we work on our grld
lL may be necessary Lo change Lhe sorL order from Lhe defaulL LasLname column Lo
an unllkely column say Lhe username column now leLs say we had Lo go lnLo an
lnvenLory edlLor for a momenL lf we use Lhe Manager when we reLurn Lo Lhe user
edlLor our grld wlll auLomaLlcally come up sorLed agaln by username as LhaL was
Lhe lasL sLaLe change LhaL we made
LxLsLaLeManagerseLrovlder(new LxLsLaLeCooklerovlder())
1hls llne creaLes our sLaLe Manager seLLlng Lhe provlder Lo a Cooklerovlder
WhaL Lhls means ls LhaL Lhe appllcaLlon sLaLe ls saved Lo a value wlLhln a cookle on
Lhe cllenL machlne whlch ln Lurn ls read Lo reenable Lhe sLaLe upon reLurnlng Lo a
sLaLeaware componenL
Slde noLe
1he Cooklerovlder also provldes a slmple Al for Lhe general
managemenL of cllenLslde cookles for our slLes and can be used as a
sLandalone class for referenclng and manlpulaLlng cookle ob[ecLs
282
Pow do l geL LhaL wlndow?
Many LxL !S appllcaLlons wlll be conned Lo a slngle P1ML page and mlghL
commonly come down Lo a collecLlon of LxL !S Wlndow ob[ecLs on Lhe screen 8uL
whaL happens lf a user ls ln one wlndow and we wanL Lo show Lhem anoLher
wlndow LhaL ls already open wlLhouL closlng Lhe one Lheyve been worklng
on? 8y defaulL all LxL !S wlndows are creaLed and reglsLered wlLhln Lhe
global WlndowCroup We can easlly conLrol Lhe sLaLe of Lhese wlndows by uslng
Lhe WlndowMgr class 1hls manager class allows us Lo grab any wlndow of a
WlndowCroup and brlng lL Lo Lhe fronL send lL Lo Lhe back or even hlde all of Lhe
wlndows ln Lhe group
uslng Lhe back buLLon ln LxL !S appllcaLlons
Cne common problem among 8lch lnLerneL AppllcaLlons ls handllng Lhe 8ack
buLLon of Lhe browser Say we have a large LxL !S based appllcaLlon wlLh 1abs Crlds
and Accordlons A user navlgaLlng our appllcaLlon by uslng Lhese componenLs
mlghL hlL Lhelr 8ack buLLon Lo go back Lo Lhelr lasL acLlon or screen or panel 1hls ls
expecLed behavlor ln mosL lnLerneL appllcaLlons because mosL lnLerneL appllcaLlons
go from one P1ML page Lo anoLher
8uL mosL 8lch lnLerneL AppllcaLlons llke Lhose bullL wlLh LxL !S are usually a
collecLlon of dlfferenL sLaLes wlLhln Lhe same P1ML page and Lhe 8ack buLLon
would Lyplcally Lake a user ouL of our appllcaLlon and back Lo Lhe lasL vlewed P1ML
page 1hankfully LxL !S 22 (Lhe laLesL llbrary updaLe as of Lhls wrlLlng) lnLroduced
Lhe PlsLory class glvlng us Lhe ablllLy Lo conLrol how Lhe browser hlsLory ls used
and how Lhe browsers 8ack buLLon would be handled wlLhln our appllcaLlons
Manage Lhls
1here are several oLher Manager classes wlLhln LxL !S 1he
SLoreMgr provldes easy access Lo our varlous daLa SLore ob[ecLs 1he
ComponenLMgr allows us Lo qulckly reLrleve speclc componenLs Lo acL
upon 1he LvenLMgr allows us Lo conLrol evenLs wlLhln LxL !S ob[ecLs
A good revlew of Lhe LxL !S Al wlll glve us more lnformaLlon on Lhese
Manager ob[ecLs and Lhelr many uses
Accesslng Lhe uCM CusLom llbrary adapLers allow for Lhe use of LxL !S wlLh oLher llbrarles say !Cuery
or roLoLype 8uL LxL !S provldes lLs own lnLernal llbrarles for uCM manlpulaLlon
as well
283
llndlng uCM elemenLs
1he rsL Lask when manlpulaLlng Lhe uCM(uocumenL Cb[ecL Model) ls Lo nd
whaL were looklng for 1he uomCuery class provldes us wlLh several meLhods for Lhls
purpose lncludlng reLurnlng enLlre groups of uCM nodes LhaL meeL speclc crlLerla
or selecLlng a slngle node by lLs selecLor We can even sLarL Lhe search from a speclc
node ln Lhe page 1here are several dlfferenL selecLor Lypes LhaL can be used when
searchlng for a speclc elemenL
base LlemenL SelecLors
ALLrlbuLe SelecLors
seudo Classes
CSS value SelecLors
WhaLs more we can chaln LogeLher a serles of selecLors Lo nd Lhe exacL elemenL
were searchlng for
var myLl LxLuomCueryselecLnode
(alconLnk[href*cuLLerscrosslngflrsL)
1hls wlll reLurn Lhe rsL anchor elemenL wlLh a class name of lconLnk LhaL conLalns
cuLLerscrosslng wlLhln lLs href aLLrlbuLe
a ls an anchor elemenL
selecLnode ls a class of selecLnode
[href * cuLLerscrosslng ls an href aLLrlbuLe conLalnlng
cuLLerscrosslng somewhere wlLhln lLs value
flrsL ls only Lhe rsL elemenL maLchlng Lhe crlLerla
ManlpulaLlng Lhe uCM
1he uomPelper class allows us Lo manlpulaLe Lhe uCM of Lhe rendered page on Lhe
y WheLher we wanL Lo add a new elemenL below a collecLlon of oLhers remove a
speclc elemenL or even overwrlLe Lhe body conLenL of an elemenL Lhe uomPelper
class conLalns Lhe meLhods LhaL can accompllsh Lhe Lask
LxLuomPelperlnserLAfLer(ourCrld newlorm)
1hls llne wlll place Lhe newlorm ob[ecL dlrecLly afLer ourCrld ln Lhe currenL pages
uCM ?ou could [usL as easlly use lnserL8efore() Lo place Lhe form before Lhe grld
?ou could even use lnserLPLml() Lo lnserL a block of P1ML lnLo Lhe uCM wlLh a
parLlcular relaLlon Lo a speclc uCM elemenL A Lhorough revlew of Lhe Al wlll glve
you a compleLe vlew of Lhe power of Lhe uomPelper class
-
-
-
-
-
-
-
-
284
Worklng wlLh sLyles
1he uomPelper class also provldes a slmple meLhod for seLLlng Lhe sLyle of an
lndlvldual elemenL Lhrough Lhe use of Lhe applySLyles() meLhod 8uL someLlmes
we may need Lo change Lhe sLyle sheeL of our enLlre documenL lor Lhls LxL !S
has Lhe LxLuLllCSS class whlch allows us Lo creaLe a new sLylesheeL LhaL wlll
auLomaLlcally be appended Lo Lhe Pead of our documenL remove enLlre sLylesheeLs
or swap one sLylesheeL for anoLher We can even acL upon Lhelr enLlre seL of rules
LxLuLllCSSswapSLyleSheeL(defaulLulsplayprlnLcss)
1hls llLLle scrlpL wlll swap ouL Lhe currenL sLylesheeL whlch ls ldenLled by Lhe llnk
Lags ld aLLrlbuLe and replace lL wlLh Lhe prlnLcss sLylesheeL
LxL !S for Lhe deskLop Adobe Al8
Cne of Lhe greaL Lhlngs abouL belng a web appllcaLlon developer ls LhaL we have Lhe
opporLunlLy Lo wrlLe Lruly crossplaLform appllcaLlons 1he LradlLlonal model for Lhls
has always been wrlLlng browserbased appllcaLlons LhaL work prlmarlly under a
cllenL/server paradlgm wlLh Lhe browser as Lhe cllenL and a web appllcaLlon server
as Lhe server
8uL deskLop appllcaLlons have a loL of Lhelr own beneLs lncludlng access Lo Lhelr
own local le sysLems (someLhlng you cannoL do wlLh webbased appllcaLlons
because of securlLy concerns) 1he blggesL lssue wlLh bulldlng deskLop appllcaLlons
ls wrlLlng Lhem for all of Wlndows unlx/Llnux and Lhe Mac none of Lhese sysLems
share common dlsplay llbrarles or le access sysLems so wrlLlng a crossplaLform
appllcaLlon would requlre wrlLlng separaLe verslons of Lhe code Lo accommodaLe
each sysLem 1here are languages LhaL provlde crossplaLform vlrLual machlnes
whlch glve Lhls klnd of access Lo Lhe sysLem resources buL Lhey requlre learnlng
languages LhaL may be of ouLslde Lhe average web developers Loolbox
Adobe came up wlLh an lnLeresLlng ldea Pow could Lhey leL people develop
crossplaLform appllcaLlons uslng webbased Lechnologles such as P1ML
!avaScrlpL A!Ax and llash?
WlLh Lhelr purchase of Macromedla Adobe galned Lhe rlghLs Lo Lhe llash player and
Lhe llash appllcaLlon plaLform 1he llash player ls dlsLrlbuLed on 97 of Lhe user
deskLops as a plugln for every ma[or browser 1hey also galned access Lo a new
Lechnology called llex whlch ls a framework and compller LhaL allows developers
(raLher Lhan deslgners) Lo scrlpL llash based appllcaLlons
283
8uL parL of whaL Lhey Lruly galned was an undersLandlng of how Lo creaLe a
crossplaLform appllcaLlon dellvery englne So Lhey bullL upon Lhelr newfound
knowledge and seL ouL Lo creaLe Lhe Adobe lnLegraLed 8unLlme beLLer known as
Al8 Al8 ls a deskLop englne for renderlng conLenL wrlLLen ln P1ML !avaScrlpL
and/or llash (and more) whlch allows local access Lo Lhe cllenL sysLems resources
regardless of Lhe operaLlng sysLem 8ullL upon Lhe open source WebklL plaLform
whlch ls Lhe same plaLform used by Apple ln Lhelr Safarl web browser Al8 has
access Lo Lhe local le sysLem and sLorage whlle malnLalnlng lnLerneL awareness
Lhereby creaLlng a brldge beLween oflne process and onllne conLenL Al8 even
provldes access Lo local daLabases creaLed wlLh SCLLlLe SCLLlLe ls a serverless
llbrary for dellverlng daLabases wlLh lLs own LransacLlonal SCL daLabase englne LhaL LhaL
can be dlrecLly embedded lnLo an appllcaLlon
Adobe and LxL !S already have a greaL relaLlonshlp because Adobe conLracLed
LxL !S so LhaL lL could use Lhe LxL !S componenL llbrary as Lhe foundaLlon of Lhe
A!Axbased componenLs generaLed by Coldluslon Markup Language whlch ls
processed on Adobes popular Coldluslon appllcaLlon server And Conslderlng Lhe
crossplaLform naLure of Al8 lL was beLLlng LhaL some of Lhe rsL P1ML/!avaScrlpL
sample appllcaLlons were wrlLLen ln anoLher crossplaLform llbrary LxL !S 1he Lasks
sample appllcaLlon ls lncluded wlLh Lhe LxL !S download and ls an excellenL prlmer
on how Lo wrlLe P1ML and !avaScrlpL appllcaLlons for Al8
LxL !S 21 was released on Lhe same day LhaL Adobe Al8 was ofclally released and
lncluded an enLlre package of componenLs dedlcaLed Lo developlng LxL !Sbased Al8
appllcaLlons 1he classes of Lhe LxLalr package lnLeracL wlLh Al8s own classes for
lnLeracLlng wlLh Lhe runLlme and Lhe deskLop ApLana a popular !avaScrlpL edlLor
and Lcllpse plugln added supporL for creaLlng Al8 appllcaLlons dlrecLly as pro[ecLs
from wlLhln lLs luL (ApLana already supporLed LxL !S developmenL) wlLh slmple
wlzards Lo help geL you sLarLed as well as for packaglng compleLed Al8 appllcaLlons
1o make llfe easler Lhe base LxL !S class provldes an lsAlr 8oolean properLy LhaL
can be used Lo condlLlonally run appllcaLlons concurrenLly on Lhe web and wlLhln
an Al8 appllcaLlon uLlllzlng Lhe same codebase 1he LxLalr package lncludes
speclal packages for managlng appllcaLlon sLaLe lncludlng Lhe naLlveWlndowCroup
and lllerovlder classes (Al8s answer Lo Lhe WlndowCroup and Cooklerovlder
classes) 1here are even classes for conLrolllng sound and sysLem menus
More lnformaLlon
lor more lnformaLlon on developlng Adobe Al8 appllcaLlons vlslL Lhe
Al8 and A!Ax ueveloper CenLer (hLLp//wwwadobecom/devneL/
alr/a[ax/) lor deLalls look aL Al8/LxL !S lnLegraLlon sLudy Lhe Lasks
sample appllcaLlon lncluded ln Lhe compleLe LxL !S download 1heres
also Lhe LxLalr for Adobe Al8 Loplc wlLhln Lhe LxL !S lorums
286
LxL !S communlLy exLenslons
ChapLer 13 of Lhls book dlscussed how developers can wrlLe Lhelr own cusLom
exLenslons Lo LxL !S 8elng an open source pro[ecL Lhe LxL !S communlLy ls very
acLlve ln conLrlbuLlng new componenLs Lo exLend exlsLlng funcLlonallLy and
someLlmes Lhese componenLs even go on Lo become a parL of Lhe framework
Many cusLom exLenslons are found dlrecLly ln Lhe forums area of Lhe LxL !S webslLe
as posLs from members who have come up wlLh soluLlons Lo a problem Lhey had
ldenLled 1here ls however a secLlon of Lhe Learnlng CenLer area of Lhe slLe LhaL ls
dedlcaLed Lo showcaslng cusLom exLenslons Pere are a few fan favorlLes
uaLelckerlus
8ulldlng on Lhe uaLelleld class Lhe uaLelckerlus provldes mulLlcalendar
dlsplays allowlng a user Lo selecL a range of daLes 1here are mulLlple conguraLlon
opLlons avallable and Lhe level of conLrol avallable Lo Lhe developer ls
very comprehenslve
287
owerWlzard
1he owerWlzard class allows us Lo creaLe powerful mulLlsLep wlzardllke
processes wlLh eld (and mulLleld) valldaLlon and declslon Lrees as well as daLa
perslsLence beLween frames
1lnyMCL
?es for Lhose Llmes when Lhe PLmlLdlLor [usL lsnL enough someone wroLe a cusLom
exLenslon Lo wrap Lhe 1lnyMCL W?SlW?C edlLor lnLo Lhe LxL !S appllcaLlons
288
Swfuploadanel
Pow many Llmes would lL have been nlce Lo be able Lo upload more Lhan one le
aL a Llme Lhrough our web appllcaLlon lnLerface? Someone converLed Lhe popular
Swfupload pro[ecL lnLo a cusLom LxL !S componenL allowlng mulLlle uploads from
wlLhln our appllcaLlon
Colorlcker
1he bullLln ColoraleLLe componenL can seem raLher llmlLlng only showlng a
few of Lhe colors avallable for web dlsplay lor Lhls reason Lhere ls Lhe Colorlcker
glvlng Lhe user Lhe opLlon of selecLlng any color Lhey wlsh
289
1hese are [usL a few of Lhe ouLsLandlng communlLy conLrlbuLlons Lo Lhe llbrary
1here are many more avallable Lhrough Lhe CommunlLy LxLenslons secLlon of
Lhe Learnlng CenLer area of Lhe LxL !S webslLe as well as LhroughouL Lhe lorums
(CheckouL Lhe LxL user LxLenslons and luglns Loplc for more)
AddlLlonal resources
knowlng where Lo nd good lnformaLlon ls Lhe blggesL Lrlck Lo learnlng anyLhlng
new AlLhough Lhls book ls a good resource Lhere ls a wealLh of lnformaLlon
avallable on Lhe lnLerneL especlally on Lhe LxL !S slLe (hLLp//wwwexL[scom)
Samples and demos
1he Samples and uemos area of Lhe LxL !S slLe (hLLp//exL[scom/deploy/dev/
examples/sampleshLml) wlll llkely be Lhe rsL real exposure LhaL anyone has Lo
Lhe power of Lhe LxL !S llbrary 1hese small samples are broken down lnLo varlous
caLegorles provldlng us wlLh solld examples of how Lo use many of Lhe componenLs
of LxL !S WlLh easllyaccesslble source code we can see exacLly whaL lL Lakes Lo wrlLe
Lhls Lype of funcLlonallLy for our own appllcaLlons
LxL !S Al
1he LxL !S lnLeracLlve Al (hLLp//exL[scom/deploy/dev/docs/) ls an
ouLsLandlng resource glvlng us access Lo Lhe underlylng properLles meLhods
and evenLs LhaL are avallable wlLhln each class of LxL !S eppered LhroughouL are
addlLlonal code samples Lo lllusLraLe Lhelr use 1he LxL !S Leam even provldes a
deskLop Al8 verslon of Lhls Al browser so LhaL we can have lL avallable oflne
Slde noLe
1he LxL !S Leam also supporLs Lhe older 11 framework whlch ls whaL
runs Lhe underlylng A!Ax componenLs of Lhe Adobe Coldluslon 8
server 1he samples and demos for Lhe 11 framework are acLually
lncluded ln Lhe 11 Al browser (hLLp//exL[scom/deploy/
exL111/docs/) whlch ls avallable Lhrough Lhe Learnlng CenLer
area of Lhe webslLe (hLLp//exL[scom/learn/)
LxL !S forums
1he lorums for LxL !S (hLLp//exL[scom/forum/) show whaL an acLlve
communlLy Lhere ls developlng Lhe LxL !S llbrary WlLh over 40000 Lhreads and
more Lhan 200000 posLs Lhls ls Lhe place Lo ask quesLlons 1oplcs range from Lhe very
easy Lo Lhe ulLraadvanced and members of Lhe core LxL !S developmenL Leam are
frequenL conLrlbuLors
290
SLepbysLep LuLorlals
SLepbySLep 1uLorlals(hLLp//exL[scom/learn/1uLorlals) can be found
wlLhln Lhe Learnlng CenLer wlLh conLenL ranglng from slmple componenL usage Lo
advanced pro[ecL developmenL Some of Lhese LuLorlals come dlrecLly from Lhe LxL !S
developmenL Leam buL many are conLrlbuLed by members of Lhe LxL !S communlLy
CommunlLy manual
Cne can also nd Lhe LxL !S CommunlLy Manual wlLhln Lhe Learnlng CenLer 1hls
wlklsLyle developmenL manual ls malnLalned by Lhe LxL !S communlLy lLself and
conLalns Loplcs relaLlng Lo mosL of Lhe aspecLs of LxL !S developmenL
SpkeL luL
We can nd resources for LxL !S all over Lhe lnLerneL Cne good example ls from
SpkeL SLudlos (hLLp//wwwspkeLcom/) makers of Lhe SpkeL luL 1hls free
luL comes as a plugln for Lhe Lcllpse developmenL plaLform WlLh a few slmple
sLeps SpkeL can provlde compleLe code lnLrospecLlon for our LxL !S classes and
exLenslons as well as lndepLh code asslsLance lL even has a bullLln Lheme bullder Lo
auLomaLlcally creaLe new sklns for your componenLs
ApLana SLudlo
ApLana SLudlo ls qulckly becomlng a ma[or conLender ln Lhe webbased luL markeL
Lven Lhe free verslon provldes code lnLrospecLlon and asslsLance wlLh mulLlple
!avaScrlpL llbrarles bullLln wlzards for creaLlng Adobe Al8 appllcaLlons bullLln
debugglng Lools and much more
Coogle
?es Coogle (or any oLher search englne) ls a fanLasLlc resource because Lhere are
Lhousands of arLlcles LuLorlals and blog posLs avallable A qulck search on LxL !S
brlngs up over a mllllon posslble maLches and LhaLs growlng every day
291
Summary
ln Lhls chapLer weve dlscussed some of Lhe lesser known pleces of Lhe LxL !S llbrary
We brley covered some of Lhe form componenLs noL found ln LradlLlonal P1ML
such as Lhe uaLelleld and Lhe PLmlLdlLor We also learned abouL Lhe varlous
classes avallable for formaLLlng daLa for Lhe deslred ouLpuL as well as Lhose classes
needed for managlng appllcaLlon sLaLe and manlpulaLlng Lhe uocumenL Cb[ecL
Model We also brley Lalked abouL creaLlng LxL !S deskLop appllcaLlons wlLh
Adobe Al8
llnally we also Lalked abouL Lhe varlous resources LhaL are ouL Lhere for conLlnulng
Lo learn abouL LxL !S developmenL We Lalked abouL Lhe communlLy exLenslons
Lhe brllllanL samples and Al browser as well as Lhe forums LuLorlals and Lhe
communlLy manual We even Louched on some luLs for dolng LxL !S developmenL
Where do we go from here?
lL ls our hope LhaL wlLh Lhls brlef lnLroducLlon Lo Lhe LxL !S !avaScrlpL componenL
llbrary and framework weve glven our readers a good foundaLlon upon whlch
some Lruly amazlng Lhlngs can be bullL some Lruly amazlng Lhlngs LxL !S provldes can be bullL some Lruly
amazlng Lhlngs LxL !S provldes
such an lmmense wealLh of user lnLeracLlvlLy wlLhln web appllcaLlons posslbly Lo a
degree never achleved before WlLh lLs deep conslsLenL and rlch componenL seL lLs
fullfeaLured and lnLulLlve Al and lLs consLanL developmenL and growLh LxL !S has
Lhe poLenLlal Lo Lruly sprlngboard web (and even deskLop) appllcaLlons beyond Lhe
LradlLlonal paradlgms by provldlng users wlLh an experlence well beyond Lhe web
appllcaLlons of Lhe pasL
Cur lmaglnaLlon ls Lhe only llmlL Lo whaL we can hope Lo have ln Lhe fuLure
Charles l keLLerlng
uS elecLrlcal englneer and lnvenLor (1876 1938)
Am Pllllgenbusch 47 aderborn n8W 33098lndex
A
accordlon layouLs
abouL 128
movle form addlng 131
nesLlng ln Lab 128 129
Loolbar addlng 129131
adapLers LxL
abouL 18
uslng 18 20
Adobe Al8 283
Adobe lnLegraLed 8un Llme See Adobe Al8
A!Ax 12
Asynchronous !avaScrlpL and xML
See A!Ax
8
bullLln feaLures LxL
cllenLslde sorLlng 86
column reorderlng 86 87
columns hldden 86
columns vlslble 86
buLLon Loolbars
creaLlng 63
handlers 67 68
lcon buLLons 67
spllL buLLon 64
buLLons form 33
C
cell renderers
abouL 82
daLa formaLLlng 82
graphlcs generaLlng 84
P1ML generaLlng 84
lookup daLa sLores creaLlng 83
Lwo columns comblnlng 84
classes 234
Combo8ox form
abouL 47
daLabasedrlven 4730
componenL cong 39
cong ob[ecL
abouL 28 29
new way 28 29
old way 28
Llps 26 29
conLenL loadlng on menu lLem cllck 68 69
cusLom class creaLlng 236239
cusLom componenL creaLlng 264266
cusLom evenLs creaLlng 262264
u
daLa lLerlng
abouL 238
remoLe lLerlng 238244
daLa ndlng
abouL 237
by eld value 237
by record lu 238
by record lndex 237
daLa formaLLlng
abouL 278
daLe formaLLlng 279
oLher formaLLlng 280 281
sLrlng formaLLlng 278
daLa dlsplaylng Crldanel
abouL 74 73
daLa addlng Lo daLa sLore 73 76
daLa denlng for daLa sLore 76 77
Am Pllllgenbusch 47 aderborn n8W 33098 294
daLa sLore seLLlng up 73
daLa Lypes speclfylng 78
daLa formaLs
abouL 223
P1ML daLa 227
oLher formaLs 227 228
remoLe panel daLa 223226
uaLa8eader uslng
cusLom uaLa8eader uslng 234237
Lo map daLa 233 234
daLa savlng Lo server edlLable grlds
afLeredlL evenL opLlons 114
daLa deleLlng from server 114 113
new rows savlng 113 116
updaLes sendlng Lo server 112 113
daLa sLore ob[ecLs
abouL 228
daLa denlng 229 230
daLa mapplng 230
daLa reLrlevlng from server 231
dlalog
abouL 160
buLLon consLanLs 163
LxLMessage8ox 160
LxLMsg 160162
LxLMsgprogress 163
LxLMsgshow 164
LxLMsgupdaLerogress 163
lcon consLanLs 164
MsgalerL 161
MsgprompL 162
openlng 139 160
uCM
accesslng 282
elemenLs ndlng 283
manlpulaLlng 283 284
sLyles worklng wlLh 284
draganddrop LxL !S
abouL 212
uaLavlew dragglng 212 213
uraguaLa deallng wlLh 213 214
uraguropMgr class 218 219
urop1argeL 203208
urop1argeLnoLlfyurop meLhod 208
LxLuaLavlew 212 213
LxLdduragSource 206 207
LxLddurag1argeL class 207 208
LxLdduragZone 209
LxLddurop1argeL 213
LxLdduropZone 209
LxLdd8eglsLry 210212
LxLddScrollManager 219
LxLddSLaLusroxy class 206 207
LxLgrldCrldanel 221
LxL1reeanel 220
lormanel 213
meLadaLa 214
onnodeurop meLhod 210 211
proxles 214 213
dragdrop groups 216
uragSource 217
urag1argeL 217
uragZone 216
L
edlLable grlds
afLeredlL evenL llsLenlng Lo 107
cells edlLlng 104
Combo8ox edlLlng 106
daLa savlng Lo server 112
daLa value edlLlng 103 106
dlrLy cell 107
eld Lypes edlLlng 104
eld Lypes sLandard Lypes 103
grld rows removlng from
daLa sLore 109 110
row addlng Lo grld 110112
uses 101 102
worklng wlLh 102104
evenLdrlven appllcaLlon 261 262
LxL See also LxL !S
abouL 912
and A!Ax 12
bullLln feaLures 83
cross browser uCM
(uocumenL Cb[ecL Model) 12
daLa savlng Lo server 112
downloadlng 13
edlLable grlds uses 101
LdlLorCrldanel 101
evenLdrlven lnLerfaces 12
example 10
funcLlons 23
grld 74
Crldanel 101
onllne communlLy 22
panels 119
reglons 121
Suk (SofLware developmenL klL) le 13 14
uslng ln pages 14
vlewporL 119 120
LxL8uLLon 61
LxLdd 206
LxLLlemenL
abouL 183 197
anlmaLlons 197
LxLComponenLs uslng wlLh 198
LxLLlemenLanlmaLe 198
meLhods 197
LxLlx
abouL 184
anchor poslLlon sLrlng 192
blocklng meLhod SLoplx 196
chalnlng meLhod 193
concurrency 196
duraLlon meLhod 192
easlng conguraLlon opLlon 194 193
fadlng 183 186
fadlng LxLlxfadeln 183
fadlng LxLlxfadeCuL 183
framlng LxLlxframe 186
ghosLlng LxLlxghosL 186 187
hlghllghLlng 187
hlghllghLlng LxLlxhlghllghL 188
pufng 188
pufng LxLlxpuff 188
queulng meLhod 196
remove conguraLlon opLlon 193
scallng LxLlxscale 189
shlfLlng meLhod LxLlxshlfL 190 191
slldlng LxLlxslldeln 189 190
slldlng LxLlxslldeCuL 189 190
swlLchCff meLhod 193
swlLchCff meLhod LxLlxswlLchCff 190
useulsplay conguraLlon opLlon 193
uLlllLy meLhods 196
LxLlxscale 189
LxLgeL funcLlon 33
LxLlayouL package 168 169
LxLLoadMask 198 199
LxLMsgshow funcLlon 23
LxLon8eady funcLlon 23
LxLCulck1lps 201 202
LxL1oolbar 61
LxL1ool1lp 201 202
LxLLree
Async1reenode 138
uefaulLSelecLlonModel 138
!SCn 141
!SCn exLra daLa 142
!SCn lu 141
MulLlSelecLlonModel 138
8ooL1reenodeul 138
1reeuragZone 138
1reeuropZone 138
1reeLdlLor 138
1reelllLer 138
1reeLoader 138
1reenode 138
1reenodeul 138
1reeanel 138 143 136
1reeSorLer 138
xML 142 143
LxLWlndow class 139 160
LxL les
abouL 14 13
worklng 13
LxL funcLlons
LxLMsgshow 23
LxLon8eady 23
LxL !S
Adobe Al8 283
anchor poslLlon sLrlng 192
communlLy exLenslons 286
daLa lLerlng 238
daLa ndlng 237
daLa formaLs 223
daLa mapplng uaLa8eader used 233 234
daLa sLore ob[ecL 228
dlalog 139
uCM accesslng 282
draganddrop 203
LxLdd 206
LxLLlemenL 183
LxLsLaLeManager class 281
LxLLree 137
for deskLop 284
form 37
form wldgeLs 273
layouLs 121 122
LoadMask 198 199
Culck1lp 201 202
8ecordseL changes deallng wlLh 244246
sLore 246
Lab panel 124
1ool1lp 201
Lree 137
WlndowCroup 282
WlndowMgr 282
wlndows 166
LxL !S communlLy exLenslons
Colorlcker 288 289
uaLelckerlus 286
owerWlzard class 287
Swfuploadanel 288
1lnyMCL 287
LxL !S llbrary exLendlng
abouL 233
classes 234
cusLom class creaLlng 236239
cusLom componenL creaLlng 264271
cusLom componenLs uslng wlLhln oLher
ob[ecLs 271 272
cusLom evenLs creaLlng 262264
cusLom namespace creaLlng 233
evenLdrlven appllcaLlon 261 262
evenLs order 260
lazy lnsLanLlaLlon beneLs 271
namespaces 234
ob[ecLorlenLed !avaScrlpL 249 230
ob[ecLorlenLed programmlng 231
overrldlng meLhods 239 260
packages 234
xLype uslng 271
LxL !S slLe
abouL 273
resources 289
LxL !S slLe resources
apLana sLudlo 290
communlLy manual 290
demos 289
LxL !S forums 289
Coogle 290
samples 289
SpkeL luL 290
sLepbysLep LuLorlals 290
LxL !S Lree See LxLLree
LxL llbrary uslng
example 1318
l
form
buLLons 33
Combo8ox 47
core componenLs 37
creaLlng 38
cusLom valldaLlon 44 43
error dlsplaylng sLyles 43
elds 39 40
loadlng wlLh daLa 36
radlo buLLon 46
server responses 3436
submlLLlng 33 34
valldaLlng 40 41
vLype creaLlng 44
vLypes valldaLlon 4143
worklng 39
form loadlng wlLh daLa
sLaLlc daLa load 36 38
form eld evenLs
Combo8ox evenLs 31 32
llsLenlng for 31
form elds 39 40
forms elds Loolbars 69 70
form wldgeLs
abouL 273
CheckboxCroups 276
uaLelleld 274 273
PLmlLdlLor 277 278
numberlleld 276
8adloCroup 276
1lmelleld 273 276
C
grld
abouL 74
formaLLlng 93 96
programmlng 92
serverslde daLa dlsplaylng 88
grld formaLLlng
abouL 93 96
grld paglng 9698
grouplng 98
grouplng sLore 98 100
grld programmlng
abouL 92
cell worklng wlLh 92
daLa manlpulaLlng 94
grld alLerlng 94 93
grld manlpulaLlng 94
llsLener addlng Lo selecLlon model 93 94
selecLlon models 92
Crldanel
daLa dlsplaylng 74 73
dlsplaylng 78 79
Crldanel dlsplaylng
abouL 78 79
congurlng 80 81
worklng 80
grlds Loolbars 70
grlds column model
cong opLlons 81 82
denlng 81
P
P1MLLdlLor 30
!
!SCn
worklng 30 31
L
layouLs
abouL 121 122
accordlon 128
advanced 132
reglons spllLLlng 122 123
spllL opLlons 123 124
Lab panel 124
Lrlcks 132
wldgeLs 127
layouLs advanced
lcons ln Lab 134 133
nesLed layouLs 132134
Lab addlng 136
LoadMask 198 199
locallzaLlon
abouL 20
engllsh only 20
mulLlple languages 21
oLher language 21
scenarlos 20
M
masklng 43 46
menu lLem cllck
conLenL loadlng 68 69
n
namespaces 234
C
ob[ecLorlenLed !avaScrlpL
LxL !S llbrary 249 230
ob[ecLorlenLed programmlng
abouL 231
example 231233
lnherlLance 231
ob[ecLorlenLed programmlng
LxL !S llbrary exLendlng
abouL 231
ob[ecL reference 38
onllne communlLy LxL 22
on8eady funcLlon
abouL 23
spacer lmage 24
uslng 23 26
wldgeL 24 23
on8eady funcLlon uslng 23 26
overrldlng meLhods 239 260

packages 234
panels 119
panels Loolbars 70
C
Culck1lp 201 202
8
radlo buLLon form
addlng Lo form 46
check box 46
8ecordseL 244246
reglons 121
8lch lnLerneL AppllcaLlons
problems 282
S
Suk 13
serverslde daLa dlsplaylng grld
daLa loadlng from daLabase
P used 91 92
movle daLabase loadlng from
!SCn le 90 91
movle daLabase loadlng from
xML le 88 89
SofLware developmenL klL See Suk
sLaLe managlng
back buLLons uslng 282
baslc sLaLe 281
wlndows handllng 282
sLore
ln Combo8ox 246
ln uaLavlew 247
ln grlds 247 248
1
Lab panel layouLs
abouL 124
addlng 124 123
1exLArea 30
Loolbars
abouL 61
buLLon 61 63
buLLon handlers 67 68
dlvlders 63
forms elds 69 70
lcon buLLons 66 67
ln grlds 71
ln panels 71
ln wlndows 70
lLem alllgnmenL 63
menu 62 63 64
shorLcuLs 66
spacers 63
spllL buLLon 61 64
1ool1lp 201
1reenode LxLLree
evenL capLure 133 136
meLhods 134 133
Lweaklng 132 133
1reeanel LxLLree
abouL 143
Async1reenode 139
collapseAll meLhod 133
conLexLmenu evenL 148
draganddrop 143 144
expandaLh meLhod 134
LxLLree1reeLoader class 139
lLer funcLlon 130 131
llne opLlons 132
menu handllng 149 130
nodes edlLlng 146 147
nodes selecLlng 147 148
nodes sorLlng 143 146
rooL node creaLlng LxLLreeAsync1reenode
class used 139
SLaLeManager 136 137
Lree creaLlng LxLLree1reeanel
class used 140
1reenode Lweaklng 132 133
Lweaks 131
v
vlewporL 120
vLypes valldaLlon form 4143
W
wldgeLs layouLs
addlng 126
grld addlng Lo Labpanel 126
wlndows
abouL 166
conguraLlon opLlons 169 170
conguraLlon opLlons deskLopplng 170
conguraLlon opLlons framlng 171 172
evenLs 173 174
example 166 167
LxLlayouLlormLayouL 168
LxLlayouL package 168 169
LxLWlndow class 139 160 166 167
LxLWlndowCroup 160
LxLWlndowManager 160
managlng 173
panellng 167 168
panellng layouL 168 169
sLaLe handllng 174
wlndows managlng
abouL 173
cusLomer servlce WlndowCroups 179 180
defaulL wlndow manager 173
example 173179
wlndows Loolbars 70
x
xLypes 127
Am Pllllgenbusch 47 aderborn n8W 330981hank you for buylng
Learnlng LxL !S
ackL Cpen Source ro[ecL 8oyalLles
When we sell a book wrlLLen on an Cpen Source pro[ecL we pay a royalLy dlrecLly Lo LhaL
pro[ecL 1herefore by purchaslng Learnlng LxL !S ackL wlll have glven some of Lhe money
recelved Lo Lhe LxL !S pro[ecL
ln Lhe long Lerm we see ourselves and youcusLomers and readers of our booksas parL of
Lhe Cpen Source ecosysLem provldlng susLalnable revenue for Lhe pro[ecLs we publlsh on
Cur alm aL ackL ls Lo esLabllsh publlshlng royalLles as an essenLlal parL of Lhe servlce and
supporL a buslness model LhaL susLalns Cpen Source
lf youre worklng wlLh an Cpen Source pro[ecL LhaL you would llke us Lo publlsh on and
subsequenLly pay royalLles Lo please geL ln Louch wlLh us
WrlLlng for ackL
We welcome all lnqulrles from people who are lnLeresLed ln auLhorlng 8ook proposals
should be senL Lo auLhor[packLpubcom lf your book ldea ls sLlll aL an early sLage and you
would llke Lo dlscuss lL rsL before wrlLlng a formal book proposal conLacL us one of our
commlsslonlng edlLors wlll geL ln Louch wlLh you
Were noL [usL looklng for publlshed auLhors lf you have sLrong Lechnlcal skllls buL no wrlLlng
experlence our experlenced edlLors can help you develop a wrlLlng career or slmply geL some
addlLlonal reward for your experLlse
AbouL ackL ubllshlng
ackL pronounced packed publlshed lLs rsL book MasLerlng phpMyAdmln for LffecLlve
MySCL ManagemenL ln Aprll 2004 and subsequenLly conLlnued Lo speclallze ln publlshlng
hlghly focused books on speclc Lechnologles and soluLlons
Cur books and publlcaLlons share Lhe experlences of your fellow l1 professlonals ln adapLlng
and cusLomlzlng Lodays sysLems appllcaLlons and frameworks Cur soluLlonbased books
glve you Lhe knowledge and power Lo cusLomlze Lhe sofLware and Lechnologles youre uslng
Lo geL Lhe [ob done ackL books are more speclc and less general Lhan Lhe l1 books you have
seen ln Lhe pasL Cur unlque buslness model allows us Lo brlng you more focused lnformaLlon
glvlng you more of whaL you need Lo know and less of whaL you donL
ackL ls a modern yeL unlque publlshlng company whlch focuses on produclng quallLy
cuLLlngedge books for communlLles of developers admlnlsLraLors and newbles allke lor
more lnformaLlon please vlslL our webslLe wwwackLubcom
Am Pllllgenbusch 47 aderborn n8W 33098Learnlng uo[o
lS8n 9781847192684 aperback 230 pages
A pracLlcal comprehenslve LuLorlal Lo bulldlng
beauLlful scalable lnLeracLlve lnLerfaces for your Web
20 appllcaLlons wlLh ul[lLs
1 Learn realworld uo[o programmlng wlLh
deLalled examples and analysls of source
code
2 Comprehenslve gulde Lo avallable uo[o
wldgeLs (dl[lLs) and how Lo use Lhem
3 LxLend uo[o by creaLlng your own dl[lLs
Learnlng [Cuery
8eLLer lnLeracLlon ueslgn and Web uevelopmenL wlLh
Slmple !avaScrlpL 1echnlques
1 CreaLe beLLer crossplaLform !avaScrlpL code
2 Learn deLalled soluLlons Lo speclc cllenLslde
problems
3 lor web deslgners who wanL Lo creaLe
lnLeracLlve elemenLs for Lhelr deslgns
4 lor developers who wanL Lo creaLe Lhe besL user
lnLerface for Lhelr web appllcaLlons

lease check wwwackLubcom for lnformaLlon on our LlLles
Am Pllllgenbusch 47 aderborn n8W 33098A!Ax and P
Lnhance Lhe user experlence of your P webslLe
uslng A!Ax wlLh Lhls pracLlcal LuLorlal feaLurlng
deLalled case sLudles
1 8ulld a solld foundaLlon for your nexL
generaLlon of web appllcaLlons
2 use beLLer !avaScrlpL code Lo enable powerful
web feaLures
3 Leverage Lhe power of P and MySCL Lo
creaLe powerful backend funcLlonallLy and
make lL work ln harmony wlLh Lhe smarL
A!Ax cllenL
Learnlng Lhe ?ahoo! user
lnLerface llbrary
uevelop your nexL generaLlon web appllcaLlons wlLh
Lhe ?ul !avaScrlpL developmenL llbrary
1 lmprove your codlng and producLlvlLy wlLh
Lhe ?ul Llbrary
2 Caln a Lhorough undersLandlng of Lhe ?ul
Lools
3 Learn from deLalled examples for common
Lasks

lease check wwwackLubcom for lnformaLlon on our LlLles
Am Pllllgenbusch 47 aderborn n8W 33098

Learning Ext JS

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Learning Ext JS

Caricato da

Copyright:

Formati disponibili

Learnlng LxL !

Potrebbero piacerti anche