1
00:00:00,650 --> 00:00:03,690
Bonjour. Donc on va voir
dans cette séquence le Framework

2
00:00:03,890 --> 00:00:06,000
web Seaside, qui est un
Framework innovant pour

3
00:00:06,200 --> 00:00:07,820
construire des
applications Web, en Pharo.

4
00:00:08,550 --> 00:00:11,110
Donc il est extrêmement
puissant et permet de construire

5
00:00:11,310 --> 00:00:13,260
des applications
complexes. On verra que la notion

6
00:00:13,460 --> 00:00:14,910
centrale c'est une
notion de composantes qui est

7
00:00:15,110 --> 00:00:18,290
réutilisable et avec
états, construit au-dessus d'un

8
00:00:18,490 --> 00:00:23,000
protocole sans état qui est http
 classiquement dans les applications Web.

9
00:00:24,210 --> 00:00:26,310
Donc Seaside bien sûr il
est sécurisé par défaut, il

10
00:00:26,510 --> 00:00:29,350
supporte toutes les
dernières nouveautés Web 2 0, Ajax et

11
00:00:29,550 --> 00:00:31,850
caetera et ainsi les
architectures REST.

12
00:00:33,070 --> 00:00:35,180
Donc vous avez le site Web
de Seaside sur lequel vous

13
00:00:35,380 --> 00:00:40,000
pouvez aller voir de la
documentation, notamment le livre

14
00:00:40,200 --> 00:00:42,030
gratuit de Seaside qui est en ligne.

15
00:00:42,440 --> 00:00:44,670
Et puis vous trouverez un
ensemble de tutoriaux sur

16
00:00:44,870 --> 00:00:47,380
Seaside, et enfin je vous
conseille d'aller voir la

17
00:00:47,580 --> 00:00:49,860
mailing list Seaside où
vous pouvez poser vos questions

18
00:00:50,060 --> 00:00:54,000
et il y a une communauté
active qui répond à toutes les

19
00:00:54,200 --> 00:00:55,180
questions qui pourraient survenir.

20
00:00:56,350 --> 00:00:57,360
Donc un peu d'histoire.

21
00:00:57,560 --> 00:00:59,900
Seaside c'est en
production depuis 2002.

22
00:01:00,190 --> 00:01:04,130
Il est activement maintenu
et puis c'est aussi un un des

23
00:01:04,330 --> 00:01:07,240
Frameworks qui est à la base
de nombreux success stories

24
00:01:07,440 --> 00:01:09,920
en Pharo; vous pouvez aller
voir le site Web de Pharo et

25
00:01:10,120 --> 00:01:12,600
notamment ce lien-là, vous
verrez il y a de nombreux

26
00:01:13,330 --> 00:01:16,240
projets Web, et dans la
plupart de ces projets Web ils

27
00:01:16,440 --> 00:01:17,550
utilisent le Framework seaside.

28
00:01:19,050 --> 00:01:23,730
Donc comme je le disais
seaside c'est un Framework Web

29
00:01:24,260 --> 00:01:26,770
centré autour de la
notion de composants.

30
00:01:27,000 --> 00:01:29,810
Donc les composants seront
réutilisables et avec état.

31
00:01:30,050 --> 00:01:33,440
D'accord! Et on va avoir
un langage dédié qui va nous

32
00:01:33,640 --> 00:01:35,920
permettre de facilement
rendre ces composants en HTML.

33
00:01:36,750 --> 00:01:39,010
Ensuite on aura des règles de
composition de ces composants.

34
00:01:39,460 --> 00:01:41,640
On conviendra il y en a
plusieurs et on les explicitera

35
00:01:41,840 --> 00:01:45,000
dans une prochaine
séquence. Une application Web c'est

36
00:01:45,200 --> 00:01:48,080
uniquement un composant
racines, on va être capable de

37
00:01:48,280 --> 00:01:52,730
débugger les applications Web en
live directement dans le débugger Pharo.

38
00:01:53,750 --> 00:01:56,810
Et puis vous aurez une
séquence prochaine qui va vous

39
00:01:57,010 --> 00:01:58,900
expliciter comment faire
pour générer automatiquement les

40
00:01:59,100 --> 00:02:03,730
formulaires, notamment
pour ne pas à avoir à

41
00:02:03,930 --> 00:02:05,400
les écrire à la main.

