richclient:emberjs:td1

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
richclient:emberjs:td1 [2018/01/20 15:11] – [1.3- Application] jcheronrichclient:emberjs:td1 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
Ligne 13: Ligne 13:
  
  
-<html><!--</html> +==== - Création du repository git ====
-==== -- Création du repository git ====+
  
   - Créer un dossier **ember-tds** ;   - Créer un dossier **ember-tds** ;
Ligne 21: Ligne 20:
   - Publier (commit and push) régulièrement sur github.   - Publier (commit and push) régulièrement sur github.
  
-<html>--></html> +==== - Création du projet ember ====
-===== -- Exercice : application Note =====+
  
-==== -- Objectifs ====+Créer le projet ember **td1** 
 + 
 +===== - Exercice : application Note ===== 
 + 
 +==== - Objectifs ====
   - Créer un projet   - Créer un projet
   - Créer des routes   - Créer des routes
   - Créer/manipuler les templates   - Créer/manipuler les templates
   - Créer des classes et instancier des objets   - Créer des classes et instancier des objets
-  - Mettre en oeuvre le Data-binding avec [[https://guides.emberjs.com/v2.18.0/object-model/computed-properties/|computed properties]]+  - Mettre en oeuvre le Data-binding avec [[https://guides.emberjs.com/release/object-model/computed-properties/|computed properties]]
  
-==== -- Fonctionnalités ====+==== - Fonctionnalités ====
   - Saisir une note (message textuel) et afficher le nombre de caractères restants (le message est limité à 100 caractères saisis)   - Saisir une note (message textuel) et afficher le nombre de caractères restants (le message est limité à 100 caractères saisis)
   - Enregistrer (pseudo enregistrement)   - Enregistrer (pseudo enregistrement)
Ligne 38: Ligne 40:
   - Gérer les changements de classe CSS sur l'affichage d'info   - Gérer les changements de classe CSS sur l'affichage d'info
  
-==== -- Application ====+==== - Application ====
  
 Fichier **app/routes/ex1.js** Fichier **app/routes/ex1.js**
 +
 +<sxh bash;gutter:false>
 +ember g route ex1
 +</sxh>
  
 |< 100% >| |< 100% >|
Ligne 52: Ligne 58:
 ^**Route** | **ex1** | ^**Route** | **ex1** |
 ^::: | <html><span class="method">model()</span></html>model hook, doit retourner une instance de Note | ^::: | <html><span class="method">model()</span></html>model hook, doit retourner une instance de Note |
-^Actions | <html><span class="method">save()</span></html>\\ Pseudo enregistrement (Affiche enregistrement + contenu de la note) |+ 
 +Fichier **app/controllers/ex1.js** 
 + 
 +<sxh bash;gutter:false> 
 +ember g controller ex1 
 +</sxh> 
 + 
 +^Controller | **ex1** |  
 +^Actions |<html><span class="method">save()</span></html>\\ Pseudo enregistrement (Affiche enregistrement + contenu de la note) |
 ^::: | <html><span class="method">clear()</span></html>\\ vide noteContent | ^::: | <html><span class="method">clear()</span></html>\\ vide noteContent |
  
 (*) computed property (*) computed property
-==== -- Vue ==== +==== - Vue ==== 
-=== -- helpers handlebars utilisés === +=== - helpers handlebars utilisés === 
-  * <nowiki>{{expression}}</nowiki> voir [[https://guides.emberjs.com/v2.18.0/templates/handlebars-basics/|expressions]] +  * <nowiki>{{expression}}</nowiki> voir [[https://guides.emberjs.com/release/templates/handlebars-basics/|expressions]] 
-  * <nowiki>{{textarea ...}}</nowiki> voir [[https://guides.emberjs.com/v2.18.0/templates/input-helpers/#toc_text-areas|textarea]] +  * <nowiki>{{textarea ...}}</nowiki> voir [[https://guides.emberjs.com/release/templates/input-helpers/#toc_text-areas|textarea]] 
-  * <nowiki>{{action...}}</nowiki> voir [[https://guides.emberjs.com/v2.18.0/templates/actions/|actions]] +  * <nowiki>{{action...}}</nowiki> voir [[https://guides.emberjs.com/release/templates/actions/|actions]] 
-=== -- Interface ===+=== - Interface ===
  
 {{:slam4:richclient:angularjs:ex1-note.png?400|}} {{:slam4:richclient:angularjs:ex1-note.png?400|}}
  
-=== -- Logique applicative / comportement de l'interface ===+=== - Logique applicative / comportement de l'interface ===
  
   * sur saisie dans la zone **messageNote** (textarea), le nombre de caractères restants est indiqué dans la zone **status**   * sur saisie dans la zone **messageNote** (textarea), le nombre de caractères restants est indiqué dans la zone **status**
Ligne 77: Ligne 91:
   * Sur effacement (à condition que le message ne soit pas vide) :   * Sur effacement (à condition que le message ne soit pas vide) :
     * la zone **info** disparaît      * la zone **info** disparaît 
-=== -- Test en ligne ===+=== - Test en ligne ===
  
 <html><a target="_new" href="http://angular.kobject.net/ex1" style="width:400px" class="btn">Tester l'appli <b>Note</b></a></html> <html><a target="_new" href="http://angular.kobject.net/ex1" style="width:400px" class="btn">Tester l'appli <b>Note</b></a></html>
-===== -- Exercice : Choix de services ===== +===== - Exercice : Choix de services ===== 
-==== -- Objectifs ====+==== - Objectifs ====
   - Créer des routes avec model   - Créer des routes avec model
-  - Utiliser des helpers handlebar+  - Utiliser/créer des helpers handlebar
   - Mettre en oeuvre le Data-binding   - Mettre en oeuvre le Data-binding
   - Utiliser les tableaux   - Utiliser les tableaux
  
-==== -- Fonctionnalités ====+==== - Fonctionnalités ====
   - Sélectionner/désélectionner des services   - Sélectionner/désélectionner des services
   - Calculer le montant dû   - Calculer le montant dû
   - Afficher le nombre de services sélectionnés   - Afficher le nombre de services sélectionnés
  
-==== -- Application ====+==== - Application ==== 
 + 
 +Fichier **app/route/ex2.js** 
 + 
 +<sxh bash;gutter:false> 
 +ember g route ex2 
 +</sxh>
  
 |< 100% >| |< 100% >|
-^**Route** | **ex2** (app/routes/ex2.js) | +^**Classe** | **Services**  (EmberObject.extend({})) | 
-^::: | <html><span class="method">model</span></html>\\ Retourne le tableau des services | +^::: | <html><span class="variable">services</span></html>\\ tableau des services (par défaut: []) | 
-^::: | <html><span class="method">toggleActive(service)</span></html>\\ change le statut actif du service | +^::: | <html><span class="method">countActive</span></html>\\ Retourne le nombre de services actifs (* sur services.@each.active) | 
-^**Contrôleur** | **ServicesController** (app/servicesController.js) | +^::: | <html><span class="method">sumActive</span></html>\\ Retourne le montant total correspondant aux services actifs (* sur services.@each.active) | 
-^::: | <html><span class="method">total()</span></html>\\ Calcul le total des services actifs (*) voir [[https://guides.emberjs.com/v2.18.0/object-model/computed-properties-and-aggregate-data/|computed properties and aggregate data]]| +^**Route** | **ex2** | 
-^::: | <html><span class="method">countActive()</span></html>\\ Retourne le nombre de services actifs (*) |+^::: | <html><span class="method">model()</span></html>model hook, doit retourner une instance de **Services** initialisée avec le tableau ci-dessous | 
 + 
 +Fichier **app/controllers/ex2.js** 
 + 
 +<sxh bash;gutter:false> 
 +ember g controller ex2 
 +</sxh> 
 + 
 +|< 100% >| 
 +^**Controller** | **ex2**| 
 +^Actions | <html><span class="method">toggleActive(service)</span></html>\\ Change le statut du service |
  
 (*) computed properties (*) computed properties
Ligne 106: Ligne 136:
  
 === A utiliser === === A utiliser ===
-  * [[https://www.emberjs.com/api/ember/2.16/classes/@ember%2Fobject%2Fcomputed/methods/alias?anchor=filterBy&show=inherited%2Cprotected%2Cprivate%2Cdeprecated|filterBy]] pour filtrer les services en fonction de leur propriété **active**+  * [[https://www.emberjs.com/api/ember/3.7/classes/@ember%2Fobject%2Fcomputed/methods/alias?anchor=filterBy&show=inherited%2Cprotected%2Cprivate%2Cdeprecated|filterBy]] pour filtrer les services en fonction de leur propriété **active**
   * [[https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach|forEach]] pour le parcours des services   * [[https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach|forEach]] pour le parcours des services
  
  
-**Services** : à intégrer dans le hook model()+**Services** : à passer en paramètre de l'instance de la classe Services 
 +<sxh javascript> 
 +Services.create({services: ... }); 
 +</sxh>
  
 <sxh javascript> <sxh javascript>
Ligne 134: Ligne 167:
 </sxh> </sxh>
  
-==== -- Vue ==== +==== - Vue ==== 
-=== -- helpers utilisées ===+=== - helpers utilisés ===
   * Expressions <nowiki>{{expression}}</nowiki>   * Expressions <nowiki>{{expression}}</nowiki>
 +  * <nowiki>{{#each}}{{/each}}</nowiki>
 +  * <nowiki>{{#if}}{{/if}}</nowiki>
 +  * <nowiki>{{input}}</nowiki>
 +
 +=== - helpers à créer ===
 +
 +|< 100% >|
 +^Nom ^Paramètres ^Rôle ^
 +|plural | count, zero, one, other | Formate une expression correctement en fonction de count |
 +|format-currency | value, symbol | Formate value en monétaire (2 déc + symbole € par défaut) |
 +|format-percent| value | Formate value en pourcentage (x100 + symbole %) | 
  
-=== -- Interface ===+=== - Interface ===
 {{:slam4:richclient:angularjs:td1-ex2-services.png?350&nolink|Services app}} {{:slam4:richclient:angularjs:td1-ex2-services.png?350&nolink|Services app}}
  
Ligne 147: Ligne 191:
   * La sélection/dé-sélection met à jour l'affichage du nombre de services sélectionnés, ainsi que le **total**   * La sélection/dé-sélection met à jour l'affichage du nombre de services sélectionnés, ainsi que le **total**
  
-=== -- Ajout code promo ===+=== - Ajout code promo ===
   * La saisie d'un code promo permet d'appliquer un taux de réduction au montant total (si la case est cochée et le code valide)   * La saisie d'un code promo permet d'appliquer un taux de réduction au montant total (si la case est cochée et le code valide)
   * La liste des codes est fournie en JS, elle sera a ajouter au model hook   * La liste des codes est fournie en JS, elle sera a ajouter au model hook
Ligne 160: Ligne 204:
 {{:slam4:richclient:angularjs:td1-ex2-services-promo.png?350&nolink|Services app}} {{:slam4:richclient:angularjs:td1-ex2-services-promo.png?350&nolink|Services app}}
  
-=== -- Test en ligne ===+=== - Test en ligne ===
  
 <html><a target="_new" href="http://angular.kobject.net/ex2" style="width:400px" class="btn">Tester l'appli <b>Services</b></a></html> <html><a target="_new" href="http://angular.kobject.net/ex2" style="width:400px" class="btn">Tester l'appli <b>Services</b></a></html>
  • richclient/emberjs/td1.1516457503.txt.gz
  • Dernière modification : il y a 6 ans
  • (modification externe)