Manuel de référence du programmeur XUL

<tree>
Attributs Enfants communs
id treehead
multiple treechildren

 

<treehead>
Attributs Enfants communs
id treerow
  treecol
  treeitem

 
<treecol>
Attributs Enfants communs
id  
fixed  
height  
width  

 
<treerow>
Attributs Enfants communs
id treehead
  treechildren

 
<treeitem>
Attributs Enfants communs
id treehead
container treechildren
open  

 
<tree> est l'élément racine d'un arbre XUL. Il fournit la possibilité d'afficher de multiples éléments dans un format tabulaire. Chaque élément est représenté comme une ligne dans la table. Chaque ligne peut se composer de multiples cellules La structure XUL d'arborescente multiple est semblable à une structure de table HTML. Les étiquettes suivantes sont assez analogues à leurs équivalent table en HTML.
 
Table Tree
table tree
caption treecaption
colgroup treecolgroup
col treecol
thead treehead
tbody treechildren, treeitem
tfoot treefoot
tr treerow
td treecell
Pour insérer un widget d'arbre dans un document, utilisez l'étiquette tree. Cette étiquette est analogue à l'étiquette table en HTML.
Le widget d'arbre peut contenir une légende, qui peut être indiquée en utilisant l'étiquette treecaption.

L'information de la colonne de l'arbre peut être indiquée en utilisant treecolgroup et des étiquettes treecol; ces étiquettes répondent toutes aux mêmes propriétés que les étiquettes col HTML. Ces étiquettes de colonne peuvent être employées pour indiquer des largeurs de colonne et pour appliquer des modèles à différentes colonnes dans la visibibilité de l'arbre. Les étiquettes de colonne d'arbre peuvent répondre à une propriété supplémentaire de CSS, column-layout, qui indique si la taille de cette colonne est altérable en utilisant les possibilités de remettre la colonne de l'arbre à la côte. Elle a des valeurs fixe et flexible, étant flexible par défaut.

Un arbre peut contenir des en-têtes, des corps et des titres de bas de page, tout comme une table . Un corps de widget d'arbre, à la différence du corps d'une table sera constraint quand la taille de la table est contrainte.

L'étiquette treeitem est employée pour déclarer un élément simple (avec la ligne de cet élément et les enfants) dans l'arbre. L'élément tree contient une ou plusieurs lignes, qui sont indiquées en utilisant l'étiquette treerow. Chaque ligne se compose d'une ou plusieurs cellules, qui sont indiquées en utilisant l'étiquette treecell.

 
<tree>
  <treehead>
    <treerow>
      <treecell>Name</treecell>
      <treecell>URL</treecell>
    </treerow>
  </treehead>
  <treechildren>
    <treeitem>
          <treerow>
        <treecell>Netscape Home Page</treecell>
        <treecell>http://www.netscape.com</treecell>
      </treerow>
        </treeitem>
  </treechildren>
</tree>
                  
Les éléments tree sont ouverts ou fermés et leur état est indiqué en utilisant l'attribut open. Cet attribut, quand il est mis à true, indique que les enfants de l'élément tree devraient être affichés dans l'arbre. S'il est à faux ou s'il n'est pas placé du tout, alors les enfants de l'élément tree ne sont pas affichés.

Les enfants d'un élément tree sont utilisés en indiquant l'étiquette treechildren, qui est placée dans l'étiquette parent treeitem. L'étiquette treechildren contient les éléments d'arbre qui représentent les enfants du noeud parent.

 
<tree>
  <treehead>
    <treerow>
      <treecell>Name</treecell>
      <treecell>URL</treecell>
    </treeitem>
  </treerow>
  <treechildren>
    <treeitem>
          <treerow>
        <treecell>Netscape Bookmarks Folder</treecell>
        <treecell/>
      </treerow>
      <treechildren>
        <treeitem>
                  <treerow>
                <treecell>Netscape Home Page</treecell>
                <treecell>http://www.netscape.com</treecell>
                  </treerow>
        </treeitem>
      </treechildren>
    </treeitem>
  </treechildren>
</tree>
                  
L'arbre manipule automatiquement la sélection et il est capable de supporter la sélection simple et multiple (par l'utilisation des clés de modification CTRL/command et SHIFT). La sélection de l'arbre est reflétée dans le modèle de contenu. Les éléments d'arbre qui sont choisis ont un attribut appelé selected mis à true. Les lignes d'arbre qui sont choisies ont un attribut appelé selectedrow. Les cellules d'arbre qui sont choisies ont un attribut appelé selectedcell qui est placé à true. Le CSS peut être appliqué en utilisant les règles de l'attribut selector, permettant au concepteur de l'arbre de contrôler la visibilité de la sélection de l'arbre.

Un handler choisi peut être attaché à l'arbre et ce dérouleur sera appelé toutes les fois que la sélection de l'arbre change. Vous pouvez l'ajouter comme attribut (par exemple, onselect) sur l'étiquette d'arbre ou l'ajouter en utilisant la méthode DOM addEventListener.

Le widget tree supporte également le feedback sur des éléments et des cellules. Ce feedback est également reflété dans le modèle de contenu. Les éléments d'arbre qui sont actuellement activés par la souris ont un attribut appelé hover mis à vrai. Les cellules d'arbre qui sont activées par la souris ont un attribut appelé hover mis à vrai. Les lignes d'arbre utilisent également hover. Le CSS peut être appliqué en utilisant les règles d'attribut selector, qui permettent la commande des effets de feedback hover pour l'arbre. [Ceci changera probablement pour utiliser le mécanisme :hover à un certain point, en supposant qu'un certain mécanisme de fonctionnement pour hover soit déterminé.]

Puisque l'arbre manipule la sélection, des événements qui iraient normalement au contenu à l'intérieur de la cellule sont arrêtés par la cellule. Ce comportement peut être arrêté cellule par cellule en plaçant l'attribut treeallowevents sur la cellule. Cet attribut, quand il est mis à true, indique que la cellule est insélectionnable et que l'intérieur du contenu devrait recevoir des événements (comme des cliques de souris et des frappes de clavier).

Pour permettre à des événements sélectionnés d'aller au contenu des cellules (par exemple, un bouton à l'intérieur d'une cellule), l'attribut treeallowevents peut être placé sur un noeud qui est un descendant de la cellule.
 
 
 
 

 


 

Last updated: 13:10 1/26/00 Ian Oeschger
French version (7/7/00) Matthieu Camus