Écrit par Neil Deakin.
Traduit par Damien Hardy (25/07/2004).
Page originale :
http://www.xulplanet.com/tutorials/xultu/advwiz.html
Cette section décrit quelques fonctionnalités supplémentaires sur les assistants.
Normalement, un assistant affiche chaque page dans l'ordre où vous les placez dans le fichier XUL. Dans certains cas cependant, vous pouvez vouloir que les pages de l'assistant apparaissent en fonction de ce que l'utilisateur a sélectionné sur les pages précédentes.
Dans ce cas, placez un attribut pageid
sur chacune des
pages. Cela aura valeur d'identifiant pour chaque page. Ensuite, pour naviguer vers une page,
utilisez une des deux méthodes suivantes :
next
sur chaque page, la valeur de
l'identifiant de page vers laquelle vous souhaitez aller. Vous pouvez changer ces attributs
comme vous le souhaitez pour naviguer vers d'autres pages.goTo
. Elle prend un argument l'identifiant de
la page suivante. Vous pouvez appeler cette méthode dans les gestionnaires
onpageadvanced
ou onwizardnext
. Dans ce cas, n'oubliez pas de
retourner la valeur false , car vous avez déjà changé la page vous même.
Notez que la méthode goTo
charge une nouvelle page, par conséquent les événements liés sont lancés. Vous devez donc vous assurer d'avoir prévu ce cas.Par exemple, nous avons ici un ensemble de pages d'assistant (le contenu a été omis) :
<wizardpage pageid="type" next="font"/>
<wizardpage pageid="font" next="done"/>
<wizardpage pageid="color" next="done"/>
<wizardpage pageid="done"/>
L'assistant commence toujours à la première page, qui dans ce cas a l'identifiant type.
La page suivante est celle qui a l'identifiant de page font, l'assistant affichera
donc cette page juste après. Sur la page qui a l'identifiant font, nous pouvons
voir que la page suivante est celle identifiée done, cette page sera alors affichée
ensuite. La page identifiée done n'a pas d'attribut next
,
ce sera donc la dernière page. Un script ajustera la valeur de l'attribut next
dés qu'il sera nécessaire d'aller sur la page identifiée color.
L'assistant fonctionne presque comme un panneau d'onglets, sauf que les onglets ne sont pas affichés et que l'utilisateur navigue entre les pages en utilisant les boutons de bas de page. Parce que toutes les pages font parties d'un même fichier, toutes les valeurs des champs sur toutes les pages sont conservées. Par conséquent, il est inutile de sauvegarder ou charger ces informations entre les pages.
Cependant vous pourriez vouloir faire quelques validations sur chaque champ de chaque page. Pour ce faire, utilisez les gestionnaires décris dans la section précédente. Si un champ est invalide, vous pouvez afficher un message d'alerte. Dans certains cas, il serait plus judicieux de désactiver le bouton "Suivant" jusqu'à ce qu'une valeur valide soit saisie.
L'assistant possède une propriété canAdvance
, qui quand elle
est mise a true indique que le bouton "Suivant" doit être actif. Si
elle a la valeur false le bouton "Suivant" est désactivé. Vous
pouvez changer la propriété quand des données valides ou invalides sont saisies.
Dans l'exemple suivant, l'utilisateur doit entrer un code secret dans le textbox
sur la première page de l'assistant. La fonction checkCode
est appelée dés que
la première page est affichée comme indiquée par l'attribut onpageshow
.
Elle est aussi appelée dés qu'une touche est pressée dans le textbox
,
pour déterminer si le bouton "Suivant" doit être à nouveau actif.
Exemple 11.5.1 : Source
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<wizard id="theWizard" title="Code secret de l'assistant"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script>
function checkCode()
{
document.getElementById('theWizard').canAdvance=
(document.getElementById('secretCode').value == "cabbage");
}
</script>
<wizardpage onpageshow="checkCode();">
<label value="Saisir le code secret:"/>
<textbox id="secretCode" onkeyup="checkCode();"/>
</wizardpage>
<wizardpage>
<label value="Le code est correct."/>
</wizardpage>
</wizard>
Il existe aussi une propriété correspondante canRewind
que vous
pouvez utiliser pour activer ou désactiver le bouton "Précédent". Les deux
propriétés sont ajustées automatiquement dés que vous changez de page. Par conséquent, le
bouton "Précédent" sera désactivé sur la première page, vous n'avez donc pas à
le faire.
Une autre propriété utile de l'assistant est currentPage
, qui
donne une référence à la page wizardpage
courante affichée. Vous pouvez aussi modifier la page courante en changeant cette propriété.
Si vous changez sa valeur, les différents événements de changement de page seront provoqués.
Ensuite, nous allons voir comment utiliser l'overlay pour gérer du contenu.