9.2 Styler un arbre

Écrit par Neil Deakin. Traduit par Durandal (13/08/2004).
Page originale : http://www.xulplanet.com/tutorials/xultu/treestyle.html

Cette section explique comment styler un arbre.

Styler l'arbre

Vous pouvez styler la bordure de l'arbre et les en-têtes de colonnes de la même manière que pour d'autres éléments. Les styles ajoutés à l'élément tree seront appliqué à l'arbre entier. Ajouter un style à l'élément treecol n'applique pas le style à la colonne mais seulement à l'en-tête.

Le corps de l'arbre doit être stylé d'une manière un peu différente des autres éléments, parce que le corps de l'arbre est stocké d'une manière différente des autres éléments. Le treechildren extérieur est le seul vrai élément du corps de l'arbre. Les éléments intérieurs n'ont qu'un rôle de conteneurs.

Vous devez donc utiliser l'attribut properties sur les lignes ou les cellules pour modifier une ou plusieurs propriétés nommées. Cela peut être utilisé avec des arbres à contenu statique ou produit par RDF ou avec des arbres à vue personnalisée. Supposons que nous voulions donner une couleur de fond bleue à une ligne particulière, comme il est possible de le remarquer sur les libellés dans Mozilla Mail. Nous allons utiliser une propriété appelée makeItBlue. Vous pouvez utiliser le nom que vous voulez. Vous pouvez modifier plusieurs propriétés en les séparant par des espaces.

Modifiez la propriété sur une ligne ou une cellule, comme dans l'exemple suivant :

<treerow properties="makeItBlue">

