initial commit

1 files changed, 105 insertions, 0 deletions

diff --git a/files/fr/archive/mozilla/xul/tutoriel_xul/arbres/index.html b/files/fr/archive/mozilla/xul/tutoriel_xul/arbres/index.html
new file mode 100644
index 0000000000..e566557c9a
--- /dev/null
+++ b/files/fr/archive/mozilla/xul/tutoriel_xul/arbres/index.html
@@ -0,0 +1,105 @@
+---
+title: Arbres
+slug: Archive/Mozilla/XUL/Tutoriel_XUL/Arbres
+tags:
+  - Tutoriel_XUL
+  - Tutoriels
+  - XUL
+translation_of: Archive/Mozilla/XUL/Tutorial/Trees
+---
+<p> </p>
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/fr/docs/Tutoriel_XUL:Exemple_de_glisser-déposer" style="float: left;">« Précédent</a><a href="/fr/docs/Tutoriel_XUL:Autres_caractéristiques_des_arbres">Suivant  »</a></p>
+</div>
+<p>XUL fournit un moyen de créer des listes tabulaires ou hiérarchiques en utilisant un arbre.</p>
+<h3 id="L.27.C3.A9l.C3.A9ment_XULElemtree" name="L.27.C3.A9l.C3.A9ment_XULElemtree">L'élément <code><a href="/fr/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></h3>
+<p>Un des éléments les plus complexes de XUL est l'arbre. Un arbre peut être utilisé pour afficher des lignes de texte en colonnes. Il peut servir pour des listes tabulaires ou arrangées hiérarchiquement. Un arbre permet également à l'utilisateur de réarranger, redimensionner et masquer individuellement certaines colonnes. Les messages dans une application courrier ou les marque-pages dans Mozilla sont des exemples d'utilisation d'arbres.</p>
+<p>D'une certaine manière, un arbre a des similitudes avec une boîte de liste <code><a href="/fr/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code>. Tous deux peuvent être utilisés pour créer des tableaux de données avec des lignes et des colonnes multiples, et ils peuvent contenir des en-têtes de colonnes. Les arbres supportent également les lignes imbriquées, alors que les boîtes de liste ne le peuvent pas. Toutefois, les boîtes de liste peuvent contenir n'importe quel type de contenu, alors que les arbres ne peuvent contenir que du texte et des images (par le biais de fonctionnalités avancées, des barres de progression et cases à cocher peuvent également être mis dans un arbre).</p>
+<p>Un arbre comporte deux parties : un ensemble de colonnes et le corps de l'arbre.</p>
+<ul> <li>L'ensemble de colonnes est défini avec plusieurs éléments XUL <code><a href="/fr/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code>, un pour chaque colonne. Chaque colonne apparaîtra comme un en-tête en haut de l'arbre.</li> <li>La seconde partie, le corps de l'arbre, contient les données apparaissant dans l'arbre. Il est créé grâce à l'élément <code><a href="/fr/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code>.</li>
+</ul>
+<p>L'arbre est un élément XUL particulier dans le sens où son corps est constitué d'un seul composant graphique qui dessine toutes les données dans l'arbre. Cette définition contraste avec la boîte de liste où des balises individuelles <code><a href="/fr/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code> et <code><a href="/fr/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code> sont utilisées pour spécifier chaque ligne dans l'élément <code><a href="/fr/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code>. Dans un arbre, toutes les données à afficher sont fournies par un objet séparé, appelé la vue d'arbre. Lorsqu'une cellule doit être affichée, le composant graphique de l'arbre fait appel à cet objet de vue d'arbre pour déterminer ce qui doit être affiché, et le dessine ensuite dans l'arbre. L'arbre est suffisamment intelligent pour ne solliciter les informations de la vue que pour les lignes qui ont besoin d'être affichées. Ainsi, l'affichage est optimisé par le chargement des données le nécessitant réellement. Par exemple, un arbre peut contenir des milliers de lignes, la plupart d'entre elles étant en dehors du cadre de l'arbre, cachées à la vue. Ainsi, l'arbre peut contenir un grand nombre de lignes sans rien perdre en performance. Bien entendu, ceci est indépendant de la performance de l'objet de vue lui-même.</p>
+<p>L'objet vue d'arbre implémente l'interface <a href="/fr/NsITreeView" title="fr/NsITreeView">nsITreeView</a>. Cette interface contient trente propriétés et fonctions que vous pourrez implémenter. Ces fonctions seront appelées par l'arbre, au besoin, pour récupérer les données et les états de l'arbre. Par exemple, la fonction <code>getCellText()</code> sera appelée pour obtenir le libellé d'une cellule particulière dans l'arbre.</p>
+<p>L'utilisation d'une vue a l'avantage de vous permettre de stocker vos données d'une façon plus adaptée à l'arbre, ou de charger les données sur demande seulement lorsque les lignes sont affichées. Elle offre une plus grande souplesse dans l'utilisation des arbres.</p>
+<p>Naturellement, devoir implémenter une vue d'arbre avec une trentaine de propriétés et méthodes peut être très encombrant, surtout pour des arbres simples. Fort heureusement, XUL fournit un ensemble d'implémentations natives réalisant le gros du travail pour vous. Pour la plupart des arbres, surtout lorsque vous débutez, vous utiliserez un de ces types natifs. Cependant, vous pouvez créer également une vue d'arbre entièrement de A à Z. Dans ce cas, vous devrez stocker vos données dans un tableau ou une structure JavaScript, ou les charger à partir d'un fichier XML.</p>
+<p>Comme le corps de l'arbre dans sa totalité est un unique élément graphique, vous ne pouvez pas modifier le style des lignes ou des cellules individuellement de manière classique. En fait, il n'existe pas d'éléments affichant des cellules individuelles comme il en existe avec les boîtes de liste. À la place, tout l'affichage est effectué par le corps de l'arbre grâce aux données fournies par la vue de l'arbre. Ce point important peut dérouter bien des développeurs XUL. Pour modifier l'apparence d'une cellule d'un arbre, la vue doit associer un jeu de mots clefs pour une ligne et une cellule. Une syntaxe CSS spéciale est employée entre les composants de styles du corps d'un arbre grâce à ces mots clefs. Dans un sens, le mécanisme est similaire aux classes CSS. L'application d'un style à un arbre sera détaillée dans <a href="/fr/Tutoriel_XUL/Styler_un_arbre" title="fr/Tutoriel_XUL/Styler_un_arbre">une section ultérieure</a>.</p>
+<h3 id="Les_.C3.A9l.C3.A9ments_d.27arbre" name="Les_.C3.A9l.C3.A9ments_d.27arbre">Les éléments d'arbre</h3>
+<p>Les arbres sont créés avec l'élément <code><a href="/fr/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code> qui sera décrit dans les prochaines sections. Il existe également deux éléments définissant l'affichage des colonnes dans l'arbre.</p>
+<dl> <dt><code><a href="/fr/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code> </dt> <dd>L'élément entourant d'un arbre</dd> <dt><code><a href="/fr/docs/Mozilla/Tech/XUL/treecols" title="treecols">treecols</a></code> </dt> <dd>L'élément initialisant une série de <code><a href="/fr/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></dd> <dt><code><a href="/fr/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code> </dt> <dd>Cet élément déclare une colonne d'arbre. Avec l'utilisation de cet élément, vous pouvez spécifier des informations supplémentaires sur le tri des données en colonne ou encore la possibilité ou non pour l'utilisateur de redimensionner les colonnes. Vous devez toujours placer un attribut <code id="a-id"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/id">id</a></code> sur une colonne, car Mozilla utilise cet identifiant pour les colonnes à réarranger ou à masquer. Il n'est plus nécessaire sous les versions 1.8 et suivantes de Mozilla, mais c'est une bonne habitude à conserver.</dd> <dt><code><a href="/fr/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code> </dt> <dd>Cet élément contient le corps principal de l'arbre, là où les lignes individuelles de données seront affichées</dd>
+</dl>
+<p>Voici un exemple d'arbre avec deux colonnes :</p>
+<p><span id="Exemple_1"><a id="Exemple_1"></a><strong>Exemple 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_1.xul">Voir</a></p>
+<pre>&lt;tree flex="1"&gt;
+
+  &lt;treecols&gt;
+    &lt;treecol id="nameColumn" label="Nom" flex="1"/&gt;
+    &lt;treecol id="addressColumn" label="Adresse" flex="2"/&gt;
+  &lt;/treecols&gt;
+
+  &lt;treechildren/&gt;
+
+&lt;/tree&gt;
+</pre>
+<p>Tout d'abord, l'ensemble du tableau est entouré avec l'élément <code><a href="/fr/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code>. Il déclare un élément qui servira de tableau ou d'arbre. Comme avec les tables HTML, les données d'un arbre sont toujours organisées en lignes. Les colonnes sont spécifiées grâce à la balise <code><a href="/fr/docs/Mozilla/Tech/XUL/treecols" title="treecols">treecols</a></code>.</p>
+<p>Vous pouvez mettre dans un arbre autant de colonnes que vous le souhaitez. Comme pour les boîtes de listes, une ligne d'en-tête apparaîtra avec les libellés des colonnes. Un menu déroulant apparaîtra dans le coin supérieur droit de l'arbre et permettra à l'utilisateur d'afficher ou de masquer les colonnes individuellement. Chaque colonne est créée avec l'élément <code><a href="/fr/docs/Mozilla/Tech/XUL/treecols" title="treecols">treecols</a></code>. Vous pouvez définir le libellé d'en-tête en utilisant l'attribut <code id="a-label"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/label">label</a></code>. Vous pouvez également rendre vos colonnes flexibles si votre arbre l'est aussi, ainsi les colonnes s'ajusteront en fonction de l'arbre. Dans cet exemple, la seconde colonne sera deux fois plus large que la première. Toutes les colonnes doivent être définies à l'intérieur de l'élément <code><a href="/fr/docs/Mozilla/Tech/XUL/treecols" title="treecols">treecols</a></code>.</p>
+<p>Dans ce cas, nous n'avons pas indiqué à la vue les données de l'arbre, seuls les en-têtes de colonnes et un arbre vide seront visibles. Vous pouvez redimensionner la fenêtre, mais rien n'apparaîtra puisqu'il n'y a aucune donnée à afficher. Puisque la flexibilité de l'arbre a été spécifiée, son corps s'ajustera à l'espace disponible. La flexibilité d'un arbre est couramment appliquée, car les données de l'arbre sont souvent les informations les plus significatives affichées, donc il est logique que l'arbre puisse ajuster sa dimension. Toutefois, vous pouvez spécifier un nombre de lignes à afficher dans l'arbre en affectant l'attribut <code id="a-rows"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/rows">rows</a></code> sur l'élément <code><a href="/fr/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code>. Notez que cet attribut indique le nombre de lignes qui seront affichées dans l'interface utilisateur et non le nombre de lignes de données. Le nombre total de lignes de données est fourni par la vue d'arbre. S'il y a trop de lignes de données à afficher dans l'arbre, une barre de défilement apparaîtra pour permettre à l'utilisateur de visualiser le reste. Si vous ne spécifiez aucun attribut <code id="a-rows"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/rows">rows</a></code>, la valeur par défaut sera '0' signifiant qu'aucune ligne ne s'affichera. Dans ce cas, vous devrez rendre votre arbre flexible. Si votre arbre est flexible, il n'a pas besoin d'un attribut <code id="a-rows"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/rows">rows</a></code> puisqu'il s'ajustera toujours à l'espace disponible.</p>
+<h3 id="Le_contenu_de_la_vue_d.27arbre" name="Le_contenu_de_la_vue_d.27arbre">Le contenu de la vue d'arbre</h3>
+<p>Nous avons vu que les données à afficher dans un arbre proviennent d'une vue et non de balises XUL, en passant par une construction interne de la vue d'arbre à partir des balises XUL. Ce mécanisme peut paraître légèrement confus. Retenez simplement que la construction des vues d'arbre emploie une série de balises servant à définir l'information sur les données dans l'arbre. Les éléments suivants sont utilisés :</p>
+<dl> <dt><code><a href="/fr/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code> </dt> <dd>Il contient une unique ligne de niveau supérieur et tous ses descendants. Il sert également d'item pouvant être sélectionné par l'utilisateur. La balise <code><a href="/fr/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code> entoure toute une ligne en permettant de la sélectionner entièrement.</dd> <dt><code><a href="/fr/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code> </dt> <dd>Une seule ligne d'un arbre devant être placée à l'intérieur d'une balise <code><a href="/fr/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code>.</dd> <dt><code><a href="/fr/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code> </dt> <dd>Une seule cellule d'un arbre. Cet élément est placé à l'intérieur d'un élément <code><a href="/fr/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code>.</dd>
+</dl>
+<p>Par convention, ces balises peuvent être placées directement à l'intérieur de la balise <code><a href="/fr/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code>, imbriquées dans l'ordre mentionné ci-dessus. Ces balises définissent les données à afficher dans le corps de l'arbre. Dans ce cas, l'arbre utilise la construction interne de la vue d'arbre, appelée le contenu de la vue d'arbre, qui utilise les libellés et les valeurs spécifiés sur ces éléments comme données pour l'arbre. Lorsque l'arbre a besoin d'afficher une ligne, il demande à la vue d'arbre le libellé de la cellule en appelant la fonction <code>getCellText()</code> de la vue qui, dans la continuité, obtient la donnée de l'élément <code><a href="/fr/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code> correspondant.</p>
+<p>Cependant, les trois éléments listés ci-dessus ne sont pas affichés directement. Ils ne sont utilisés que comme source de données pour la vue. Ainsi, seuls des attributs utiles sont appliqués sur l'élément <code><a href="/fr/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code> et les éléments associés. Par exemple, vous ne pouvez pas modifier l'apparence des lignes d'un arbre en utilisant un attribut <code id="a-style"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/style">style</a></code> ou d'autres propriétés CSS, et les fonctionnalités existantes pour les boîtes, telles que la flexibilité et l'orientation, ne peuvent pas être employées.</p>
+<p>En fait, à part quelques attributs spécifiques aux arbres, les seuls qui auront un effet sont l'attribut <code id="a-label"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/label">label</a></code> pour définir un texte libellé d'une cellule et l'attribut <code id="a-src"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/src">src</a></code> pour définir une image. Toutefois, dans les sections ultérieures, nous verrons des moyens spéciaux de modifier le style d'un arbre et d'appliquer d'autres fonctionnalités.</p>
+<p>De même, les événements ne sont pas générés par un élément <code><a href="/fr/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code> et ses enfants ; en revanche, ils seront générés par l'élément <code><a href="/fr/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code>.</p>
+<p>Le fait que les éléments <code><a href="/fr/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code> soient si différents des autres éléments XUL est une source classique de confusion pour les développeurs XUL. Essentiellement, le contenu de la vue d'arbre est une vue où les données des cellules sont fournies à partir des balises placées à l'intérieur de l'arbre. Naturellement, si vous utilisez un type différent de vue, les données seront fournies par une autre source, et il n'y aura aucun élément <code><a href="/fr/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code> du tout.</p>
+<p>Commençons par regarder comment créer un arbre simple avec des colonnes multiples en utilisant la vue d'arbre de contenu. Il pourrait servir à créer une liste de messages mél (mails). Il y aura plusieurs colonnes, telles que l'expéditeur et le sujet.</p>
+<h4 id="Exemple_avec_treechildren" name="Exemple_avec_treechildren">Exemple avec <code>treechildren</code></h4>
+<p><span id="Exemple_2"><a id="Exemple_2"></a><strong>Exemple 2</strong></span>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_2.xul">Voir</a></p>
+<p><img alt="Image:xultu_trees1.png" class="internal" src="/@api/deki/files/1565/=Xultu_trees1.png"></p>
+<pre>&lt;tree flex="1"&gt;
+
+  &lt;treecols&gt;
+    &lt;treecol id="sender" label="Expéditeur" flex="1"/&gt;
+    &lt;treecol id="subject" label="Sujet" flex="2"/&gt;
+  &lt;/treecols&gt;
+
+  &lt;treechildren&gt;
+    &lt;treeitem&gt;
+      &lt;treerow&gt;
+        &lt;treecell label="joe@somewhere.com"/&gt;
+        &lt;treecell label="Plans Top secret"/&gt;
+      &lt;/treerow&gt;
+    &lt;/treeitem&gt;
+    &lt;treeitem&gt;
+      &lt;treerow&gt;
+        &lt;treecell label="mel@whereever.com"/&gt;
+        &lt;treecell label="Invitation à déjeuner"/&gt;
+      &lt;/treerow&gt;
+    &lt;/treeitem&gt;
+  &lt;/treechildren&gt;
+
+&lt;/tree&gt;
+</pre>
+<p>Comme vous pouvez le voir sur cette image, l'arbre a été créé avec deux lignes de données.</p>
+<p>Cet arbre a deux colonnes dont la seconde occupe plus de place que la première. Vous rendrez généralement les colonnes flexibles. Vous pouvez également imposer les largeurs grâce à l'attribut <code id="a-width"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/width">width</a></code>. Vous devez inclure le même nombre d'éléments <code><a href="/fr/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code> qu'il y a de colonnes dans l'arbre. Dans le cas contraire, des choses étranges pourraient se produire.</p>
+<p>Les en-têtes sont créés automatiquement. Le bouton situé dans le coin supérieur droit sert à afficher ou à masquer les colonnes. Vous pouvez placer un attribut <code id="a-hidecolumnpicker"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/hidecolumnpicker">hidecolumnpicker</a></code> sur l'élément <code><a href="/fr/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code> et le définir à 'true' si vous désirez masquer ce bouton. Si ce bouton est masqué, l'utilisateur ne sera pas en mesure de masquer des colonnes.</p>
+<p>Assurez-vous d'avoir défini un attribut <code id="a-id"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/id">id</a></code> sur chaque colonne, sinon les actions de masquage et d'affichage ne fonctionneront pas avec toutes les versions de Mozilla.</p>
+<p>L'élément <code><a href="/fr/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code> entoure toutes les lignes. Les lignes individuelles à l'intérieur du corps peuvent contenir d'autres lignes. Pour l'arbre le plus simple, chaque ligne est créée avec les éléments <code><a href="/fr/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code> et <code><a href="/fr/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code>. L'élément <code><a href="/fr/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code> entoure toutes les cellules d'une ligne, tandis que l'élément <code><a href="/fr/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code> entoure une ligne et tous ses enfants. Les arbres avec des lignes imbriquées seront décrits dans la section suivante.</p>
+<p>Dans les cellules, vous placerez les cellules individuelles. Elles sont créées avec l'élément <code><a href="/fr/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code>. Vous pouvez définir un texte dans une cellule en utilisant l'attribut <code id="a-label"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/label">label</a></code>. Le premier élément <code><a href="/fr/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code> d'une ligne détermine le contenu qui apparaîtra dans la première colonne, le deuxième élément <code><a href="/fr/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code> détermine le contenu qui apparaîtra dans la deuxième colonne, et ainsi de suite.</p>
+<p>L'utilisateur peut sélectionner les items de l'arbre en cliquant sur eux avec la souris, ou en mettant en surbrillance avec le clavier. Il peut en sélectionner plusieurs en maintenant la touche <code>Maj</code> ou <code>Ctrl</code> appuyée et en cliquant sur d'autres lignes. Pour désactiver la sélection multiple, placez un attribut <code id="a-seltype"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/seltype">seltype</a></code> sur l'élément <code><a href="/fr/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code> avec la valeur 'single'. Ainsi, l'utilisateur ne pourra sélectionner qu'une seule ligne à la fois.</p>
+<div class="highlight">
+<h3 id="Ajout_d.27un_arbre_sur_notre_exemple_de_recherche_de_fichiers" name="Ajout_d.27un_arbre_sur_notre_exemple_de_recherche_de_fichiers">Ajout d'un arbre sur notre exemple de recherche de fichiers</h3>
+<p>Ajoutons un arbre à notre exemple de recherche de fichiers dans lequel les résultats de la recherche seront affichés. L'arbre utilisera une vue de contenu d'arbre. Le code suivant doit être ajouté à la place de la balise <code><a href="/fr/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code>.</p>
+<p>Exemple : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-trees.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-trees.xul">Voir</a></p>
+<pre class="eval"><span class="highlightred">&lt;tree flex="1"&gt;<br>  &lt;treecols&gt;<br>    &lt;treecol id="name" label="Nom de fichier" flex="1"/&gt;<br>    &lt;treecol id="location" label="Emplacement" flex="2"/&gt;<br>    &lt;treecol id="size" label="Taille" flex="1"/&gt;<br>  &lt;/treecols&gt;<br><br>  &lt;treechildren&gt;<br>   &lt;treeitem&gt;<br>     &lt;treerow&gt;<br>       &lt;treecell label="mozilla"/&gt;<br>       &lt;treecell label="/usr/local"/&gt;<br>       &lt;treecell label="2520 bytes"/&gt;<br>     &lt;/treerow&gt;<br>   &lt;/treeitem&gt;<br>  &lt;/treechildren&gt;<br>&lt;/tree&gt;</span>
+
+&lt;splitter collapse="before" resizeafter="grow"/&gt;
+</pre>
+<p>Nous avons ajouté un arbre avec les trois colonnes 'Nom de fichier', 'Emplacement' et 'Taille'. La deuxième colonne sera deux fois plus large grâce à une flexibilité plus grande. Une seule ligne a été ajoutée pour les besoins de la démonstration de l'apparence du tableau avec une ligne. Dans une implémentation réelle, les lignes seront ajoutées par un script à l'issue de la recherche, ou une vue personnalisée sera créée pour contenir les données.</p>
+</div>
+<hr>
+<p>Nous verrons ensuite comment créer des arbres plus complexes.</p>
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/fr/docs/Tutoriel_XUL:Exemple_de_glisser-déposer" style="float: left;">« Précédent</a><a href="/fr/docs/Tutoriel_XUL:Autres_caractéristiques_des_arbres">Suivant  »</a></p>
+</div>
+<p><span class="comment">Interwiki</span></p>