1
00:00:07,740 --> 00:00:10,700
Bonjour. Dans cette
séquence, vous allez voir la

2
00:00:10,900 --> 00:00:13,650
puissance de Seaside grâce à
la composition de composants.

3
00:00:14,950 --> 00:00:16,610
En fait, on a défini
des composants qui sont

4
00:00:16,810 --> 00:00:18,900
réutilisables et qui
encapsulent de l'état, et maintenant

5
00:00:19,100 --> 00:00:21,030
on va voir comment est-ce
qu'on est capable de composer

6
00:00:21,230 --> 00:00:23,690
ces composants en vue de
construire des applications complexes.

7
00:00:24,000 --> 00:00:27,840
Une application, c'est un
composant racine, et puis on

8
00:00:28,040 --> 00:00:31,200
profite du debuggage, du
live debugging des applications.

9
00:00:32,180 --> 00:00:36,030
On va revenir sur 3
mécanismes importants pour composer

10
00:00:36,230 --> 00:00:40,490
des composants en Seaside. Le
premier, l'agrégation de composants.

11
00:00:40,690 --> 00:00:43,280
Je vous rappelle qu'on
avait défini 2 compteurs, un

12
00:00:43,480 --> 00:00:46,580
compteur normal qui
ressemblait à ça ici et puis un

13
00:00:46,780 --> 00:00:48,860
compteur Tweeter compteur, ici.

14
00:00:51,210 --> 00:00:54,780
Comment est-ce que je
pourrais maintenant agréger un

15
00:00:55,000 --> 00:00:58,470
composant au compteur en vue de
construire une application multi compteurs?

16
00:00:58,670 --> 00:01:00,290
En fait, je voudrais
afficher plein de compteurs sur une

17
00:01:00,490 --> 00:01:03,520
page et puis quand je clique
sur ce plus-là par exemple,

18
00:01:03,720 --> 00:01:06,660
que ça incrémente la valeur de
ce compteur et pas d'un autre.

19
00:01:06,960 --> 00:01:10,550
Donc, agréger comme ça plein de
composants sur une même page facilement.

20
00:01:11,460 --> 00:01:12,710
Comment est-ce
qu'on fait en Seaside?

21
00:01:12,910 --> 00:01:13,670
C'est extrêmement simple.

22
00:01:14,350 --> 00:01:16,100
Je vais définir une sous
 classe de composants, toujours

23
00:01:16,300 --> 00:01:19,000
pareil, qui
s'appelle WA multi compteurs.

24
00:01:20,030 --> 00:01:22,290
Une variable d'instances,
counters, qui va définir une

25
00:01:22,490 --> 00:01:25,260
collection de compteurs.
Dans la méthode initialize, je

26
00:01:25,460 --> 00:01:28,230
vais créer une
collection de 5 compteurs ici.

27
00:01:30,750 --> 00:01:34,190
Et puis, je vais avoir la
méthode render content on ici

28
00:01:35,100 --> 00:01:38,400
où je vais parcourir ma
collection de compteurs avec un

29
00:01:38,600 --> 00:01:43,560
do, et je vais demander à
l'objet HTML de rendre chacun

30
00:01:43,760 --> 00:01:46,570
des compteurs, donc j'utilise une
méthode particulière ici qui est render.

31
00:01:47,310 --> 00:01:51,950
Cette méthode render de
l'objet HTML permet de

32
00:01:52,150 --> 00:01:54,920
demander à un composant de se
rendre, de se dessiner, en HTML.

33
00:01:55,870 --> 00:01:57,740
Et on a une méthode
importante ici qui s'appelle

34
00:01:57,940 --> 00:02:01,420
children, c'est-à-dire
qu'un composant, lorsqu'il

35
00:02:01,620 --> 00:02:03,910
encapsule d'autres
composants et qu'il leur demande de se

36
00:02:04,110 --> 00:02:06,610
rendre dans sa méthode render
content on, il doit les déclarer.

37
00:02:07,140 --> 00:02:10,180
Et pour les déclarer il
doit rendre une collection de