La feuille de style peut récupérer cette propriété et l'utiliser pour changer l'apparence d'une ligne pour les messages non lus ou les libellés. Les propriétés fonctionnent en quelque sorte comme les classes de style, bien qu'elles nécessitent une syntaxe un peu plus complexe à utiliser dans une feuille de style. Ceci parce qu'il est possible de spécifier un style pour chaque partie d'une cellule. Vous pouvez styler non seulement la cellule et son texte, mais aussi le "twisty" (NdT : petit '+' ou '-' permettant de développer et replier l'arborescence) et l'indentation. La syntaxe à utiliser est la suivante :

treechildren::-moz-tree-row(makeItBlue)
{
  background-color: blue;
}

Ce pseudo-style spécial est utilisé pour styler la couleur de fond des lignes qui ont la propriété makeItBlue. Cette syntaxe spéciale est nécessaire parce que les cellules elles-mêmes ne sont pas des éléments séparés. Tout le contenu intérieur au corps de l'arbre est rendu par l'élément treechildren (Notez que les styles de la règle ci-dessus concernent l'élément treechildren). Le pseudo-style met des règles de style pour des parties particulières de ce qu'il affiche. Cette règle de style signifie, dans un élément treechildren : mettre une couleur de fond bleue à toutes les lignes de l'arbre qui ont la propriété 'makeItBlue'.

Le texte ::-moz-tree-row spécifie quelle est la zone de contenu désirée, qui est dans ce cas une ligne. Vous pouvez aussi utiliser les valeurs suivantes :

::-moz-tree-cell

une cellule. Utilisez ceci pour modifier les couleurs des bordures et du fond.

::-moz-tree-cell-text

le texte d'une cellule. Utilisez ceci pour modifier la police et la couleur du texte.

::-moz-tree-twisty

l'apparence du "twisty" utilisé pour développer et replier les lignes filles.

::-moz-tree-image

l'image pour une cellule. Vous pouvez indiquer l'image avec la propriété list-style-image.

::-moz-tree-row

une ligne. Utilisez ceci pour choisir la couleur de fond d'une ligne.

::-moz-tree-indentation

l'indentation à gauche des lignes filles.

::-moz-tree-column

une colonne.

::-moz-tree-line

les lignes dessinées pour connecter les lignes filles aux lignes parentes.

::-moz-tree-separator

un séparateur dans un arbre.

::-moz-tree-progressmeter

contenu pour des cellules à indicateur de progression. Vous pouvez créer une colonne avec des indicateurs de progression en mettant l'attribut type de la colonne à progressmeter.

::-moz-tree-drop-feedback

le retour du glisser-déposer.

Vous pouvez tester la présence de plusieurs propriétés en les séparant par des virgules. L'exemple ci-dessous met une couleur de fond grise aux lignes qui ont les propriétés readonly et unread. Pour les propriétés qui sont readonly, il ajoute une bordure rouge autour de la ligne. Notez que la première règle s'appliquera à toute ligne qui est readonly, peu importe la présence d'autres propriétés comme unread.

treechildren::-moz-tree-row(readonly)
{
  border: 1px solid red;
}

treechildren::-moz-tree-row(readonly, unread)
{
  background-color: rgb(80%, 80%, 80%);
}

La liste des propriétés des éléments tree contient un petit nombre de propriétés par défaut, que vous pouvez aussi utiliser dans une feuille de style. Vous pouvez utiliser ces propriétés supplémentaires pour modifier l'apparence des conteneurs ou des lignes sélectionnées. Les propriétés suivantes sont modifiées automatiquement en cas de besoin :

focus: cette propriété est mise si l'arbre a le focus.
selected: cette propriété est mise pour les lignes ou les cellules actuellement sélectionnées.
current: cette propriété est mise si le curseur est sur la ligne. Seule une ligne à la fois peut avoir cette propriété.
container: cette propriété est mise pour les lignes ou les cellules qui ont des lignes filles.
leaf: cette propriété est mise pour les lignes ou les cellules qui n'ont pas de lignes filles.
open: cette propriété est mise pour les lignes ou les cellules qui sont développées.
closed: cette propriété est mise pour les lignes ou les cellules qui sont repliées.
primary: cette propriété est mise pour les cellules de la colonne primaire.
sorted: cette propriété est mise pour les cellules de la colonne actuellement triée.
even: cette propriété est mise pour les lignes paires.
odd: cette propriété est mise pour les lignes impaires. Cette propriété ainsi que la propriété even, vous permettent, par exemple, d'alterner les couleurs entre chaque ligne.
dragSession: cette propriété est mise si quelque chose est en train d'être déplacé.
dropOn: si un déplacement a lieu au-dessus de l'arbre, cette propriété est mise pour la ligne en train d'être survolée par le déplacement, tant que le pointeur de la souris est au-dessus de la ligne.
dropBefore: cette propriété est mise si le pointeur de la souris survole avant la ligne en cours de déplacement.
dropAfter: cette propriété est mise si le pointeur de la souris survole après la ligne en cours de déplacement.
progressNormal: cette propriété est mise pour les cellules à indicateur de progression.
progressUndetermined: cette propriété est mise pour les cellules à indicateur de progression indéterminé.
progressNone: cette propriété est mise pour les cellules sans indicateur de progression.

Les propriétés sont mises pour les lignes ou les cellules d'une ligne à l'état correspondant. Pour les colonnes et les cellules, une propriété additionnelle, l'id de la colonne ou la colonne dans laquelle est la cellule, sera mis.

Pour les arbres générés par RDF, vous pouvez utiliser la même syntaxe. Cependant, vous mettrez souvent les propriétés en vous basant sur des valeurs dans la source de données.

Pour des arbres avec un script de vue personnalisée, vous pouvez modifier des propriétés en fournissant les fonctions getRowProperties, getColumnProperties et getCellProperties dans la vue. Elles renvoient des informations à propos d'une ligne, d'une colonne et d'une cellule individuelle. Les arguments à ces fonctions indiquent quelle ligne et/ou colonne. Le dernier argument de chacune de ces fonctions est une liste de propriétés que la vue est supposée remplir avec une liste de propriétés. La fonction getColumnProperties fournit aussi l'élément treecol correspondant pour la colonne.

getRowProperties : function(row,prop){}
getColumnProperties : function(column,columnElement,prop){}
getCellProperties : function(row,column,prop){}

Regardons un exemple de modification d'une cellule spécifique. Rendons le texte d'une ligne sur quatre bleu, en utilisant l'exemple d'une section précédente. Nous allons avoir besoin d'ajouter du code à la fonction getCellProperties, pour ajouter une propriété 'makeItBlue' aux cellules toutes les quatres lignes. (Nous n'utilisons pas getRowProperties puisque la couleur du texte ne sera pas héritée dans chaque cellule).

L'objet properties qui est passé en dernier argument de getCellProperties est un objet XPCOM qui implémente nslSupportsArray. Il s'agit en fait une version XPCOM d'un tableau. Il contient une fonction AppendElement qui peut être utilisée pour ajouter un élément au tableau. Nous pouvons utiliser l'interface nslAtomService pour construire des atomes de chaînes pour les propriétés.

getCellProperties: function(row,col,props){
  if ((row %4) == 0){
    var aserv=Components.classes["@mozilla.org/atom-service;1"].
              getService(Components.interfaces.nsIAtomService);
    props.AppendElement(aserv.getAtom("makeItBlue"));
  }
}

Cette fonction sera définie comme partie d'un objet de vue. Elle vérifie d'abord quelle ligne est demandée et affecte une propriété pour les cellules toutes les quatres lignes. La liste des propriétés requiert un tableau d'objets atom, qui peuvent être considérés comme des chaînes de caractères constantes. Nous les créons en utilisant l'interface XPCOM nslAtomService et nous les ajoutons au tableau en utilisant la fonction AppendElement. Ici, nous créons un atome 'makeItBlue'. Vous pouvez appeler AppendElement à nouveau pour ajouter des propriétés additionnelles.

Dans la suite, nous allons voir comment modifier le thème par défaut.