Bonjour. Dans cette séquence on va revenir sur seaside,
et notamment sur la partie des générations du code HTML, d'un composant.
Donc je vous rappelle en seaside il y a des composants.
Tous les composants répondent au message "render countant
on", qui permet de générer le code HTML qui correspond à un composant.
Donc cette méthode a un paramètre qui s'appelle HTML qui
est un objet instance de la classe WHTML (inaudible) ou d'une
sous-classe, qui est spécialisée donc qui offre une API
aux programmeurs, pour générer des codes HTML valides.
Donc je vous rappelle ici le code du compteur donc cet
objet HTML ici il est utilisé pour générer des titres,
des ancres, des espaces et une autre ancre.
D'accord !
Donc on va revenir sur ce langage dédié dans cette séquence.
Donc ce langage dédié en fait il est constitué de
pinceau, donc brushes, d'accord, et chaque pinceau va
être spécialisé dans la génération d'une balise HTML particulière.
Donc mais avec une API qui est objet.
D'accord !
Et par construction forcément, vu que j'ai utilisé des
envois de messages à des objets, par construction le code
HTML généré sera toujours valide si on ne s'est pas
trompé dans les envois de messages.
Je vous donne un exemple ici.
Donc si j'utilise le langage dédié et cet objet HTML, je
lui envoie le message (inaudible) donc ça ça va me rendre
un objet, et cet objet c'est un pinceau spécialisé dans
la génération de codes HTML (inaudible).
Donc qui comprend le message "Idea" et il comprend
le message "With". Donc ici ça me génère bien une
(inaudible) avec un attribut "Idea = Title" et puis aux
messages (inaudible) le paramètre, j'avais placé une
chaîne de caractères title qui se retrouvent dans la (inaudible).
Je peux générer des choses plus complexes, donc
typiquement le message c'est toujours le même début, donc
HTML (inaudible), d'accord donc c'est ici (inaudible),
sauf qu'à l'intérieur de cette (inaudible) je peux avoir
plein d'autres balises. Donc pour ça (inaudible) au lieu
de lui passer directement une chaîne de caractères je
vais lui passer un bloc, et à l'intérieur de ce bloc je
vais pouvoir réutiliser mon objet HTML et d'autres
pinceaux pour générer d'autres types de balises.
Donc HTML span Class Item, donc je mets une spam qui est
un attribut classe avec un contenu.
Je peux maintenant utiliser des boucles puisque c'est un
langage dédié chez toute la puissance de Faro.
Donc par exemple je vais générer une liste non ordonnée, donc ici.
Unorderer list ici "UL", qui a un attribut Idea list.
Et puis à l'intérieur de cette liste non ordonnée je vais
avoir des listes Item donc listes items qui sont ici,
sauf que je les ai générer en utilisant une boucle For.
Donc ici j'ai une boucle 1 to do.
Donc 1 tout simple, do une boucle classique Faro, donc je
vais générer 5 listes Item avec un attribut classe Item,
donc le même attribut classe et puis le nom de chacun des
listes Item j'ai concatèné le curseur de boucles
: donc Item 1, Item 2, Item 3, Item 4.
On peut aller encore un petit cran plus loin.
On pourrait dire en fait je voudrais des classes CSS
différentes pour chacune des listes Items, en fonction de
si le curseur de boucles est pair ou impair.
Donc typiquement par exemple ici je vais utiliser le
message "classe if", donc ajoute cette classe si cette
condition est vérifiée ou alors ajoute cette classe CSS
si cette condition est vérifiée.
Et on peut voir que dans le code généré on a bien le
premier list Item qui a cette classe CSS là, Item on, et
le deuxième list Item qui à cette classe CSS là.
Donc là c'est un élément pair, impair, et cetera et cetera.
Donc on voit qu'ici on a une syntaxe concise qui utilise
toute la puissance de Faro pour générer le code HTML
grâce à ce langage dédié.
Donc ce langage dédié il a une autre propriété c'est qu'il
est extensible, donc il est facile de lui faire supporter
les Frameworks CSS modernes tels que le Framework CSS
Tweeter Boot strap par exemple. Donc ce Framework CSS
utilise des classes CSS pour générer des éléments HTML
qui sont jolis, donc par exemple des Champs de vert, bleu
et cetera et cetera.
Et comment ça marche pour étendre ce langage dédié?
On va avoir des pinceaux particuliers donc ici ils sont
tous préfixés par TBS.
TBS ça veut dire Tweeter Boot strap.
. Donc mon objet HTML je lui envoie le message TBS alerte
pour dire génère une Dive HTML, ou un élément HTML,
conforme aux Framework Tweeter Boot strap.
Donc il y va y en avoir plein des pinceaux relatifs à ce
Framework Tweeter Boot strap, donc je peux générer des
éléments de type boutons ou TPS Button.
Des TPS button groupe pour faire des groupes de boutons
on voit que les 3 boutons sont liés dans un même groupe,
et cetera et cetera.
Donc par exemple si on reprend l'exemple du compteur qu'on
avait dans la séquence précédente, donc on avait défini
un compteur tout simple et maintenant je veux faire la
version tweeter Boot strap de ce compteur-là.
Donc c'est extrêmement facile.
Je vais faire une sous-classe de mon compteur précédent
que je vais appeler "Wa Tweeter countant" Je vais passer
du côté classe de cette classe
et je vais définir la méthode (inaudible) dans lequel je
vais déclarer attention ce composant-là va utiliser la
bibliothèque TBS développement (inaudible), et TBS
(inaudible). Donc c'est le Framework (inaudible) et le
Framework CSS.
Ensuite je vais revenir côtéinstance de cette classe et
je vais définir la nouvelle méthode render countant on,
vous pouvez redéfinir celle qu'on avait défini
précédemment, et je vais utiliser des pinceaux qui commencent tous par TBS.
Donc TBS Button group, TBS Button, et cetera et cetera.
Mais ça ne va rien changer à mon code classique donc c'est
toujours des Call Back vous voyez avec Self Increase, et Self Decrease.
Ça ne change absolument rien.
D'accord! Donc c'est juste les pinceaux de rendu du code
HTML qui utilisent TBS.
Maintenant on peut voir la nouvelle apparence de mon compteur.
On voit que j'ai utilisé un Button group avec 2 boutons
plus et moins, il y a un joli badge pour afficher la
valeur du compteur qui est la version Boot strap de mon compteur.
Mais vous pouvez aller encore plus loin en fait, vous n'êtes
pas obligé d'utiliser Boot strap vous pouvez définir
votre propre règle de style sur votre compteur.
Par exemple ici j'ai décidé de dire que tous les éléments
qui sont impairs (inaudible), vont avoir la classe (inaudible).
En fait à chaque fois que je rends la valeur de mon
compteurici sous la forme d'un TBS badge, donc qu'est-ce
qui va être affiché ?
Ça va être la valeur de mon compteur, sauf que je vais
rajouter la classe CSS (inaudible) ici, seulement si la
valeur est impaire.
D'accord !Donc ici 7.
Donc cette classe CSS a été ajoutée seulement si cette condition est vraie.
Et comment j'ai défini la classe CSS (inaudible).
En fait je peux définir la méthode style sur mon compteur
qui va rendre une chaîne de caractères avec les règles de
style CSS qui vont s'appliquer.
Donc point (inaudible) color red.
Donc la valeur du compteur va passer en rouge si elle est impaire.
Donc en conclusion: un composant, une application Web
seaside c'est un composant racine.
Tous les composants savent se rendre en HTLM grâce à leur
méthode render countant on.
Et on a un langage dédié qui extrêmement puissant et
extensible qui permet d'écrire cette génération de codes
HTML très simplement, grâce à des pinceaux et grâce
à une extensibilité pour supporter les Framework CSS
existants, tels que Boot strap, (inaudible), et cetera et cetera.
Et vous profitez en fait de toute la puissance de ce qui
(inaudible) Faro, donc les boucles et cetera, pour
pouvoir facilement générer un ensemble d'éléments.