38
00:02:10,380 --> 00:02:13,100
composants dans sa méthode
children, qui contient tous

39
00:02:13,300 --> 00:02:15,900
les composants qu'il va
rendre, tous ses enfants en fait.

40
00:02:16,100 --> 00:02:18,080
Ici, je rends bien la
collection counters.

41
00:02:19,250 --> 00:02:20,720
C'est une méthode
importante à définir.

42
00:02:23,120 --> 00:02:25,720
Les règles de base pour
agréger des composants, pour

43
00:02:25,920 --> 00:02:27,340
composer des
composants, c'est facile.

44
00:02:28,790 --> 00:02:31,360
Un composant va stocker
ces sous-composants dans une

45
00:02:31,560 --> 00:02:34,190
variable d'instances, dans
notre exemple c'était counters.

46
00:02:34,390 --> 00:02:38,010
Ensuite, il va
envoyer le message render

47
00:02:42,010 --> 00:02:44,590
dans sa méthode render
content on aux paramètres HTML en

48
00:02:44,790 --> 00:02:46,520
demandant à chacun de
ses enfants de se rendre.

49
00:02:47,590 --> 00:02:49,830
Et puis, il va redéfinir
la méthode children pour

50
00:02:50,030 --> 00:02:51,380
déclarer l'ensemble de
ces sous- composants.

51
00:02:51,580 --> 00:02:54,340
Il y a toujours ces 3 volets-là.

52
00:02:58,080 --> 00:03:00,400
On peut aussi agréger des
sous-composants différents, on

53
00:03:00,600 --> 00:03:02,490
n'est pas obligé d'agréger
des composants du même type.

54
00:03:02,690 --> 00:03:05,300
Là, je n'avais agrégé que
des compteurs et maintenant on

55
00:03:05,500 --> 00:03:09,350
va avoir un composant My app.

56
00:03:10,160 --> 00:03:12,530
Dans la méthode initialize
ici, c'est une collection,

57
00:03:12,750 --> 00:03:16,100
sauf que dans cette collection de
composants j'ai mis l'application

58
00:03:16,300 --> 00:03:18,240
gritter qu'on avait mise dans
une séquence précédente qu'on

59
00:03:18,440 --> 00:03:22,240
avait vue, un Tweeter compteur
et un compteur, donc 3 composants.

60
00:03:22,890 --> 00:03:27,000
Ma méthode children rend
bien tous les children, tous les

61
00:03:27,200 --> 00:03:28,940
sous-composants de ce
composant-là My app.

62
00:03:29,470 --> 00:03:32,840
Et dans render content on, je
vais bien parcourir l'ensemble

63
00:03:33,040 --> 00:03:36,200
de mes enfants et
demander à ce qu'ils se rendent.

64
00:03:36,400 --> 00:03:40,460
Donc faire HTML render each,
je vais faire HTML render du

65
00:03:40,660 --> 00:03:42,720
gritter, du Tweeter
compteur et du compteur.

66
00:03:43,760 --> 00:03:44,620
Voyons ce que ça donne.

67
00:03:45,210 --> 00:03:48,900
Ici on a bien le composant
gritter qui s'est affiché sur

68
00:03:49,100 --> 00:03:52,130
la page Web, on a le
Tweeter compteur qui s'est affiché

69
00:03:52,330 --> 00:03:55,330
ici et on a le compteur
normal qui s'est affiché ici.

70
00:03:55,530 --> 00:03:58,700
On a bien composé des composants et
ils fonctionnent tous indépendamment.

71
00:03:58,900 --> 00:04:01,420
Si je clique sur les plus,
les say hello et cetera, les

72
00:04:01,620 --> 00:04:02,690
composants fonctionnent parfaitement.

73
00:04:05,140 --> 00:04:07,310
Maintenant si on veut
aller encore un petit cran plus

74
00:04:07,510 --> 00:04:10,390
loin, on ne voudrait pas
afficher tous les composants d'un

