5.4 Menus surgissants

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.

Dans la section précédente, nous avons vu comment créer un menu sur une barre de menu. XUL a aussi la capacité de créer des menus surgissants. Les menus surgissants sont habituellement affichés lorsque l'utilisateur presse le bouton droit de la souris.

Créer un menu surgissant

XUL a trois différentes types de boîtes surgissantes, décrites ci-dessous. La différence majeure est leurs façons d'apparaître.

Boîte surgissante simple

La boîte surgissante simple est une fenêtre surgissante qui apparaît quand l'utilisateur presse le bouton gauche de la souris sur un élément. Elles sont assez semblables aux menus sur les barres de menu, excepté qu'elles peuvent être placées n'importe où et peuvent contenir n'importe quel contenu. Un bon exemple est le menu déroulant qui apparaît quand vous maintenez le bouton de la souris enfoncé sur les boutons "précédent" et "suivant" dans la fenêtre d'un navigateur.

Boîte contextuelle

La boîte contextuelle est une fenêtre surgissante qui apparaît quand l'utilisateur presse le bouton de menu contextuel, qui est habituellement le bouton droit de la souris. Sur certaines plates-formes, Il peut s'agir d'un bouton différent - mais c'est toujours le bouton ou une combinaison de touches et de bouton de souris qui invoque un menu spécifique au contexte. Sur le Macintosh par exemple, l'utilisateur doit soit presser la touche Control et le bouton de la souris, soit maintenir le bouton de la souris enfoncé un certain temps.

Bulle d'aide

Une fenêtre surgissante « bulle d'aide » va apparaître quand l'utilisateur survolera un élément avec la souris. Ce type de boîte surgissante est habituellement utilisé pour fournir la description d'un bouton de façon plus détaillée que le bouton le permet lui-même.

Ces trois types de boîtes surgissantes diffèrent dans la façon dont l'utilisateur les invoque. Le type de boîte surgissante est déterminé par l'élément qui invoque la boîte.

Déclaration d'un menu surgissant

Une boîte sugissante est décrite en utilisant l'élément menupopup. C'est un type de boîte sans attributs spéciaux. Quand elle est invoquée, une fenêtre contenant tout ce que vous avez pu mettre dans le menupopup va s'afficher. Cependant, vous devez toujours insérer un attribut id sur le popup car il doit être associé à un élément. Nous verrons bientôt sa signification. D'abord, un exemple :

<popupset>
  <menupopup id="clipmenu">
    <menuitem label="Couper"/>
    <menuitem label="Copier"/>
    <menuitem label="Coller"/>
  </menupopup>
</popupset>

Comme vous pouvez le voir ici, un simple menu surgissant contenant trois commandes a été créé. L'élément menupopup entoure les trois items de menu. Vous remarquerez également que l'id a été mis sur l'élément menupopup lui-même.

L'élément popupset entoure l'entière déclaration de menu surgissant. Il s'agit d'un container générique pour les boîtes surgissantes, et il est optionnel. Il ne s'affiche pas à l'écran mais il est utilisé comme une section dans laquelle vous pouvez déclarer tous vos menus surgissants. Comme le nom popupset sous-entend, vous pouvez placer plusieurs déclarations de menus surgissants à l'intérieur. Ajoutez en simplement d'autres après le premier élément menupopup. Vous pouvez avoir plus d'un popupset dans un fichier, mais habituellement vous n'en aurez qu'un.

Association d'un menu surgissant à un élément

Maintenant que nous avons créé le menu surgissant, il est temps de le faire apparaître. Pour cela, nous avons besoin d'associer le menu à un élément d'où il devra apparaître. Nous faisons cela car nous voulons seulement que le menu apparaisse quand l'utilisateur clique à un certain endroit de la fenêtre. Habituellement, il s'agira d'un bouton spécifique ou d'une boîte.

Pour associer le menu surgissant à un élément, ajoutez un de ces trois attributs à l'élément. L'attribut que vous ajoutez dépend du type de menu surgissant vous voulez créer. Pour les menus surgissants simples, ajoutez l'attribut popup à l'élément. Pour les menus contextuels, ajoutez l'attribut context. Enfin, pour les bulles d'aide, ajoutez l'attribut tooltip.

La valeur de l'attribut doit être celle de l'id du menupopup que vous voulez faire apparaître. C'est pour cela que vous devez mettre un id sur le menupopup. Par ce moyen, il est facile d'avoir plusieurs menus surgissants dans un seul fichier.

Dans l'exemple ci-dessus, nous voulons faire un menu surgissant contextuel. Nous devons donc utiliser l'attribut context et l'ajouter à l'élément sur lequel nous voulons associer le menu surgissant. L'exemple ci-dessous montre comment procéder :

Exemple 5.4.1 : Source Voir

<popupset>
  <menupopup id="clipmenu">
    <menuitem label="Couper"/>
    <menuitem label="Copier"/>
    <menuitem label="Coller"/>
  </menupopup>
</popupset>

<box context="clipmenu">
  <label value="Faites un clic contextuel pour afficher le menu"/>
</box>

Ici, le menu contextuel a été associé à une boîte. À chaque fois que vous faîtes un clic contextuel (clic droit) n'importe où dans la boîte, le menu surgissant apparaîtra. Le menu apparaîtra aussi même si vous cliquez sur un enfant de la boîte, donc il apparaîtra aussi si vous cliquez sur l'élément label. L'attribut context a été utilisé pour associer la boîte au menu contextuel de même id. Dans ce cas, le menu clipmenu va apparaître. De cette façon, vous pouvez disposer de plusieurs menus surgissants et les associer avec différents éléments.

