PRISE EN MAIN DE WAKANDA

Dcouvrez comment programmer avec Wakanda en moins de temps qui! nen "aut pour !ire
ce document# Nous a!!ons vous montrer comment construire une app!ication de t$pe
%Emp!o$s&Socits' en crant !e mod(!e avec ses c!asses de donnes )datastore class*+ puis
en a,outant des donnes - notre app!ication+ et "ina!ement nous a""ic.erons ces donnes dans
un navigateur+ pour quun uti!isateur puisse !es manipu!er# Des notions de /ase en 0avaScript
sont ncessaires pour suivre ce guide#
1# S2MMAIRE
Apr(s un rapide survo! de !arc.itecture+ nous vous montrerons comment 3
4 5rer !a c!asse Employee+
4 5rer une page .tm! permettant da""ic.er une !iste d6emp!o$s+
4 5rer de nouveau7 emp!o$s depuis !e navigateur+
4 5rer une c!asse 5ompan$+ avec sa page 89M:+
4 5rer un attri/ut de t$pe ;re!ation; entre Employee et Company#
4 Importer des donnes dans !e datastore+ et
4 Am!iorer !es pages dinter"ace pour a""ic.er !es emp!o$s avec !eurs socits et vice
versa#
< !a "in de ce guide+ vous aurez appris !es "ondamentau7 de Wakanda# < tout moment+ vous
trouverez ga!ement de nom/reuses in"ormations dans !e Wakanda Doc 5enter et dans !e
:earning 5enter#
Note : Wakanda volue trs vite. Il se peut que certaines copies dcran ne correspondent pas
exactement aux interfaces que vous observerez. autant que Wakanda est distribu sur
plusieurs canaux de diffusion ! notamment le canal de production et le canal de
dveloppement.
=# WAKANDA 3 :A P:A9E4>2RME
Architecture
Wakanda est une p!ate4"orme 0avaScript uni"ie+ du serveur au c!ient+ permettant de crer des
app!ications mtiers tai!!es pour Internet# Wakanda est constitu de trois parties+ dont seu!es
!es deu7 premi(res sont uti!ises !ors de !e7cution 3
Wakanda Server 3 app!ication sans inter"ace )faceless* avec un serveur .ttp tournant
au dessus dune /ase de donnes o/,et )!e datastore*# :acc(s au7 donnes se""ectue
via des c!asses spci"iques )!es datastore class" et 0avaScript )Server4Side 0avaScript+
ou SS0S*#
Wakanda Application Framework ( WAF ) 3 "rame?ork app!icati" contenant des
API A0A@ cAt c!ient )navigateur* et des API sur !e serveur )acc(s au7 "ic.iers+ B*#
Dans !e navigateur+ WA> casse+ !ittra!ement+ !a /arri(re qui e7iste usue!!ement entre
des donnes sur un serveur et !eur a""ic.age dans des ?idgets dinter"ace sur !e c!ient#
Wakanda Studio 3 app!ication desktop comprenant un IDE )Inte#rated evelopment
Environment* et des diteurs WCSIWCD# :e Studio est un outi! comp!et vous
permettant de crer vos app!ications mtier intuitivement#

JavaScript Everywhere
En seu! !angage est uti!is pour grer !a !ogique mtier dans Wakanda 3 0avaScript#

Sur le erveur 3 crez des r(g!es mtiers puissantes+ simp!es ou comp!e7es# Wakanda
"ournit des API 0avaScript permettant de grer !es donnes )rec.erc.e+ cration+
suppression+ B*+ !es "ic.iers s$st(mes+ !es images+ B
Sur le client 3 pour grer !inter"ace et accder au7 donnes+ via !e W$%#
!on"i#uration yt$me
:a p!ate4"orme Wakanda requiert au minimum !es conte7tes suivants 3
Wakanda Server
Windo?s Fista G= ou HI /its+ ou Windo?s Server =JJK
Mac 2S 1J#H )&no' (eopard*
:inu7 HI /its )Wakanda Server a t test avec E/untu =#H*
RAM =Do
Wakanda Studio
Windo?s Fista G= ou HI /its+ ou Windo?s Server =JJK
Mac 2S 1J#H )&no' (eopard*
RAM =Do
Navi#ateur
Internet E7p!orer L
>ire"o7 H
Doog!e 5.rome 11
Sa"ari M
G# INS9A::ER E9 :AN5ER WAKANDA
%ntallation
:insta!!ation de Wakanda est e7trNmement simp!e 3 apr(s avoir t!c.arg !es produits+ vous
!es p!acez oO vous vou!ez sur votre disque# Dnra!ement dans !e dossier stockant !es
app!ications+ mais ce!a nest pas o/!igatoire#
Puand Wakanda Studio et Wakanda Server sont cAte - cAte+ !e studio peut !ancer !e serveur
automatiquement# Si vous p!acez !e studio et !e serveur dans des endroits di""rents+ !e studio
vous demandera de !oca!iser !e serveur - uti!iser#
&ancement
Ene "ois que !es app!ications sont insta!!es+ dou/!e4c!iquez sur !icAne de Wakanda Studio# I!
nest pas ncessaire de !ancer !e serveur+ !e Studio sen c.argera gnra!ement
automatiquement# I! est ga!ement possi/!e de !ancer !e serveur en c!iquant !e /outon Q Start
Server R de !a /arre douti!s#
Foici une insta!!ation t$pique sur Windo?s+ avec Wakanda Server et Wakanda Studio dans !e
mNme dossier 3

Foici !a mNme insta!!ation sur Mac 2S

Fen'tre principale
:a "enNtre principa!e contient !cran daccuei!+ car aucune so!ution nest ouverte pour !e
moment )voir ci4dessous pour p!us de dtai!s sur ce quest une so!ution*# :cran daccuei!
peut c.anger dans !e temps par rapport - cette copie dcran 3

I! $ a trois parties principa!es dans cette "enNtre 3
(ne )arre d*outil# Dans !a partie suprieure de !a "enNtre+ !a /arre douti!s contient
!es /outons de raccourcis des actions !e p!us souvent ra!ises# 5ette /arre douti!s
peut Ntre personna!ise en uti!isant !e /outon Q Disp!a$ R 3
&*E+plorateur de olution (Solution Explorer)# < gauc.e+ !ong!et Q 8ome R est
disponi/!e par d"aut# Depuis cet ong!et+ i! est possi/!e de crer ou douvrir une
so!ution# :orsquune so!ution est ouverte+ un ong!et supp!mentaire est a,out+ dont !e
!i/e!! est !e nom de !a so!ution# 5et ong!et contient une !iste des !ments )"ic.iers et
dossiers* de !a so!ution )c"# !a so!ution Q 5ontacts R dans !es c.apitres qui suivent*#
&a ,one de travail (Workspace Area)# Dans cette partie+ vous pourrez voir 3
o :cran daccuei!
o :es "ic.iers ouverts depuis !a so!ution# 5.aque "ic.ier+ une "ois ouvert+
sa""ic.e dans son propre ong!et et son propre diteur 3 Code Editor )pour !es
"ic.iers #,s+ #css+ etc#*+ )*I esi#ner )pages .tm!*+ ou atastore +odel
esi#ner )pour !a d"inition des c!asses*
I# S2:E9I2NS E9 PR20E9S
Dans Wakanda+ vous crez un pro,et pour regrouper !es di""rents "ic.iers )#,s+ #.tm!+ #css+
#,pg+ etc#* uti!iss par votre app!ication# Wakanda peut regrouper p!usieurs pro,ets ensem/!e
pour constituer une solution# :arc.itecture de /ase peut Ntre sc.matise ainsi 3
Wakanda Studio
So!ution
Pro,et A
Pro,et S
# # #
,ote - . ce /our Wakanda ne permet douvrir quune solution . la fois
5.aque pro,et est constitu dun certain nom/re de "ic.iers rangs dans des rpertoires 3
"ic.iers te7tes )89M:+ 0avaScript+ !ogs+ B* et "ic.iers /inaires )grs par Wakanda+ comme
!e "ic.ier de donnes+ ou grs par !e dve!oppeur+ comme !es images du site ?e/*# 5ertains
"ic.iers ont des e7tensions propritaires mais sont en "ait des "ic.iers te7te+ gnra!ement
@M: )#?aSettings ou #?aMode! par e7emp!e*#
Dans !e cadre de ce guide+ nous sou.aitons a""ic.er des donnes de t$pe Emp!o$s&Socits
sur un site ?e/# Nous devons donc crer des c!asses correspondantes+ des datastore class#
Nous par!erons p!us en dtai! de ces c!asses un peu p!us !oin# :a description de ces c!asses est
stocke dans !e mod(!e+ !e datastore model#
:ors de !e7cution+ !orsque nous acc(derons au7 donnes nous par!erons 3
Dentit )entity*+ qui reprsente une entre dans !a c!asse+ comme un enregistrement
dans une /ase de donnes c!assique# Par e7emp!e+ !a socit Q ID R#
De collection dentits )entity collection*+ qui est une !iste dentits )par e7emp!e
Q toutes !es socits "ranTaises R*#
M# N29RE PREMIER PR20E9
Pour crer un nouveau pro,et 3
5.oisir Q >i!e R 4U Q Ne? R 4U Q Pro,ect R+ ou c!iquez sur !e /outon Q Ne? Pro,ectB R
Dans !e dia!ogue qui souvre )Q Ne? Pro,ect >rom 9emp!ate R*+ c.oisir Q S!ank R et
c!iquer sur !e /outon Q 5reate R#
:orsque !e dia!ogue standard de cration de document de votre s$st(me souvre+
c.oisissez !emp!acement du stockage+ donnez !e nom Q 5ontacts R au pro,et+ puis
c!iquez sur !e /outon Q 5reate R#
5omme i! n$ a pas encore de solution+ Wakanda en cre une du mNme nom# Nous avons ainsi
!a solution Q 5ontacts R+ qui contient !e pro/et Q 5ontacts R# En nouve! ong!et vient sa,outer -
cAt de Q 8ome R 3
Wakanda Studio cre tous !es "ic.iers ncessaires au "onctionnement du pro,et# Nous
reviendrons sur certains de ces "ic.iers p!us tard#

H# 5REER ENE DA9AS92RE 5:ASS
- propo de datastore class
:e /ut principa! des datastore class est de vous permettre de vous concentrer sur !a !ogique
mtier+ !es r(g!es mtier+ de votre app!ication 3
Datastore c!ass V 2/,et W R(g!es
Ene datastore class contient un ou p!usieurs attri/uts# Ainsi+ !a c!asse Employee aura !es
attri/uts last,ame et first,ame# Fous pouvez ga!ement crer des mt.odes en 0avaScript )!es
r(g!es*+ associes - !a c!asse+ qui vous permettront dinitia!iser+ de va!ider+ de ca!cu!er+ etc#
:es datastore class sont au cXur de Wakanda# Avec Wakanda+ vous passerez du temps - /ien
d"inir vos c!asses dans votre mod(!e# Ene "ois cette tape "ranc.ie+ vous gagnerez
normment de temps !ors de !acc(s au7 donnes et !ors de !a maintenance de votre code# Par
e7emp!e+ modi"ier une r(g!e mtier ne ncessitera pas de c.anger !es pages dinter"ace#

!r.ation de la clae Employee
Pour commencer+ nous devons tout da/ord ouvrir !e mod(!e dans !e atastore +odel
esi#ner+ outi! permettant de crer grap.iquement ses c!asses# Si /esoin+ dp!o$ez !e pro,et
Q 5ontacts R pour a""ic.er son contenu )!e mod(!e 4 #"ic.ier ?aMode! Y !es rg!ages+ !e dossier
We/>o!der+ B*# En dou/!e4c!ic sur Contacts.'a+odel !ouvre dans !e ata&tore +odel
esi#ner+ dans un nouve! ong!et du Studio 3
Note - pour plus dinformations sur le atastore +odel esi#ner! voir 0 Wakanda &tudio
1eference )uide 2 3en an#lais" . cette adresse - 4ttp-55doc.'akanda.or#5Wakanda6
&tudio54elp57itle5en5pa#e89:.4tml
Pour crer une nouve!!e c!asse+ c!iquer sur !e /outon Q Ne? 5!ass R dans !a /arre douti!s 3
:a nouve!!e c!asse est cre puis a""ic.e dans !a "enNtre# E!!e a un nom donn par d"aut+
Q Data5!ass1 R+ et un nom de co!!ection par d"aut )correspondant au nom de !a c!asse auque!
!e su""i7e Q 5o!!ection R est a,out* 3
Pue!ques consei!s 3
:e nom de !a c!asse doit Ntre mis au singu!ier#
:e nom de !a co!!ection+ qui reprsente une !iste dentits+ doit avoir !e su""i7e
Q 5o!!ection R+ ou a!ors uti!iser !a "orme p!urie!!e du nom de !a c!asse# Par e7emp!e
Emp!o$ee5o!!ection ou Emp!o$ees# Pour une c!asse Person+ !e nom de !a co!!ection
pourrait Ntre Person5o!!ection ou Peop!e#
Note - onner des noms au pluriel5sin#ulier est important sur le plan smantique! mais nest
absolument pas obli#atoire dans Wakanda - vous pouvez nommer vos classes et collections
comme bon vous semble! tant que le nom donn est accept par ;ava&cript.
5.oisissez Q Emp!o$ee R comme nom de c!asse )quand /ien mNme ce document est rdig en
"ranTais+ notre e7emp!e est dve!opp en ang!ais*# Wakanda d"init automatiquement !e nom
de !a co!!ection 3
:e nom de !a c!asse peut ga!ement Ntre saisi directement depuis !a /arre de titre de !a c!asse+
i! su""it de dou/!e4c!iquer dessus pour entrer en dition#
Par d"aut+ Wakanda cre automatiquement !attri/ut ID pour c.aque c!asse nouve!!ement
cre# Ne vous attardez pas sur cet attri/ut pour !e moment+ mais ne !e supprimez pas )nous en
avons /esoin pour !es e7emp!es+ p!us !oin*#
Nous pouvons maintenant a,outer trois attri/uts - cette c!asse# :e t$pe de c.aque attri/ut est
indiqu dans !e ta/!eau suivant 3
Attri)ut /ype
!astName string
"irstName string
sa!ar$ num/er

Pour c.aque !ment !ist dans !e ta/!eau ci4dessus+ nous a,outons un attri/ut - !a c!asse+
entrons son nom puis !ui assignons un t$pe#
Pour a,outer un attri/ut - une datastore class 3
1# 5!iquez sur !e /outon Q W R+ situ - droite de !en4tNte Q Attri/utes R
=# Entrez Q !astName R en remp!acement du nom par d"aut Q attri/ute1 R+ puis appu$ez
sur !a touc.e de ta/u!ation# 5e!a vous am(ne - !a co!onne du t$pe+ qui a""ic.e une !iste
avec autocomp!tion
G# 5!iquez Q string R )t$pe s!ectionn par d"aut*+ ou uti!isez !es "!(c.es du c!avier pour
naviguer+ puis uti!isez !a touc.e Retour )ou Enter*
Pour a,outer un autre attri/ut+ appu$ez - nouveau sur Retour# :e premier attri/ut est cr+ et
un nouve! attri/ut est a,out ,uste en dessous#
Rptez !es tapes 1 - I pour crer !es deu7 autres attri/uts# Pour !e t$pe Q num/er R+ saisissez
,uste !e d/ut du nom du t$pe )ici+ Q n R*+ puis ventue!!ement uti!isez !es "!(c.es du c!avier
pour naviguer dans !a !iste de saisie prdictive+ puis appu$ez sur !a touc.e Retour#
:orsque !e dernier attri/ut est cr )Q sa!ar$ R+ t$pe Q num/er R*+ un nouve! attri/ut est
automatiquement a,out - sa suite# Appu$ez une "ois encore sur Retour pour arrNter !a cration
dattri/uts pour cette c!asse#
Sravo+ vous venez ,uste de crer votre premi(re atastore Class Z
Note - si par erreur vous validez la saisie dun attribut supplmentaire! cliquez dans un
espace libre . c<t de la classe! puis slectionnez lattribut 3simple clic" et passez le curseur
au dessus de lui! puis cliquez sur lic<ne de suppression qui appara=t.
&auve#ardez le modle en cliquant sur le bouton 0 &ave 2 dans la barre doutils. >ous pouvez
#alement fermer lon#let et valider le dialo#ue 0 %ile 4as been modified! 'ould you like to
save it? 2
[# 5REA9I2N DE :A PADE DES EMP:2CES
Apr(s avoir cr notre c!asse Emp!o$ee+ nous pouvons uti!iser !e )*I esi#ner pour crer !a
page dinter"ace Y une page 89M: Y qui contiendra des ?idgets Wakanda a"in da""ic.er !es
donnes#
Depuis !e &olution Explorer+ sectionnez votre pro,et+ et c!iquez !e /outon New 0a#e+ puis
s!ectionnez Q >or desktop R dans !e menu qui sa""ic.e 3
Note - si vous ne voyez pas ce bouton dans la barre doutils! cliquez sur le bouton 0 isplay 2
et son popup menu local! puis c4oisissez 0 ,e' @a#e 2 dans le sous6menu 0 7oolbar
Content 2.
Entrez Q emp!o$ees R dans !e dia!ogue qui souvre a!ors# Inuti!e da,outer !e su""i7e Q #.tm! R+
Wakanda Studio !e "ait pour vous# Ene "ois !e dia!ogue va!id+ !e "ic.ier est cr puis ouvert
dans !e )*I esi#ner+ dans un nouve! ong!et#
Note - >ous pouvez nommer vos pa#es comme bon vous semble! tant que le nom est valide
une fois utilis dans une *1(
(e fic4ier 0 employees.4tml 2 cr est plac dans le dossier 0 Web%older 2 du pro/et -
&i vous faites un clic droit sur votre fic4ier et c4oisissez 0 open Enclosin# %older 2! le &tudio
affic4e alors le document dans lExplorateur 3Windo's" ou le %inder 3+ac" -
Aper1u du 2(% 3ei#ner
:e )*I esi#ner permet dditer !es pages dinter"ace+ dans !esque!!es vous pouvez a,outer
de puissants ?idgets# Ene des principa!es "orces de Wakanda est que+ gr\ce au WA>
)Wakanda App!ication >rame?ork*+ !a /arri(re qui e7iste entre un navigateur et !es donnes
sur !e serveur est supprime#
Nous a!!ons maintenant a,outer un ?idget de t$pe gri!!e ))rid"+ et !e !ier - !a datasource
Emp!o$ee )nous d"inirons p!us !oin !e concept de datasource*#
:e )*I esi#ner contient quatre grandes parties 3
1# En .aut+ une /arre douti!s# < gauc.e+ !es /outons 3ei#n et Source permettent de
/ascu!er dun mode - !autre# Source a""ic.e !e code 89M: dans !diteur de code+
a!ors que 3ei#n vous permet de construire votre page grap.iquement#
=# Sur !a gauc.e+ vous trouvez 3
1# :es ?idgets disponi/!es+ que vous g!issez4dposez dans !a zone de dessin
=# :es datastore class de votre mod(!e+ et !es datasources cres pour cette page
G# Au mi!ieu se trouve !a zone de dessin dans !aque!!e vous a!!ez crer votre
inter"ace
I# En"in+ - droite vous trouvez des !istes de proprits+ dont !e contenu c.ange en
"onction de !o/,et s!ectionn#
Pour a,outer un ?idget - !a page 3
S!ectionnez !e ?idget vou!u+
P!acez4!e dans !a zone de dessin par g!isser4dposer+
Puis+ ventue!!ement+ associez4!e - une datasource#
Fous pouvez modi"ier !es proprits du ?idget s!ectionn+ a,outer du 0avaScript )par
e7emp!e+ pour ragir au c!ic sur un /outon*+ et d"inir !e look A feel de votre page#
Formata#e de la pa#e
Nous a!!ons crer une page simp!e+ a""ic.ant une !iste demp!o$s+ et contenant une petite
mise en "orme#
D!issez4dposez un ?idget )rid dans !a zone de dessin
D!issez4dposez !a datastore class Emp!o$ee sur cette )rid#
Par d"aut+ !e )*I esi#ner c.arge !e mod(!e de donnes de votre pro,et+ de te!!e sorte que !es
c!asses d"inies soient disponi/!es en tant que datasources#
Ene datasource est+ comme son nom !indique+ une source de donnes# Ene datasource est
uti!ise pour d"inir !e contenu dun ?idget dinter"ace# Pour remp!ir notre )rid avec une !iste
demp!o$s+ nous avons /esoin d6une datasource !ie - !a datastore class Emp!o$ee# :e )*I
esi#ner cre !a datasource !ie - !a datastore class !orsque vous g!issez !a c!asse depuis
!ong!et 4odel# Par d"aut+ !e nom de !a datasource est !e mNme que ce!ui de !a c!asse -
!aque!!e e!!e est !ie+ mais !a premi(re !ettre est automatiquement passe en minuscu!e
)Emp!o$ee 4U emp!o$ee+ EserAccount 4U userAccount+ etc#*#
Note - une datasource reprsente ici des donnes stockes sur le serveur! mais les datasources
peuvent aussi Btre lies . des ob/ets ;ava&cript 0 locaux 2 3dclars uniquement sur le
navi#ateur" - variables scalaires! ob/ets! tableaux. @ar exemple! vous pouvez affic4er le
contenu dun tableau ;ava&cript dans une )rid.
Apr(s avoir dpos !a datastore class Emp!o$ee sur !a Drid 3
Pour c.aque attri/ut de !a c!asse+ une co!onne est a,oute - !a )rid#
:ong!et 4odel /ascu!e sur 3ataource et une nouve!!e datasource est cre+
nomme emp!o$ee#
:orsque !a )rid est s!ectionne+ !ong!et 0ropertie )sur !a droite* est remp!i avec ses
proprits# Nous vou!ons da/ord "ormater !a page e!!e4mNme )nous nous occuperons de !a
)rid un peu p!us tard*# :a zone des proprits est constitue dong!ets 3 0ropertie+ Event+
Skin et Style# I!s permettent da,outer un titre - !a page+ de modi"ier !e t.(me+ de modi"ier !a
cou!eur de "ond+ a,outer une image en "ond de page+ B Dans ce document nous a!!ons voir
comment modi"ier !e titre de !a page#
5!iquez sur une zone vide )a"in de ds!ectionner !a Drid*# :ong!et 0ropertie a""ic.e
maintenant !es proprits gnra!es de !a page# Modi"iez !e titre en Q 9.e Emp!o$ees R )par
d"aut+ !e nom est ce!ui de !a page*# Pour !e moment+ vous pouvez ignorer !es autres
proprits#
Dans !ong!et Skin+ vous pouvez d"inir une c!asse )au sens 5SS du terme*+ un t.(me+ et une
pa!ette de cou!eur - uti!iser pour votre page# Des va!eurs par d"aut ont t prs!ectionnes#
N.sitez pas - tester di""rents t.(mes et cou!eurs pour voir comment !a page et !a Drid sont
modi"ies#
Dans !ong!et Style+ vous pouvez modi"ier !aspect de !a page+ c.anger !image de "ond+ B
5!iquez sur !e /outon Q 5o!or R pour a""ic.er !e s!ecteur de cou!eurs et c.oisir une cou!eur de
"ond qui vous convient#
Pour a""ic.er une image comme "ond de page+ vous pouvez simp!ement g!isser dposer une
image depuis votre disque vers !e c.amp %ma#e de !a section 5ack#round 3
Dans cet e7emp!e+ apr(s avoir dpos !image+ !a page appara]t ainsi 3
Wakanda cre automatiquement un dossier Q Images R )si! ne7istait pas d,-* dans !e
Q We/>o!der R+ et $ recopie !es images# Fous pouvez !e constater depuis !e &olution
Explorer 3