75
00:04:10,590 --> 00:04:13,250
coup sur la page Web, on
voudrait qu'il n'y en ait qu'un

76
00:04:13,450 --> 00:04:15,110
qui s'affiche à l'instant
T et afficher un menu par

77
00:04:15,310 --> 00:04:17,340
exemple pour sectionner quels
sous-composants on veut afficher.

78
00:04:17,830 --> 00:04:20,090
Typiquement, je voudrais
afficher juste le gritter et

79
00:04:20,290 --> 00:04:22,730
quand je clique sur
Tweeter compteur ici, je ne vais

80
00:04:22,930 --> 00:04:25,520
afficher que le
Tweeter compteur dessous.

81
00:04:26,460 --> 00:04:27,720
Comment faire cette application ?

82
00:04:27,940 --> 00:04:30,590
C'est facile, je vais
rajouter une variable d'instances

83
00:04:30,790 --> 00:04:33,630
dans mon application My app
qui va s'appeler le composant

84
00:04:33,830 --> 00:04:35,850
sélectionné, quel est
l'enfant qui a été sélectionné, par

85
00:04:36,050 --> 00:04:39,720
défaut je vais
l'initialiser au premier sous-composant.

86
00:04:39,920 --> 00:04:44,200
Dans ma méthode render
content on ici, je l'ai modifié.

87
00:04:44,540 --> 00:04:48,180
Je vais afficher un menu qui
va me donner la possibilité

88
00:04:48,380 --> 00:04:49,610
de sélectionner quel
sous-composant je vais afficher.

89
00:04:50,930 --> 00:04:53,660
Et puis, je vais faire
HTML render mais seulement du

90
00:04:53,860 --> 00:04:55,780
sous-composant que je veux
afficher tout simplement.

91
00:04:56,780 --> 00:05:00,040
Et dans le menu, je vais
générer ici une liste en

92
00:05:00,240 --> 00:05:03,100
ordonnées, je vais
parcourir l'ensemble de mes

93
00:05:03,300 --> 00:05:06,560
sous-composants avec un index, ici i.

94
00:05:08,290 --> 00:05:11,410
Et je vais générer un élément
de liste pour chacun des enfants.

95
00:05:11,710 --> 00:05:14,940
Donc ici je vais générer
une ancre, c'est un lien

96
00:05:15,140 --> 00:05:18,450
cliquable et quand je clique
sur ce lien ça va déclencher

97
00:05:18,650 --> 00:05:23,530
le call back,
l'exécution de ce bloc ici donc on

98
00:05:23,730 --> 00:05:28,450
va dire que le composant
sélectionné par l'utilisateur, c'est

99
00:05:29,380 --> 00:05:32,400
l'enfant numéro, donc self
children, je rappelle que c'était

100
00:05:32,600 --> 00:05:34,590
une collection, at i.

101
00:05:35,340 --> 00:05:39,910
Et i ici, ce n'est ni
plus ni moins que le

102
00:05:40,110 --> 00:05:42,700
numéro de l'élément dans
la collection children.

103
00:05:45,450 --> 00:05:49,130
Il est extrêmement facile de
pouvoir parcourir l'ensemble

104
00:05:49,330 --> 00:05:51,350
des sous-composants et de
générer spécifiquement ce qu'on

105
00:05:51,550 --> 00:05:53,330
veut, de contrôler
complètement qui doit s'afficher et

106
00:05:53,530 --> 00:05:54,290
qui ne doit pas s'afficher.

107
00:05:56,350 --> 00:05:59,000
On va avoir un deuxième mécanisme de
composition qui est le call answer.

108
00:06:00,100 --> 00:06:02,620
On a vu la composition
de composants avec les

109
00:06:02,820 --> 00:06:04,650
sous-composants et maintenant on
va voir le mécanisme call answer.

110
00:06:07,940 --> 00:06:11,230
Dans le code du composant
A, on va écrire quelque chose

111
00:06:11,430 --> 00:06:15,940
qui ressemble à ce code
ici, on va dire "Composant A

