Différences

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

--- richclient:emberjs:td7 [2018/03/28 18:03]
jcheron [Thanks]
+++ — (Version actuelle)
@@ Ligne 1: / Ligne 1: @@
-====== TD n°7 ======
-<html><div class="noborder"></html>
-|< 100% >|
-| {{::ember.png?150|}} | Dépôts eCampus :\\  * [[https://ecampus.unicaen.fr/course/view.php?id=12596|parcours 1]]\\  * [[https://ecampus.unicaen.fr/course/view.php?id=12605|parcours 2]] |
-<html></div></html>
-  * Suite Projet **boards**
-  * Application gestion de projets SCRUM
-===== Objectifs =====
-  * Conception d'interfaces Web client riche
-  * Manipulations datas
-  * Utilisation composants
-===== -- Eléments à implémenter =====
-==== -- Route project/:project_id/board ====
-<wrap mytodo>**<nowiki>//</nowiki>TODO 2.1**</wrap>
-Cette route est déjà partiellement implémentée (**project/:project_id**):
-{{:richclient:emberjs:td7:projectstories.png?900|Project stories}}
-Elle affiche la liste complète des stories du projet sélectionné.
-on lui ajoute la partie tableau de bord, permettant d'afficher par steps (en colonnes), les user stories du projet sélectionné.
-{{:richclient:emberjs:td7:projectstoriesboard.png?900|Dashboard}}
-=== Comportement/conception de l'interface ===
-== Steps ==
-Les Steps s'affichent de manière complète dans l'interface, même si elles ne contiennent aucune story.\\
-On utilisera :
-  * le composant HTML ui-grid de semantic pour leur disposition.
-  * Chaque **step** est composée d'un **ui top attached segment** pour son titre, suivi d'un **ui attached segment** pour son contenu.
-== Stories ==
-Lorsque la route **project/:project_id** est active, toutes les stories sont affichées dans le product backlog.
-Lorsque la route **project/:project_id/board** est active, toutes les stories non affectées à une step sont affichées dans le product backlog, les autres sont réparties entre leurs steps respectives.
-  * Le click sur une story présente dans le board la rend active et affiche la barre de 3 boutons (Open, MoveTo -dropDown des steps- et Remove).
-  * Les boutons **Open..** renvoient vers l'url **story/:story_id**
-  * Il est possible de déplacer les stories entre les steps par un drap and drop
-Le tableau suivant pourra servir a élaborer la grille des steps :
-<sxh javascript;gutter:false>
-['one', 'two', 'three', 'four',
-        'five', 'six', 'seven', 'eight', 'nine',
-        'ten', 'eleven', 'twelve', 'thirteen', 'fourteen',
-        'fifteen', 'sixteen']
-</sxh>
-=== Models ===
-Ajouts de membres non persistants aux models :
-|< 100% >|
-^Model ^propriété ^Rôle ^
-|**project** |<html><span class="variable">boardVisible</span></html> |booléen déterminant si board est visible |
-|::: |<html><span class="variable">backlog</span></html> | computed property* des stories à afficher dans le backlog (* sur boardVisible et stories.@each.step) |
-|**story** |<html><span class="variable">active</span></html> |booléen déterminant si la story est sélectionnée |
-|::: |<html><span class="variable">progress</span></html> | computed property* donnant l'avancement de la story (% des tâches réalisées) (* sur tasks@each.done) |
-=== Component ===
-Pour le drag and drop, on utilise les fonctionnalités HTML5, au travers de 2 composants (fortement inspirés de cet [[https://emberway.io/ember-js-and-html5-drag-and-drop-fa5dfe478a9a|article]] ) :
-**draggable-dropzone** correspond à la zone de drop (step d'accueil)
-<sxh javascript;title:app/components/draggable-dropzone.js>
-import Component from '@ember/component';
-import {set,get} from '@ember/object';
-export default Component.extend({
-  classNames        : [ 'draggableDropzone' ],
-  classNameBindings : [ 'dragClass' ],
-  dragClass         : 'deactivated',
-  dragLeave(event) {
-    event.preventDefault();
-    set(this, 'dragClass', 'deactivated');
-  },
-  dragOver(event) {
-    event.preventDefault();
-    set(this, 'dragClass', 'activated');
-  },
-  drop(event) {
-    var data = event.dataTransfer.getData('text/data');
-    this.sendAction('dropped', data,get(this,'content'));
-    set(this, 'dragClass', 'deactivated');
-  }
-});
-</sxh>
-**draggable-item** correspond à l'élément déplacé (drag) (story)
-<sxh javascript;title:app/components/draggable-item.js>
-import Component from '@ember/component';
-import {get} from '@ember/object';
-export default Component.extend({
-    classNameBindings: ['isActive'],
-    isActive: Ember.computed('content.active', function() {
-      let content=get(this,'content');
-      if(get(content,'active'))
-        return this.get('activeClass');
-      return '';
-    }),
-    attributeBindings : [ 'draggable' ],
-    draggable         : 'true',
-    dragStart(event) {
-      return event.dataTransfer.setData('text/data', get(this, 'content').get('id'));
-    },
-    doubleClick(){
-      this.sendAction("onDblClick",get(this,'content'));
-    },
-    click(){
-      this.sendAction("onClick",get(this,'content'));
-    }
-});
-</sxh>
-Exemple d'utilisation **draggable-dropzone**:
-<sxh html>
-{{#draggable-dropzone content=step dropped="addToStep" class="column"}}
-...
-{{/draggable-dropzone}}
-</sxh>
-|< 100% >|
-^Attribut ^Rôle ^
-|content| objet associé |
-|dropped | action déclenchée sur le drop dont le prototype est (dragContent.id,dropZoneContent) |
-Exemple d'utilisation **draggable-dropzone**:
-<sxh html>
-{{#draggable-item class="ui segment" activeClass="green inverted" content=story onClick="activate"}}
-...
-{{/draggable-item}}
-</sxh>
-|< 100% >|
-^Attribut ^Rôle ^
-|content| objet associé |
-|activeClass | Classe utlisée si content.active==true |
-|onClick| action déclenchée sur le click de l'élément  |
-==== -- Route Stories/edit/:story_id ====
-<wrap mytodo>**<nowiki>//</nowiki>TODO 2.2**</wrap>
-<wrap info>Affiche la **story** correspondant au **code** passé dans l'url.</wrap>
-{{:richclient:emberjs:td7:storytasks.png?|Story tasks}}
-**Comportement de l'interface :**
-  * Une task **done** est barrée
-  * Les cases à cocher permettent de faire passer une tâche de non réalisée (done=false) à réalisée (done=true) et inversement
-===== Thanks =====
-<html><div class="info">
-<div style="font-size:14px;font-weight: bold;">Si vous avez apprécié :</div>
-<br>
-<a class="github-button" href="https://github.com/emberjs/ember.js" data-icon="octicon-star" data-show-count="true" aria-label="Star emberjs/ember.js on GitHub">ember.js thanks</a>
-<br>
-<a class="github-button" href="https://github.com/Semantic-Org/Semantic-UI" data-icon="octicon-star" data-show-count="true" aria-label="Star Semantic-Org/Semantic-UI on GitHub">Semantic-UI thanks</a>
-<br>
-<a class="github-button" href="https://github.com/twbs/bootstrap" data-icon="octicon-star" data-show-count="true" aria-label="Star twbs/bootstrap on GitHub">Bootstrap thanks</a></html>
-<html></div></html>
-<html><script async defer src="https://buttons.github.io/buttons.js"></script></html>

richclient/emberjs/td7.1522253034.txt.gz · Dernière modification: 2018/03/28 18:03 par jcheron

Afficher la page Anciennes révisions

Haut de page