4odi"ier la #rille
:orsque !a datastore class Emp!o$ee a t dpose sur !a )rid+ tous ses attri/uts ont t
a,outs# Fous pouvez maintenant modi"ier !e ?idget+ par e7emp!e 3
:e retai!!er
Retirer !attri/ut ID
Modi"ier !es !i/e!!s
S!ectionnez !a )rid et uti!isez une de ses poignes pour !a retai!!er et modi"ier sa .auteur et
sa !argeur )ce!a peut ga!ement Ntre ra!is depuis !ong!et St$!es*#
< prsent+ activez !ong!et 0ropertie+ et dans !a section !olumn 3
Supprimez !a co!onne Q ID R en c!iquant sur !a croi7 rouge qui appara]t !orsque !a
souris survo!e cette d"inition
Dp!acez !a co!onne Q "irstName R ,uste au dessus de Q !astName R+ en "aisant g!isser !icAne

Dou/!e4c!iquez sur !e !i/e!! Q "irstName R a"in de !e s!ectionner et c.angez4!e en
Q >irst Name R# >aites de mNme pour Q :ast Name R+ et en"in modi"iez Q sa!ar$ R en
Q Sa!ar$ R#
Fotre )rid a maintenant !apparence suivante 3
Fous pouvez ga!ement retai!!er c.aque co!onne en positionnant !e curseur au niveau de !en4
tNte+ sur !a !igne sparant deu7 en4tNtes# Fous pouvez aussi a!!er dans !ong!et Styles+ puis
s!ectionner !a partie de !a )rid que vous sou.aitez "ormater 3 en4tNte+ pied+ corps+ !ignes
paires+ B
Fous avez pro/a/!ement remarqu !e dia!ogue pop4up qui sa""ic.e !orsque !e curseur se
trouve dans un des !i/e!!s# 5e dia!ogue permet de "ormater !a co!onne# Ici par e7emp!e+ nous
sou.aitons a""ic.er !e sa!aire en uti!isant !es sparateurs de mi!!iers# Pour modi"ier ce "ormat+
i! "aut saisir ^ pour c.aque c.i""re - a""ic.er+ Q J R pour un c.i""re qui sera remp!ac par un
zro )par e7emp!e+ ;JJJ; a""ic.era ;JJ1; pour !a va!eur 1*+ une virgu!e pour indiquer !e
sparateur de mi!!iers+ et !e point comme sparateur dcima!# Foici notre "ormat 3
:a co!onne a""ic.era Q 1=G IMH+JJ R avec un navigateur >ranTais+ et Q 1=G+IMH#JJ avec un
navigateur ang!ais#
Fous pouvez ga!ement sou.aiter modi"ier !es st$!es de !a )rid# S!ectionnez !a )rid puis
a!!ez dans !ong!et Style+ et modi"iez !es zones qui vous intressent 3 en4tNte )4eader*+ pied
)footer*+ !ignes paires&impaires )even 5 odd ro's*+ etc#
Ici+ par e7emp!e+ nous vou!ons que !e sa!aire soit a!ign - droite 3
Fous pouvez ga!ement modi"ier !e "ond )image ou cou!eur*+ ainsi que nimporte que! st$!e de
te7te comme vous !e vou!ez#
En que!ques minutes+ vous avez cr une page ?e/ simp!e+ qui a""ic.e !es emp!o$s de !a /ase
de donnes#
[#
K# 5REA9I2N DE :A 5:ASSE S25IE9E E9 DE SA PADE DIN9ER>A5E
!r.ation de la clae
Revenez - prsent - votre mod(!e# Si! nest pas d,- ouvert+ dou/!e4c!iquez sur !e "ic.ier
Q 5ontacts#?aMode! R+ ou c!iquez sur !e /outon 4odel de !a /arre douti!s#
Pour crer !a datastore class 5ompan$+ suivez !es mNmes tapes que ce!!es uti!ises pour crer
!a c!asse Emp!o$ee+ avec !es di""rences suivantes 3
Saisissez Q 5ompan$ R dans !e c.amp Class ,ame+ et gardez Q 5ompan$5o!!ection R
comme nom de co!!ection
5rez un seu! attri/ut 3 Q name R+ de t$pe Q string R
Enregistrez !es modi"ications en c!iquant !e /outon Save de !a /arre douti!s# Puis+ c!iquez sur
!e /outon 6eload 4odel+ pour indiquer - Wakanda Server que !e mod(!e a t modi"i et
qui! doit !e rec.arger#

!r.ation de la pa#e we)
Dans !a partie gauc.e du &olution Explorer+ s!ectionnez !e pro,et !ui4mNme+ puis c!iquez sur
!e /outon New 0a#e et c.oisissez Q >or Desktop R# Nommez !a page Q companies R# Wakanda
Studio cre !a page ?e/ et !ouvre dans un nouve! ong!et du )*I esi#ner# Notez qu-
prsent+ !ong!et 4odel contient nos deu7 c!asses+ 5ompan$ et Emp!o$ee 3
>aites g!isser une )rid et dposez4!a dans !a zone de dessin# >aites g!isser !a c!asse 5ompan$
et dposez4!a sur !a )rid+ comme vous !avez "ait !ors de !a cration de !a page des emp!o$s 3
modi"iez !a tai!!e+ c.angez !es st$!es+ adaptez !inter"ace - vos /esoins#
Maintenant+ !ancez !a page dans !e navigateur et crez deu7 socits# Foici !es nAtres 3

