4.3 Piles et Paquets

Il se peut qu'il soit nécessaire d'afficher des éléments comme un empilement superposé de cartes. Les éléments stack et deck peuvent être utilisés à cet effet.

Containers

Chaque boîte XUL est un container qui peut contenir n'importe quel autre élément. Il y a un certain nombre d'éléments qui sont des types spécialisés de boîtes, tels que les barres d'outils et les onglets. La balise box crée la plus simple des boîtes sans propriétés spéciales. Toutefois, les types spécialisés de boîtes fonctionnent comme des boîtes normales dans le sens où elles orientent les éléments qu'elles contiennent, mais elles ont des fonctionnalités supplémentaires.

En fait, beaucoup de composants peuvent contenir d'autres éléments. Nous avons déjà vu que les boutons peuvent contenir d'autres choses par rapport à celui par défaut. Une barre de défilement est juste un type spécial de boîte qui crée ses propres éléments si vous ne les fournissez pas. Ceux ci contrôlent également le déplacement de l'ascenseur de la barre de défilement.

Dans les prochains chapitres, nous allons introduire quelques éléments qui sont prévus pour le contrôle d'autres éléments. Ce sont tous des types spéciaux de boîtes et permettent d'inclure tous les attributs des boîtes.

Piles

L'élément stack est une simple boîte. Il fonctionne comme tout autre boîte mais a la propriété spéciale que ces enfants sont tous disposés les uns au dessus des autres. Le premier enfant de la pile est dessiné sur le dessous, le second enfant est dessiné ensuite, suivi du troisième et ainsi de suite. De nombreux éléments peuvent être empilés sur une pile.

La propriété orient a une signification particulière sur un élément stack, comme les enfants sont empilés les uns sur les autres au lieu d'être côte à côte (NdT : l'attribut orient semble ne pas avoir d'effet). La dimension d'une pile est déterminée par son plus grand enfant, mais vous pouvez utilisez les propriétés CSS width, height, min-width ou d'autres propriétés similaires à la fois sur la pile et ses enfants.

L'élément stack pourrait être utilisé quand un indicateur d'état a besoin d'être ajouté au dessus d'un élément existant. Par exemple, un indicateur de progression pourrait être créé avec une barre et un libellé en surimpression.

Une utilisation pratique de l'élément stack est que vous pouvez simuler un certain nombre de propriétés CSS avec. Par exemple, vous pouvez créer un effet similaire à la propriété text-shadow comme ceci :

Exemple 4.3.1 : Source Voir

<stack>
   <description value="Ombré" style="padding-left: 1px; padding-top: 1px; font-size: 15pt"/>
   <description value="Ombré" style="color: red; font-size: 15pt;"/>
</stack>

Les deux éléments description créent chacun un texte avec une taille de 15 points. Le premier est toutefois décalé d'un pixel vers la droite et vers le bas grâce à l'ajout d'une marge de texte sur la gauche et sur le haut. Le résultat est le dessin répété du même texte 'Ombré' mais en léger décalage. Le second élément description est dessiné en rouge pour que l'effet soit encore plus visible.

Cette méthode a des avantages sur l'emploi de text-shadow car vous pouvez complètement personnaliser les effets d'ombres de votre texte principal. Il peut avoir sa propre police de caractères, un soulignement ou une taille propre (vous pouvez même créer un texte ombré clignotant). C'est aussi utile car Mozilla ne supporte pas pour l'instant les textes ombrés en CSS. Un désavantage est que l'espace occupé par le texte ombré fait une pile plus grande. L'effet d'ombrage est très utile pour créer des boutons d'apparence désactivée :

Exemple 4.3.2 : Source Voir

<stack style="background-color: #C0C0C0">
   <description value="Désactivé" style="color: white; padding-left: 1px; padding-top: 1px;"/>
   <description value="Désactivé" style="color: grey;"/>
</stack>

Cet arrangement de couleurs de texte et d'ombrage créent cet aspect désactivé que l'on retrouve sur certaines plates-formes.

Notez que les évènements tels que les clics de la souris et les touches du clavier sont transmis à l'élément sur le haut de la pile qui est le dernier élément de la pile. Cela signifie qu'un bouton ne fonctionnera correctement que s'il est le dernier élément de la pile.

Paquets

Un élément deck place également ses enfants les uns au dessus des autres comme l'élément stack, toutefois les paquets n'affichent qu'un seul de leurs enfants à la fois. Cela s'avère utile pour une interface d'assistant dans laquelle une série de panneaux similaires sont affichés en série. Au lieu de créer des fenêtres séparées et d'ajouter des boutons de navigation à chacune d'elles, vous n'avez qu'à créer une seule fenêtre et utiliser un paquet où le contenu change.

Comme les piles, les enfants directs d'un élément deck forment les pages du paquet. S'il y a trois enfants de l'élément deck, le paquet aura trois enfants. La page affichée du paquet peut être changée en définissant l'attribut selectdIndex sur l'élément deck. L'index est un nombre qui identifie quelle page à afficher. Les pages sont numérotées à partir de zéro. Ainsi, le premier enfant du paquet est la page 0, le second est la page 1, etc.

Ce qui suit est un exemple de paquet :

Exemple 4.3.3 : Source Voir

<deck selectedIndex="2">
   <description value="Ceci est la première page "/>
   <button label="Ceci est la seconde page "/>
   <box>
      <description value="Ceci est la troisième page "/>
      <button label="Ceci est également la troisième page "/>
   </box>
</deck>

Ici, il y a trois pages, celle affichée par défaut est la troisième. La troisième page est une boîte avec deux éléments qui y sont inclus. L'ensemble de cette boîte et de ses éléments forme une page. La paquet sera aussi grand que le plus grand de ses enfants, qui dans le cas présent sera le troisième.

Vous pouvez afficher les pages en utilisant un script pour modifier l'attribut selectedIndex. Pour plus de renseignements là dessus, reportez vous aux chapitres sur les évènements et le DOM.

---

La prochaine section décrit comment les piles peuvent être utilisées pour positionner les éléments.