7.6 Vues d'arbre personnalisées

En plus d'un contenu statique ou en RDF, les arbres peuvent récupérer leur contenu à partir d'une vue personnalisée.

Créer une vue personnalisée

Jusqu'ici, nous avons vu deux méthodes pour spécifier le contenu d'un arbre. Vous pouvez placer des lignes et des colonnes statiques ou utiliser une source de données RDF. La première méthode fonctionne bien si vous avez une petite quantité de donnée à présenter. Utiliser une source de donnée est une bonne idée lorsque vous disposez d'une source fournie par Mozilla ou que vous avez créée vous même. Dans certains cas, vous pourriez vouloir stocker les données dans d'autres formats ou effectuer des traitements sur ces données. XUL fournit une troisième méthode, qui implique de créer un objet de vue personnalisée via un script.

Cette méthode peut être utilisée pour stocker des centaines de milliers de lignes que l'arbre peut afficher instantanément. Pour faire ainsi, implémentez un arbre exactement comme avant mais laissez l'élément treechildren vide. L'exemple suivant montre ceci :

<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 doit être créé par un script, il sera utilisé pour indiquer la valeur de chaque cellule, le nombre total de lignes plus d'autres informations éventuellement. L'objet devra être assigné à l'arbre. L'arbre appellera des méthodes de l'objet pour obtenir les informations dont il a besoin pour s'afficher.

L'objet, appelé "vue sur l'arbre", dispose d'environ trente méthodes que vous pouvez définir pour fournir des informations sur le contenu et l'apparence de l'arbre, mais seules quelques unes doivent obligatoirement être implémentées. Voici une liste de deux méthodes que vous devriez définir :

rowCount

Cette propriété doit se voir assignée le nombre de lignes à afficher 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 spécifiées par les valeurs de l'attribut id de la colonne.

setTree( arbre )

Cette méthode est appelée une fois pour changer l'élément arbre auquel est associé la vue. Ceci permet d'utiliser la même vue pour plusieurs arbres.

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

var treeView = {
    rowCount : 10000,
    getCellText : function(row,column){
      if (column=="namecol") return "Ligne "+row;
      else return "20 juillet";
    },
    setTree: function(treebox){ this.treebox=treebox; },
    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){}
};

Les fonctions de l'exemple ci-dessus que nous n'avons pas décrites n'ont pas besoin d'effectuer une quelconque action, mais elle doivent être définie 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 20 juillet. La structure if dans la fonction getCellText compare la colonne 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 auriez des données bien plus complexes dans chaque cellule.

L'étape finale est d'associer l'objet 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 source suivant présente l'exemple en entier. Un script interne (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 7.6.1 : Source Voir

<?xml version="1.0"?>

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

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

<script>
var treeView = {
    rowCount : 10000,
    getCellText : function(row,column){
      if (column=="namecol") return "Ligne "+row;
      else return "20 juillet";
    },
    setTree: function(treebox){ this.treebox=treebox; },
    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){}
};

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 avec ses données obtenues par l'intermédiaire de la fonction getCellText. La fonction setView a été appelée par le gestionnaire onload de la fenêtre (window). 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. Elle est appelée pour les autres lignes lorsque l'utilisateur les fait défiler. Ceci rend l'arbre beaucoup plus efficace.

Notez que l'objet vue est aussi disponible pour les arbres qui n'ont pas une vue personnalisée. Par exemple, des arbres construit à partir de données en RDF auront un objet vue qui obtiendra ses données à partir de la source de données RDF. Vous pouvez utilisez l'objet vue pour récupérer des informations sur les données affichées par l'arbre.

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 comment utiliser les commandes.