112
00:06:16,140 --> 00:06:18,750
appelle composant
B, call composant B.

113
00:06:19,380 --> 00:06:23,490
" Le composant B va masquer
le composant A sur la page

114
00:06:23,690 --> 00:06:25,740
Web, il va réaliser un traitement.

115
00:06:26,330 --> 00:06:28,390
Et à un moment donné, le
composant B va dire "J'ai fini

116
00:06:28,590 --> 00:06:31,420
mon traitement donc je vais faire
answer et je vais rendre un résultat.

117
00:06:31,620 --> 00:06:32,810
" Le résultat c'est une étoile.

118
00:06:34,100 --> 00:06:36,160
Ce résultat va être stocké
dans X à la place du call

119
00:06:39,330 --> 00:06:40,090
composant B.

120
00:06:40,360 --> 00:06:42,510
Et maintenant, le composant A
va se réafficher sur la page Web.

121
00:06:43,510 --> 00:06:46,380
Et le composant A va pouvoir utiliser
ce résultat pour faire quelque chose.

122
00:06:47,000 --> 00:06:47,880
Je vous montre un exemple.

123
00:06:48,300 --> 00:06:52,200
Ici, on a un premier
composant qui était le compteur, on

124
00:06:52,400 --> 00:06:55,790
lui a rajouté un bouton ici,
set value, et on imagine que

125
00:06:56,000 --> 00:06:57,950
set value ça offre la
possibilité à l'utilisateur de

126
00:06:58,150 --> 00:06:59,330
rentrer une nouvelle
valeur pour le compteur.

127
00:06:59,750 --> 00:07:01,500
Quand on clique sur ce
bouton set value, il y a un

128
00:07:01,700 --> 00:07:05,110
nouveau composant ici qui
est affiché, c'était un peu

129
00:07:05,310 --> 00:07:07,510
comme le composant gritter
qu'on avait vu avant, on peut

130
00:07:07,710 --> 00:07:09,680
rentrer une nouvelle valeur
pour le compteur, cliquer sur

131
00:07:09,880 --> 00:07:12,000
le bouton OK, et quand je
clique sur le bouton OK ça

132
00:07:12,200 --> 00:07:15,240
revient à notre composant
compteur mais avec la valeur

133
00:07:15,440 --> 00:07:17,230
ici qui avait été rentrée
par l'utilisateur au début.

134
00:07:20,030 --> 00:07:21,740
On a bien un enchaînement
de plusieurs composants.

135
00:07:23,210 --> 00:07:25,100
Comment est-ce que c'est implémenté ?

136
00:07:25,300 --> 00:07:28,580
On a notre composant Tweeter
compteur qui a sa méthode render content on.

137
00:07:29,470 --> 00:07:32,600
Dans sa méthode render
content on, on va rajouter un

138
00:07:32,800 --> 00:07:37,040
bouton, un TBS button, ce
bouton s'appelle set value ici.

139
00:07:37,520 --> 00:07:40,390
Quand on clique sur ce
bouton c'est ce call back qui va

140
00:07:40,590 --> 00:07:44,590
être exécuté, donc c'est la
méthode set count to user value.

141
00:07:44,790 --> 00:07:46,240
Set count to user
value est défini ici.

142
00:07:47,120 --> 00:07:49,880
On va préparer ici
une boîte de dialogue.

143
00:07:50,590 --> 00:07:52,610
On va utiliser un autre
composant qui est offert par

144
00:07:52,810 --> 00:07:56,050
Seaside qui est une boîte de
dialogue qu'on va paramétrer ici.

145
00:07:56,280 --> 00:07:58,380
On l'instancie, on la
paramètre avec entrer une nouvelle

146
00:07:58,580 --> 00:08:00,820
valeur pour le compteur,
par défaut c'est égal à 0.

147
00:08:01,020 --> 00:08:01,780
Et puis, il y aura un bouton OK.

148
00:08:04,490 --> 00:08:06,390
L'élément extrêmement
intéressant, c'est cette ligne-là ici.