42
00:02:05,610 --> 00:02:07,440
Donc quelques-uns des
exemples d'applications construites

43
00:02:07,640 --> 00:02:09,550
avec Seaside, qui sont
en production depuis 2002.

44
00:02:10,490 --> 00:02:13,220
Donc si on fait un zoom, on
a d'autres, donc ici on voit

45
00:02:13,420 --> 00:02:15,530
une application qui utilise
énormément des graphiques,

46
00:02:16,760 --> 00:02:18,900
donc plein de composants qui
sont imbriqués les uns dans

47
00:02:19,100 --> 00:02:20,660
les autres pour construire
une application complexe.

48
00:02:20,930 --> 00:02:23,610
Je vous donne un autre
exemple d'une application donc

49
00:02:23,810 --> 00:02:25,650
vous pouvez les retrouver
sur le site Web de Pharo, donc

50
00:02:26,000 --> 00:02:30,150
où on a vraiment des
tableaux de reporting qui sont assez

51
00:02:30,350 --> 00:02:33,030
complexes et imbriqués les
uns dans les autres, et on

52
00:02:33,230 --> 00:02:35,600
peut construire ça vraiment
simplement avec le Framework Seaside.

53
00:02:38,140 --> 00:02:40,470
Donc en Seaside la notion
centrale comme je vous disais c'est

54
00:02:40,670 --> 00:02:42,630
la notion de composants.
Donc un composant ce n'est ni

55
00:02:42,830 --> 00:02:44,000
plus ni moins qu'une
sous-classe de la classe

56
00:02:44,200 --> 00:02:45,820
WAComponent, fournie
par le Framework Seaside.

57
00:02:47,780 --> 00:02:50,500
Un composant donc il est
réutilisable et avec états et

58
00:02:50,730 --> 00:02:55,000
seront en HTML par exemple
sous la forme de div et caetera.

59
00:02:56,010 --> 00:02:59,380
Donc une application Web en
Seaside ce n'est ni plus ni

60
00:02:59,580 --> 00:03:01,670
moins qu'un composant
racine, donc ici par exemple

61
00:03:01,870 --> 00:03:04,730
WACounter, qu'on va
enregistrer dans le système comme une

62
00:03:04,930 --> 00:03:07,200
application Web sous le nom Counter.

63
00:03:07,400 --> 00:03:09,930
Donc on pourra y accéder ensuite
dans l'url avec le nom Counter.

64
00:03:11,060 --> 00:03:13,750
Donc voici un exemple ici
donc mon application Counter

65
00:03:13,950 --> 00:03:17,380
dans l'url, c'est un
composant qui s'est rendu ici en

66
00:03:17,580 --> 00:03:21,780
HTML, donc la valeur du
Counter, et ici on a 2 liens "tac

67
00:03:22,100 --> 00:03:24,450
plus plus" donc je peux
cliquer dessus ça va incrémenter

68
00:03:24,650 --> 00:03:26,920
la valeur du Counter, et
"moins moins" si je clique

69
00:03:27,120 --> 00:03:28,030
dessus ça va
décrémenter la valeur du Counter.

70
00:03:28,680 --> 00:03:30,210
Donc maintenant je vais
vous expliciter le code pour

71
00:03:30,410 --> 00:03:31,490
implémenter cette application Web.

72
00:03:31,800 --> 00:03:32,750
Il extrêmement simple.

73
00:03:33,020 --> 00:03:35,230
Je vais faire une sous-classe
de WA contenant que j'appelle

74
00:03:35,430 --> 00:03:39,150
WACounter, cette classe elle va
avoir une variable d'instance: count.

75
00:03:39,770 --> 00:03:43,420
Une méthode d'initialisation pour
utiliser la valeur du Counter à 0.

76
00:03:44,060 --> 00:03:45,770
Une méthode d'incrément
pour augmenter la valeur du

77
00:03:46,000 --> 00:03:48,630
Counter, une méthode de
décrément. En fait ce qui nous

78
00:03:48,830 --> 00:03:50,220
manque maintenant
c'est la partie HTML.

79
00:03:50,420 --> 00:03:53,180
Donc comment on va décrire
que ce Counter est incapable

80
00:03:53,380 --> 00:03:56,290
de se rendre en HTML? Mais
en fait il va falloir juste

