From d46fe7825d828770fbce3650d58e6624ecf9324e Mon Sep 17 00:00:00 2001
From: Thomas Fritsch <tf@kumquats.fr>
Date: Wed, 12 Feb 2020 12:46:10 +0100
Subject: [PATCH] formulaires version FC/ALT
---
C-formulaires.md | 49 +++++++++++++++++++++++++++---------------------
1 file changed, 28 insertions(+), 21 deletions(-)
diff --git a/C-formulaires.md b/C-formulaires.md
index 30f36d6..517942e 100644
--- a/C-formulaires.md
+++ b/C-formulaires.md
@@ -41,36 +41,35 @@ Pour permettre à chaque page de réagir aux événements de l'utilisateur, on v
```
## C.3. Le formulaire d'ajout de pizza
-1. **Créez la classe `AddPizzaPage`** (dans un module `js/pages/AddPizzaPage.js`). Le titre de la page devra être "Ajouter une pizza" et la méthode `render()` sera surchargée comme suit :
+1. **Créez la classe `AddPizzaPage`** (dans un module `js/pages/AddPizzaPage.js`) :
```js
- render() {
- return /*html*/ `<form class="addPizzaPage">
+ import Page from './Page.js';
+
+ export default class AddPizzaPage extends Page {
+ constructor() {
+ super('Ajouter une pizza');
+ }
+
+ render() {
+ return /*html*/ `<form class="addPizzaPage">
<label>
- Nom :
- <input type="text" name="nom" class="form-control">
+ Nom :
+ <input type="text" name="nom" class="form-control">
</label>
<button type="submit" class="btn btn-default">Ajouter</button>
- </form>`;
- }
- ```
+ </form>`;
+ }
- ***NB :** le commentaire `/*html*/` juste avant la chaîne permet à l'extension de vscodium "es6-string-html" (que vous avez installé lors du précédent TP) d'appliquer la coloration syntaxique au code html contenu dans la template string, ce qui peut être pratique pour s'y retrouver.*
+ mount(container) {}
-2. **Dans le fichier `main.js` instanciez la classe `AddPizzaPage`** puis, au "click" sur le lien "Ajouter une pizza" **affichez l'instance de `AddPizzaPage` à l'aide de `PageRenderer` :
- ```js
- // addPizzaPage est une instance de la classe AddPizzaPage
- PageRenderer.renderPage( addPizzaPage );
- ```
-3. **Ajoutez une méthode `submit()` dans la classe `AddPizzaPage`.** Cette méthode sera appelée lorsque l'utilisateur soumettra le formulaire :
- ```js
- submit(event) {
- // ici le code de votre méthode
+ submit(event) {}
}
+
```
- Cette méthode va pour le moment juste afficher un message dans la console.
- ***NB:** Souvenez vous de la méthode `event.preventDefault()`...*
-4. **Overridez la méthode `mount()` dans la classe `AddPizzaPage`** en y ajoutant un écouteur d'événement 'submit' sur la balise `<form class="addPizzaPage">` qui va déclencher la méthode `submit()` de l'instance.
+ ***NB :** le commentaire `/*html*/` juste avant la chaîne permet à l'extension de vscodium "es6-string-html" (que vous avez installé lors du précédent TP) d'appliquer la coloration syntaxique au code html contenu dans la template string, ce qui peut être pratique pour s'y retrouver.*
+
+2. **Implémentez la méthode `mount()` dans la classe `AddPizzaPage`** en y ajoutant un écouteur d'événement 'submit' sur la balise `<form class="addPizzaPage">`. Cet écouteur d'événement devra déclencher la méthode `submit()` de l'instance.
***NB :** Pour rappel, la valeur du `this` à l'intérieur d'un écouteur d'événement (fonction appelée par addEventListener) est toujours l'élément HTML qui a déclenché l'événement (ici le formulaire). Pour pouvoir appeler une méthode de l'instance, il faut forcer la valeur du `this` pour qu'elle corresponde toujours à l'instance dans laquelle le code s'exécute. Comme expliqué dans le pdf du cours, il existe plusieurs manières de le faire, mais celle que je vous recommande est l'emploi de la méthode [`bind()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) dans le constructeur de la classe :*
```js
@@ -83,6 +82,14 @@ Pour permettre à chaque page de réagir aux événements de l'utilisateur, on v
}
}
```
+3. **Implémentez la méthode `submit()` dans la classe `AddPizzaPage`.** : cette méthode va pour le moment juste afficher un message dans la console.
+ ```js
+ submit(event) {
+ // ici le code de votre méthode
+ }
+ ```
+ ***NB:** Souvenez vous de la méthode `event.preventDefault()` et vérifiez que la soumission du formulaire n'entraîne pas un rechargement de page...*
+
## C.4. La validation de la saisie
1. **Au submit, afficher dans la console la valeur saisie par l'utilisateur dans le champ "nom"**. Un sélecteur CSS qui peut être utile ici est le [sélecteur d'attributs](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors).
--
GitLab