richclient:emberjs:td7

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/27 01:30] – jcheronrichclient:emberjs:td7 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
Ligne 11: Ligne 11:
  
 ===== Objectifs ===== ===== Objectifs =====
-  * Conception Web client riche+  * Conception d'interfaces Web client riche 
 +  * Manipulations datas 
 +  * Utilisation composants
  
 ===== -- Eléments à implémenter ===== ===== -- Eléments à implémenter =====
Ligne 64: Ligne 66:
 ^Model ^propriété ^Rôle ^ ^Model ^propriété ^Rôle ^
 |**project** |<html><span class="variable">boardVisible</span></html> |booléen déterminant si board est visible | |**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) |+|::: |<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 | |**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) |
  
-==== -- Route Story/:story_id ====+ 
 +=== 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 ====
  
  
Ligne 80: Ligne 174:
   * Une task **done** est barrée   * 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   * 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.1522107057.txt.gz
  • Dernière modification : il y a 6 ans
  • (modification externe)