L# 5REA9I2N DE :A RE:A9I2N EN9RE EMP:2CE E9 S25IE9E
Nous a!!ons maintenant crer un attri/ut de t$pe 1elation entre !es c!asses Emp!o$ee et
5ompan$# 0usqu- prsent+ nous avons cr des attri/uts de t$pe &tora#e# En attri/ut 1elation
est une dc!aration qui indique - Wakanda 3 Q :ors de !e7cution+ cet emp!o$ peut Y si
/esoin Y Ntre c.arg avec des in"ormations sur !a socit pour !aque!!e i! travai!!e R# I! $ a
deu7 t$pes dattri/uts 1elation3
N789 3 dans notre cas+ ce!a signi"ie que Q p!usieurs emp!o$s travai!!ent pour une
socit R
978N 3 dans notre cas+ ce!a signi"ie que Q une socit a p!usieurs emp!o$s R
Note - en fait! il est tout . fait possible quune socit nait aucun employ! et quun employ
ne travaille pour aucune socit. &i vous Btes familiers de la pattern $ctive1ecord! vous avez
probablement d/. reconnu les classiques belon#sCto et 4asCmany.
Pour crer !a re!ation N4U1+ suivez ces tapes 3
2uvrez !e mod(!e# Si! nest pas d,- ouvert+ c!iquez !e /outon 4odel de !a /arre
douti!s
Dp!acez vos deu7 c!asses de te!!e sorte que!!es soient cAte - cAte 3
A,outez un nouve! attri/ut - !a c!asse Emp!o$ee+ nommez !e Q compan$ R
Dans !a co!onne du t$pe de !attri/ut+ tapez !a !ettre Q c R# 5omme vous pouvez !e
constater+ !es noms de c!asse et de co!!ection )5ompan$ et 5ompan$5o!!ection* sont -
prsent disponi/!es en tant que t$pes dattri/uts 3
Puisque nous vou!ons crer une re!ation vers une seu!e socit+ nous c.oisissons
Q 5ompan$ R+ et va!idons ce c.oi7 en uti!isant !a touc.e 1eturn )ou Enter*
Fous pouvez noter que 3
Wakanda dessine une re!ation entre !es deu7 c!asses
Note 3 si vous ne vo$ez pas cette re!ation+ uti!isez !e /outon 6elation et c.oisissez
See all dans son pop4up menu
:attri/ut compan$ a /ien t cr dans !a c!asse Emp!o$ee+ et Wakanda !ui donne !e
t$pe N4U1 3
Wakanda a ga!ement cr+ automatiquement+ !attri/ut re!ationne! inverse+ nomm
emp!o$ee5o!!ection+ qui part dune socit et !iste tous ses emp!o$s 3
Note - les noms peuvent varier selon la faDon dont vous avez nomm vos classes et vos
collections
Nous renommons+ dans 5ompan$+ Q emp!o$ee5o!!ection R en Q a!!Emp!o$ees R 3 un dou/!e4
c!ic sur !e !i/e!! Q emp!o$ee5o!!ection R permet de !diter et de !e modi"ier 3
Deu7 attri/uts de t$pe 1elation viennent dNtre crs 3 N4U1 et 14UN# En uti!isant !a notation -
point de 0avaScript+ nous pouvons accder - nimporte que! attri/ut de !a c!asse 5ompan$
depuis un Widget dont !a datasource est re!ie - Emp!o$ee#
Par e7emp!e+ si vous sou.aitez a""ic.er !e nom de !a socit dans !a Drid de !a page
Q emp!o$ees#.tm! R 3
Dou/!e4c!iquez sur Q emp!o$ees#.tm! R pour !ouvrir )ou c!iquez sur son ong!et si! est
d,- ouvert*
S!ectionnez !a Drid
Dans !ong!et 0ropertie+ zone !olumn+ c!iquez !e /outon pour a,outer une
co!onne
Entrez Q Works >or R comme !i/e!!
Entrez Q compan$#name R comme attri/ut#
9out au !ong de !a saisie de Q compan$#name R+ !e menu !oca! de saisie prdictive vous aide -
c.oisir !attri/ut# SitAt que vous tapez Q # R apr(s Q compan$ R+ vous accdez au7 attri/uts de
!a c!asse re!ie#

