Skip to content

Commit

Permalink
doing a simple pass looking for a glitch
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ducasse
Ducasse committed Aug 26, 2024
1 parent 094b05c commit 57469bf
Show file tree
Hide file tree
Showing 9 changed files with 74 additions and 74 deletions.
36 changes: 18 additions & 18 deletions Chapters/Chap06-TinyBlog-SeasideUserComponents-FR.md
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
## Des composants web pour TinyBlog


Dans ce chapitre, commençons par définir une interface publique permettant d'afficher les bulletins \(posts\) du blog. Nous raffinons cela dans le chapitre suivant.
Dans ce chapitre, commençons par définir une interface publique permettant d'afficher les bulletins (posts) du blog. Nous raffinons cela dans le chapitre suivant.

Si vous avez le sentiment d'être un peu perdu, la figure *@ApplicationArchitectureUserWithoutCategory@* vous montre les composants sur lesquels nous allons travailler dans ce chapitre.

![L'architecture des composants utilisateurs \(par opposition à administration\).](figures/ApplicationArchitectureUserWithoutCategory.pdf width=75&label=ApplicationArchitectureUserWithoutCategory)
![L'architecture des composants utilisateurs (par opposition à administration).](figures/ApplicationArchitectureUserWithoutCategory.pdf width=75&label=ApplicationArchitectureUserWithoutCategory)

Le travail présenté dans la suite est indépendant de celui sur Voyage et sur la base de données MongoDB.
Les instructions pour charger le code des chapitres précédents sont disponibles dans le chapitre *@cha:loading@*.
Expand All @@ -30,7 +30,7 @@ WAComponent subclass: #TBScreenComponent
```


Les différents composants d'interface de TinyBlog ont besoin d'accéder aux règles métier de l'application. Dans le protocole 'accessing', créons une méthode `blog` qui retourne une instance de `TBBlog` \(ici notre singleton\). Notez que cette méthode pourrait renvoyer l'instance de blog avec laquelle elle a été configurée au préalable.
Les différents composants d'interface de TinyBlog ont besoin d'accéder aux règles métier de l'application. Dans le protocole 'accessing', créons une méthode `blog` qui retourne une instance de `TBBlog` (ici notre singleton). Notez que cette méthode pourrait renvoyer l'instance de blog avec laquelle elle a été configurée au préalable.

```
TBScreenComponent >> blog
Expand All @@ -40,7 +40,7 @@ TBScreenComponent >> blog
```


Par la suite, si l'on souhaite étendre TinyBlog pour qu'un utilisateur puisse avoir plusieurs blogs, il suffira de modifier cette méthode pour utiliser des informations stockées dans la session active \(Voir `TBSession` dans le chapitre suivant\).
Par la suite, si l'on souhaite étendre TinyBlog pour qu'un utilisateur puisse avoir plusieurs blogs, il suffira de modifier cette méthode pour utiliser des informations stockées dans la session active (Voir `TBSession` dans le chapitre suivant).

Définissez la méthode `renderContentOn:` de ce composant comme suit temporairement. Notez que pour l'instant, nous n'affichons pas ce composant
donc rafraichir votre browser ne vous montre rien de nouveau et c'est normal.
Expand Down Expand Up @@ -92,7 +92,7 @@ TBApplicationRootComponent >> children
```


Si vous rafraichissez votre browser, vous allez voir l'affichage produit par le sous-composant `TBScreenComponent` qui affiche pour l'instant le texte: `Hello from TBScreenComponent` \(voir la figure *@fig:Hello@*\).
Si vous rafraichissez votre browser, vous allez voir l'affichage produit par le sous-composant `TBScreenComponent` qui affiche pour l'instant le texte: `Hello from TBScreenComponent` (voir la figure *@fig:Hello@*).

![Premier visuel du composant `TBScreenComponent`.](figures/HelloFromScreenComponent.png width=75&label=fig:Hello)

Expand Down Expand Up @@ -126,7 +126,7 @@ TBBlog createDemoPosts


Définissons une en-tête commune à toutes les pages de TinyBlog dans un composant nommé `TBHeaderComponent`.
Ce composant sera inséré dans la partie supérieure de chaque composant \(`TBPostsListComponent` par exemple\). Nous appliquons le schéma décrit ci-dessus: définition d'une classe, référence depuis la classe utilisatrice, et redéfinition de la méthode `children`.
Ce composant sera inséré dans la partie supérieure de chaque composant (`TBPostsListComponent` par exemple). Nous appliquons le schéma décrit ci-dessus: définition d'une classe, référence depuis la classe utilisatrice, et redéfinition de la méthode `children`.

Nous définissons d'abord sa classe, puis nous allons y faire référence depuis la classe qui l'utilise. Ce faisant, nous allons montrer comment un composant exprime sa relation à un sous-composant.

Expand All @@ -143,7 +143,7 @@ WAComponent subclass: #TBHeaderComponent


Complétons maintenant la classe `TBScreenComponent` afin qu'elle affiche une instance de `TBHeaderComponent`.
Pour rappel, `TBScreenComponent` est la super-classe abstraite \(nous l'utilisons directement pour l'instant\) de tous nos composants dans l'architecture finale. Cela signifie que toutes les sous-classes de `TBScreenComponent` seront des composants avec une en-tête.
Pour rappel, `TBScreenComponent` est la super-classe abstraite (nous l'utilisons directement pour l'instant) de tous nos composants dans l'architecture finale. Cela signifie que toutes les sous-classes de `TBScreenComponent` seront des composants avec une en-tête.
Pour éviter d'instancier systématiquement le composant `TBHeaderComponent` à chaque fois qu'un composant est appelé, créons et initialisons une variable d'instance `header` dans `TBScreenComponent`.

```
Expand Down Expand Up @@ -174,7 +174,7 @@ Notez que nous avons une méthode spécifique pour créer le composant en-tête.
### Relation composite-composant


En Seaside, les sous-composants d'un composant doivent être retournés par le composite en réponse au message `children`. Définissons que l'instance du composant `TBHeaderComponent` est un enfant de `TBScreenComponent` dans la hiérarchie des composants Seaside \(et non entre classes Pharo\). Dans cet exemple, nous spécialisons la méthode `children` pour qu'elle retourne une collection contenant un seul élément qui est l'instance de `TBHeaderComponent` référencée depuis la variable `header`.
En Seaside, les sous-composants d'un composant doivent être retournés par le composite en réponse au message `children`. Définissons que l'instance du composant `TBHeaderComponent` est un enfant de `TBScreenComponent` dans la hiérarchie des composants Seaside (et non entre classes Pharo). Dans cet exemple, nous spécialisons la méthode `children` pour qu'elle retourne une collection contenant un seul élément qui est l'instance de `TBHeaderComponent` référencée depuis la variable `header`.

```
TBScreenComponent >> children
Expand All @@ -185,7 +185,7 @@ TBScreenComponent >> children
### Rendu visuel de la barre de navigation


Affichons maintenant le composant dans la méthode `renderContentOn:` \(protocole 'rendering'\) :
Affichons maintenant le composant dans la méthode `renderContentOn:` (protocole 'rendering') :

```
TBScreenComponent >> renderContentOn: html
Expand Down Expand Up @@ -214,12 +214,12 @@ TBHeaderComponent >> renderBrandOn: html
```


L'en-tête \(header\) est affichée à l'aide d'une barre de navigation Bootstrap.
L'en-tête (header) est affichée à l'aide d'une barre de navigation Bootstrap.
Si vous faites un rafraichissement de l'application dans votre navigateur web vous devez voir apparaitre l'en-tête comme sur la figure *@navBlog@*.

![TinyBlog avec une barre de navigation.](figures/navBlog.png width=75&label=navBlog)

Par défaut dans une barre de navigation Bootstrap, il y a un lien sur le titre de l'application \(`tbsNavbarBrand` \) qui permet de revenir à la page de départ du site.
Par défaut dans une barre de navigation Bootstrap, il y a un lien sur le titre de l'application (`tbsNavbarBrand` ) qui permet de revenir à la page de départ du site.

#### Améliorations possibles

Expand All @@ -229,9 +229,9 @@ Le nom du blog devrait être paramétrable à l'aide d'une variable d'instance d
### Liste des posts


Créons un composant `TBPostsListComponent` pour afficher la liste des bulletins \(posts\) - ce qui reste d'ailleurs le but d'un blog. Ce composant constitue la partie publique du blog offerte aux lecteurs du blog.
Créons un composant `TBPostsListComponent` pour afficher la liste des bulletins (posts) - ce qui reste d'ailleurs le but d'un blog. Ce composant constitue la partie publique du blog offerte aux lecteurs du blog.

Pour cela, définissons une sous-classe de `TBScreenComponent` \(comme illustré dans la figure *@compt2@*\):
Pour cela, définissons une sous-classe de `TBScreenComponent` (comme illustré dans la figure *@compt2@*):

```
TBScreenComponent subclass: #TBPostsListComponent
Expand All @@ -244,7 +244,7 @@ TBScreenComponent subclass: #TBPostsListComponent

![Le composant `ApplicationRootComponent` utilise le composant `PostsListComponent`.](figures/ComponentRelationship2.pdf width=75&label=compt2)

Nous pouvons maintenant modifier le composant principal de l'application \(`TBApplicationRootComponent`\) pour qu'il affiche ce nouveau composant. Pour cela nous modifions sa méthode `initialize` ainsi:
Nous pouvons maintenant modifier le composant principal de l'application (`TBApplicationRootComponent`) pour qu'il affiche ce nouveau composant. Pour cela nous modifions sa méthode `initialize` ainsi:

```
TBApplicationRootComponent >> initialize
Expand All @@ -253,7 +253,7 @@ TBApplicationRootComponent >> initialize
```


Ajoutons également une méthode setter \(`main:`\) qui nous permettra par la suite, de changer dynamiquement le sous-composant à afficher tout en gardant le composant actuel \(instance de `TBPostsListComponent`\) par défaut.
Ajoutons également une méthode setter (`main:`) qui nous permettra par la suite, de changer dynamiquement le sous-composant à afficher tout en gardant le composant actuel (instance de `TBPostsListComponent`) par défaut.

```
TBApplicationRootComponent >> main: aComponent
Expand All @@ -262,7 +262,7 @@ TBApplicationRootComponent >> main: aComponent



Ajoutons une méthode `renderContentOn:` \(protocole rendering\) provisoire pour tester l'avancement de notre application \(voir figure *@elementary@*\). Notez que cette méthode fait un appel à la méthode `renderContentOn:` de la super-classe qui va afficher le composant en-tête.
Ajoutons une méthode `renderContentOn:` (protocole rendering) provisoire pour tester l'avancement de notre application (voir figure *@elementary@*). Notez que cette méthode fait un appel à la méthode `renderContentOn:` de la super-classe qui va afficher le composant en-tête.

```
TBPostsListComponent >> renderContentOn: html
Expand All @@ -280,7 +280,7 @@ Si vous rafraichissez la page de TinyBlog dans votre navigateur, vous devriez ob
### Le composant Post


Nous allons maintenant définir le composant `TBPostComponent` qui affiche le contenu d'un bulletin \(post\).
Nous allons maintenant définir le composant `TBPostComponent` qui affiche le contenu d'un bulletin (post).

Chaque bulletin du blog sera représenté visuellement par une instance de `TBPostComponent` qui affiche le titre, la date et le contenu d'un bulletin. Nous allons obtenir la situation décrite par la figure *@compt3@*.

Expand Down Expand Up @@ -343,7 +343,7 @@ TBPostComponent >> renderContentOn: html



### Afficher les bulletins \(posts\)
### Afficher les bulletins (posts)


Il ne reste plus qu'à modifier la méthode `renderContentOn:` de la classe `TBPostsListComponent` pour afficher l'ensemble des bulletins visibles présents dans la base.
Expand Down
26 changes: 13 additions & 13 deletions Chapters/Chap07-TinyBlog-Authentification-FR.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,15 @@ La figure *@ApplicationArchitectureAdminHeader@* montre un aperçu de l'architec
![Gérant l'authentification pour accéder à l'administration.](figures/ApplicationArchitectureAdminHeader.pdf width=75&label=ApplicationArchitectureAdminHeader)

Nous commençons par mettre en place une première version permettant de naviguer entre la partie publique TinyBlog rendue par le composant
gérant la liste des bulletins \(`TBPostsListComponent`\) et une première version de la partie d'administration du site comme sur la figure *@SimpleAdminLink@*.
gérant la liste des bulletins (`TBPostsListComponent`) et une première version de la partie d'administration du site comme sur la figure *@SimpleAdminLink@*.
Cela va nous permettre d'illustrer l'invocation de composant.

Nous intègrerons ensuite un composant d'identification sous la forme d'une boîte modale.
Cela va nous permettre d'illustrer comment la saisie de champs utilise de manière élégante les variables d'instances d'un composant.

Enfin, nous montrerons aussi comment stocker l'utilisateur connecté dans la session courante.

### Composant d'administration simple \(v1\)
### Composant d'administration simple (v1)


Définissons un composant d'administration très simple. Ce composant hérite de la classe `TBScreenComponent` comme mentionné dans un chapitre précédent et illustré dans la figure *@ApplicationArchitectureAdminHeader@*.
Expand All @@ -43,8 +43,8 @@ TBAdminComponent >> renderContentOn: html
### Ajout d'un bouton 'admin'


Ajoutons maintenant un bouton dans l'en-tête du site \(composant `TBHeaderComponent`\) afin d'accéder à la partie administration du site comme sur la figure *@SimpleAdminLink@*.
Pour cela, modifions les composants existants: `TBHeaderComponent` \(en-tête\) et `TBPostsListComponent` \(partie publique\).
Ajoutons maintenant un bouton dans l'en-tête du site (composant `TBHeaderComponent`) afin d'accéder à la partie administration du site comme sur la figure *@SimpleAdminLink@*.
Pour cela, modifions les composants existants: `TBHeaderComponent` (en-tête) et `TBPostsListComponent` (partie publique).

![Lien simple vers la partie administration.](figures/SimpleAdminLink.png width=100&label=SimpleAdminLink)

Expand Down Expand Up @@ -77,15 +77,15 @@ TBHeaderComponent >> renderSimpleAdminButtonOn: html
```


Si vous rafraichissez votre navigateur, le bouton admin est bien présent mais il n'a aucun effet pour l'instant \(voir la figure *@withAdminView1@*\).
Il faut définir un `callback:` sur ce bouton \(un bloc\) qui remplace le composant courant \(`TBPostsListComponent`\) par le composant d'administration \(`TBAdminComponent`\).
Si vous rafraichissez votre navigateur, le bouton admin est bien présent mais il n'a aucun effet pour l'instant (voir la figure *@withAdminView1@*).
Il faut définir un `callback:` sur ce bouton (un bloc) qui remplace le composant courant (`TBPostsListComponent`) par le composant d'administration (`TBAdminComponent`).

![Barre de navigation avec un button admin.](figures/withAdminView1.png width=80&label=withAdminView1)

### Revisons la barre de navigation


Commençons par réviser la définition de `TBHeaderComponent` en lui ajoutant une variable d'instance `component` pour stocker et accéder au composant courant \(qui sera soit la liste de bulletins, soit le composant d'administration\). Ceci va nous permettre de pouvoir accéder au composant depuis la barre de navigation :
Commençons par réviser la définition de `TBHeaderComponent` en lui ajoutant une variable d'instance `component` pour stocker et accéder au composant courant (qui sera soit la liste de bulletins, soit le composant d'administration). Ceci va nous permettre de pouvoir accéder au composant depuis la barre de navigation :

