Menu

Le premier élément d'une application est la barre de menu. Sous XUL, cela se réalise avec la balise menubar dans laquelle on place des balises menu correspondant à chaque menu vertical. Et dans les menus on trouve les lignes des menuitems.

Les balises décrivant un menu

toolbox

On place usuellement une barre de menu dans une boite de type toolbox.

menubar

C'est la barre horizontale dans laquelle on place les menus. Noter que l'on peut placer des menu individuellement dans d'autres composantes.

menupopup

C'est le composant qui fait surgir un menu. On peut le placer dans tous composants XUL.

menu

Liste d'élément dans laquelle on peut choisir.

menutitem

C'est un élément de liste de menu. Il se comporte comme un bouton et la plupart de ses attributs sont identiques.

menuseparator

Pour placer une ligne entre deux éléments de menus et constituer des groupes, on utilise la balise menuseparator.

Exemple de menu

<toolbox flex="1">
    <menubar>
        <menu label="Fichiers">
            <menupopup>
                <menuitem label="Ouvrir" />
                <menuitem label="Fermer" />
                <menuseparator />
                <menuitem label="Quitter" />
            </menupopup>
        </menu>
        <menu label="Aide" >
            <menupopup>
                <menuitem label="Manuel" />
            </menupopup>
        </menu>
    </menubar>
</toolbox>

Les attributs pour utiliser un menu

Les balises menu et menuitem ont les mêmes attributs que l'objet button:

id

L'identifieur pour accéder à l'objet par l'intermédiaire du DOM.

Label

Le texte affiché.

Disabled

Cet attribut à la valeur true (vrai) ou false (faux). Dans le premier cas il est désactivé et apparait en grisé. On modifie l'état en accédant à l'objet par son id.

accesskey

La touche ou la combinaison de touches qui ouvre le menu ou déclenche la commande du menuitem et qui équivaud au clic de souris sur l'objet.
Exemple où l'on attribue la touche "o" à la commande "ouvrir" du menu:

<menuitem label="Ouvrir" accesskey="o" />

La boite menupopup est un composant dynamique qui n'a pas d'attributs utiles.

Ajouter des commandes au menu

Comme on l'a vu précédemment on peut ajouter une commande à un composant graphique avec l'attribut onCommand, mais pour composer un menu, il sera plus clair de placer la liste des commandes dans le code JavaScript. Et cela se fait avec le DOM et la méthode addEventListener.

On définit une fonction pour la commande ouvrir:

function openFun(event)
{
    alert("Commande ouvrir...");
}

Et on associe l'évènement à la ligne de menu correspondante avec une méthode DOM qui retrouve l'objet par son id, "openMenu" et une méthode d'événement:

var x = document.getElementById("openMenu");
x.addEventListener('command', openFun, true);

On voit que le nom de la fonction, openFun, est le second paramètre.
On peut simplifier en concaténant les commandes:

document.getElementById("openMenu").addEventListener('command', openFun, true);

Noter que le code JavaScript doit être placé après la définition XUL du menu.

• Démo: code.zip