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 renderCounterOn,
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 WAHtmlCanvas 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 Counter 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 div 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 div.
Donc qui comprend le message "Id" et il comprend
le message "With". Donc ici ça me génère bien une div
avec un attribut "Id = Title" et puis au message div
le paramètre, j'avais placé une chaîne de caractères
title qui se retrouvent dans la div.
Je peux générer des choses plus complexes, donc
typiquement le message c'est toujours le même début, donc
HTML div id:list, d'accord donc c'est ici div, sauf qu'à
l'intérieur de cette div je peux avoir plein d'autres balises.
Donc pour ça with au lieu de lui passer directement une
chaîne de caractères je vais lui passer un block, et à l'intérieur
de ce block 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 Pharo.
Donc par exemple je vais générer une liste non ordonnée, donc ici.
UnordererList ici "ul", qui a un attribut Id list.
Et puis à l'intérieur de cette liste non ordonnée je vais
avoir des listItem donc listitem qui sont ici, sauf que
je les ai générées en utilisant une boucle For.
Donc ici j'ai une boucle 1 to do.
Donc 1 tout simple, do une boucle classique Pharo, 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 listeItem 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 listeItems, en fonction de
si le curseur de boucles est pair ou impair.
Donc typiquement par exemple ici je vais utiliser le
message "class 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 listItem qui a cette classe CSS là, Itemodd, et
le deuxième list Item qui à cette classe CSS là.
Donc là c'est un élément pair, impair, et cetera et caetera.
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 Bootstrap 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 vert, bleu et
caetera et caetera.
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 BootStrap.
. Donc mon objet HTML je lui envoie le message tbsAlert
pour dire génère une div HTML, ou un élément HTML,
conforme aux Framework Tweeter BootStrap.
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 tbsButton.
Des Tbsbutton group pour faire des groupes de boutons on
voit que les 3 boutons sont liés dans un même groupe, et caetera et caetera.
Donc par exemple si on reprend l'exemple du Counter qu'on
avait dans la séquence précédente, donc on avait défini
un Counter tout simple et maintenant je veux faire la
version tweeter Bootstrap de ce Counter là.
Donc c'est extrêmement facile.
Je vais faire une sous-classe de mon compteur précédent
que je vais appeler "WATwitterCounter" Je vais passer
du côté classe de cette classe
et je vais définir la méthode initialize dans lequel je
vais déclarer attention ce composant-là va utiliser la
bibliothèque TbsDevelopmentLibrary, JQDeploymentLibrary.
Donc c'est le Framework Javascript et le Framework CSS.
Ensuite je vais revenir côté instance de cette classe et
je vais définir la nouvelle méthode renderCounterOn, 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 TbsButtongroup, TbsButton, et caetera et caetera.
Mais ça ne va rien changer à mon code classique donc c'est
toujours des Callback 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 Counter.
On voit que j'ai utilisé un ButtonGroup avec 2 boutons +
et -, il y a un joli badge pour afficher la valeur du
Counter qui est la version Boot strap de mon Counter.
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 odd, vont avoir la classe odd.
En fait à chaque fois que je rends la valeur de mon
Counter ici sous la forme d'un tbsBadge, donc qu'est-ce
qui va être affiché ?
Ça va être la valeur de mon Counter, sauf que je vais
rajouter la classe CSS odd 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 odd.
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 odd 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 renderCounterOn. 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, jQuery
UI, et caetera et caetera.
Et vous profitez en fait de toute la puissance de ce qui
stripping Pharo, donc les boucles et caetera, pour
pouvoir facilement générer un ensemble d'éléments.