```
WAComponent subclass: #TBHeaderComponent
Expand Down Expand Up @@ -127,7 +127,7 @@ TBScreenComponent >> createHeaderComponent
Notez que la méthode `createHeaderComponent` est bien définie dans la superclasse
`TBScreenComponent` car elle est applicable pour toutes ses sous-classes.

Nous pouvons maintenant ajouter le callback \(message `callback:`\) sur le bouton :
Nous pouvons maintenant ajouter le callback (message `callback:`) sur le bouton :

```
TBHeaderComponent >> renderSimpleAdminButtonOn: html
Expand Down Expand Up @@ -216,7 +216,7 @@ Cliquez sur 'New Session' en bas à gauche de votre navigateur et ensuite sur le

Si vous étudiez le code précédent, vous verrez que nous avons utilisé le mécanisme `call:`/`answer:` de Seaside pour mettre en place la navigation entre les composants `TBPostsListComponent` et `TBAdminComponent`.
Le message `call:` remplace le composant courant par le composant passé en argument et lui donne le flot de calcul. Le message `answer:` retourne une valeur à cet appel et redonne le contrôle au composant appelant.
Ce mécanisme puissant et élégant est expliqué dans la vidéo 1 de la semaine 5 du Mooc \([http://rmod-pharo-mooc.lille.inria.fr/MOOC/WebPortal/co/content\_5.html](http://rmod-pharo-mooc.lille.inria.fr/MOOC/WebPortal/co/content_5.html)\).
Ce mécanisme puissant et élégant est expliqué dans la vidéo 1 de la semaine 5 du Mooc ([http://rmod-pharo-mooc.lille.inria.fr/MOOC/WebPortal/co/content\_5.html](http://rmod-pharo-mooc.lille.inria.fr/MOOC/WebPortal/co/content_5.html)).

### Composant fenêtre modale d'identification

Expand Down Expand Up @@ -368,7 +368,7 @@ TBAuthentificationComponent >> renderPasswordFieldOn: html

Deux boutons sont ajoutés en bas de la fenêtre modale.
Le bouton `'Cancel'` qui permet de fermer la fenêtre modale grâce à son attribut 'data-dismiss' et le bouton `'SignIn'` associé à un bloc de callback qui envoie le message `validate`.
La touche `enter` du clavier permet également d'activer le bouton `'SignIn'` car c'est le seul dont l'attribut 'type' a la valeur 'submit' \(ceci est réalisé par la méthode `tbsSubmitButton`\).
La touche `enter` du clavier permet également d'activer le bouton `'SignIn'` car c'est le seul dont l'attribut 'type' a la valeur 'submit' (ceci est réalisé par la méthode `tbsSubmitButton`).


```
Expand Down Expand Up @@ -404,7 +404,7 @@ TBAuthentificationComponent >> validate
### Intégration du composant d'identification


Pour intégrer notre composant d'identification, modifions le bouton 'Admin' de la barre d'en-tête \(`TBHeaderComponent`\) ainsi:
Pour intégrer notre composant d'identification, modifions le bouton 'Admin' de la barre d'en-tête (`TBHeaderComponent`) ainsi:

```
TBHeaderComponent >> renderButtonsOn: html
Expand All @@ -425,7 +425,7 @@ TBHeaderComponent >> renderModalLoginButtonOn: html
```


La méthode `renderModalLoginButtonOn:` commence par intégrer le code du composant `TBAuthentificationComponent` dans la page web \(`render:`\).
La méthode `renderModalLoginButtonOn:` commence par intégrer le code du composant `TBAuthentificationComponent` dans la page web (`render:`).
Le composant étant instancié à chaque affichage, il n'a pas besoin d'être retourné par la méthode `children`.
On ajoute également un bouton nommé 'Login' avec un pictogramme clé.
Lorsque l'utilisateur clique sur ce bouton, la boîte modale ayant l'identifiant `myAuthDialog` est affichée.
Expand Down Expand Up @@ -778,7 +778,7 @@ TBHeaderComponent >> renderButtonsOn: html
```


Vous pouvez tester dans votre navigateur en commençant une nouvelle session \(bouton 'New Session' en bas à gauche\).
Vous pouvez tester dans votre navigateur en commençant une nouvelle session (bouton 'New Session' en bas à gauche).
Une fois connecté, l'administrateur est ajouté en session.
Remarquez que le bouton déconnexion ne fonctionne plus correctement car il n'invalide pas la session.

Expand Down
Loading

0 comments on commit 57469bf

Please sign in to comment.