4.2 Barres de défilement

Écrit par Neil Deakin. Traduit par Alain B. (09/02/2004).
Page originale : http://www.xulplanet.com/tutorials/xultu/scroll.html

Maintenant, voyons comment ajouter des barres de défilement à une fenêtre.

Ajout de barres de défilement

Une barre de défilement est typiquement employée pour permettre à un utilisateur de parcourir un grand document. Vous pouvez aussi l'utiliser quand vous avez besoin de demander une valeur comprise entre un certain intervalle. Les barres de défilement peuvent être créées de différentes manières. Sous XUL, l'une d'entre elle nécessite l'emploi de la balise scrollbar. Certains éléments, comme des zones de textes, vont également ajouter des barres de défilement si nécessaire lorsque leur contenu devient trop grand.

Tout d'abord, nous allons aborder la création d'une barre de défilement seule. L'utilisateur choisira une valeur en déplaçant la barre de défilement. Vous n'utiliserez probablement pas très souvent cette méthode. Une barre de défilement est constituée de plusieurs partie, l'ascenseur, qui est la partie centrale de la barre, et les deux flèches boutons à chaque extrémités. Une barre de défilement crée tous ces éléments automatiquement.

La syntaxe d'une barre de défilement est la suivante :

<scrollbar
       id="identifier"
       orient="horizontal"/>
       curpos="20"
       maxpos="100"
       increment="1"
       pageincrement="10"/>

Les attributs sont les suivants :

id: L'identifiant unique de la barre de défilement.
orient: Il spécifie l'orientation de la barre de défilement. Sa valeur par défaut horizontal crée une barre qui s'étend de gauche vers la droite. Vous pouvez également spécifier vertical qui crée une barre s'étendant du haut vers le bas.
curpos: Il indique la position actuelle de l'ascenseur (le rectangle que vous pouvez déplacer). La valeur s'étend de 0 à la valeur de maxpos. Cette valeur n'a pas besoin d'unité. La valeur par défaut est de 0.
maxpos: Il indique la valeur de la position maximale de l'ascenseur. Il s'agit d'une valeur numérique qui n'a pas d'unité. La valeur par défaut est de 100.
increment: Ici, le nombre spécifie de combien la valeur de curpos doit être changée quand l'utilisateur clique sur une des flèches de la barre de défilement. La valeur par défaut est de 1.
pageincrement: Ici, le nombre spécifie de combien la valeur de curpos doit être changée quand l'utilisateur clique sur la page à travers la barre de défilement, c'est à dire dans la zone entre l'ascenseur et les flèches. La valeur par défaut est de 10.

L'exemple donné ci dessus crée une barre de défilement qui s'étend des valeurs de 0 à 100. La valeur de 100 peut être considérée comme le nombre de ligne d'une liste, mais elle peut représenter n'importe quoi d'autre que vous souhaitez. La valeur initiale de cet exemple est de 20. Quand l'une des flèches de la barre de défilement est cliquée, la valeur incrémente ou décrémente de 1. En cliquant à travers la barre de défilement, la valeur change de 10.

Lorsque l'utilisateur clique sur une des flèches de la barre de défilement, l'ascenseur se déplace autant qu'indiqué par la valeur increment. Augmenter la valeur de cet attribut fera que la barre défilera plus vite à chaque clic. Les positions la plus à gauche et la plus élevée de l'ascenseur ont une valeur de 0, et celles la plus à droite et la plus basse ont une valeur donnée par maxpos.

En ajustant les valeurs de la barre de défilement, vous pouvez positionner l'ascenseur comme vous le souhaitez, et quand l'utilisateur clique sur les flèches, cela change comme vous le souhaitez.

Nous allons voir comment créer des piles.