Bonjour. Donc on va voir dans cette séquence le Framework
web Seaside, qui est un Framework innovant pour
construire des applications Web, en Pharo.
Donc il est extrêmement puissant et permet de construire
des applications complexes. On verra que la notion
centrale c'est une notion de composantes qui est
réutilisable et avec états, construit au-dessus d'un
protocole sans état qui est http classiquement dans les applications Web.
Donc Seaside bien sûr il est sécurisé par défaut, il
supporte toutes les dernières nouveautés Web 2 0, Ajax et
caetera et ainsi les architectures REST.
Donc vous avez le site Web de Seaside sur lequel vous
pouvez aller voir de la documentation, notamment le livre
gratuit de Seaside qui est en ligne.
Et puis vous trouverez un ensemble de tutoriaux sur
Seaside, et enfin je vous conseille d'aller voir la
mailing list Seaside où vous pouvez poser vos questions
et il y a une communauté active qui répond à toutes les
questions qui pourraient survenir.
Donc un peu d'histoire.
Seaside c'est en production depuis 2002.
Il est activement maintenu et puis c'est aussi un un des
Frameworks qui est à la base de nombreux success stories
en Pharo; vous pouvez aller voir le site Web de Pharo et
notamment ce lien-là, vous verrez il y a de nombreux
projets Web, et dans la plupart de ces projets Web ils
utilisent le Framework seaside.
Donc comme je le disais seaside c'est un Framework Web
centré autour de la notion de composants.
Donc les composants seront réutilisables et avec état.
D'accord! Et on va avoir un langage dédié qui va nous
permettre de facilement rendre ces composants en HTML.
Ensuite on aura des règles de composition de ces composants.
On conviendra il y en a plusieurs et on les explicitera
dans une prochaine séquence. Une application Web c'est
uniquement un composant racines, on va être capable de
débugger les applications Web en live directement dans le débugger Pharo.
Et puis vous aurez une séquence prochaine qui va vous
expliciter comment faire pour générer automatiquement les
formulaires, notamment pour ne pas à avoir à
les écrire à la main.
Donc quelques-uns des exemples d'applications construites
avec Seaside, qui sont en production depuis 2002.
Donc si on fait un zoom, on a d'autres, donc ici on voit
une application qui utilise énormément des graphiques,
donc plein de composants qui sont imbriqués les uns dans
les autres pour construire une application complexe.
Je vous donne un autre exemple d'une application donc
vous pouvez les retrouver sur le site Web de Pharo, donc
où on a vraiment des tableaux de reporting qui sont assez
complexes et imbriqués les uns dans les autres, et on
peut construire ça vraiment simplement avec le Framework Seaside.
Donc en Seaside la notion centrale comme je vous disais c'est
la notion de composants. Donc un composant ce n'est ni
plus ni moins qu'une sous-classe de la classe
WAComponent, fournie par le Framework Seaside.
Un composant donc il est réutilisable et avec états et
seront en HTML par exemple sous la forme de div et caetera.
Donc une application Web en Seaside ce n'est ni plus ni
moins qu'un composant racine, donc ici par exemple
WACounter, qu'on va enregistrer dans le système comme une
application Web sous le nom Counter.
Donc on pourra y accéder ensuite dans l'url avec le nom Counter.
Donc voici un exemple ici donc mon application Counter
dans l'url, c'est un composant qui s'est rendu ici en
HTML, donc la valeur du Counter, et ici on a 2 liens "tac
plus plus" donc je peux cliquer dessus ça va incrémenter
la valeur du Counter, et "moins moins" si je clique
dessus ça va décrémenter la valeur du Counter.
Donc maintenant je vais vous expliciter le code pour
implémenter cette application Web.
Il extrêmement simple.
Je vais faire une sous-classe de WA contenant que j'appelle
WACounter, cette classe elle va avoir une variable d'instance: count.
Une méthode d'initialisation pour utiliser la valeur du Counter à 0.
Une méthode d'incrément pour augmenter la valeur du
Counter, une méthode de décrément. En fait ce qui nous
manque maintenant c'est la partie HTML.
Donc comment on va décrire que ce Counter est incapable
de se rendre en HTML? Mais en fait il va falloir juste
le doter d'une méthode renderContentOn, qui est un
paramètre, et ce paramètre va nous aider à générer ce code HTML.
Donc voici l'exemple.
Donc ici j'ajoute la méthode renderContentOn à la classe
Counter et je me sers du paramètre, d'accord, donc qui
est un objet classique Pharo, instance de la classe
WHtmlCanvas, qui est fournie par Seaside, et je vais
envoyer des messages à cet objet pour générer le code HTML.
Donc je peux générer un titre, générer une ancre donc une
ancre c'est un lien, et ici je suis capable de spécifier
à quel message callback, quand je clique sur ce lien
exécute ce block de codes.
Donc ici quand je clique sur le lien qui s'appelle "+ +",
ça va exécuter la méthode self increase du Counter, et
quand je clique sur le lien "- -" ça va exécuter la
méthode Self decrease du Counter.
Tout simple.
On peut aller plus loin.
Donc si une erreur survient pendant que je clique sur un
lien, c'est-à-dire que dans un callback ici j'ai
introduit sciemment un point d'arrêt.
Ça pourrait être une erreur mais j'introduis vraiment un
point d'arrêt dans la méthode Decrease, donc selfhaltIf.
Donc si le counter est décrémenté et passe sous 0 dans ce
cas-là je déclenche l'apparition du débugger.
Et donc on voit que si je fais ça dans mon application
Web j'ai bien le débugger ici qui s'affiche, et on voit
bien la pile d'exécution du programme ici, avec la
méthode renderCounterOn, et le decrease ici.
Donc on s'est bien arrêté sur le haltIf.
Donc ici je peux modifier directement le code de mon
application, appuyer sur le bouton Proceed et mon
navigateur va recevoir la réponse HTML comme si rien ne s'était passé.
Donc un autre problème dans les applications Web c'est le
problème du Back Button. Donc l'idée c'est que quand l'utilisateur
clique sur le Back Button ça désynchronise l'état entre
le serveur et le client. Donc un exemple: imaginons que
j'incrémente 5 fois mon compteur, donc il vaut 5, devant
moi j'ai 5 qui est affiché. Je clique sur le bouton
Retour de mon navigateur. Donc je vais voir la valeur 4.
Par contre le serveur n'est pas au courant que j'ai
cliqué sur ce bouton Retour. Et donc si je reclique sur
"Incrémenter la valeur du compteur" moi je vais voir la réponse 6.
Donc ça c'est un problème puisque le côté serveur il
pensait qu'il était toujours à 5, donc incrémenté on passe à 6.
Comment gérer ça en Seaside ?
C'est extrêmement simple.
On va définir une nouvelle méthode sur la classe Counter
qui est la méthode States, donc qui va retourner l'ensemble
des objets dont il faut préserver l'état quand on clique
sur le bouton Retour. Donc en l'occurrence uniquement l'objet
Self c'est le compteur courant.
D'accord! Et maintenant si je fais le bouton Retour et
que je reclique sur Increment, j'aurai bien la valeur 5
dans l'exemple précédent.
Donc les Callback en fait c'est des blocks de codes
dans lesquels on a toute la puissance de Pharo.
Donc ici dans un Callback je peux écrire n'importe quel code Pharo.
Donc ici j'ai pris un exemple plus complexe où cette fois
je peux utiliser une alternative pour dire J'incrémente
le Counter d'un cran ou de 2 crans en fonction si c'est
un nombre pair ou impair par exemple.
Mon Counter va s'incrémenter plus vite dans un cas au
lieu de s'incrémenter que d'une fois.
Donc on voit qu'on a vraiment une puissance grande dans
ces blocks de Callback.
Donc par exemple dans l'exemple précédent, donc si je
clique sur "+ +" ici donc ça va bien arriver
sur une nouvelle fenêtre qui me dit que c'est un nombre pair.
Je vous montre un autre exemple.
Donc cette fois c'est une application dans laquelle l'utilisateur
va rentrer son prénom.
On aimerait que l'utilisateur puisse rentrer son prénom
et quand il clique sur le bouton Say hello ici, on
voudrait lui afficher une chaîne de caractères qui est
"Hi" et son prénom, le prénom qu'il a rentré au début ici.
D'accord! Donc comment je peux faire pour écrire cette
application-là en Seaside ?
Extrêmement simple.
Je vais faire une sous-classe de la classe WAComplement,
que je vais doter d'une variable d'instances username.
Et dans la méthode renderContentOn, celle que je vous
montre ici, je vais juste afficher donc le champ username
et je vais dire un texte Input.
Donc un texte Input c'est le champ de texte que vous avez
vu tout à l'heure dans lequel l'utilisateur pouvait écrire "Bob".
Et je vais avoir un Callback, cette fois le Callback c'est
un block qui est a un paramètre Value.
Donc le paramètre Value ce block ça sera la chaîne de
caractères qu'a rentrée l'utilisateur dans le champ
texte, donc Bob dans notre exemple.
Et on va être capable de stocker cette chaîne de
caractères dans la variable d'instances du composant "Peter" donc username.
Et ensuite quand on va cliquer sur le SubmitButton on va
dire quand je clique sur le bouton je veux être capable
self inform, donc là je vais appeler un nouveau composant
dans lequel je vais dire "Affiche la chaîne Hi Bob".
Donc je concatène la chaîne de caractères avec le champ
Hi avec ce qu'il avait rentré dans le champ texte avant.
Donc j'espère que vous avez remarqué que, pour ceux qui
ont l'habitude de faire des applications Web, en Seaside
je n'ai pas parlé de découpage de requêtes, est-ce qu'y a
des paramètres dans la requête dans l'URL et caetera.
Je n'ai pas parlé de configuration fichier avec ses mails
compliqués, je n'ai pas parlé de fichiers, je n'ai pas
parlé de pages, je n'ai pas parlé de liens vers la page suivante.
En fait j'ai uniquement parlé de composants, d'objets, de
messages, de Callback et de la possibilité de débugger
directement du Code grâce au débugger Pharo.
Donc en résumé ce qu'il faut retenir c'est qu'une
application Web en Seaside c'est facile, c'est un
composant racine et on verra qu'on peut combiner les
composants entre eux pour construire des application plus complexes.
Un composant sait se rendre en HTML grâce à sa méthode renderCounterOn.
Et on a un langage dédié qui permet de générer le code
HTML pour chacun des composants.
Et on va revoir ce langage plus en détails dans la prochaine séquence.