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: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
GNU Free Documentation License 1.3
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0