Barres de menus simples

Dans cette section, nous allons voir comment créer une barre de menu avec des menus dessus.

Créer un menu

XUL dispose de plusieurs façons différentes de créer des menus. Le moyen le plus basique est d'ajouter une barre de menu avec une ligne de menus dessus comme sur de nombreuses applications. Vous pouvez aussi créer des menus surgissants. Les fonctionnalités de menu XUL se composent de différents éléments qui vous permettent de créer des barres de menus ou des menus surgissants. Les items des menus peuvent être personnalisés assez facilement. Nous avons déjà vu en partie comment faire des menus en utilisant menulist. Cette section sera construite là-dessus.

Les barres de menu sont généralement créées de la même façon que les barres d'outils. La barre de menu peut-être placée dans une toolbox et le menu fonctionne juste comme n'importe quel autre barre d'outils. XUL a quelques éléments spéciaux qui fournissent des fonctionnalités spéciales propres aux menus.

Il y a cinq éléments associés à la création d'une barre de menu et de ses menus, qui sont expliqués brièvement ici et en détail après :

menubar 

Le container de la ligne de menu.

menu 

En dépit du nom, il s'agit en fait seulement du titre du menu sur la barre de menu. Cet élément peut être placé sur une barre de menu ou séparément.

menupopup 

La boîte déroulante qui apparaît quand vous cliquez sur le titre du menu. Cette boîte contient la liste des commandes de menu.

menuitem 

Une commande individuelle sur un menu. Il est placé dans un menupopup.

menuseparator 

Une barre de séparation sur un menu. Il est placé dans un menupopup.

Exemple d'une simple barre de menu

Exemple 1: Source Voir

<toolbox flex="1">
  <menubar id="sample-menubar">
    <menu id="file-menu" label="Fichier">
      <menupopup id="file-popup">
        <menuitem label="Nouveau"/>
        <menuitem label="Ouvrir"/>
        <menuitem label="Enregistrer"/>
        <menuseparator/>
        <menuitem label="Quitter"/>
      </menupopup>
    </menu>
    <menu id="edit-menu" label="Edition">
      <menupopup id="edit-popup">
        <menuitem label="Annuler"/>
        <menuitem label="Refaire"/>
      </menupopup>
    </menu>
  </menubar>
</toolbox>

Ici, une simple barre de menu est créée en utilisant l'élément menubar. Il va créer une ligne pour y placer des menus. Deux menus, Fichier et Edition ont été créés ici. L'élément menu crée le titre en haut du menu, qui apparaît sur la barre de menu. Les menus déroulants sont créés en utilisant l'élément menupopup. Le menu va s'ouvrir quand l'utilisateur cliquera sur le titre du menu parent. La taille du menu sera suffisamment large pour que les commandes tiennent à l'intérieur. Les commandes elles-mêmes sont créées en utilisant l'élément menuitem. Chacune d'elles représente une unique commande dans le menu déroulant.

Vous pouvez aussi créer des séparateurs sur les menus en utilisant l'élément menuseparator. Il est utilisé pour séparer des groupes d'items de menu.

Élément menubar

La barre de menu est une boîte contenant des menus. Notez qu'elle a été placée dans une toolbox flexible. La barre de menu n'a pas d'attributs spéciaux mais c'est un type de boîte. De ce fait, vous pouvez créer une barre de menu verticale en affectant la valeur 'vertical' à l'attribut orient.

Élément menu

L'élément menu fonctionne comme l'élément button. Il accepte certains attributs semblables plus quelques autres :

id 

L'identifiant unique du bouton de titre du menu.

label 

Le texte qui apparaît sur le menu, comme Fichier ou Edition.

disabled 

Cet attribut booléen détermine si le menu est désactivé. Bien que ce soit permis, il est rarement utile de désactiver un menu entier. Cet attribut peut être mis à 'true' (vrai) ou 'false' (faux). Bien sûr, cette dernière valeur est celle par défaut.

accesskey 

Il s'agit de la touche que l'utilisateur peut presser pour activer le menu. Cette lettre est habituellement soulignée dans le titre du menu. Mozilla va regarder dans l'attribut label et ajouter un caractère soulignement au caractère spécifié ici. Pour cette raison, vous devez spécifier un caractère qui existe dans le texte (bien que la touche fonctionnera toujours si ce n'est pas le cas).

L'élément menu est normalement placé sur une barre de menu, bien que ce ne soit pas nécessaire. Cependant, il donnera une autre apparence. L'image montre à quoi l'exemple précédent ressemblerait sans la barre de menu.

Élément menupopup

L'élément menupopup crée la fenêtre déroulante contenant les commandes de menu. C'est un type de boîte qui est orienté verticalement par défaut. Vous pouvez passer en orientation horizontale si vous le voulez, les menuitems seront alors placés sur une même ligne. Normalement seuls les menuitems et les menuseparators sont placés dans un menupopup. Vous pouvez placer n'importe quel élément dans un menupopup, cependant ils seront ignorés sur un Macintosh.

Élément menuitem

L'élément menuitem est comme l'élément menu et comporte quelques attributs semblables.

id 

L'identifiant unique du bouton du menu.

label 

Le texte qui apparaît sur l'item de menu, comme Ouvrir ou Enregistrer.

disabled 

Cet attribut booléen détermine si l'item de menu est désactivé. Cet attribut peut être mis à 'true' (vrai) ou 'false' (faux), qui est la valeur par défaut.

accesskey 

Il s'agit de la touche que l'utilisateur peut presser pour activer l'item de menu. Cette lettre est habituellement soulignée dans le libellé de l'item de menu. Mozilla va regarder dans l'attribut label et ajouter un caractère soulignement au caractère spécifié ici. Pour cette raison, vous devez spécifier un caractère qui existe dans le texte.

acceltext 

Cet attribut spécifie le texte de la touche de raccourci qui apparaît près du texte de la commande de menu. Cependant, il n'associe pas de touche d'action avec l'item de menu. Nous verrons comment faire cela plus tard.

Élément menuseparator

Le menuseparator n'a pas d'attribut spécial. Il crée juste une barre horizontale entre les items de menu.

Nous allons maintenant voir quelques autres fonctions de menu.