Vues d'arbre personnalisées

Les vues d'arbres permettent d'afficher des données dans une arborescence.

Création d'une vue personnalisée

Jusqu'à présent, nous avons utilisé la construction interne d'une vue d'arbre. Dans cette section, nous verrons la création d'une vue personnalisée. Elle devient nécessaire dès lors que la quantité de données devient trop importante ou que celles-ci soient arrangées de manière trop complexe. Par exemple, l'utilisation d'éléments treeitem ne serait plus viable en terme de performance avec plusieurs milliers de lignes. Vous pouvez également utiliser une vue personnalisée pour afficher des données obtenues par calculs. Puisque la vue peut stocker et récupérer de la meilleure manière possible les données en fonction de leur type, l'arbre peut être utilisé même si plusieurs milliers de lignes doivent être affichées.

Pour implémenter une vue personnalisée, vous devez créer un objet qui implémente l'interface nsITreeView. Vous pouvez créer ces objets en javascript, mais vous aurez besoin d'un objet séparé pour chaque arbre. Naturellement, comme la vue d'arbre personnalisée est utilisée, la vue de contenu d'arbre ne le sera pas, donc les éléments treeitem, treerow et treecell n'auront aucun sens car la vue d'arbre obtient ses données ailleurs. Ainsi, vous pouvez simplement laisser l'élément treechildren vide. L'exemple suivant vous le montre :

<tree id="my-tree" flex="1">
  <treecols>
    <treecol id="namecol" label="Nom" flex="1"/>
    <treecol id="datecol" label="Date" flex="1"/>
  </treecols>
  <treechildren/>
</tree>

Pour assigner les données à afficher dans l'arbre, un objet de vue doit être créé, il sera utilisé pour indiquer la valeur de chaque cellule, le nombre total de lignes plus d'autres informations optionnelles. L'arbre appellera des méthodes de la vue pour obtenir les informations dont il a besoin pour son affichage.

En général, bien que la vue d'arbre dispose de plus d'une trentaine de fonctions pouvant être implémentées, il vous suffira de ne définir que celles appelées par l'arbre. Les trois méthodes que vous devrez implémenter sont décrites ci-dessous :

rowCount

Cette propriété doit se voir assigner le nombre total de lignes dans l'arbre.

getCellText( ligne, colonne )

Cette méthode doit retourner le texte contenu à la ligne et la colonne spécifiées. Elle sera appelée pour afficher les données de chaque cellule. Les lignes sont spécifiées par des valeurs numériques qui commencent à '0'. Les colonnes sont des objets TreeColumn. Dans les anciennes versions de Mozilla (antérieures à Firefox 1.5 ou Mozilla 1.8), les colonnes sont référencées par les valeurs de l'attribut id de la colonne. Si vous avez besoin d'un attribut id comme pour ces anciennes version, une propriété id peut être utilisée sur TreeColumn.

setTree( arbre )

Cette méthode est appelée une seule fois pour affecter l'objet arbre à la vue.

Voici un exemple de définition d'un tel objet qui peut avoir le nom que vous souhaitez :

//Moz 1.8
var treeView = {
    rowCount : 10000,
    getCellText : function(row,column){
      if (column.id == "namecol") return "Ligne "+row;
      else return "18 février";
    },
    setTree: function(treebox){ this.treebox = treebox; },
    isContainer: function(row){ return false; },
    isSeparator: function(row){ return false; },
    isSorted: function(){ 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){}
};

Les fonctions de l'exemple ci-dessus que nous n'avons pas décrites n'ont pas besoin d'effectuer une quelconque action, mais elles doivent être définies car l'arbre les appelle pour rassembler des informations supplémentaires.

Cet exemple peut-être utilisé pour un arbre avec 10000 lignes. Le contenu des cellules de la première colonne sera 'Ligne X' où X sera le numéro de la ligne. Le contenu des cellules de la seconde colonne sera '18 février'. La structure if dans la fonction getCellText() compare la propriété id de l'argument column au texte 'namecol'. Ce texte 'namecol' correspond à l'id du premier élément treecol dans l'exemple précédent. Cet exemple est très simplifié bien sûr - en réalité vous aurez des données bien plus complexes dans chaque cellule.

L'étape finale est d'associer l'objet de vue avec l'arbre. L'arbre a une propriété view, à laquelle on peut assigner l'objet déclaré ci-dessus. Nous pouvons assigner une valeur à cette propriété à tout moment pour attribuer une vue à l'arbre, ou en changer.

function setView(){
    document.getElementById('my-tree').view = treeView;
}

Le code source suivant présente l'exemple en entier. Un script intégré au fichier XUL a été utilisé ici pour simplifier l'exemple. En temps normal vous mettriez le script dans un fichier de script externe.

Exemple d'arbre personnalisé

Exemple 1 : Source Voir

<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window title="Exemple d'arbre" id="tree-window"
   xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
   onload="setView();">

<script>
//Moz 1.8
var treeView = {
    rowCount : 10000,
    getCellText : function(row,column){
      if (column.id == "namecol") return "Ligne "+row;
      else return "18 février";
    },
    setTree: function(treebox){ this.treebox = treebox; },
    isContainer: function(row){ return false; },
    isSeparator: function(row){ return false; },
    isSorted: function(){ 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){}
};

function setView(){
    document.getElementById('my-tree').view = treeView;
}
</script>

<tree id="my-tree" flex="1">
  <treecols>
    <treecol id="namecol" label="Nom" flex="1"/>
    <treecol id="datecol" label="Date" flex="1"/>
  </treecols>
  <treechildren/>
</tree>

</window>

Sur l'image, vous voyez deux colonnes, chacune obtenant ses données par l'intermédiaire de la fonction getCellText(). La fonction setView() a été appelée par le gestionnaire onload de la fenêtre (window), mais vous pouvez aussi changer la vue plus tard si vous le souhaitez. Vous pouvez la changer à n'importe quel instant.

Il faut noter que la fonction getCellText() est seulement appelée quand cela est nécessaire pour afficher le contenu. Dans l'exemple de 10000 lignes ci-dessus, getCellText() est seulement appelée pour les cellules qui sont actuellement affichées. Sur cette image, seules sept lignes sont affichées, donc la fonction getCellText() a été appelée 14 fois. Elle sera appelée pour les autres lignes lorsque l'utilisateur les fera défiler. Cette méthode rend l'arbre beaucoup plus efficace.

L'interface nsITreeView liste toutes les méthodes et propriétés que vous pouvez implémenter pour la vue d'un arbre.

Dans la prochaine section, nous verrons d'autres fonctionnalités des vues d'arbre.