L#
1J# :IER EN EMP:2CE A ENE S25IE9E AE REN9IME
Dans !e7emp!e suivi ,usqu- prsent 3
:a c!asse Emp!o$ee contient trois emp!o$s
:a c!asse 5ompan$ contient deu7 socits
Nous vou!ons - prsent !ier+ depuis un navigateur+ c.aque emp!o$ - une socit pour arriver
- ce rsu!tat 3
Emp!o$ee 5ompan$
0o.n Doe Acme
A!an Smit. SuperWak
5!aire We/ Acme

!r.ation de la pa#e 5ind7Emp7!omp
5rez une nouve!!e page en c!iquant !e /outon New pa#e et en c.oisissant Q >or desktop R
dans son menu !oca!# Nommez !a page Q /ind4emp4comp R# :e Studio cre !a page et !ouvre
dans un nouve! ong!et du )*I esi#ner 3
Suivez ces tapes 3
Donnez - !a page un titre qui vous convient et si vous !e sou.aitez+ modi"iez !e t.(me+
!a pa!ette de cou!eur et !e "ond de !a page
D!issez et dposez une )rid dans !a page
Depuis !ong!et Mode!+ g!issez et dposez Emp!o$ee sur !a )rid
Mettez !a )riden "orme 3
o Supprimez !es attri/uts Q ID R et Q Sa!ar$ R
o Modi"iez !es !i/e!!s
o A,outez une co!onne dont !e !i/e!! est Q Works >or R et !attri/ut est
Q compan$#name R
o Retai!!ez !a )rid a"in que toutes !es co!onnes soient visi/!es
o 5rez une autre )rid+ g!issez et dposez )depuis !ong!et 4odel* !a c!asse
5ompan$ sur !a )rid+ mettez4!a en "orme+ supprimez son attri/ut Q ID R#
o Disposez !a )rid des emp!o$s - gauc.e et ce!!e des socits - droite+ en
!aissant !a p!ace pour un /outon entre !es deu7
,ote - le )*I esi#ner contient tous les outils dali#nement dont vous avez besoin pour
ali#ner . #auc4e5droite54aut5bas5milieu! pour distribuer les 'id#ets 4orizontalement ou
verticalement. &lectionnez deux 'id#ets ou plus 3ctrl6clic sur Windo's! commande6clic sur
+ac" et utilisez le bouton appropri -
Foici - quoi ressem/!e notre page 3
Dans cette capture dcran+ !a )rid des emp!o$s est s!ectionne# Fous pouvez noter que !a
co!onne Q Works >or R est /ien !ie - compan$#name# Si vous pu/!iez cette page dans votre
navigateur )ici+ 5.rome sur Mac 2S*+ e!!e appara]tra comme ceci 3
Dans !a mesure oO aucun emp!o$ nest !i - une socit+ !a co!onne %Works >or' est /ien
entendu vide# Depuis !e )*I esi#ner+ g!issez puis dposez un ?idget Q Sutton R entre !es
deu7 )rids 3

