Panels
Un panel est un popup pouvant gérer n'importe quel type de contenu. On l'utilise notamment comme support d'affichage temporaire pour la sélection ou l'encodage de données.
L'élément panel
L'élément panel sert à créer des panels permettant d'afficher une série d'éléments quelconques, placés comme enfants de l'élément panel. Par exemple, le panel qui suit affichera une boîte de texte.
<panel id="search-panel"> <label control="search" value="Termes :"/> <textbox id="search"/> </panel>
Pour attacher un panel à un élément, par exemple pour qu'il s'ouvre lors de l'appui sur un bouton, utilisez l'atribut 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 panel correspondant s'affichera. Par exemple, pour attacher le popup défini plus haut à un label, utilisez le code qui suit :
<label value="Rechercher" popup="search-panel"/>
Le résultat est un bouton de recherche ouvrant un panel 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 du bouton. C'est une situation classique d'attachement d'un panel à un bouton, pour laquelle l'attribut position peut être utilisé afin de contrôler le placement du panel. Notez qu'on utilise habituellement un bouton de type menu à la place, en définissant l'attribut type à menu. 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 du label. Pour plus d'informations concernant cet attribut et les autres valeurs possibles, consultez Positionnement des popups.
Il est également possible d'ouvrir un panel comme un menu contextuel à l'aide de l'attribut context à la place de l'attribut popup. Ceci 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 pour plus de détails à ce sujet.
Ouverture d'un panel par script
Un panel, comme tous les popups, dispose d'une méthode openPopup pouvant être utilisée pour l'ouvrir depuis un script. Par exemple, le code qui suit ouvrirait un panel sous un bouton :
panel.openPopup(bouton, "after_start", 0, 0, false, false);
De manière similaire, la méthode openPopupAtScreen ouvrira un panel à une position précise de l'écran. Pour plus de détails concernant ces deux méthodes, consultez Ouverture et fermeture de popups.
Fermeture d'un panel
Un panel sera fermé automatiquement lorsque l'utilisateur clique en dehors de celui-ci. Il est cependant courant d'avoir un élément comme un bouton au sein du panel qui le fermera également. par exemple, dans le panneau de recherche présenté plus haut, on pourrait ajouter un bouton fermant le panel lorsqu'il est utilisé :
<script>
function doSearch()
{
document.getElementById("search-panel").hidePopup();
}
</script>
<panel id="search-panel" position="after_start">
<textbox id="search"/>
<button label="Rechercher" oncommand="doSearch();"/>
</panel>
<toolbarbutton label="Rechercher" popup="search-panel"/>
Dans cet exemple, la fonction doSearch est appelée lors d'un clic sur le bouton Rechercher. La fonction identifie le popup et appelle sa méthode hidePopup. Naturellement, cette fonction devrait également comprendre des instructions pour lancer l'opération de recherche proprement dite.
L'attribut noautohide
Un panel sera fermé lors d'un clic de l'utilisateur en dehors de celui-ci ou de l'appui sur la touche Échap. C'est la manière habituelle d'un utilisateur pour annuler une opération. Il peut également être utile de placer un bouton d'annulation ou de fermeture au sein du panel, en particulier si celui-ci est grand et contient un grand nombre de contrôles.
Cependant, vous voudrez peut-être que le panel 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, définissez l'attribut noautohide du panel à true.
<panel id="search-panel" noautohide="true"> <textbox id="search"/> <button label="Rechercher" oncommand="doSearch();"/> <button label="Annuler" oncommand="this.parentNode.hidePopup();"/> </panel>
Comme le panel ne peut plus être fermé en cliquant ailleurs, il doit toujours fournir un moyen de le refermer. Dans cet exemple, on a ajouté un bouton Annuler.
Le focus dans les panels
Les éléments se trouvant dans des panels 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 popup, 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 panel ne reçoive le focus, 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 panel, modifiez le focus dans un gestionnaire de l'é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()">
Lors de la fermeture d'un panel, l'élément au sein de celui-ci qui avait éventuellement le focus le perd. Ce processus de perte du focus à l'ouverture et à la fermeture d'un popup se déroule après le déclenchement de l'évènement popupshowing ou popuphiding, ce qui signifie qu si ces évènements sont annulés, le focus ne sera pas perdu.
Pour désactiver l'ajustement du focus à l'ouverture d'un panel, 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 panel. Notez que cela permet également de conserver le focus à l'intérieur du panel si celui-ci est fermé.