3.7 - Construction d'arbres hiérarchiques

Attention : Ce tutoriel est ancien, incomplet, et n'est pas mis à jour. Il ne contient pas toutes les nouveautés du système de template de Gecko 1.9 / Firefox 3.0 qui est largement simplifié et permet d'utiliser sqlite ou xml comme source de données. Aussi est-il préférable d'aller consulter la version anglaise sur developer.mozilla.org.

Un gabarit peut être utilisé pour générer des arbres hiérarchiques. Il fonctionne comme un constructeur de contenu basé sur une génération récursive. Chaque niveau de l'arbre est créé par itération successive du processus de construction du gabarit. Si les items sont des conteneurs, le constructeur d'arbre marquera les lignes concernées comme étant des conteneurs, donc elles pourront être développées ou refermées avec les petits icônes à gauche de la colonne. Pensez à définir la colonne de gauche comme étant une colonne primaire afin que ces icônes apparaissent.

Pour procéder ainsi, le constructeur d'arbre doit savoir si un item est un conteneur. Habituellement, l'arbre est affiché à partir de données dans un conteneur RDF tel qu'un Seq. Dans ce cas, il est facile de savoir si un noeud est un conteneur. Si un noeud est un conteneur RDF, l'item de l'arbre devient également un conteneur que l'utilisateur peut ouvrir en double-cliquant dessus.

Notez que ce test est effectué sur la valeur membre et non sur la valeur de référence.

Par exemple, dans l'exemple des photos, nous disposons d'un conteneur http://www.xulplanet.com/rdf/myphotos avec trois photos. Trois résultats seront générés à partir d'une seule règle sans conditions supplémentaires. C'est le résultat, ou la photo, qui sera testé, pas le conteneur des photos. Puisqu'une photo n'est pas un conteneur, les trois lignes ne deviendront pas des conteneurs et vous ne serez pas capable de les ouvrir. Comme les lignes ne sont pas des conteneurs, le constructeur d'arbre ne cherche pas de données supplémentaires par récursivité. Le constructeur d'arbre crée des lignes paresseusement, donc un conteneur fermé n'inclura aucune donnée générée tant que la ligne ne sera pas ouverte. Lorsque l'utilisateur ouvre la ligne d'un arbre, le niveau suivant des lignes est construit à partir du gabarit et affiché dans l'arbre. De façon similaire, lorsque l'utilisateur réduit une ligne d'un arbre, les lignes sous-jacentes sont enlevées de telle sorte qu'elles devront être générées de nouveau la prochaine fois que la ligne est ouverte.

Si vous désirez insérer des lignes dans les lignes de photos, vous devrez soit faire de chaque photo un conteneur RDF, ou soit utiliser un attribut containment pour spécifier des propriétés supplémentaires définissant des conteneurs. Si une photo particulière a une de ses propriétés faisant partie de l'attribut containment, elle sera acceptée comme un conteneur et l'utilisateur pourra ouvrir la ligne. Lorsque l'utilisateur ouvre la ligne, le gabarit va reconstruire les résultats en utilisant la photo comme point de départ plutôt que de reprendre la valeur ref du niveau le plus élevé.

Voici un exemple pour la source de données des rues :

<tree id="photosList" flex="1" datasources="template-guide-streets.rdf"
      ref="http://www.xulplanet.com/rdf/myneighbourhood" flags="dont-build-content"
      xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
  <treecols>
    <treecol id="address" primary="true" label="Adresse" flex="1"/>
    <treecol id="floors" label="Appartement" flex="1"/>
  </treecols>
  <template>
    <rule rdf:type="http://www.xulplanet.com/rdf/House">
      <treechildren>
        <treeitem uri="rdf:*">
          <treerow>
            <treecell label="rdf:http://www.xulplanet.com/rdf/address"/>
            <treecell label="rdf:http://www.xulplanet.com/rdf/floors"/>
          </treerow>
        </treeitem>
      </treechildren>
    </rule>
    <rule>
      <treechildren>
        <treeitem uri="rdf:*">
          <treerow>
            <treecell label="rdf:http://purl.org/dc/elements/1.1/title"/>
          </treerow>
        </treeitem>
      </treechildren>
    </rule>
  </template>
</tree>

Cet exemple est similaire à ce précédent exemple excepté qu'il utilise un arbre. La première règle traite les maisons comme indiqué par la condition de la règle, et la seconde règle traite les rue. Comme vous pouvez le voir ci-dessous avec cet extrait de la source de données, les rues sont des Seq, donc elles deviennent des conteneurs. Les maisons n'étant pas des conteneurs ne vont générer aucun enfant dans l'arbre.

<rdf:Bag rdf:about="http://www.xulplanet.com/rdf/myneighbourhood">
  <rdf:li>
    <rdf:Seq rdf:about="http://www.xulplanet.com/rdf/marion"
               dc:title="rue Marion">

Le résultat est un arbre hiérarchique à deux niveaux et à de deux colonnes.