81
00:03:56,490 --> 00:03:59,210
le doter d'une méthode
renderContentOn, qui est un

82
00:03:59,410 --> 00:04:02,720
paramètre, et ce paramètre va
nous aider à générer ce code HTML.

83
00:04:04,610 --> 00:04:05,520
Donc voici l'exemple.

84
00:04:05,840 --> 00:04:08,010
Donc ici j'ajoute la méthode
renderContentOn à la classe

85
00:04:08,210 --> 00:04:12,750
Counter et je me sers du
paramètre, d'accord, donc qui

86
00:04:12,950 --> 00:04:16,410
est un objet classique
Pharo, instance de la classe

87
00:04:16,610 --> 00:04:19,640
WHtmlCanvas, qui est
fournie par Seaside, et je vais

88
00:04:19,840 --> 00:04:22,360
envoyer des messages à cet
objet pour générer le code HTML.

89
00:04:22,560 --> 00:04:25,100
Donc je peux générer un
titre, générer une ancre donc une

90
00:04:25,300 --> 00:04:27,760
ancre c'est un lien, et ici
je suis capable de spécifier

91
00:04:27,960 --> 00:04:30,650
à quel message callback,
quand je clique sur ce lien

92
00:04:30,870 --> 00:04:32,100
exécute ce block de codes.

93
00:04:32,810 --> 00:04:35,500
Donc ici quand je clique sur
le lien qui s'appelle "+ +",

94
00:04:35,760 --> 00:04:38,760
ça va exécuter la méthode
self increase du Counter, et

95
00:04:38,960 --> 00:04:42,000
quand je clique sur le
lien "- -" ça va exécuter la

96
00:04:42,200 --> 00:04:44,000
méthode Self decrease du Counter.

97
00:04:44,490 --> 00:04:45,250
Tout simple.

98
00:04:46,940 --> 00:04:47,700
On peut aller plus loin.

99
00:04:47,900 --> 00:04:50,490
Donc si une erreur survient
pendant que je clique sur un

100
00:04:50,690 --> 00:04:52,470
lien, c'est-à-dire que
dans un callback ici j'ai

101
00:04:52,670 --> 00:04:55,170
introduit sciemment un point d'arrêt.

102
00:04:55,370 --> 00:04:58,890
Ça pourrait être une erreur
mais j'introduis vraiment un

103
00:04:59,090 --> 00:05:01,050
point d'arrêt dans la
méthode Decrease, donc selfhaltIf.

104
00:05:02,060 --> 00:05:05,770
Donc si le counter est
décrémenté et passe sous 0 dans ce

105
00:05:06,000 --> 00:05:07,760
cas-là je déclenche
l'apparition du débugger.

106
00:05:07,960 --> 00:05:12,230
Et donc on voit que si je
fais ça dans mon application

107
00:05:12,430 --> 00:05:15,080
Web j'ai bien le débugger
ici qui s'affiche, et on voit

108
00:05:15,280 --> 00:05:18,220
bien la pile d'exécution
du programme ici, avec la

109
00:05:18,420 --> 00:05:22,420
méthode
renderCounterOn, et le decrease ici.

110
00:05:23,670 --> 00:05:25,020
Donc on s'est bien
arrêté sur le haltIf.

111
00:05:25,850 --> 00:05:28,000
Donc ici je peux modifier
directement le code de mon

112
00:05:28,200 --> 00:05:31,340
application, appuyer sur
le bouton Proceed et mon

113
00:05:31,540 --> 00:05:35,660
navigateur va recevoir la réponse
HTML comme si rien ne s'était passé.

114
00:05:39,170 --> 00:05:41,000
Donc un autre problème dans
les applications Web c'est le

115
00:05:41,260 --> 00:05:44,350
problème du Back Button. Donc
l'idée c'est que quand l'utilisateur

116
00:05:44,550 --> 00:05:47,020
clique sur le Back Button
ça désynchronise l'état entre

117
00:05:47,220 --> 00:05:49,420
le serveur et le client.
Donc un exemple: imaginons que

118
00:05:49,620 --> 00:05:52,440
j'incrémente 5 fois mon
compteur, donc il vaut 5, devant

119
00:05:52,640 --> 00:05:56,420
moi j'ai 5 qui est
affiché. Je clique sur le bouton

