Un panneau est une fenêtre contextuelle pouvant gérer n'importe quel type de contenu. On l'utilise notamment comme support d'affichage temporaire pour la sélection ou la saisie de données.

L'élément panel

L'élément panel sert à créer des panneaux permettant d'afficher une série d'éléments quelconques, placés comme enfants de l'élément "panel". Par exemple, le "panel" suivant affichera une boîte de texte pour entrer un nom. Notez que le panneau n'est pas placé dans un fichier distinct et est placé à l'intérieur d'une autre fenêtre.

<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<button label="Details" type="panel">
  <panel id="search-panel">
    <label control="name" value="Name:"/>
    <textbox id="name"/>
  </panel>
</button>

</window>

De nombreux panneaux seront associés à un bouton, comme dans cet exemple. Lorsque vous appuyez sur le bouton, le panneau est ouvert. En cliquant à l'extérieur du panneau ou en appuyant sur "Escape" (échappe), le panneau se ferme. Vous pouvez également placer un bouton de fermeture dans le panneau qui le fermera avec un script, si vous le souhaitez. Lorsque vous voulez associer un panneau à un bouton, placez l'élément <panel> directement à l'intérieur de l'élément button .  Vous devez aussi déterminer un attribut "type" avec la valeur "panel", ou le bouton se comportera comme un bouton régulier.

Le panneau contextuel apparaît par défaut dans le coin en haut à gauche, juste sous le bord inférieur du bouton, comme le ferait un menu. Toutefois, la position peut être modifiée. Pour plus d'informations sur la position du panneau contextuel, voir Positioning Popups (en).