149
00:08:06,590 --> 00:08:08,500
On va dire "Composant

150
00:08:11,710 --> 00:08:16,660
courant, donc self, c'est
le Tweeter counter, appelle

151
00:08:17,110 --> 00:08:22,000
la boîte de dialogue qu'on
vient de créer et rends-moi le

152
00:08:22,200 --> 00:08:24,000
résultat", et le résultat ça
sera la nouvelle valeur du compteur.

153
00:08:24,610 --> 00:08:28,690
Et ensuite quand on a fini
ici, on va dire "Count, la

154
00:08:28,890 --> 00:08:31,160
valeur du compteur, prends
cette nouvelle valeur qui a

155
00:08:31,360 --> 00:08:33,340
été entrée par l'utilisateur
convertie sous la forme d'un

156
00:08:33,540 --> 00:08:36,580
nombre", tout simplement.

157
00:08:36,780 --> 00:08:38,420
En interne, on peut
regarder comment fonctionne cette

158
00:08:38,620 --> 00:08:39,720
boîte de dialogue WA input dialog.

159
00:08:41,000 --> 00:08:43,770
En fait, c'est un composant
Seaside réutilisable tout à

160
00:08:44,000 --> 00:08:48,480
fait classique, sauf qu'il
a une particularité, il va

161
00:08:48,680 --> 00:08:51,300
utiliser la méthode answer
pour renvoyer un résultat.

162
00:08:52,370 --> 00:08:55,380
En fait si on regarde sa
méthode render content on à ce

163
00:08:55,580 --> 00:09:00,220
composant-là, quand on
clique sur son bouton OK, donc

164
00:09:00,420 --> 00:09:03,650
ici son submit button, il y
a bien un callback avec un

165
00:09:03,850 --> 00:09:08,480
bloc, et dans son call
back il va faire self

166
00:09:08,680 --> 00:09:12,770
answer value. Ça veut dire que ça

167
00:09:13,470 --> 00:09:17,460
va renvoyer les résultats au
composant qui avait fait un call sur lui.

168
00:09:18,800 --> 00:09:22,110
Ça va vraiment revenir à
l'endroit où le call avait été

169
00:09:22,310 --> 00:09:26,050
fait et renvoyer le résultat.

170
00:09:26,250 --> 00:09:28,160
On a vu le mécanisme call
answer, maintenant on va voir

171
00:09:28,360 --> 00:09:30,950
un dernier mécanisme de
composition de composants qui est

172
00:09:31,150 --> 00:09:32,580
celui des tâches, des tasks.

173
00:09:34,230 --> 00:09:36,180
En fait c'est très simple,
les tâches c'est comme des

174
00:09:36,380 --> 00:09:38,210
composant, sauf qu'il n'y a
pas de partie graphique, donc

175
00:09:38,410 --> 00:09:40,940
il n'y aura pas de méthode render
content on, pas de génération de HTML.

176
00:09:41,220 --> 00:09:44,830
L'idée, c'est vraiment de
venir orchestrer, de venir

177
00:09:45,590 --> 00:09:48,550
décrire comment des
composants doivent s'exécuter dans le

178
00:09:48,750 --> 00:09:50,630
temps: d'abord ce
composant-là fera ça et ensuite

179
00:09:50,830 --> 00:09:54,300
celui-là, et cetera, en utilisant
des call answers cachés derrière.

180
00:09:56,450 --> 00:09:59,530
On va définir une tâche qui
s'appelle un adder et puis

181
00:09:59,730 --> 00:10:01,390
toutes les tâches ont une
méthode qui s'appelle go.

182
00:10:02,690 --> 00:10:06,810
Ici par exemple dans cette
tâche, on va demander à l'utilisateur

183
00:10:07,010 --> 00:10:08,850
de rentrer un nombre,
donc self request number 1.

184
00:10:09,170 --> 00:10:12,010
Ensuite, on va lui
demander de rentrer un deuxième

185
00:10:12,210 --> 00:10:13,000
nombre, self request number 2.

