1
00:00:00,770 --> 00:00:03,090
Bonjour. Dans cette
séquence on va revenir sur seaside,

2
00:00:03,290 --> 00:00:06,810
et notamment sur la partie des
générations du code HTML, d'un composant.

3
00:00:07,590 --> 00:00:10,260
Donc je vous rappelle en
seaside il y a des composants.

4
00:00:10,460 --> 00:00:13,170
Tous les composants
répondent au message "render countant

5
00:00:13,370 --> 00:00:17,890
on", qui permet de générer le code
HTML qui correspond à un composant.

6
00:00:19,060 --> 00:00:22,610
Donc cette méthode a un
paramètre qui s'appelle HTML qui

7
00:00:22,810 --> 00:00:26,320
est un objet instance de la
 classe WHTML (inaudible) ou d'une

8
00:00:26,520 --> 00:00:28,890
sous-classe, qui est
spécialisée donc qui offre une API

9
00:00:29,180 --> 00:00:31,090
aux programmeurs, pour
générer des codes HTML valides.

10
00:00:32,170 --> 00:00:35,570
Donc je vous rappelle ici
le code du compteur donc cet

11
00:00:35,770 --> 00:00:38,180
objet HTML ici il est
utilisé pour générer des titres,

12
00:00:38,380 --> 00:00:40,300
des ancres, des
espaces et une autre ancre.

13
00:00:40,500 --> 00:00:41,360
D'accord !

14
00:00:41,920 --> 00:00:44,500
Donc on va revenir sur ce
langage dédié dans cette séquence.

15
00:00:46,240 --> 00:00:48,650
Donc ce langage dédié en
fait il est constitué de

16
00:00:48,850 --> 00:00:52,350
pinceau, donc brushes,
d'accord, et chaque pinceau va

17
00:00:52,550 --> 00:00:55,610
être spécialisé dans la
génération d'une balise HTML particulière.

18
00:00:56,150 --> 00:00:59,260
Donc mais avec une API qui est objet.

19
00:00:59,680 --> 00:01:01,380
D'accord !

20
00:01:01,580 --> 00:01:03,880
Et par construction
forcément, vu que j'ai utilisé des

21
00:01:04,080 --> 00:01:06,640
envois de messages à des
objets, par construction le code

22
00:01:06,840 --> 00:01:09,920
HTML généré sera toujours
valide si on ne s'est pas

23
00:01:10,120 --> 00:01:12,900
trompé dans les envois de messages.

24
00:01:15,090 --> 00:01:16,370
Je vous donne un exemple ici.

25
00:01:16,610 --> 00:01:20,390
Donc si j'utilise le langage
dédié et cet objet HTML, je

26
00:01:20,590 --> 00:01:23,360
lui envoie le message
(inaudible) donc ça ça va me rendre

27
00:01:23,560 --> 00:01:27,390
un objet, et cet objet
c'est un pinceau spécialisé dans

28
00:01:27,590 --> 00:01:30,200
la génération de
codes HTML (inaudible).

29
00:01:30,400 --> 00:01:35,310
Donc qui comprend le
message "Idea" et il comprend

30
00:01:35,510 --> 00:01:39,350
le message "With". Donc
ici ça me génère bien une

31
00:01:39,550 --> 00:01:43,460
(inaudible) avec un
attribut "Idea = Title" et puis aux

32
00:01:43,660 --> 00:01:45,120
messages (inaudible) le
paramètre, j'avais placé une

33
00:01:45,320 --> 00:01:47,810
chaîne de caractères title qui
se retrouvent dans la (inaudible).

34
00:01:49,390 --> 00:01:51,960
Je peux générer des
choses plus complexes, donc

35
00:01:52,160 --> 00:01:55,330
typiquement le message c'est
toujours le même début, donc

36
00:01:55,530 --> 00:01:59,070
HTML (inaudible), d'accord
donc c'est ici (inaudible),

37
00:01:59,820 --> 00:02:01,610
sauf qu'à l'intérieur de
cette (inaudible) je peux avoir

38
00:02:01,810 --> 00:02:04,640
plein d'autres balises. Donc
pour ça (inaudible) au lieu

