Tree View Simple

Dans le tutoriel, il est expliqué comment afficher un arbre non hierarchique ( voir http://xulfr.org/xulplanet/xultu/treeview.html ) dans Gecko 1.7 et inférieur.

Voici un exemple d'utilisation d'un nsITreeView pour un arbre hierarchique, mais simple (on ne peut pas replier les branches), qui fonctionne dans Gecko 1.8 (Firefox 1.5.x)

(le même code, mais entièrement commenté)

Intro

le but : afficher un arbre comme ceci :

 foo
        foo1
                foo4
                foo5
        foo2
                foo6
        foo3

Fichier xul

 <tree flags="dont-build-content" flex="1" id="thetree">
    <treecols>
      <treecol id="nom"  label="nom" primary="true" flex="1" />
      <treecol id="prenom" label="prenom" flex="1"/>
    </treecols>
    <treechildren/>
 </tree>

La structure des données

Pour que cela soit simple au maximum, il faut une structure qui correspondent à ce qu'on veut afficher. On va donc avoir un tableau qui va comporter autant d'objet que de lignes.

  var gDataList = [];

Voici la structure des objets stockés dans gDataList :

 function dataInfo(){
    this.name="";
    this.firstname="";
    this.children=[]; // contient la liste du dataInfo
    this.parent=null; // pointe vers le dataInfo parent
    this.level = 0; // profondeur dans la hierarchie ( = nombre d'ancètre en fait)
    this.index = 0; // index de l'objet dans le tableau gDataList. utile pour getParentIndex
    this.nextSibling; // si le dataInfo est un fils, indique son frère suivant dans la liste des fils du parent
 }

Pour le remplissage du tableau, voir le fichier http://xulfr.org/sources/treeviewsimple/datas.js

L'objet d'interface nsITreeView

 var theview =  {
        rowCount:0, // y mettre le nombre d'element gDataList.length
        selection:null,
        treebox:null,
        widget:null,

        getCellText  : function (  row , col ) {
                if(col.id=='nom')
                        return gDataList[row].name;
                else
                        return gDataList[row].firstname;
        },
        getCellValue  : function (  row , col )  {return "";},
        getImageSrc  : function (  row , col )  {return "";},
        getLevel  : function (  row )  {
                return gDataList[row].level;
        },

        getParentIndex  : function (  row ){
                if(gDataList[row].parent)
                        return gDataList[row].parent.index;
                else
                        return -1;
        },

        hasNextSibling  : function (  row , afterIndex ){
                return (gDataList[row].nextSibling != null);
        },
        isContainer  : function (  row )    {
                return (gDataList[row].children.length > 0);
        },
        isContainerEmpty  : function (  row )  {
                return (gDataList[row].children.length == 0);
        },
        isContainerOpen  : function (  row )  { return true; },

        getProgressMode  : function (  row , col )   {},
        getCellProperties  : function (  row , col , properties ) { },
        getColumnProperties  : function ( col , properties ){},
        getRowProperties  : function (  row , properties ){ },
        isEditable  : function (  row , col )  {return false;},
        isSeparator  : function (  row )    {return false;},
        isSorted  : function ( )    {return false;},
        performAction  : function ( action )    {},
        performActionOnCell  : function ( action ,  row , colID )   {},
        performActionOnRow  : function (  action ,  row )   {},
        selectionChanged  : function ( )    {},
        setCellText  : function (  row , col , value )    {},
        setTree  : function ( tree )    { this.treebox = tree;},
        toggleOpenState  : function (  row ) { },
        canDrop : function ( row , orientation ) { return false;},
        drop  : function (  row ,  orientation ) {},
        cycleCell  : function (  row , col ) {},
        cycleHeader  : function ( col ) {}
 }

Ensuite il suffit de l'affecter au tree pour que l'affichage se produise :

 theview.rowCount= gDataList.length;
 document.getElementById("thetree").view = theview;

Demo

Depuis Firefox 1.5.0.4, il n'est plus possible d'utiliser un treeview personnalisé dans une appli web (problème de sécurité apparement). L'exemple suivant ne fonctionne donc que dans Firefox 1.5 à 1.5.0.3.

La demo : http://xulfr.org/sources/treeviewsimple/

Aller plus loin

Voir comment faire un arbre plus évolué (branches que l'on peut plier/deplier) : TreeViewEvolué .