120
00:05:56,620 --> 00:05:59,820
Retour de mon navigateur.
Donc je vais voir la valeur 4.

121
00:06:00,080 --> 00:06:02,000
Par contre le serveur
n'est pas au courant que j'ai

122
00:06:02,200 --> 00:06:04,550
cliqué sur ce bouton
Retour. Et donc si je reclique sur

123
00:06:04,750 --> 00:06:08,870
"Incrémenter la valeur du
compteur" moi je vais voir la réponse 6.

124
00:06:09,370 --> 00:06:12,230
Donc ça c'est un problème
puisque le côté serveur il

125
00:06:12,430 --> 00:06:14,920
pensait qu'il était toujours à
5, donc incrémenté on passe à 6.

126
00:06:15,340 --> 00:06:17,250
Comment gérer ça en Seaside ?

127
00:06:17,450 --> 00:06:18,210
C'est extrêmement simple.

128
00:06:18,450 --> 00:06:20,660
On va définir une nouvelle
méthode sur la classe Counter

129
00:06:20,880 --> 00:06:23,720
qui est la méthode States,
donc qui va retourner l'ensemble

130
00:06:23,920 --> 00:06:25,890
des objets dont il faut
préserver l'état quand on clique

131
00:06:26,090 --> 00:06:30,290
sur le bouton Retour. Donc en
l'occurrence uniquement l'objet

132
00:06:30,490 --> 00:06:32,200
Self c'est le compteur courant.

133
00:06:33,120 --> 00:06:35,660
D'accord! Et maintenant si
je fais le bouton Retour et

134
00:06:35,860 --> 00:06:37,940
que je reclique sur
Increment, j'aurai bien la valeur 5

135
00:06:38,140 --> 00:06:38,900
dans l'exemple précédent.

136
00:06:41,660 --> 00:06:46,390
Donc les Callback en fait
c'est des blocks de codes

137
00:06:46,600 --> 00:06:49,280
dans lesquels on a
toute la puissance de Pharo.

138
00:06:49,480 --> 00:06:52,880
Donc ici dans un Callback je peux
écrire n'importe quel code Pharo.

139
00:06:54,130 --> 00:06:57,090
Donc ici j'ai pris un
exemple plus complexe où cette fois

140
00:06:57,580 --> 00:07:00,270
je peux utiliser une
alternative pour dire J'incrémente

141
00:07:00,470 --> 00:07:03,120
le Counter d'un cran ou de
2 crans en fonction si c'est

142
00:07:03,320 --> 00:07:05,490
un nombre pair ou impair par exemple.

143
00:07:06,040 --> 00:07:10,140
Mon Counter va
s'incrémenter plus vite dans un cas au

144
00:07:10,340 --> 00:07:11,630
lieu de s'incrémenter que d'une fois.

145
00:07:12,680 --> 00:07:17,360
Donc on voit qu'on a
vraiment une puissance grande dans

146
00:07:17,560 --> 00:07:18,350
ces blocks de Callback.

147
00:07:21,660 --> 00:07:24,230
Donc par exemple dans
l'exemple précédent, donc si je

148
00:07:24,430 --> 00:07:28,330
clique sur "+ +" ici
donc ça va bien arriver

149
00:07:28,890 --> 00:07:33,160
sur une nouvelle fenêtre qui
me dit que c'est un nombre pair.

150
00:07:36,560 --> 00:07:37,950
Je vous montre un autre exemple.

151
00:07:38,730 --> 00:07:42,050
Donc cette fois c'est une
application dans laquelle l'utilisateur

152
00:07:42,250 --> 00:07:43,060
va rentrer son prénom.

153
00:07:43,450 --> 00:07:45,340
On aimerait que
l'utilisateur puisse rentrer son prénom

154
00:07:45,540 --> 00:07:48,430
et quand il clique sur le
bouton Say hello ici, on

155
00:07:48,630 --> 00:07:50,770
voudrait lui afficher une
chaîne de caractères qui est

156
00:07:51,450 --> 00:07:54,890
"Hi" et son prénom, le prénom
qu'il a rentré au début ici.

157
00:07:55,090 --> 00:07:58,440
D'accord! Donc comment je
peux faire pour écrire cette

158
00:07:58,640 --> 00:08:00,350
application-là en Seaside ?

159
00:08:00,650 --> 00:08:01,510
Extrêmement simple.