39
00:02:04,840 --> 00:02:06,470
de lui passer directement
une chaîne de caractères je

40
00:02:06,670 --> 00:02:09,340
vais lui passer un bloc, et
à l'intérieur de ce bloc je

41
00:02:09,540 --> 00:02:11,750
vais pouvoir réutiliser
mon objet HTML et d'autres

42
00:02:11,950 --> 00:02:13,560
pinceaux pour générer
d'autres types de balises.

43
00:02:14,020 --> 00:02:18,790
Donc HTML span Class Item,
donc je mets une spam qui est

44
00:02:19,000 --> 00:02:21,110
un attribut classe avec un contenu.

45
00:02:24,410 --> 00:02:27,370
Je peux maintenant utiliser
des boucles puisque c'est un

46
00:02:27,570 --> 00:02:29,670
langage dédié chez
toute la puissance de Faro.

47
00:02:30,010 --> 00:02:34,290
Donc par exemple je vais générer
une liste non ordonnée, donc ici.

48
00:02:35,260 --> 00:02:40,060
Unorderer list ici "UL",
qui a un attribut Idea list.

49
00:02:40,570 --> 00:02:42,860
Et puis à l'intérieur de
cette liste non ordonnée je vais

50
00:02:43,060 --> 00:02:45,640
avoir des listes Item donc
listes items qui sont ici,

51
00:02:46,130 --> 00:02:48,290
sauf que je les ai générer
en utilisant une boucle For.

52
00:02:48,550 --> 00:02:50,930
Donc ici j'ai une boucle 1 to do.

53
00:02:51,130 --> 00:02:55,220
Donc 1 tout simple, do une
boucle classique Faro, donc je

54
00:02:55,420 --> 00:02:59,410
vais générer 5 listes Item
avec un attribut classe Item,

55
00:02:59,610 --> 00:03:03,100
donc le même attribut classe
et puis le nom de chacun des

56
00:03:03,300 --> 00:03:06,540
listes Item j'ai
concatèné le curseur de boucles

57
00:03:08,300 --> 00:03:09,720
: donc Item 1, Item
2, Item 3, Item 4.

58
00:03:12,680 --> 00:03:14,650
On peut aller encore
un petit cran plus loin.

59
00:03:14,910 --> 00:03:17,060
On pourrait dire en fait
je voudrais des classes CSS

60
00:03:17,260 --> 00:03:21,770
différentes pour chacune des
listes Items, en fonction de

61
00:03:22,110 --> 00:03:23,650
si le curseur de
boucles est pair ou impair.

62
00:03:24,470 --> 00:03:27,080
Donc typiquement par
exemple ici je vais utiliser le

63
00:03:27,280 --> 00:03:31,860
message "classe if", donc
ajoute cette classe si cette

64
00:03:32,060 --> 00:03:35,000
condition est vérifiée ou
alors ajoute cette classe CSS

65
00:03:35,550 --> 00:03:37,000
si cette condition est vérifiée.

66
00:03:37,340 --> 00:03:40,080
Et on peut voir que dans
le code généré on a bien le

67
00:03:40,280 --> 00:03:45,180
premier list Item qui a
cette classe CSS là, Item on, et

68
00:03:45,380 --> 00:03:47,810
le deuxième list Item
qui à cette classe CSS là.

69
00:03:49,110 --> 00:03:51,690
Donc là c'est un élément
pair, impair, et cetera et cetera.

70
00:03:52,860 --> 00:03:55,800
Donc on voit qu'ici on a une
syntaxe concise qui utilise

71
00:03:56,000 --> 00:03:57,600
toute la puissance de Faro
pour générer le code HTML

72
00:03:58,150 --> 00:03:59,190
grâce à ce langage dédié.

73
00:04:00,820 --> 00:04:03,160
Donc ce langage dédié il a
une autre propriété c'est qu'il

74
00:04:03,360 --> 00:04:05,390
est extensible, donc il est
facile de lui faire supporter

75
00:04:05,590 --> 00:04:07,920
les Frameworks CSS
modernes tels que le Framework CSS

