Création d'un assistant

Beaucoup d'applications utilisent des assistants pour aider l'utilisateur dans des tâches complexes. XUL fournit un moyen de créer des assistants facilement.

L'élément wizard

Un assistant est un type spécial de boîte de dialogue, contenant un certain nombre de pages. Des boutons de navigation apparaissent en bas de la boîte de dialogue pour passer d'une page à l'autre. Les assistants sont habituellement utilisés pour aider l'utilisateur à effectuer des tâches complexes. Chaque page contient une seule question ou un ensemble de questions associées. À la dernière page, l'opération est effectuée.

XUL fournit un élément wizard qui peut être utilisé pour créer des assistants. Le contenu à l'intérieur de l'élément wizard inclut tout le contenu de chaque page. Les attributs placés sur l'élément wizard sont utilisés pour contrôler la navigation. Quand vous créez un assistant, utilisez la balise wizard à la place de la balise window.

Un assistant consiste en un ensemble de sections, bien que la mise en page exacte variera pour chaque plateforme. L'aspect visuel de l'assistant s'adaptera à la plateforme de l'utilisateur. Une mise en page type inclura un titre en haut, un ensemble de boutons de navigations en bas, et le contenu de la page entre les deux.

Le titre du haut est créé en utilisant l'attribut title comme on le ferait pour les fenêtres normales. Les boutons de navigation sont créés automatiquement. Les pages de l'assistant sont créées en utilisant l'élément wizardpage. Vous pouvez y placer tout contenu que vous voulez.

Exemple d'assistant

Exemple 1 : Source

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

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

<wizard id="example-window" title="Assistant de sélection de chien"
  xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <wizardpage>
    <description>
      Cet assistant vous aidera à sélectionner le type de chien qui sera le mieux pour vous.
    </description>
    <label value="Pourquoi voulez vous un chien ?"/>
    <menulist>
      <menupopup>
        <menuitem label="Pour faire peur aux gens"/>
        <menuitem label="Pour se débarrasser d'un chat"/>
        <menuitem label="J'ai besoin d'un meilleur ami"/>
      </menupopup>
    </menulist>
  </wizardpage>

  <wizardpage description="Détails sur le chien">
    <label value="Fournissez plus de détails sur le chien que vous désirez :"/>
    <radiogroup>
      <caption label="Taille"/>
      <radio value="small" label="Petit"/>
      <radio value="large" label="Grand"/>
    </radiogroup>
    <radiogroup>
      <caption label="Sexe"/>
      <radio value="male" label="Male"/>
      <radio value="female" label="Femelle"/>
    </radiogroup>
  </wizardpage>

</wizard>

L'assistant a deux pages, une qui a une liste déroulante et une autre qui a un ensemble de boutons radios. L'assistant sera formaté automatiquement, avec un titre en haut et un ensemble de boutons le long du bas de la fenêtre. L'utilisateur peut naviguer entre les pages de l'assistant avec les boutons 'Précédent' et 'Suivant'. Ces boutons s'activeront ou se désactiveront eux-mêmes aux moments appropriés. De plus, sur la dernière page, le bouton 'Terminer' apparaîtra. Tout ceci est automatique, aussi, vous n'avez rien à faire pour manipuler les pages.

L'attribut description peut être éventuellement placé sur l'élément wizardpage pour fournir un sous-titre pour la page concernée. Dans l'exemple du dessus, il est placé sur la seconde page, mais pas sur la première.

Gestion des changements de page

Généralement, vous souhaitez réaliser une action après que le bouton 'Terminer' ait été pressé. Vous pouvez mettre un attribut onwizardfinish sur l'élément wizard pour accomplir cette tâche. Spécifiez-y un script qui exécutera ce que vous voulez et qui renverra 'true'. Le script peut être utilisé pour sauvegarder les informations que l'utilisateur a saisi dans l'assistant. Par exemple :

<wizard id="example-window" title="Assistant de sélection de chien"
  onwizardfinish="return saveDogInfo();"
  xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

Quand l'utilisateur clique sur le bouton 'Terminer', la fonction saveDogInfo définie dans un script sera appelée pour sauvegarder les informations saisies. Si la fonction renvoie 'true', l'assistant se fermera. Si elle renvoie 'false', alors l'assistant ne se fermera pas, ce qui pourrait signifier par exemple que la fonction saveDogInfo a rencontré une saisie invalide.

Il existe également les attributs similaires onwizardback, onwizardnext et onwizardcancel qui sont appelés quand les boutons 'Précédent', 'Suivant' et 'Annuler' sont respectivement pressés. Ces fonctions sont appelées quelque soit la page en cours affichée.

Pour appeler un code différent en fonction de la page où vous êtes, utilisez les attributs onpagerewound ou onpageadvanced sur un élément wizardpage. Ils fonctionnent de manière similaire aux autres fonctions, excepté que vous pouvez utiliser un script différent pour chaque page. Cette méthode vous permet de valider les informations saisies sur chaque page avant que l'utilisateur ne continue.

Une troisième méthode est l'utilisation des attributs onpagehide et onpageshow sur l'élément wizardpage. Ils sont appelés lorsque la page est cachée ou affichée, indifféremment du bouton pressé (excepté quand le bouton 'Annuler' est pressé ; vous devez utiliser onwizardcancel pour le vérifier).

Ces trois méthodes devraient fournir suffisamment de souplesse pour gérer la navigation comme vous le souhaitez. Ce qui suit est un résumé des fonctions d'attributs appelées quand l'utilisateur presse 'Suivant', dans l'ordre dans lequel elles sont vérifiées. Dés que l'une renvoie 'false', la navigation est annulée.

Un processus similaire existe pour le bouton 'Précédent'.

<wizardpage pageadvanced='return NomFonct()'></wizardpage>

Dans la prochaine section, nous verrons des fonctionnalités supplémentaires sur les assistants.

Interwiki