Seuls les boutons (et les boutons de la barre d'outils) ont ce comportement automatique d'ouverture de la fenêtre contextuelle lorsqu'ils sont pressés. Pour d'autres types d'éléments, vous devrez utiliser une technique différente comme dans l'exemple suivant :

label value="Search" popup="search-panel"/>

<panel id="search-panel">
  <label control="search" value="Terms:"/>
  <textbox id="search"/>
</panel>

Image:Popupguide-panel.png

Pour attacher un panneau à un élément qui n'est pas un bouton, par exemple pour qu'il s'ouvre lors de l'appui sur une étiquette, utilisez l'attribut popup. Celui-ci doit être défini comme l'id d'un "panel" au sein du même document. Lors d'un clic gauche sur l'élément portant l'attribut popup, le panneau correspondant s'affichera. Par exemple, pour attacher le panneau contextuel défini plus haut à une étiquette, utilisez le code qui suit :

<label value="Rechercher" popup="search-panel"/>

Le résultat est un bouton de recherche ouvrant un panneau permettant d'entrer des termes de recherche. Celui-ci apparaîtra avec son coin supérieur gauche à la position de la souris. Dans ce cas, il serait sans doute préférable qu'il apparaisse plutôt en dessous de l'étiquette. L'attribut position peut être utilisé afin de contrôler le placement du panneau contextuel. Voici un exemple complet :

<panel id="search-panel" position="after_start">
  <label control="search" value="Termes :"/>
  <textbox id="search"/>
</panel>

<label value="Recherche" popup="search-panel"/>

L'attribut position a été ajouté à l'élément "panel" avec la valeur « after_start ». Le résultat en est que le panel n'est plus affiché là où l'on a cliqué, mais le long du bord inférieur de l'étiquette. Pour plus d'informations concernant cet attribut et les autres valeurs possibles, consultez Positionnement des popups (en).

Il est également possible d'ouvrir un panneau comme un menu contextuel à l'aide de l'attribut context à la place de l'attribut "popup". Celui-ci fonctionne de la même manière qu'un menu contextuel, à part qu'on utilise un élément "panel" à la place d'un élément "menupopup". Consultez Menus contextuels (en) pour plus de détails à ce sujet.

Ouverture d'un panneau par script

Un panneau, comme toutes les fenêtres contextuelles, dispose d'une méthode openPopup pouvant être utilisée pour son ouverture à partir d'un script. Par exemple, le code suivant ouvrirait un panneau sous un bouton :

panel.openPopup(button, "after_start", 0, 0, false, false);

De manière similaire, la méthode openPopupAtScreen ouvrira un panneau à une position précise de l'écran. Pour plus de détails concernant ces deux méthodes, consultez Ouverture et fermeture de fenêtres contextuelles.

Fermeture d'un panneau

Un panneau est fermé automatiquement lorsque l'utilisateur clique en dehors de celui-ci. Il est cependant courant d'avoir un élément comme un bouton de fermeture dans le panneau. Par exemple, dans le panneau de recherche présenté plus haut, nous pourrions ajouter un bouton fermant le panneau lorsqu'il est utilisé :

<script>
function doSearch() {
  document.getElementById("search-panel").hidePopup();
}
</script>

<toolbarbutton label="Rechercher" type="panel">
  <panel id="search-panel" position="after_start">
    <textbox id="search"/>
    <button label="Rechercher" oncommand="doSearch();"/>
  </panel>
</toolbarbutton>

Dans cet exemple, la fonction doSearch est appelée lors d'un clic sur le bouton "Rechercher". La fonction identifie le panneau contextuel et appelle sa méthode hidePopup. Naturellement, cette fonction devrait également comprendre des instructions pour lancer l'opération de recherche proprement dite.

Interdiction de fermeture automatique des panneaux

Un panneau contextuel est fermé  par un clic de l'utilisateur en-dehors de celui-ci ou l'appui sur la touche Échap. C'est la manière habituelle, pour un utilisateur, d'annuler l'opération. Il peut également être utile de placer un bouton d'annulation ou de fermeture dans le panneau, en particulier si celui-ci est grand et contient un grand nombre de contrôles.

Cependant parfois, vous voudrez peut-être que le panneau reste ouvert même si l'utilisateur clique en dehors de celui-ci. C'est notamment utile pour créer des panneaux d'outils flottants. Pour ce faire, positionnez son attribut noautohide sur "true" (vrai).

<panel id="search-panel" noautohide="true">
  <textbox id="search"/>
  <button label="Rechercher" oncommand="doSearch();"/>
  <button label="Annuler" oncommand="this.parentNode.hidePopup();"/>
</panel>

Comme le panneau ne peut plus être fermé en cliquant ailleurs, il doit toujours fournir un moyen de le faire. Dans cet exemple, on a ajouté un bouton Annuler.

Focus sur les panneaux

Les éléments se trouvant dans des panneaux peuvent recevoir le focus de la souris, et l'élément ayant le focus peut changer en appuyant sur la touche Tab. Lors de l'ouverture d'un panneau contextuel, si un élément de la fenêtre principale a le focus, il le perd et reçoit un évènement blur. Bien qu'aucun élément du panneau ne reçoive le focus par défaut, l'utilisateur peut le donner à son premier élément en appuyant sur la touche Tab. Si vous désirez qu'il se trouve sur un élément particulier par défaut, lors de l'ouverture de panneau, modifiez le focus dans le gestionnaire d'évènement popupshown. Par exemple, pour que la boîte de texte de l'exemple précédent reçoive le focus initial :

<panel id="search-panel" onpopupshown="document.getElementById('search').focus()">

Pour désactiver l'ajustement du focus à l'ouverture d'un panneau, définissez l'attribut noautofocus à true :

<panel noautofocus="true">

Dans ce cas, le focus restera sur l'élément de la fenêtre principale qui avait le focus à l'ouverture du panneau. Notez que cela maintient également le focus à l'intérieur du panneau quand celui-ci est fermé.

Lors de la fermeture d'un panneau, l'élément au sein de celui-ci, qui avait éventuellement le focus, le perd. L'élément qui avait le focus avant l'ouverture de la fenêtre contextuelle, quel qu'il soit, le récupère. Vous pouvez empêcher la suppression du focus avec l'attribut noautofocus  défini à true. De plus, l'attribut XULAttr("norestorefocus") }}  positionné sur true empêche le retour du focus sur l'élément qui l'avait avant. Normalement, seul ce dernier sera défini si besoin.

Ce processus de perte du focus à l'ouverture et à la fermeture d'un popup se déroule après le déclenchement des évènements popupshowing ou popuphiding, ce qui signifie que si ces évènements sont annulés, le focus ne sera pas perdu.

Letting panels be dragged by grabbing the background

Requires Gecko 7.0(Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4)
(faire glisser les panneaux sur l'arrière-plan)

À partir de Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), vous pouvez utiliser l'attribut backdrag pour créer des panneaux que l'utilisateur peut faire glisser (cliquer/glisser) n'importe où sur l'arrière-plan. C'est un simple attribut  booléen, avec lequel vous pouvez activer cette fonctionnalité comme ceci :

panel backdrag="true">

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : loella16, unpeudetout, jwhitlock, BenoitL
 Dernière mise à jour par : loella16,