A:outer du JavaScript au )outon
:e /outon s!ectionn+ ouvrez !ong!et Events puis c!iquez !e /outon situ - cAt de
!vnement Q 2n 5!ick R 3
:a premi(re "ois que vous associez du code 0avaScript - un vnement )pour un ?idget ou
pour !a page e!!e4mNme*+ !e Studio ra!ise automatiquement !es actions suivantes 3
5ration dun "ic.ier 0avaScript )avec !e7tension Q #,s R* dont !e nom est !e mNme que
ce!ui de !a page# I! p!ace ce "ic.ier dans !e dossier Q scripts R - !intrieur du
Q We/>o!der R 3
5.aque "ois que !uti!isateur s!ectionne une !igne dans !a )rid+ !entit
correspondante )un emp!o$ ou une socit* devient automatiquement !entit
courante dans !a datasource# Par e7emp!e+ si vous c!iquez sur !a !igne Q 5!aire We// R+
!a datasource emp!o$ee est mise - ,our de te!!e sorte que 5!aire We// devienne
!emp!o$ couramment s!ectionn et c.arg#
< prsent+ copiez4co!!ez ce code dans !diteur 3

&& 5reate t.e association
sources.employee.company.set3 sources.company "E
&& Save t.e emp!o$ee
sources.employee.save3"E