Vous pouvez associer plusieurs menus surgissants avec le même élément en mettant plusieurs d'attributs de différents types sur un élément. Vous pouvez aussi associer le même menu surgissant à plusieurs éléments, ce qui est un avantage de l'utilisation de la syntaxe popup. Les menus surgissants ne peuvent être associés qu'avec des éléments XUL. Ils ne peuvent pas être associés à des éléments HTML.

Bulles d'aide

Nous allons voir un moyen simple de créer des bulles d'aide. Il y a deux façons de créer des bulles d'aide. La méthode la plus simple, qui est la plus commune, est d'ajouter un attribut tooltiptext à un élément sur lequel vous voulez assigner une bulle d'aide.

La deuxième méthode consiste à utiliser un élément tooltip contenant le contenu d'une bulle d'aide. Il nécessite que vous ayez un bloc séparé de contenu pour chaque bulle d'aide ou que vous ayez un script contenant le contenu, bien que certains contenus hormis du texte dans une bulle d'aide ne sont pas permis.

Exemple 5.4.2 : Source Voir

<button label="Save" tooltiptext="Cliquez ici pour enregistrer vos trucs"/>

<popupset>
  <tooltip id="moretip" orient="vertical" style="background-color: #33DD00;">
    <description value="Cliquez ici pour voir plus d'information"/>
    <description value="Vraiment!" style="color: red;"/>
  </tooltip>
</popupset>

<button label="Plus" tooltip="moretip"/>

Ces deux boutons ont chacun une bulle d'aide. Le premier utilise le style par défaut de bulle d'aide. Le second utilise une bulle d'aide modifiée qui a une couleur d'arrière-plan différente et un texte stylisé. La bulle d'aide est associée au bouton Plus en utilisant l'attribut tooltip, correspondant à l'id de l'élément tooltip. Notez que l'élément tooltip est également placé à l'intérieur d'un élément popset comme pour les autres types de menus surgissants.

Alignement des menus surgissants

Par défaut, les menus surgissants et contextuels vont apparaître là où le pointeur de la souris se trouve. Les bulles d'aides seront placées légèrement sous l'élément pour que le pointeur de la souris ne les cache pas. Il y a des cas toutefois, où vous voudrez préciser l'emplacement du menu surgissant. Par exemple, le menu surgissant qui apparaît quand vous cliquez sur le bouton Précédent dans un navigateur doit apparaître sous le bouton Précédent, non pas là ou se situe le pointeur de la souris.

Pour changer la position du menu, vous pouvez utiliser un attribut additionnel, position, sur le popup. Vous pouvez aussi l'ajouter à l'élément menupopup. Cet attribut est utilisé pour indiquer l'emplacement du menu relativement à l'élément invoquant la boîte. Ses différentes valeurs applicables sont décrites brièvement ci-dessous :

after_start

Le menu surgissant apparaît sous l'élément avec les bords gauche de l'élément et du menu alignés. Si le menu surgissant est plus large que l'élément, il s'étend à droite. C'est cette valeur qui est utilisée pour les menus déroulants associés avec les boutons Précédent et Suivant du navigateur.

after_end

Le menu surgissant apparaît sous l'élément avec les bords droit de l'élément et du menu alignés.

before_start

Le menu surgissant apparaît au-dessus de l'élément avec les bords gauche de l'élément et du menu alignés.

before_end

Le menu surgissant apparaît au-dessus de l'élément avec les bords droit de l'élément et du menu alignés.

end_after

Le menu surgissant apparaît à droite de l'élément avec les bords inférieurs de l'élément et du menu alignés.

end_before

Le menu surgissant apparaît à droite de l'élément avec les bords supérieurs de l'élément et du menu alignés.

start_after

Le menu surgissant apparaît à gauche de l'élément avec les bords inférieurs de l'élément et du menu alignés.

start_before

Le menu surgissant apparaît à gauche de l'élément avec les bords supérieurs de l'élément et du menu alignés.

overlap

Le menu surgissant apparaît par dessus l'élément.

at_pointer

Le menu surgissant apparaît à la position du pointeur de la souris.

after_pointer

Le menu surgissant apparaît à la même position horizontale que le pointeur de la souris mais apparaît sous l'élément. C'est ainsi que les bulles d'aide apparaissent.

En ajoutant l'attribut position à un élément popup, vous pouvez spécifier précisement où le menu surgissant doit apparaître. Vous ne pouvez pas spécifier une position exacte en pixels. L'attribut position peut être utilisé pour les trois types de menus surgissants, bien que vous ne changerez probablement pas la valeur pour les bulles d'aide.

L'exemple ci-dessous montre la création d'un bouton Précédent avec un menu surgissant :

Exemple 5.4.3 : Source Voir

<popupset>
  <popup id="backpopup" position="after_start">
    <menuitem label="Page 1"/>
    <menuitem label="Page 2"/>
  </popup>
</popupset>

<button label="Affiche moi" popup="backpopup"/>

<popupset>
  <menupopup id="editpopup">
    <menuitem label="Couper" accesskey="c"/>
    <menuitem label="Copier" accesskey="p"/>
    <menuitem label="Coller" accesskey="l" disabled="true"/>
  </menupopup>
</popupset>

<vbox flex="1">
.
.
.

<tabpanel id="searchpanel" orient="vertical" context="editpopup">

Par la suite, nous allons voir comment créer des menus défilants.