xulfr.org

11.2 Créer des boîtes de dialogues

Écrit par Neil Deakin. Traduit par Durandal (06/07/2004).
Page originale : http://www.xulplanet.com/tutorials/xultu/dialogs.html xulplanet.com

Une application XUL aura souvent besoin d'afficher des boîtes de dialogues. Cette section décrit comment on peut les construire.

Créer une boîte de dialogue

La fonction open est utilisée pour ouvrir une fenêtre. Une fonction apparentée est openDialog. Cette fonction a plusieurs grandes différences. Elle affiche une boîte de dialogue au lieu d'une fenêtre, ce qui implique qu'elle demande quelque chose à l'utilisateur. Elle peut avoir des différences subtiles dans sa manière de fonctionner et d'apparaître à l'utilisateur. Ces différences varient sur chaque plate-forme.

De plus, la fonction openDialog peut prendre des arguments additionnels en plus des trois premiers. Ces arguments sont passés à la nouvelle boîte de dialogue et placés dans un tableau stocké dans la propriété arguments de la nouvelle fenêtre. Vous pouvez passer autant d'arguments que nécessaire. C'est un moyen pratique de fournir des valeurs par défaut aux champs de la boîte de dialogue.



var somefile=document.getElementById('enterfile').value;

window.openDialog("chrome://findfile/content/showdetails.xul","showmore",
                  "chrome",somefile);

Dans cet exemple la boîte de dialogue showdetails.xul sera affichée. Un argument lui sera fourni, somefile, issu de la valeur d'un élément d'id enterfile. Dans un script utilisé par la boîte de dialogue, nous pouvons alors faire référence à l'argument en utilisant la propriété arguments de la fenêtre. Par exemple :



var fl=window.arguments[0];

document.getElementById('thefile').value=fl;

C'est un moyen efficace de passer des valeurs à la nouvelle fenêtre. Vous pouvez renvoyer des valeurs de la fenêtre ouverte vers la fenêtre originelle de deux manières. La première, vous pouvez utiliser la propriété window.opener qui contient la fenêtre qui a ouvert la boîte de dialogue. La seconde, vous pouvez passer une fonction ou un objet en argument, puis appeler la fonction ou modifier l'objet dans la boîte de dialogue ouverte.

L'élément dialog

L'élément dialog doit être utilisé à la place de l'élément window à la création d'une boîte de dialogue. Il offre la possibilité utile de construire jusqu'à quatre boutons au bas de la boîte de dialogue, pour OK, Annuler, etc.. Vous n'avez pas besoin d'inclure le XUL pour chaque bouton mais vous devez fournir le code à exécuter quand l'utilisateur presse chaque bouton. Ce mécanisme est nécessaire car les différentes plates-formes ont un ordre spécifique d'apparition des boutons.

Exemple 11.2.1 : Source Voir



<?xml version="1.0" encoding="iso-8859-1"?>

<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>

<dialog id="donothing" title="Ne fait rien"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        buttons="accept,cancel"
        ondialogaccept="return doOK();"
        ondialogcancel="return doCancel();">

<script>
function doOK()
{
  alert("Vous avez appuyé sur OK !");
  return true;
}

function doCancel()
{
  alert("Vous avez appuyé sur Annuler !");
  return true;
}
</script>

<description value="Veuillez sélectionner un bouton"/>

</dialog>

Vous pouvez placer tous les éléments que vous souhaitez dans une boîte de dialogue. L'élément dialog a des attributs additionnels que les fenêtres n'ont pas. L'attribut buttons est utilisé pour spécifier quels boutons doivent apparaître dans la boîte de dialogue. Les valeurs suivantes peuvent être utilisées, séparées par des virgules :

Vous pouvez faire exécuter du code à l'appui des boutons en utilisant les attributs ondialogaccept, ondialogcancel, ondialoghelp et ondialogdisclosure. Si vous essayez l'exemple ci-dessus, vous remarquerez que la fonction doOK est appelée quand le bouton OK est pressé et la fonction doCancel quand le bouton Annuler est pressé.

Les deux fonctions doOK et doCancel renvoient true, ce qui indique que la boîte de dialogue doit être fermée. Si false était renvoyé, la boîte de dialogue resterait ouverte. Cela pourrait être utilisé dans le cas où une valeur invalide serait entrée dans un champ de la boîte de dialogue.


Dans la prochaine section, nous allons voir comment ouvrir des boîtes de dialogue de sélection de fichiers.