Fotre "ic.ier 0avaScript devrait ressem/!er - ceci 3
Sauvegardez !e "ic.ier+ puis /ascu!ez sur !ong!et de !a page ?e/B
Bet !ancez4!a 3

&ier le employ. et le oci.t.
Ene "ois !a page ouverte dans !e navigateur+ suivez ces tapes pour c.aque emp!o$ 3
1# 5!iquez sur !a !igne dun emp!o$
=# 5!iquez sur !a !igne de !a socit pour !aque!!e !emp!o$ travai!!e
G# 5!iquez sur !e /outon Q Sind R
Foici des copies dcran de nos trois emp!o$s apr(s !es avoir !is - une socit 3
11# IMP2R9ER DES D2NNEES )SERFER4SIDE 0AFAS5RIP9*
Nous a!!ons - prsent importer des emp!o$s et des socits# I! $ a p!usieurs "aTons dimporter
des donnes dans un datastore Wakanda# Dans notre e7emp!e+ nous a!!ons uti!iser du code
Server4Side 0avaScript pour importer un "ic.ier te7te# :e document est d!imit par des
ta/u!ations et contient !es co!onnes suivantes 3
,om de socit 4U ,om 4U @rnom
Pour c.aque !igne+ nous commencerons par c.erc.er !a socit dans !e datastore # Si e!!e nest
pas trouve+ nous !a crons# 5et e7emp!e se veut simp!e 3 nous ne grons pas !e "ait que des
socits di""rentes peuvent avoir !e mNme nom#
9out da/ord+ s!ectionnez !e pro,et Q 5ontacts R dans !e &olution Explorer+ puis c!iquez !e
/outon New JS 3
En dia!ogue vous demande de nommer votre "ic.ier# Inuti!e da,outer !e7tension Q #,s R+ !e
Studio !e "era# Nommez !e "ic.ier Q import R# Wakanda Studio cre !e "ic.ier+ !e p!ace dans !e
dossier du pro,et+ puis !ouvre dans un nouve! ong!et 3
I! $ a quatre zones dans !diteur de code )deu7 sont cac.es par d"aut*
Ene /arre douti!s permettant de7cuter !e script+ de dp!o$er&contracter des /!ocs de
code+ de trouver du te7te+ B
:diteur de code !ui4mNme
Sur !a droite+ vous pouvez a""ic.er !e sque!ette )outline* du code en c!iquant sur !e
/outon # 5e!a a""ic.e !a structure du code 3 "onctions+ varia/!es+ etc# En c!ic
sur un !ment de loutline s!ectionne !!ment dans !diteur#
Puand vous e7cutez !e "ic.ier+ une zone de sortie )output* est a,oute dans !a partie
in"rieure de !a "enNtre+ a""ic.ant !e rsu!tat de !e7cution#
,ote - tous les scripts ne peuvent pas Btre lancs directement depuis lditeur de code.
7ypiquement! un script associ . une pa#e 4tml ne peut pas Btre excut sur le serveur. &i
vous cliquez sur le bouton Run pour un ./s associ . une pa#e 4tml! le &tudio ouvre la pa#e
dans le navi#ateur.
Foici !e code dimportation# I! vite dimporter des dou/!ons 3 si vous !ancez !e script
p!usieurs "ois de suite+ !es donnes ne seront pas dup!iques#
5opiez4co!!ez !e code suivant# 0uste apr(s+ nous e7p!iquons son drou!ement p!us en dtai!#
Notes -
(a solution complte associe . ce document contient d/. les donnes! ainsi que le
fic4ier . importer et le fic4ier 0 import./s 2.
&i vous suivez ce #uide pas . pas! vous pouvez #alement tlc4ar#er le fic4ier .
importer 3Import6folder6to6paste6in6t4e6pro/ect.zip". *ne fois dcompact! placez le
dossier 0 Import 2 au premier niveau de votre pro/et 3vous devez avoir -
FContactsFContactsFImportFempsCcomps.txt"
// A simple log for the output
var log = "Count employees-before: " + ds.Employee.length + ", Count
ompanies-before: " + ds.Company.length!
// "ain funtion
funtion do#mportEmpsAndComps $% &
/' (he do. to import is in the solution folder, in a subfolder
named "#mport". )e load the full doument in one shot $load(e*t%
and split it in an array $one line = one element%.
'/
var lines = load(e*t$ ds.get"odel+older$%.path +
"#mport/emps,omps.t*t" %.split$"-n"%!
/' .elare the variable that /ill hold the olumns of eah line.
)e 0no/ the olumns /ill be:
olumns123 4ame of the ompany
olumns153 6ast name of the employee
olumns173 +irst name
olumns183 9alary
'/
var olumns = 13!
// 4o/, loop for eah entry in the array
lines.forEah$ funtion$one6ine% &
// :et the olumns for urrent line
olumns = one6ine.split$"-t"%!
// :et the ompany. Create it if needed.
var theComp = ds.Company.find$"name = :5", olumns123%!
if$theComp == null% & // 4ot found =; reate it
theComp = ne/ ds.Company$&
name : olumns123
<%!
// 9ave it
theComp.save$%!
<
// :et the employee. Create it if needed.
var theEmp = ds.Employee.find$"last4ame = :5 and first4ame = :7",
olumns153, olumns173%!
if$theEmp == null% &
theEmp = ne/ ds.Employee$ &
last4ame : olumns153,
first4ame : olumns173,
salary : olumns183,
ompany : theComp // (his is ho/ you bind t/o entities
/ith )a0anda=
<%!
< else &
theEmp.salary = olumns183,
theEmp.ompany = theComp!
<
theEmp.save$%!
<%!
<
// Call the funtion
do#mportEmpsAndComps $%!
// 6og result
log += " / Count employees-after: " + ds.Employee.length + ", Count
ompanies-after: " + ds.Company.length!
Foici que!ques e7p!ications sur ce code# 9outes !es API uti!ises sont documentes sur
.ttp3&&doc#?akanda#org#
:e code qui ana!$se !e "ic.ier attend un document encod en E9>4K+ uti!isant un
:ine>eed ):>* comme "in de !igne# Pas 5R ou 5R:>+ ,uste :># Si vous modi"iez !e
document - importer+ ou si vous uti!isez un document di""rent+ prenez garde - ce que
vos !ignes se terminent /ien par :>+ ou modi"iez !e code pour qui! uti!ise 5R ou
5R:>#
!oad9e7t ).ttp3&&doc#?akanda#org&D!o/a!4App!ication&App!ication&!oad9e7t#GJ14
HMM1LK#en#.tm!* est une API de .aut niveau+ qui remp!it une varia/!e c.aine avec !e
contenu dun document
Pour 5ompan$ et Emp!o$ee+ nous uti!isons !API "ind)* et sa possi/i!it de su/stituer
des crit(res de rec.erc.e# En pratique+ au !ieu dcrire une !igne qui concat(ne
co!umns_J` et co!umns_1`+ nous uti!isons ; 31; et ; 3=;+ ce qui indique - Wakanda
Server d6uti!iser !es premier et second param(tres passs apr(s !a c.aine de rec.erc.e#
De cette "aTon+ nous navons pas - nous proccuper dventue!s espaces dans !es
noms# Sans cette su/stitution+ nous aurions da uti!iser un m!ange de gui!!emets
dou/!es et simp!es 3
ds#compan$#"ind);name V b; W co!umns_J` W ;b;*
Note - cette tec4nique est particulirement intressante lorsque vous manipulez des dates par
exemple
Dans !a so!ution e7emp!e accompagnant ce guide+ nous uti!isons !API !oad9e7t)*
).ttp3&&doc#?akanda#org&D!o/a!4App!ication&App!ication&!oad9e7t#GJ14
HMM1LK#en#.tm!* # Si vous travai!!ez avec un "ic.ier vraiment tr(s !ourd+ vous pourriez
avoir /esoin duti!iser p!utAt un 9e7tStream+ ).ttp3&&doc#?akanda#org&D!o/a!4
App!ication&App!ication&9e7tStream#GJ14HKHHM1#en#.tm!* pour viter dventue!s
pro/!(mes de mmoire#
Si vous sou.aitez importer /eaucoup de donnes dun coup+ vous pouvez crer un
inde7 sur !attri/ut !astName de Emp!o$ee et sur !attri/ut name de 5ompan$# :a
rec.erc.e sera a!ors /ien p!us rapide# Pour "i7er un inde7 dans !e atastore +odel
esi#ner+ s!ectionnez !attri/ut et c.oisissez !inde7 Q auto R dans ses proprits#
Note - dans notre exemple! nous importons les socits par leur nom ce qui nest pas la
meilleure faDon de faire puisque plusieurs socits peuvent avoir le mBme nom. (a plupart du
temps! vos donnes viendront dune base de donnes avec #nralement des clefs primaires et
secondaires. Wakanda sait parfaitement importer ce #enre de donnes! mais cela dpasse le
cadre dun #uide de prise en main. 1apidement! disons que vous pouvez mettre dans lattribut
compan$ de Emp!o$ee lI de la socit. @ar exemple! si la socit! dans la base de donne
ori#inale! a lI GH! vous pourriez crire t.eEmp#compan$ V I= afin dassocier lemploy
courant . cette socit.
Fous avez co!! !e code ci4dessus+ vous pouvez c!iquer !e /outon 6un 3
Si !e serveur ntait pas encore !anc+ i! est dmarr# Ene "ois !e script e7cut+ notre propre
!og sa""ic.e dans loutput 3
Note - notre fic4ier . importer contient : III employs et JH socits. ,ous avons un total de
: IIK employs et JG socits parce que nous avons cr des donnes dans les c4apitres
prcdents.
1=# ENRI58IR :A PADE DES EMP:2CES
Dans !e c.apitre Q 5ration de !a Page des Emp!o$s R+ nous avons cr une page tr(s simp!e+
a""ic.ant une !iste demp!o$s# Nous a!!ons maintenant am!iorer cette page 3
A""ic.age des seu!s noms
5ration dune zone a""ic.ant toute !in"ormation
A,out de /outons de navigation
Dans !e &olution Explorer+ dp!o$ez !e Q We/>o!der R et dou/!e4c!iquez sur !e "ic.ier
Q emp!o$ees#.tm! R# Ene "ois ouvert dans !e DEI Designer+ s!ectionnez !a )rid cre
prcdemment 3

4odi"ier la 2rid
Dans !ong!et Properties+ p!acez !a souris au4dessus de !a co!onne Q Sa!ar$ R# Puand !e /outon
appara]t+ c!iquez dessus pour supprimer !a co!onne 3
>aites de mNme pour !a co!onne Q Works >or R#
Rduisez !a !argeur de !a )rid+ de te!!e sorte que seu!s !e nom et !e prnom soient visi/!es#

A:outer un Form a""ichant le d.tail d*un employ.
Dans !a partie in"rieure gauc.e+ c!iquez sur !e /outon 3ataource et dp!o$ez !a datasource
emp!o$ee 3
>aites des 5tr!4c!ic )Windo?s* ou 5ommande4c!ic )Mac* sur !es attri/uts !astName+ "irstName
et sa!ar$+ puis a,outez4!es par g!isser4dposer dans une zone !i/re du esi#ner 3
:e dia!ogue Q Auto generated ?idgets R sa""ic.e+ vous demandant que!s t$pes de ?idgets
vous sou.aitez uti!iser pour ces attri/uts 3
5.oisissez )en .aut - droite*+ de crer un Q >orm R# Puis+ modi"iez !es !i/e!!s pour !es adapter
- vos /esoins# 5.angez Q !astName R en Q :ast Name R ou en Q Nom R par e7emp!e# :orsque
vous c!iquez sur !e /outon Q 5reate R+ !e )*I esi#ner cre un ?idget de t$pe Container+ qui
eng!o/e un ?idget 7ext Input pour c.aque attri/ut 3
N.sitez pas - a!!er regarder !a documentation des Widgets et du DEI Designer
).ttp3&&doc#?akanda#org&Wakanda4Studio4Re"erence4Duide&DEI4Designer#=JJ4
GJHK=H#en#.tm!*#
En ?idget de t$pe Container contient dautres ?idgets# :orsque vous dp!acez un Container+
son contenu se dp!ace avec !ui# Dans !ong!et Style pour !e Container et !es ?idgets 7ext
Input+ vous pouvez modi"ier !eur apparence# Ainsi+ vous pouvez c.anger !eur cou!eur de "ond+
!eur image de "ond+ !eur /ordure+ etc# Pour c.aque attri/ut+ vous pouvez ga!ement modi"ier
son !i/e!! )po!ice+ tai!!e+ cou!eur*# Pour cette initiation+ nous conservons !es va!eurs par
d"aut#
Nous a!!ons ga!ement a,outer 3
un ?idget 7ext qui a""ic.era !e nom de !a socit pour !aque!!e !emp!o$ travai!!e
des /outons permettant de naviguer dans !a !iste
Avant de commencer+ i! nous "aut agrandir !e Container+ en uti!isant sa poigne /asse 3

