12.5 Assistant avançé

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.

Cette section décrit quelques fonctionnalités supplémentaires sur les assistants.

Une navigation plus complexe

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 des choix effectués par l'utilisateur sur les pages précédentes.

Dans ce cas, placez un attribut pageid sur chacune des pages. Un identifiant devra être placé sur chaque page. Ensuite, pour naviguer d'une page à l'autre, utilisez une des deux méthodes suivantes :

1. Affectez à l'attribut next de chaque page la valeur de l'identifiant de la page qui doit la suivre. Vous pouvez changer ces attributs comme vous le souhaitez pour naviguer vers d'autres pages.
2. Appelez la méthode goTo() de l'assistant. Elle prend comme unique 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 par 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 interne 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 de page type. La page suivante ayant l'identifiant de page font, l'assistant affichera cette page juste après.
• Sur la page qui a l'identifiant font, nous voyons 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, elle 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.

Fonctions d'assistant

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. Comme 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écrits 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 cette propriété en fonction de la validité des données saisies.

Dans l'exemple suivant, l'utilisateur doit entrer un code secret dans le champ de saisie 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é par l'attribut onpageshow. Elle est aussi appelée dès qu'une touche est pressée dans le champ textbox, pour déterminer si le bouton Suivant doit être à nouveau actif.

Exemple d'assistant

Exemple 12.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 pas à le faire.

Une autre propriété utile de l'assistant est currentPage qui donne une référence à la page wizardpage actuellement affichée. Vous pouvez aussi changer la page courante en modifiant cette propriété. Si vous modifiez sa valeur, les différents événements de changement de page seront invoqués.

---

Ensuite, nous allons voir comment utiliser les overlays pour gérer du contenu.