6.3 Arbres

XUL fournit un moyen de créer des listes tabulaires ou hiérarchiques en utilisant les arbres.

L'élément tree

Un des élément les plus complexe de XUL est l'arbre. Comme une boîte de liste, un arbre peut être utilisé pour une liste d'éléments. L'élément tree peut aussi être utilisé pour créer des tables ou des listes hiérarchiques. Par exemple, la liste de messages d'une application de courriels, ou la fenêtre d'édition de favoris dans Mozilla peut être créée avec un arbre.

L'arbre partage plusieurs fonctionnalités avec les boîtes de liste. Les deux peuvent être utilisés pour créer des tables de données multi-lignes et multi-colonnes, et tous deux peuvent avoir des entêtes de colonnes. L'arbre peut aussi contenir des lignes imbriquées, ce que ne peuvent pas faire les boîtes de liste. Mais les boîtes de liste peuvent contenir tout type de contenu, tandis que les arbres peuvent uniquement contenir du texte et des images. La boîte de liste a été prévue pour être une alternative plus légère aux arbres pour les cas les plus simple, par conséquent préférez les quand vous le pouvez.

Il y a plusieurs manières de créer le contenu d'un arbre. La plus simple est de mettre les items de l'arbre directement avec l'arbre. Nous nous intéresserons à cette méthode dans cette section. L'autre méthode, qui est en fait plus commune et intéressante vous autorise à créer le contenu de l'arbre depuis une source de données. Cela signifie que l'arbre peut être rempli avec des informations provenant de la liste de favoris de l'utilisateur, d'un dictionnaire stocké sur un disque, du résultat d'une recherche, ou d'un bon nombre d'autres sources. Les arbres peuvent aussi être rempli avec un script. Nous verrons ces deux méthodes dans une section ultérieure.

Les arbres peuvent être créés avec un élément tree, qui est décrit dans les sections suivantes. Des éléments reliés sont utilisés pour spécifier les colonnes et les lignes. De manière similaire aux menus, les éléments sont inclus les uns dans les autres. Les éléments qui construisent un arbre sont décrits ensuite :

tree

Ceci est l'élément racine de l'arbre. Le contenu de l'arbre va dedans.

treecols

Cet élément est un conteneur d'éléments treecol.

treecol

Ceci est utilisé pour déclarer une colonne de l'arbre. En le mettant dedans vous pouvez spécifier des informations sur la manière de trier les données dans la colonne et si l'utilisateur peut changer la taille de celle-ci. Vous devriez toujours placer un attribut id sur une colonne.

treechildren

Ceci contient la partie principale de l'arbre où va chaque ligne de données.

treeitem

Ceci contient une ligne et tous ses descendants. Cet élément peut aussi servir d'élément que l'utilisateur pourra sélectionner. Tout, à l'intérieur, pourra être sélectionné comme une unité. Ceci pourra se répercuter sur la ligne entière pour que celle-ci puisse être sélectionnable comme un tout.

treerow

Une seule ligne dans l'arbre, qui pourra être placée dans un élément treeitem.

treecell

Une seule cellule dans un arbre, cet élément doit aller dans un élément treerow.

Commençons par regarder comment créer une simple table multi-colonnes. Ceci pourrait être utilisé pour une liste de courriels. Il pourrait y avoir plusieurs colonnes, comme expediteur, sujet et date.

Premièrement, la table est encadrée par un élément tree. Ceci déclare un élément qui est utilisé comme une table ou un arbre. Dans le cas présent nous l'utiliserons comme une table.

Il y a deux parties dans la syntaxe de l'arbre. La première partie est utilisée pour déclarer le contenu de l'arbre. Comme les tables HTML, les données sont organisées en lignes. Les données de la table sont crées en plaçant une seule ligne ou une ligne de données dans un élément treechildren. La seconde partie est utilisée pour spécifier quelles colonnes vous souhaitez avoir dans l'arbre, avec l'élément treecol. Ceci rappelle comment les boîte de liste et les grilles sont créées. Vous pouvez spécifier combien de lignes vous voulez voir apparaître dans un arbre en précisant l'attribut row sur l'élément tree. Cet attribut spécifie quelle hauteur doit faire l'arbre dans l'interface utilisateur, pas combien de ligne de données il y a. Si il y a plus de lignes de données dans l'arbre, une barre de défilement apparaîtra pour permettre à l'utilisateur de voir les autres. Si vous ne spécifiez pas l'attribut row, la valeur par défaut est 0, ce qui signifie qu'aucune ligne n'apparaîtra. Dans ce cas, vous devriez rendre l'arbre flexible. Si votre arbre est flexible, il ne nécessitera pas d'attribut row car il s'adaptera pour remplir l'espace disponible.

