Différences

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

--- richclient:emberjs:td2 [2018/02/07 12:19] – [TD n°2] jcheron
+++ richclient:emberjs:td2 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 4: / Ligne 4: @@
 |< 100% >|
 | {{::ember.png?150|}} | Tous les exercices utilisent [[https://getbootstrap.com|Bootstrap]] pour la partie CSS. <sxh bash;gutter:false> ember install ember-bootstrap </sxh> |
-| ::: | Pour passer à la v4 de bootstrap (sass requis) : <sxh bash;gutter:false> npm install --save-dev ember-cli-sass
-ember generate ember-bootstrap --bootstrap-version=4</sxh> |
 | ::: | pour les fonts : <sxh bash;gutter:false>ember install ember-font-awesome</sxh> |
 <html></div></html>
@@ Ligne 12: / Ligne 10: @@
 __**Prérequis :**__
   * [[richclient:emberjs:bases]]
+  * [[richclient:emberjs:modelobjet:computed]]
+  * [[richclient:emberjs:templates:actions]]
 <html></div></html>
 Créer le projet **td2**
-===== -- Exercice : choix multiples =====
+===== - Exercice : choix multiples =====
-==== -- Objectifs ====
+==== - Objectifs ====
-  - Model objet
+  - Création de Computed properties
-  - Computed properties
+  - Manipulation de Tableaux d'objets
-  - Tableaux d'objets
+  - Création de helper et de component
-==== -- Fonctionnalités ====
+==== - Fonctionnalités ====
   - Lister les produits disponibles
   - Ajouter un ou plusieurs produits disponibles aux produits sélectionnés
@@ Ligne 31: / Ligne 31: @@
-==== -- Application/Contrôleurs ====
+==== - Helper/component ====
+Création d'un composant permettant d'afficher une liste HTML composée d'un tableau d'éléments :
+Créer le helper **array-contains**
+<sxh bash;gutter:false>
+ember g helper array-contains
+</sxh>
+<sxh javascript;title:app/helpers/array-contains.js>
+import Ember from 'ember';
+export function arrayContains(params) {
+  const [items, value] = params;
+  return items.includes(value);
+}
+export default Ember.Helper.helper(arrayContains);
+</sxh>
+Créer le composant **multi-select** :
+<sxh bash;gutter:false>
+ember g component multi-select
+</sxh>
+<wrap info>Composant modifié le 12/02/2019 16h53</wrap>
+<sxh javascript;title:app/components/multi-select.js>
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import $ from 'jquery'
+export default Component.extend({
+  tagName: 'select',
+  classNames: ['form-control'],
+  selectedIds:[],
+  attributeBindings: ['multiple','size'],
+  multiple: true,
+  size: 10,
+  selectedElements: computed('selectedIds.[]', function() {
+    return this.get('selectedIds').map((id) => {
+      return this.get('elements').findBy('id', id);
+    });
+  }),
+  change(event){
+    const selectedIds = $(event.target).val();
+    this.set('selectedIds', selectedIds || []);
+  },
+  doubleClick(event){
+      const selected = $(event.target).val();
+      this.sendAction('dblClick',selected,this.get('id'));
+  }
+});
+</sxh>
+Template :
+<sxh html;title:app/templates/components/multi-select.hbs>
+  {{#each elements as |elm|}}
+    <option value={{elm.id}} selected={{array-contains selectedIds elm.id}}>{{elm.title}}</option>
+  {{/each}}
+</sxh>
+==== - Classes/Routes ====
 |< 100% >|
 ^**Classe** | **Listes** |
-^::: | <html><span class="variable">dispoItems</span></html>\\ Tableau des produits disponibles|
+^::: | <html><span class="variable">dispoItems</span></html>\\ Tableau des produits disponibles (Liste 1)|
-^::: | <html><span class="variable">includedItems</span></html>\\ Tableau des produits à inclure |
+^::: | <html><span class="variable">includedItems</span></html>\\ Tableau des produits à inclure (Liste 2)|
-^::: | <html><span class="variable">selectedDispoItemsIds</span></html>\\ Tableau des ids des éléments sélectionnés dans la liste des produits disponibles |
+^::: | <html><span class="variable">dispoItemsIds_</span></html>\\ Tableau des ids des éléments sélectionnés dans la liste des produits disponibles |
-^::: | <html><span class="variable">selectedIncludedItemsIds</span></html>\\ Tableau des ids des éléments sélectionnés dans la liste des produits à inclure |
+^::: | <html><span class="variable">includedItemsIds_</span></html>\\ Tableau des ids des éléments sélectionnés dans la liste des produits à inclure |
-^::: | <html><span class="variable">selectedDispoItems*</span></html>\\ Tableau des éléments sélectionnés dans la liste des produits disponibles (* sur selectedDispoItemsIds.[])|
+^::: | <html><span class="variable">dispoItems_*</span></html>\\ Tableau des éléments sélectionnés dans la liste des produits disponibles (* sur dispoItemsIds_.[])|
-^::: | <html><span class="variable">selectedIncludedItems*</span></html>\\ Tableau des ids des éléments sélectionnés dans la liste des produits à inclure (* sur selectedIncludedItemsIds.[])|
+^::: | <html><span class="variable">includedItems_*</span></html>\\ Tableau des ids des éléments sélectionnés dans la liste des produits à inclure (* sur includedItemsIds_.[])|
-^**actions** | <html><span class="method">addToIncluded()</span></html>\\ Ajoute les produits disponibles en surbrillance (**selectedDispoItems**) à la liste des produits à inclure (**includedItems**)  |
+^**actions** | <html><span class="method">addToIncluded()</span></html>\\ Ajoute les produits disponibles en surbrillance (**dispoItems_**) à la liste des produits à inclure (**includedItems**)  |
 ^::: | <html><span class="method">addAllToIncluded()</span></html>\\ Ajoute tous les produits disponibles (**dispoItems**) à la liste des produits à inclure (**includedItems**)  |
-^::: | <html><span class="method">removeFromIncluded()</span></html>\\ Retire les produits sélectionnés en surbrillance (**selectedIncludedItems**) pour les remettre dans la liste des produits disponibles (**items**)  |
+^::: | <html><span class="method">removeFromIncluded()</span></html>\\ Retire les produits sélectionnés en surbrillance (**includedItems_**) pour les remettre dans la liste des produits disponibles (**items**)  |
-^::: | <html><span class="method">RemoveAllFromIncluded()</span></html>\\ Retire tous les produits à inclure (**includedItems**) pour les remettre dans la liste des produits disponibles (**items**)  |
+^::: | <html><span class="method">RemoveAllFromIncluded()</span></html>\\ Retire tous les produits à inclure (**includedItems**) pour les remettre dans la liste des produits disponibles (**dispoItems**)  |
+Remarque :
+Il est possible de factoriser les actions en ajoutant uniquement une action dont le prototype est le suivant :
+<sxh javascript>
+addTo:function(source,destination,items){...}
+</sxh>
+Il faudra dans ce cas passer les paramètres nécessaires à l'action **addTo** dans le template.
 **dispoItems** : à intégrer au model hook
@@ Ligne 94: / Ligne 165: @@
 	]
 </sxh>
-==== -- Vues ====
+==== - Vues ====
-=== -- Interface ===
+=== - Interface ===
-**ex1/step/1 :**\\
+**ex1/step1 :**\\
 {{:slam4:richclient:angularjs:td1-ex3.png?700&nolink|}}
-**ex1/step/2 :**\\
+**ex1/step2 :**\\
 {{:slam4:richclient:angularjs:td1-ex3-2.png?700&nolink|}}
-=== -- Logique applicative / comportement de l'interface ===
+=== - Logique applicative / comportement de l'interface ===
   * Les 4 boutons d'ajout ou de retrait des services à inclure s'activent ou se désactive (disabled) en fonction du contenu des listes et/ou des éléments sélectionnés
@@ Ligne 117: / Ligne 188: @@
     * le bouton "Passer à l'étape suivante" affiche la vue suivante (en passant step à 2)
     * la vue affiche la liste des éléments ajoutés dans les éléments à inclure
+==== Tests ====
+Réalisez des tests d'[[https://guides.emberjs.com/release/testing/acceptance/|acceptance]] pour votre application.