186
00:10:13,650 --> 00:10:18,450
Et ensuite, on va l'informer
d'une valeur qui est l'addition

187
00:10:18,650 --> 00:10:20,570
de ces 2 nombres ici.

188
00:10:20,770 --> 00:10:24,030
A la dernière ligne, on
enregistre ce composant comme une

189
00:10:24,230 --> 00:10:28,000
application Web classique pour
pouvoir y accéder avec un navigateur.

190
00:10:30,300 --> 00:10:33,520
Si on regarde en interne,
la méthode request comment

191
00:10:33,720 --> 00:10:34,480
est-ce qu'elle est implémentée ?

192
00:10:34,930 --> 00:10:39,770
La méthode request in
fine utilise en interne call

193
00:10:40,540 --> 00:10:44,480
et answer. Si on revient à
l'exemple précédent, on voit

194
00:10:44,680 --> 00:10:47,250
bien qu'au moment où on a
fait request ici à l'intérieur,

195
00:10:47,920 --> 00:10:50,910
ça revient à appeler un
autre composant et pas n'importe

196
00:10:51,110 --> 00:10:55,000
lequel, le composant WA
input dialog, à afficher les

197
00:10:55,500 --> 00:10:57,670
chaînes de caractères qui
vont bien et puis ce composant

198
00:10:57,870 --> 00:10:59,710
va rendre le résultat à
celui qui l'avait appelé.

199
00:11:00,190 --> 00:11:01,740
En l'occurrence qui
est-ce qui l'avait appelé?

200
00:11:02,220 --> 00:11:03,080
Notre composant adder.

201
00:11:03,280 --> 00:11:05,600
Donc, il va bien
récupérer une valeur dans value 1.

202
00:11:06,710 --> 00:11:08,030
La même chose pour value 2.

203
00:11:08,370 --> 00:11:12,330
Et ensuite, si on regarde
dans le in form, comment est-ce

204
00:11:12,530 --> 00:11:13,290
qu'il est implémenté ?

205
00:11:13,700 --> 00:11:16,440
Lui aussi utilise un call
answer mais sur un autre type

206
00:11:16,640 --> 00:11:20,220
de composant qui est inform dialog.

207
00:11:20,420 --> 00:11:23,390
Ici on fait self call form
dialog; donc on va afficher

208
00:11:23,590 --> 00:11:25,110
une chaîne des caractères à
l'utilisateur avec un bouton

209
00:11:25,310 --> 00:11:29,130
OK pour dire "OK, il a bien
vu la chaîne de caractères.

210
00:11:29,330 --> 00:11:30,090
"

211
00:11:30,290 --> 00:11:32,040
Ce qui était important à
retenir dans toutes ces formes

212
00:11:32,240 --> 00:11:35,730
de compositions, c'est qu'on
n'a jamais parlé de requêtes

213
00:11:36,310 --> 00:11:40,320
http, d'URL, de découpage
d'URL, de paramètres, on n'a

214
00:11:40,520 --> 00:11:42,500
pas parlé de routage de requêtes.

215
00:11:43,140 --> 00:11:46,070
On n'a pas non plus fixé
des liens vers des pages

216
00:11:46,270 --> 00:11:50,000
suivantes, et cetera, on a
uniquement parlé de composants

217
00:11:50,410 --> 00:11:52,790
qui ont de l'état,
qu'on va pouvoir composer.

218
00:11:53,000 --> 00:11:56,060
Il y a 3 formes de
compositions: un composant peut

219
00:11:56,260 --> 00:11:58,500
encapsuler d'autres
composants, un composant peut appeler

220
00:11:58,700 --> 00:12:01,030
un autre composant, et
puis on peut définir des work

221
00:12:01,230 --> 00:12:04,050
flow, des enchaînements de
composants en Seaside, ce qui

222
00:12:04,250 --> 00:12:06,260
est extrêmement puissant. Et
tout ça avec la possibilité

223
00:12:06,460 --> 00:12:07,220
de le debugger en live.