Vous pouvez placer autant de colonnes que vous le souhaitez dans un arbre. Comme avec les boîtes de liste, une ligne d'entêtes apparaîtra avec les libellés des colonnes. Un menu déroulant apparaîtra en haut a droite de l'arbre, que l'utilisateur pourra utiliser pour afficher et cacher chaque colonne individuellement.

Chaque colonne est créée avec l'élément treecol. Vous pouvez préciser le libellé d'entête en utilisant l'attribut label. Vous pouvez aussi vouloir faire une colonne flexible si l'arbre est flexible, ainsi les colonnes s'étirent en même temps que l'arbre. Toutes les colonnes devraient être placées dans un élément treecols.

Le corps de l'arbre est créé avec quatre éléments. L'élément treechildren contient toutes les lignes. Dans le corps il y a les lignes, qui peuvent à leur tour contenir d'autres lignes. Les arbres avec des lignes imbriquées sont décrits dans la prochaine section. Pour un arbre plus simple, chaque ligne est créée avec les éléments treeitem et treerow. Le premier est utilisé pour une ligne et ses lignes filles et le dernier pour une ligne simple.

À l'intérieur des lignes, vous pourrez mettre des cellules d'arbre. Ceci est créé en utilisant l'élément treecell. Vous pouvez préciser le texte pour la cellule en utilisant l'attribut label. Le premier treecell d'une ligne détermine le contenu qui apparaîtra dans la première colonne, le second treecell détermine le contenu qui apparaîtra dans la seconde colonne, et ainsi de suite.

L'exemple qui suit montre un arbre créé avec cette syntaxe.

Exemple 6.3.1: Source Voir

<tree flex="1">
 <treecols>
    <treecol id="expediteur" label="Expéditeur" flex="1"/>
    <treecol id="sujet" label="Sujet" flex="2"/>
  </treecols>

  <treechildren>
    <treeitem>
      <treerow>
        <treecell label="joe@somewhere.com"/>
        <treecell label="Plans top secret"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell label="mel@whereever.com"/>
        <treecell label="Allons manger"/>
      </treerow>
    </treeitem>
  </treechildren>
</tree>

Comme on peut le voir dans l'image, l'arbre à été créé avec deux lignes de données.

Cet arbre a deux colonnes, la seconde prendra plus de place que la première. On met habituellement des colonnes flexibles. Vous pouvez aussi préciser la largeur avec la propriété CSS width. Vous devriez inclure le même nombre d'éléments treecol qu'il n'y a de colonnes dans l'arbre. Dans le cas contraire des comportements étranges peuvent survenir.

La ligne d'en-têtes est créée automatiquement. Le bouton dans le coin droit peut être utilisé pour afficher ou masquer les colonnes. Vous pouvez préciser un attribut hidecolumnpicker sur l'arbre et lui donner la valeur true si vous souhaitez cacher ce bouton. Assurez vous d'avoir donné un attribut id sur chaque colonne, sinon les actions d'affichage et de masquage de colonne ne fonctionneront pas.

L'utilisateur peut sélectionner les items de l'arbre en cliquant sur eux avec la souris, ou en les mettant en valeur avec le clavier. L'utilisateur peut sélectionner plusieurs items en gardant les touches Shift ou Control appuyées et en cliquant sur d'autres items. Pour empecher la sélection multiple, précisez un attribut seltype sur l'arbre, en lui donnant la valeur single. Avec ça, l'utilisateur ne pourra sélectionner qu'une ligne à la fois.

Exemple d'arbre

<tree flex="1">
  <treecols>
    <treecol id="nom" label="Nom de fichier" flex="1"/>
    <treecol id="chemin" label="Chemin" flex="2"/>
    <treecol id="taille" label="Taille" flex="1"/>
  </treecols>

  <treechildren>
   <treeitem>
     <treerow>
       <treecell label="mozilla"/>
       <treecell label="/usr/local"/>
       <treecell label="2520 octets"/>
     </treerow>
   </treeitem>
  </treechildren>
</tree>

<splitter collapse="before" resizeafter="grow"/>

Dans la suite, nous apprendrons comment créer des arbres plus avancés.