A:outer le nom de la oci.t.
D!issez puis dposez un ?idget 7ext dans !e Container 3
Dans son ong!et Properties+ saisissez sa Q Source R en crivant emp!o$ee#compan$#name )!a
saisie prdictive vous aidera - !e "aire rapidement* 3
Augmentez !a tai!!e de !a po!ice+ centrez !e te7te et modi"iez !a /ordure 3

A:outer de )outon de navi#ation
D!issez4dposez un ?idget Lutton dans !e container 3
:iez !a datasource emp!o$ee - ce /outon+ en !a dposant dessus 3
:a proprit Q Source R du /outon a""ic.e maintenant emp!o$ee 3
5.oisissez Q Previous R dans !e menu Q Action R+ pour indiquer que vous sou.aitez quun c!ic
sur ce /outon passe - !entit prcdente dans !a datasource )et donc+ ici+ visue!!ement+ dans !a
)rid* 3
Wakanda a d"ini Q Previous R comme titre du /outon mais nous sou.aitons uti!iser des icAnes
pour nos /outons# Fous pouvez associer de une - quatre icones - vos /outons+ correspondant
au7 di""rents tats possi/!es 3 d"aut+ 4over+ active )!e /outon est press* et disabled )inacti"*#
Fous pouvez aussi uti!iser !a mNme image pour tous !es tats#
2uvrez !e dossier Q Media R en c!iquant sur !e /outon 4edia et en c.oisissant 4edia
&i)rary 3
:a /i/!iot.(que de mdias souvre dans !e &olution Explorer 3
D!issez une icAne sur !e ?idget Lutton 3
Ene "ois !image dpose sur !e /outon+ une copie du "ic.ier est a,oute au dossier Q images R
du Q We/>o!der R##
Si !e /outon ne sest pas retai!! tout seu! au7 dimensions de !image+ c.angez sa tai!!e dans
!ong!et Style# :es images uti!ises dans cet e7emp!e sont de tai!!e =I7=I#
Pour associer dautres images au7 di""rents tats+ c.oisissez !tat qui convient dans !a partie
suprieure de !ong!et Style+ puis g!issez4dposez une image dans !a zone Q Sackground R#
Par e7emp!e+ pour associer !image du /outon - !tat Q active R+ s!ectionnez Q active R+ puis
g!issez !image Q active R correspondante 3
,ote - . l4eure oM est crit ce #uide! le )*I esi#ner continue dvoluer. Il se peut que la
faDon dassocier des ima#es aux boutons soit un peu modifie.
Fous pouvez ga!ement uti!iser un ?idget Ima#e button si vous pr"rez+ qui o""re p!us de
possi/i!its de "ormatage#
Nous a!!ons maintenant crer deu7 autres /outons 3 un pour naviguer vers !entit suivante
dans !a !iste+ un autre pour enregistrer !es modi"ications apportes au %orm que nous avons
cr 3
S!ectionnez+ si ce nest d,- "ait+ !e /outon que vous venez de crer
E""ectuez un copier4co!!er a"in de !e dup!iquer
Modi"iez !a copie 3
o >i7er !action - Q Ne7t R
o Associez des images au7 di""rents tats
o >aites de mNme pour !e /outon Q Save R
S!ectionnez !es trois /outons et a,ustez !eur position en uti!isant !es outi!s da!ignement et de
rpartition# Foici notre page dans !e )*I esi#ner 3
En point essentie! - comprendre est que tous ces ?idgets )une Drid+ trois 7ext Input+ un 7ext et
trois Lutton* sont !is - !a mNme datasource emp!o$ee# Pour constater ce que ce!a signi"ie+
testez !a page dans !e navigateur et vri"iez que 3
Puand vous c!iquez sur une !igne de !a )rid+ !e >orm se met - ,our automatiquement#
Si vous naviguez avec !es /outons Previous&Ne7t+ !a !igne s!ectionne dans !a Drid
est mise - ,our#
Si vous dou/!e4c!iquez sur une ce!!u!e de !a )rid et modi"iez sa va!eur+ !e 7ext Input
correspondant est automatiquement mis - ,our+ et !es donnes sont automatiquement
sauvegardes sur !e serveur#
Si vous modi"iez une va!eur dans un des 7ext Input+ !a ce!!u!e correspondante dans !a
)rid est mise - ,our# Mais dans ce cas+ !entit nest pas automatiquement
sauvegarde+ vous devez c!iquer sur !e /outon Q Save R#

