Tree view complet

Voici un exemple de vue personnalisée qui affiche un arbre dont la forme est :

 item 0
     item 0.1
     item 0.2
     item 0.3
 item 1
     item 1.1
     item 1.2
     item 1.3
 ...

Pour chaque ligne à afficher dans l'arbre, il y a lieu de construire une structure de données qui comprend au minimum les champs suivants :

 var item = {
    uri    : null,
    index  : null,
    chld   : new Array(),
    isOpen : null,
    isCntn : null,
    level  : null,
    parent : null,
    offSet : null
 }

• *uri** : représente l'uri, dans une datasource, de la ressource à partir de laquelle seront retrouvés les éléments à afficher sur la ligne, pour les différentes colonnes de l'arbre. Si la vue n'est pas liée à une datasource, ce champ peut être remplacé par un ou plusieurs autres permettant de retrouver les libellés à afficher.

• *index** : est l'indice de la structure dans un tableau (Array) qui reprend tous les éléments à afficher, visibles ou non, dans l'ordre où ils doivent être présentés. Ce tableau est un tableau d'indices absolus (variable abslList dans l'exemple). Il ne tient pas compte de la structure hiérarchique des éléments.

• *chld** : est un tableau ordonné qui reprend toutes les structures correspondant à des entités qui sont directement filles de l'entité représentée par la structure item.

• *isCntn** : est un boléen qui indique si l'élément est un conteneur.

• *isOpen** : est un boléen qui indique si le conteneur est ouvert.

• *level** : indique le niveau d'indentation dans l'arborescence. Il est incrémenté de 1 chaque fois qu'un élément a des fils.

• *parent** : est l'indice dans la liste d'incices absolus du père de l'élément. Il est null si l'élément n'a pas de père (et est donc de level 0).

• *offset** : est une variable qui indique à tout moment la différence entre l'indice absolu de l'élément dans le tableau abslList et son indice variable dans la vue de l'arborescence. L'indice d'une ligne dans l'arbre varie en effet chaque fois qu'un conteneur qui la précède est ouvert ou fermé.

Pour reprendre l'exemple de départ limité aux trois premières lignes, il y a lieu de créer trois structures de données :

 var item_0 = {
    uri    : "[[urn:item:0"]],
    index  : 0,
    chld   : new Array(),
    isOpen : true,
    isCntn : true,
    level  : 0,
    parent : null,
    offSet : 0
 }

 var item_0_1 = {
    uri    : "[[urn:item:0:1"]],
    index  : 1,
    chld   : new Array(),
    isOpen : false,
    isCntn : false,
    level  : 1,
    parent : 0,
    offSet : 0
 }

 var item_0_2 = {
    uri    : "[[urn:item:0:2"]],
    index  : 2,
    chld   : new Array(),
    isOpen : false,
    isCntn : false,
    level  : 1,
    parent : 0,
    offSet : 0
 }

un tableau d'indices absolus :

 var abslList = new Array();

et d'organiser le tout comme suit :

 abslList[0] = item_0;
 abslList[1] = item_0_1;
 abslList[2] = item_0_2;

 item_0.chld[0] = item_0_1;
 item_0.chld[1] = item_0_2;

%%%

 <?xml version="1.0"?>
 <?xml-stylesheet href="[[chrome://global/skin/]]" type="text/css"?>
 <window width="500" height="500" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
       onload="intl();">

 <script type="application/x-javascript" src="[[chrome://test/test_view.js"/]]>

   <tree id="treeTest"
         flex="1">
     <treecols>
       <treecol id="col_0"
                label="Col_0"
                primary="true"
                flex="1"/>
       <splitter class="tree-splitter"/>
       <treecol id="col_1"
                label="Col_1"
                flex="1"/>
       <splitter class="tree-splitter"/>
       <treecol id="col_2"
                label="Col_2"
                flex="1"/>
     </treecols>
     <treechildren/>
   </tree>
 </window>