Tutoriel XUL:Barre d'outils
Un article de MDC.
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.
[modifier] 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).
[modifier] Une simple barre d'outils dans une boîte d'outils.
<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.
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.
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.
[modifier] Notre exemple de recherche de fichiers
Ajoutons maintenant une barre d'outils à notre exemple de recherche de fichiers. Nous n'en avons pas réellement besoin mais nous l'ajouterons quand même pour montrer son usage. Deux boutons vont être ajoutés, un bouton 'Ouvrir' et un bouton 'Sauvegarder'. On peut penser qu'ils permettraient à l'utilisateur de sauvegarder les résultats de la recherche et de les rouvrir plus tard.
<vbox flex="1">
<toolbox>
<toolbar id="findfiles-toolbar">
<toolbarbutton id="opensearch" label="Ouvrir"/>
<toolbarbutton id="savesearch" label="Sauvegarder"/>
</toolbar>
</toolbox>
<tabbox>
Une barre d'outils avec deux boutons a été ajoutée ici. Dans l'image, vous pouvez les voir apparaître horizontalement en haut de la fenêtre. Notez que la barre d'outils a été placée à l'intérieur d'une boîte verticale juste au dessus de la boîte d'onglets, car nous avons besoin d'un placement vertical pour que la barre d'outils se place au dessus de tout le contenu.
Nous allons maintenant voir comment ajouter une barre de menu à une fenêtre.