xulfr.org

11.5 Assistant avançé

Écrit par Neil Deakin. Traduit par Damien Hardy (25/07/2004).
Page originale : http://www.xulplanet.com/tutorials/xultu/advwiz.html xulplanet.com

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 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 :

  1. Affectez à l'attribut 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.
  2. Appelez la méthode d'assistant 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.

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. 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.