76
00:04:08,120 --> 00:04:11,750
Tweeter Boot strap par
exemple. Donc ce Framework CSS

77
00:04:11,950 --> 00:04:14,430
utilise des classes CSS
pour générer des éléments HTML

78
00:04:14,630 --> 00:04:19,440
qui sont jolis, donc par
exemple des Champs de vert, bleu

79
00:04:19,640 --> 00:04:20,400
et cetera et cetera.

80
00:04:20,600 --> 00:04:23,130
Et comment ça marche pour
étendre ce langage dédié?

81
00:04:23,400 --> 00:04:27,390
On va avoir des pinceaux
particuliers donc ici ils sont

82
00:04:27,590 --> 00:04:28,740
tous préfixés par TBS.

83
00:04:28,940 --> 00:04:30,260
TBS ça veut dire Tweeter Boot strap.

84
00:04:30,460 --> 00:04:34,440
. Donc mon objet HTML je lui
envoie le message TBS alerte

85
00:04:34,950 --> 00:04:38,350
pour dire génère une Dive
HTML, ou un élément HTML,

86
00:04:38,640 --> 00:04:40,430
conforme aux
Framework Tweeter Boot strap.

87
00:04:43,620 --> 00:04:47,840
Donc il y va y en avoir
plein des pinceaux relatifs à ce

88
00:04:48,040 --> 00:04:50,460
Framework Tweeter Boot
strap, donc je peux générer des

89
00:04:50,660 --> 00:04:52,670
éléments de type
boutons ou TPS Button.

90
00:04:53,190 --> 00:04:56,450
Des TPS button groupe pour
faire des groupes de boutons

91
00:04:56,650 --> 00:04:59,270
on voit que les 3 boutons
sont liés dans un même groupe,

92
00:04:59,660 --> 00:05:00,480
et cetera et cetera.

93
00:05:02,560 --> 00:05:05,080
Donc par exemple si on
reprend l'exemple du compteur qu'on

94
00:05:05,280 --> 00:05:08,000
avait dans la séquence
précédente, donc on avait défini

95
00:05:08,200 --> 00:05:10,120
un compteur tout simple et
maintenant je veux faire la

96
00:05:10,320 --> 00:05:12,260
version tweeter Boot
strap de ce compteur-là.

97
00:05:12,670 --> 00:05:13,750
Donc c'est extrêmement facile.

98
00:05:14,040 --> 00:05:15,940
Je vais faire une
sous-classe de mon compteur précédent

99
00:05:16,140 --> 00:05:21,070
que je vais appeler "Wa
Tweeter countant" Je vais passer

100
00:05:21,270 --> 00:05:25,790
du côté classe de cette classe

101
00:05:26,220 --> 00:05:28,260
et je vais définir la
méthode (inaudible) dans lequel je

102
00:05:28,460 --> 00:05:31,930
vais déclarer attention ce
composant-là va utiliser la

103
00:05:32,130 --> 00:05:37,000
bibliothèque TBS
développement (inaudible), et TBS

104
00:05:37,200 --> 00:05:41,790
(inaudible). Donc c'est le
Framework (inaudible) et le

105
00:05:42,000 --> 00:05:42,750
Framework CSS.

106
00:05:46,000 --> 00:05:50,190
Ensuite je vais revenir
côtéinstance de cette classe et

107
00:05:50,390 --> 00:05:52,380
je vais définir la nouvelle
méthode render countant on,

108
00:05:52,580 --> 00:05:54,140
vous pouvez redéfinir
celle qu'on avait défini

109
00:05:54,340 --> 00:05:57,500
précédemment, et je vais utiliser des
pinceaux qui commencent tous par TBS.

110
00:05:58,470 --> 00:06:02,170
Donc TBS Button group, TBS
Button, et cetera et cetera.

111
00:06:02,490 --> 00:06:05,320
Mais ça ne va rien changer à
mon code classique donc c'est

112
00:06:05,520 --> 00:06:10,060
toujours des Call Back vous voyez
avec Self Increase, et Self Decrease.