1G# 5REA9I2N DENE PADE :IS9AN9 S25IE9ES E9 EMP:2CES
Pour notre derni(re page+ nous vou!ons a""ic.er une !iste de socits avec !eurs emp!o$s#
5.aque "ois que !uti!isateur c!iquera sur une !igne des socits+ nous vou!ons que !a !iste des
emp!o$s soit mise - ,our#
5rez une nouve!!e page+ nomme Q comps4emps R# Dans cette page 3
1# A,outez une )rid
=# Re!iez4!a - !a dataclass compan$+ comme nous !avons "ait p!usieurs "ois depuis !e
d/ut de ce guide#
G# Retirez !a co!onne Q ID R de !a )rid
< prsent+ a,outez une autre )rid# Dans cette )rid+ nous vou!ons a""ic.er !a !iste des
emp!o$s de !a socit couramment s!ectionne# Nous ne devons pas !ier !a nouve!!e )rid -
!a c!asse Emp!o$ee+ car ce!a crerait une datasource !ie - tous !es emp!o$s du datastore# <
!a p!ace 3
Dp!o$ez !a datasource compan$
D!issez puis !attri/ut Re!ation a!!Emp!o$ees et dposez4!e dans !a nouve!!e )rid 3

Maintenant que !a )rid est !ie - compan$#a!!Emp!o$ees+ nous !a "ormatons comme vu
prcdemment+ par e7emp!e+ en retirant !attri/ut Q ID R+ en modi"iant !es !i/e!!s+ etc# Nous
terminons en a!ignant !a seconde )rid - cAt de !a premi(re#
*ne fois la pa#e lance dans le navi#ateur! voici le rsultat -
A:outer de employ. automati;uement reli. < la oci.t.
Nous pouvons a,outer des emp!o$s dans !a )rid !istant !es emp!o$s de !a socit
s!ectionne# 5!iquez sur !e /outon de !a )rid des emp!o$s et saisissez un nouve!
emp!o$ 3
:orsque votre saisie est termine+ !e nouve! emp!o$ est associ - !a socit 3
Ici+ nous venons da,outer :isa Rogers - !a socit SuperWak#
1I# E9 MAIN9ENAN9 c
Dans ce guide de prise en main+ vous avez dcouvert p!usieurs "onctionna!its "ondamenta!es
de Wakanda# Fous pouvez en apprendre p!us sur Wakanda+ !es datastore class+ !e +odel
riven evelopment+ !a scurit dacc(s+ !e Wakanda $pplication %rame'orkB au travers
dautres e7emp!es et de !a documentation#