5.1 Barres d'outils

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.

Une barre d'outils est habituellement placée sur le haut d'une fenêtre et contient un certain nombre de boutons réalisant des opérations communes. XUL a une méthode pour créer des barres d'outils.

Ajout d'une barre d'outils

Comme la plupart des éléments, les barres d'outils sous XUL sont un type de boîte. Habituellement, une rangée de boutons apparaît dans une barre d'outils, mais n'importe quel élément peut y être placé. Par exemple, la fenêtre du navigateur Mozilla contient une zone de texte qui permet l'affichage de l'URL de la page.

Les barres d'outils peuvent être placées sur n'importe quel côté d'une fenêtre, soit horizontalement, soit verticalement. Bien sur, vous veillerez à ne pas mettre de champs de saisie dans une barre d'outils verticale. En fait, comme les barres d'outils sont juste des boîtes, vous pouvez les mettre n'importe où, même au milieu d'une fenêtre. Habituellement, toutefois, le positionnement d'une barre d'outils se fait sur le haut d'une fenêtre. Lorsque plus d'une barre d'outils est placée l'une après l'autre, elles sont généralement groupée ensemble dans une boîte d'outils (toolbox).

Sur le bord gauche d'une barre d'outils se trouve une petite encoche qui, si elle est cliquée, va réduire la barre d'outils et seule cette encoche restera visible. Cette encoche est appelée une poignée (grippy). Lorsque de multiples barres d'outils sont placées dans le même élément toolbox, les poignées vont les réduire à une simple ligne. La totalité de l'espace utilisé est ainsi libérée. Les barres d'outils verticales ont leur poignées sur leur bord supérieur. L'utilisateur réduira habituellement une barre d'outils s'il souhaite disposer de plus de place dans la fenêtre principale.

NdT : Les poignées décrites ici ne s'affichent pas sous Firefox.

Une simple barre d'outils dans une boîte d'outils.

Exemple 5.1.1 : Source Voir

<toolbox>
   <toolbar id="nav-toolbar">
     <toolbarbutton label="Précédent"/>
     <toolbarbutton label="Suivant"/>
   </toolbar>
</toolbox>

Cet exemple crée une barre d'outils contenant deux boutons, un bouton 'Précédent' et un bouton 'Suivant'. Cette barre d'outils a été placée à l'intérieur d'un élément toolbox. Cet exemple met en jeu quatre nouvelles balises qui sont décrites ici :

toolbox

Une boîte qui contient les barres d'outils.

toolbar

Une simple barre d'outils qui contient les items de la barre tels que des boutons. Les barres d'outils peuvent être réduites en utilisant la poignée située sur leur côté gauche ou leur bord supérieur.

toolbarbutton

Un bouton sur une barre d'outil, qui a exactement les mêmes fonctionnalités qu'un bouton normal mais qui est dessiné différemment.

toolbargrippy

Cet élément crée l'encoche qui est utilisée pour réduire ou restaurer une barre d'outils. Il n'est pas nécessaire de l'utiliser directement car il est ajouté automatiquement.

toolbar est l'élément principal qui crée une barre d'outils. À l'intérieur sont placés des items individuels de la barre d'outils, habituellement des boutons, mais également d'autres éléments. La barre d'outils doit avoir un attribut id sinon la poignée risque de ne pas réduire ou restaurer la barre d'outils proprement.

Dans l'exemple ci-dessus, une seule barre d'outils a été créée. De multiples barres d'outils peuvent être créées simplement en ajoutant plus éléments toolbar après le premier.

L'élément toolbox est le container des barres d'outils. Dans certaines applications, vous pouvez avoir plusieurs barres d'outils sur le haut de la fenêtre. Vous pouvez toutes les placer à l'intérieur de l'élément toolbox.

Il n'est pas nécessaire de placer les éléments toolbar à l'intérieur d'un toolbox.

Poignées sur les boîtes d'outils

Les poignées sur une barre d'outils sont créées en utilisant un autre élément appelé toolbargrippy. Cela n'a aucun sens de l'employer en dehors d'une barre d'outils car il n'aura aucun usage s'il n'a rien à réduire. Toutefois, vous pouvez souhaiter changer son style différemment. Vous pouvez cacher une poignée en ajoutant l'attribut grippyhidden à l'élément toolbar, et en lui affectant la valeur true.

Une boîte d'outils contenant trois barres d'outils. (NdT : Source Voir)

La même boîte où deux barres d'outils ont été réduites.

<vbox flex="1">
   <toolbox>
     <toolbar id="findfiles-toolbar">
       <toolbarbutton id="opensearch" label="Ouvrir"/>
       <toolbarbutton id="savesearch" label="Sauvegarder"/>
     </toolbar>
   </toolbox>
<tabbox>

Nous allons maintenant voir comment ajouter une barre de menu à une fenêtre.