10.2 Styler un arbre

Attention : Ce tutoriel est ancien et n'est pas mis à jour. Bien que beaucoup d'informations soient encore valables pour les dernières versions de gecko, beaucoup sont aussi obsolètes. Il est préférable d'aller consulter cette page sur la version française de ce tutoriel sur developer.mozilla.org.

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és à l'arbre entier. L'ajout d'un style à l'élément treecol ne l'applique pas à la colonne mais seulement à son 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.

Définition de propriétés

Vous devez donc utiliser l'attribut properties sur les lignes ou les cellules pour modifier une ou plusieurs propriétés nommées. Cet attribut peut être utilisé avec des arbres à contenu statique, 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 la messagerie de Mozilla. 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">

Sélecteurs CSS pour l'arbre

La feuille de styles 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 styles. En effet, 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 obtient son rendu par l'élément treechildren. Cependant, CSS dispose d'un concept pour accéder aux parties des éléments en les considérant comme des pseudo-éléments. Ce sélecteur correspond à quelques lignes de l'arbre à l'intérieur de l'élément treechildren comme pseudo-élément. Le pseudo-style définit 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.
::-moz-tree-checkbox
l'image à utiliser pour les colonnes de case à cocher.

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%);
}

Propriétés par défaut

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 styles. 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ées.

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 mise.

Définition des propriétés pour les arbres générés par RDF

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

Définition des propriétés pour les vues personnalisé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 bleu une ligne sur quatre, 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 nécessite 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.

Exemple de feuille de styles

treechildren::-moz-tree-row(selected)            { background-color: #FFFFAA; }
treechildren::-moz-tree-row(odd)                 { background-color: #EEEEEE; }
treechildren::-moz-tree-row(odd, selected)       { background-color: #FFFFAA; }
treechildren::-moz-tree-cell-text(selected)      { color: #000000; }
treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; }

---

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