113
00:06:10,400 --> 00:06:11,160
Ça ne change absolument rien.

114
00:06:11,370 --> 00:06:16,280
D'accord! Donc c'est juste
les pinceaux de rendu du code

115
00:06:16,480 --> 00:06:18,050
HTML qui utilisent TBS.

116
00:06:19,740 --> 00:06:22,420
Maintenant on peut voir la
nouvelle apparence de mon compteur.

117
00:06:22,660 --> 00:06:25,860
On voit que j'ai utilisé un
Button group avec 2 boutons

118
00:06:26,060 --> 00:06:28,430
plus et moins, il y a un
joli badge pour afficher la

119
00:06:28,630 --> 00:06:31,220
valeur du compteur qui est la
version Boot strap de mon compteur.

120
00:06:34,600 --> 00:06:36,600
Mais vous pouvez aller encore
plus loin en fait, vous n'êtes

121
00:06:36,800 --> 00:06:38,430
pas obligé d'utiliser Boot
strap vous pouvez définir

122
00:06:38,630 --> 00:06:40,860
votre propre règle de
style sur votre compteur.

123
00:06:41,140 --> 00:06:45,750
Par exemple ici j'ai décidé
de dire que tous les éléments

124
00:06:46,110 --> 00:06:50,180
qui sont impairs (inaudible),
vont avoir la classe (inaudible).

125
00:06:51,470 --> 00:06:53,500
En fait à chaque fois que
je rends la valeur de mon

126
00:06:53,700 --> 00:06:57,950
compteurici sous la forme
d'un TBS badge, donc qu'est-ce

127
00:06:58,150 --> 00:06:59,390
qui va être affiché ?

128
00:06:59,590 --> 00:07:02,020
Ça va être la valeur de mon
compteur, sauf que je vais

129
00:07:02,220 --> 00:07:06,500
rajouter la classe CSS
(inaudible) ici, seulement si la

130
00:07:06,700 --> 00:07:07,460
valeur est impaire.

131
00:07:07,660 --> 00:07:09,570
D'accord !Donc ici 7.

132
00:07:10,810 --> 00:07:14,270
Donc cette classe CSS a été ajoutée
seulement si cette condition est vraie.

133
00:07:16,290 --> 00:07:18,440
Et comment j'ai défini
la classe CSS (inaudible).

134
00:07:18,830 --> 00:07:21,940
En fait je peux définir la
méthode style sur mon compteur

135
00:07:22,140 --> 00:07:23,940
qui va rendre une chaîne de
caractères avec les règles de

136
00:07:24,140 --> 00:07:25,300
style CSS qui vont s'appliquer.

137
00:07:25,500 --> 00:07:27,030
Donc point (inaudible) color red.

138
00:07:27,230 --> 00:07:30,050
Donc la valeur du compteur va
passer en rouge si elle est impaire.

139
00:07:31,490 --> 00:07:34,940
Donc en conclusion: un
composant, une application Web

140
00:07:35,150 --> 00:07:37,230
seaside c'est un composant racine.

141
00:07:37,840 --> 00:07:40,610
Tous les composants savent
se rendre en HTLM grâce à leur

142
00:07:40,810 --> 00:07:41,700
méthode render countant on.

143
00:07:42,530 --> 00:07:45,830
Et on a un langage dédié
qui extrêmement puissant et

144
00:07:46,030 --> 00:07:49,120
extensible qui permet
d'écrire cette génération de codes

145
00:07:49,320 --> 00:07:53,290
HTML très simplement,
grâce à des pinceaux et grâce

146
00:07:54,140 --> 00:07:56,430
à une extensibilité pour
supporter les Framework CSS

147
00:07:56,630 --> 00:07:59,720
existants, tels que Boot strap,
(inaudible), et cetera et cetera.

148
00:08:00,850 --> 00:08:03,680
Et vous profitez en fait de
toute la puissance de ce qui

149
00:08:03,880 --> 00:08:06,000
(inaudible) Faro, donc
les boucles et cetera, pour

150
00:08:06,200 --> 00:08:07,810
pouvoir facilement
générer un ensemble d'éléments.