Comment ajouter un indicateur de progression sur un treecell ?

Pour ajouter une barre de progression à une cellule, définissez l'attribut type sur une colonne :

<treecol id="completed" label="Avancement" type="progressmeter"/>

Chaque cellule dans la colonne peut être une barre de progression. Le type de la barre de progression et sa valeur sont déterminés par les cellules. Ainsi, il est possible pour des cellules d'être une barre de progression indéterminée, d'avoir des valeurs spécifiques ou d'afficher du texte. Deux propriétés peuvent être ajoutées aux cellules, mode et value.

<treecell value="30" mode="normal"/>
<treecell label="Terminé"/>
<treecell mode="undetermined"/>

La première cellule est une barre de progression normale remplie à 30%. La seconde cellule affiche le texte Terminé. La troisième cellule utilise une barre de progression indéterminée (une barre rayée tournoyante). Vous pouvez les mélanger et utiliser un script pour modifier l'attribut au besoin.

Voici un exemple :

Voir

<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="treeProgress" title="Arbre avec des barres de progressions"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<tree id="theTree" flex="1" width="300" height="300">

  <treecols>
    <treecol id="task" label="Tâche" primary="true" flex="1"/>
    <treecol id="pct" label="Avancement" type="progressmeter" flex="1"/>
  </treecols>

  <treechildren>
    <treeitem>
      <treerow>
        <treecell label="Résolution du problème 7"/>
        <treecell value="29" mode="normal"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell label="Rédaction de la documentation"/>
        <treecell value="60" mode="normal"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell label="Célébration"/>
        <treecell label="Terminé"/>
      </treerow>
    </treeitem>
  </treechildren>
</tree>

</window>

La méthode ci-dessus fonctionne également pour arbres construits à partir d'une source RDF, donc vous pouvez assigner la valeur ou même le type de la barre de progression à partir d'une propriété RDF.

Avec l'emploi d'une vue personnalisée, il y a deux fonctions que vous devez définir dans la vue. La première, getProgressMode, doit retourner l'indication du type de barre de progression à utiliser. Les constantes de l'interface nsITreeView peuvent être utilisées :

getProgressMode(row,col){
  if (row == 0) return Components.interfaces.nsITreeView.progressNormal;
  else if (row == 1) return Components.interfaces.nsITreeView.progressUndetermined;
  else return Components.interfaces.nsITreeView.progressNone;
}

Dans l'exemple ci-dessus, la première ligne utilisait une barre de progression normale, la seconde utilisait une barre indéterminée et la troisième n'avait pas de barre de progression. Vous pouvez aussi retourner 0 pour les cellules sans barre de progression. Utilisez la fonction getCellValue pour retourner la valeur d'une barre de progression normale. Les barres indéterminées et les cellules ne contenant que du texte peuvent simplement retourner 0, bien que getCellValue ne sera jamais appelée pour de telles cellules.

Voici un exemple complet :

Voir

<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="treeProgress" title="Arbres avec des barres de progressions"
        onload="assignView();"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<script>
function assignView()
{
  // un objet de vue d'arbre
  var treeview = {
    // crée un arbre contenant 20 lignes
    rowCount: 20,

    // ces fonctions doivent être définies pour éviter les erreurs,
    // toutefois elles ne définissent rien de spécial
    isContainer: function(row){ return false; },
    isSeparator: function(row){ return false; },
    isSorted: function(row){ return false; },
    getLevel: function(row){ return 0; },
    getImageSrc: function(row,col){ return null; },
    getRowProperties: function(row,props){},
    getCellProperties: function(row,col,props){},
    getColumnProperties: function(colid,col,props){},

    // récupère le type de barre de progression à utiliser pour une cellule.
    // Pour la colonne pourcentage, indiquer pour la barre de progression normale,
    // une constante de l'interface nsITreeView.
    // Pour la première colonne, retourner simplement 0
    // signifiant aucune barre de progression.
    getProgressMode: function(row,col){
      if (col == "pct") return Components.interfaces.nsITreeView.progressNormal;
      else return 0;
    },

    // récupère la valeur de la barre de progression qui dans ce cas est calculée
    // à partir du numéro de la ligne. La valeur peut être retournée comme un nombre
    // ou une chaîne de caractères.
    getCellValue: function(row,col){
      if (col == "pct") return (row * 5 + 1);
      else return null;
    },

    // retourne les libellés textes des cellules de la première colonne.
    getCellText: function(row,col){
      if (col == "task") return "Item " + (row + 1);
      else return "";
    },

    // assigne l'élément tree à la vue
    setTree: function(treebox){ this.treebox=treebox; }

  };

  // assigne la vue à l'arbre
  document.getElementById("theTree").view=treeview;
}

</script>

<tree id="theTree" flex="1" width="300" height="300">

  <treecols>
    <treecol id="task" label="Tâche" primary="true" flex="1"/>
    <treecol id="pct" label="Avancement" type="progressmeter" flex="1"/>
  </treecols>
  <treechildren/>
</tree>

</window>