160
00:08:01,940 --> 00:08:03,910
Je vais faire une
sous-classe de la classe WAComplement,

161
00:08:05,060 --> 00:08:06,750
que je vais doter d'une
variable d'instances username.

162
00:08:07,500 --> 00:08:09,500
Et dans la méthode
renderContentOn, celle que je vous

163
00:08:09,700 --> 00:08:13,760
montre ici, je vais juste
afficher donc le champ username

164
00:08:14,310 --> 00:08:15,780
et je vais dire un texte Input.

165
00:08:16,040 --> 00:08:18,090
Donc un texte Input c'est le
champ de texte que vous avez

166
00:08:18,290 --> 00:08:20,270
vu tout à l'heure dans lequel
l'utilisateur pouvait écrire "Bob".

167
00:08:20,820 --> 00:08:24,040
Et je vais avoir un Callback,
cette fois le Callback c'est

168
00:08:24,240 --> 00:08:26,260
un block qui est a
un paramètre Value.

169
00:08:26,820 --> 00:08:29,290
Donc le paramètre Value ce
block ça sera la chaîne de

170
00:08:29,490 --> 00:08:31,910
caractères qu'a rentrée
l'utilisateur dans le champ

171
00:08:32,110 --> 00:08:33,530
texte, donc Bob dans notre exemple.

172
00:08:33,870 --> 00:08:35,370
Et on va être capable de
stocker cette chaîne de

173
00:08:35,570 --> 00:08:38,820
caractères dans la variable
d'instances du composant "Peter" donc username.

174
00:08:39,600 --> 00:08:43,610
Et ensuite quand on va
cliquer sur le SubmitButton on va

175
00:08:43,810 --> 00:08:45,590
dire quand je clique sur le
bouton je veux être capable

176
00:08:45,790 --> 00:08:48,400
self inform, donc là je vais
appeler un nouveau composant

177
00:08:48,600 --> 00:08:51,580
dans lequel je vais dire
"Affiche la chaîne Hi Bob".

178
00:08:52,000 --> 00:08:54,770
Donc je concatène la chaîne
de caractères avec le champ

179
00:08:55,000 --> 00:08:56,390
Hi avec ce qu'il avait
rentré dans le champ texte avant.

180
00:09:00,120 --> 00:09:02,850
Donc j'espère que vous avez
remarqué que, pour ceux qui

181
00:09:03,050 --> 00:09:05,440
ont l'habitude de faire des
applications Web, en Seaside

182
00:09:05,640 --> 00:09:09,190
je n'ai pas parlé de
découpage de requêtes, est-ce qu'y a

183
00:09:09,390 --> 00:09:11,860
des paramètres dans la
requête dans l'URL et caetera.

184
00:09:12,060 --> 00:09:13,870
Je n'ai pas parlé de
configuration fichier avec ses mails

185
00:09:14,070 --> 00:09:15,620
compliqués, je n'ai pas
parlé de fichiers, je n'ai pas

186
00:09:15,820 --> 00:09:20,230
parlé de pages, je n'ai pas
parlé de liens vers la page suivante.

187
00:09:21,020 --> 00:09:24,770
En fait j'ai uniquement
parlé de composants, d'objets, de

188
00:09:25,000 --> 00:09:28,150
messages, de Callback et de
la possibilité de débugger

189
00:09:28,820 --> 00:09:31,930
directement du Code
grâce au débugger Pharo.

190
00:09:33,420 --> 00:09:35,000
Donc en résumé ce qu'il
faut retenir c'est qu'une

191
00:09:35,200 --> 00:09:37,620
application Web en
Seaside c'est facile, c'est un

192
00:09:37,820 --> 00:09:40,190
composant racine et on
verra qu'on peut combiner les

193
00:09:40,390 --> 00:09:43,790
composants entre eux pour
construire des application plus complexes.

194
00:09:44,670 --> 00:09:47,480
Un composant sait se rendre en HTML
grâce à sa méthode renderCounterOn.

195
00:09:47,680 --> 00:09:52,630
Et on a un langage dédié
qui permet de générer le code

196
00:09:52,830 --> 00:09:54,170
HTML pour chacun des composants.

197
00:09:54,520 --> 00:09:57,700
Et on va revoir ce langage plus en
détails dans la prochaine séquence.