Tree

L'objet tree est une composante arborescente destinée à contenir et afficher des données chargées dynamiquement. Son contenu et sa structure varient après le lancement du logiciel et durant son utilisation.
Il peut prendre la forme d'une liste, d'une table ou d'une arborescence.
Contrairement à listbox, ce composant a une partie affiché, l'objet tree et un contenu dynamique treeview. Treeview n'est pas un composant graphique en ce qu'il n'est pas affiché lui-même, seul son contenu le sera et ce contenu est fait de textes et d'images.

Elements de tree

treecols

Groupe de colonnes. Pour une liste simple ou hiérarchique il n'y aura qu'une colonne.

treecol

Ces éléments servent à définir le nombre de colonnes et de spécifier les paramètres sur les colonnes.
Exemple de treecols:

<tree>
    <treecols>
        <treecol label="Nom" />
        <treecol label="Prénom" />
        <treecol label="E-mail" />
    </treecols>
</tree>

Si la colonne est hiérarchique, elle aura l'attribut primary:

<treecol primary="true" label="Nom" />

treechildren

Conteneur du corps de l'arborescence qui est aussi la partie dynamique. Treechildren se place après treecols. Il contient des treeitems.
Exemple:

<tree>
    <treecols>
    </treecols>
    <treechildren>
        <treeitem>
             ....
    </treechildren>
</tree>

treeitem

Un élement treetiem contient une ligne de la table (une treerow) et éventuellement des treechildren s'il s'agit d'une hiérarchie. Le nombre de treeitem est variable.

treerow

Une ligne. Elle contient des treecell. Le nombre de treecell dans une treerow doit correspondre au nombre de colonnes, donc de treecol dans treecols.

treecell

Un élément indivisible contenant des données.

Construire une table

Dans une table, une correspondance doit se faire entre les colonnes et les éléments, de sorte que les éléments soient des cellules.
La table est dynamique en ceci que le nombre de lignes est variable et évolue lors de l'utilisation du programme. En outre il est possible d'afficher ou cacher les colonnes.

Afficher une arborescence dynamique

Pour créer une arborescence, on insère des éléments treechildren dans des éléments treeitem .
Si l'on prend comme exemple le contenu d'un disque dur:
- Le treechildren équivaud à un sous-répertoire.
- Une treerow pour le nom du sous-répertoire.
- Un treeitem pour chaque fichier du répertoire. Le treeitem contient une treerow qui contient une treecell.
Donc:
- Chaque treechildren contient une liste de treeitem.
- Chaque treeitem contient une treerow qui contient une treecell, et éventuellement un treechildren.
Lorsque qu'un treeitem contient un treechildren il doit avoir deux attributs, container pour indiquer qu'il contient une branche, et open pour indiquer s'il est ouvert au départ ou non.

<treeitem container="true" open="true" />

Si l'on veut créer une branche, on aura donc la structure suivante:

<treeitem container="true" open="true">
    <treerow 
        <treecell label="" />
    <treerow>
    <treechildren>
        <treeitem>
            ....
        </treeitem>
        <treeitem>
             ...
        </treeitem>
    </treechildren>
</treeitem>

Dans tous les cas, le nombre de treeitem peut évoluer.

Combiner une arborescence et une table

La différence avec le cas précédent est simplement que le nombre de treecol évolue et le nombre de treecell aussi en nombre égal.
Si l'on a trois colonnes, le listing précédent deviendra:

<treeitem container="true" open="true">
    <treerow 
        <treecell label="" />
        <treecell label="" />
        <treecell label="" />
    <treerow>
    <treechildren>
        <treeitem>
            ....
        </treeitem>
        <treeitem>
             ...
        </treeitem>
    </treechildren>
</treeitem>

Dans notre exemple, on a une colonne pour la personne, la ville et l'e-mail. Mais la personne est un objet hiérarchique, elle possède une liste dont chaque élément à un nom, une ville, une adresse e-mail.

Accéder aux éléments de tree

Lorsque l'utilisateur clique sur un élément de tree, un évènement est déclenché que l'on peut connaitre avec le gestionnaire d'évènement onselect.
Et l'on sait quel élément a été sélectionné grâce à l'attribut currentIndex qui contient le numéro dans la hiérarchie.
On ajoute donc le gestionnaire à l'objet tree:

<tree onselect="selecting(currentIndex);" >

Et l'on crée une fonction JavaScript pour effectuer un traitement quelconque, dans l'exemple on affiche le numéro de l'élément désigné:

function selecting(idx)
{
    alert("Selection " + idx);
}

L'exemple montre comment sont attribués les numéros aux éléments:

• Démo: code.zip

Ce chapitre ne présente que les bases de l'objet tree. Son utilisation devient plus complexe avec l'emploi de fichiers RDF pour le contenu dynamique.