Toolbar

La toolbar est une boite particulière destinée à contenir des boutons (mais qui peut contenir toutes sortes de composants), qui est horizontale par défaut, et qui possède des "grippy", ce sont des cases pointillées qui se déploient en groupe de boutons et se compactent avec un clic.
Elle amène d'autres balises qui lui sont propres...

Composants de toolbar

toolbarbutton

C'est un bouton destiné à être contenu dans une toolbar et qui est traité différemment par l'interpréteur de XUL.

toolbargrippy

Icône pour cacher ou développer le contenu d'une toolbar.

toolbarseparator

Séparateur de barre d'outils. La différence avec un séparateur basique est l'emploi de thèmes pour varier l'apparence.

toolbarspacer

Séparateur vide, affiche un blanc entre les boutons.

toolbaritem

Si l'on veut placer dans une barre d'outils des éléments autres que des boutons et séparateurs, on les encapsule dans un toolbaritem. Par exemple un champ d'entrée de texte..

Exemple

Nous allons créer une petite interface avec une toolbar, quelques boutons et autres composants graphiques et des commandes seront ajoutées pour la tester.

On définit la barre d'outils:

<toolbox>
    <toolbar>
    </toolbar>
</toolbox>

On ajoute deux boutons open et save, seul le nom change par rapport aux boutons tels que décrits précédemment:

<toolbox> 
    <toolbar> 
        <toolbarbutton image="open.gif" />
        <toolbarbutton image="save.gif" />
    </toolbar>
 </toolbox>

Pour ajouter un élément autre qu'un bouton, en l'occurence un libellé et un champ d'entrée de texte, on l'encapsule dans toolbaritem:

<toolbaritem>
    <description value="Entrer une  URL" />
    <textbox  />
</toolbaritem>

Pour associer des commandes aux boutons, cela se passe comme avec les menus, on attribue un id à chaque bouton et on crée des gestionnaires d'événements par la méthode addEventListener à laquelle on passe les id en paramètres..

• Démo: code.zip