Crear un asistente

Muchas aplicaciones usan un asistente para ayudar al usuario a realizar tareas complicadas. XUL proporciona una forma de crear fácilmente un asistente.

El asistente

Un asistente es un tipo especial de diálogo que contiene una serie de páginas. Los botones de navegación entre páginas aparecen en la parte inferior del diálogo. Los asistentes se utilizan habitualmente para ayudar al usuario en la realización de tareas complejas. Cada página contiene una única cuestión o varias preguntas relacionadas. Después de la última página, se lleva a cabo la operación.

XUL proporciona un elemento wizard que permite crear asistentes. Los atributos colocados en el asistente se usan para controlar la navegación de éste. Al crear un asistente se usa la etiqueta wizard en lugar de la etiqueta window.

El contenido del elemento wizard incluye el contenido de cada página del asistente. Las páginas del asistente se crean mediante el elemento wizardpage. Puedes colocar cualquier contenido que desees dentro de cada wizardpage.

El asistente consta de varias secciones y, por supuesto, el diseño  del asistente puede variar según el sistema operativo de cada plataforma. El asistente se mostrará generalmente con el aspecto de la plataforma del usuario. El aspecto típico incluirá un título en la parte superior, un grupo de botones de navegación en la parte inferior y el contenido de la página en medio de ambos.

El título a lo largo de la parte superior se crea usando el atributo title, muy parecido al que podría usarse para una ventana normal. Los botones de navegación son creados automáticamente. 

Un ejemplo de asistente

Código Ver en funcionamiento

<?xml version="1.0"?>

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

<wizard id="example-window" title="Select a Dog Wizard"
  xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <wizardpage>
    <description>
      Esta asistente le ayudará a seleccionar el tipo de perro que más le conviene."
    </description>
    <label value="¿Por qué quiere un perro?"/>
    <menulist>
      <menupopup>
        <menuitem label="Para que la gente se vaya"/>
        <menuitem label="Para que asuste a un gato"/>
        <menuitem label="Necesito un buen amigo"/>
      </menupopup>
    </menulist>
  </wizardpage>

  <wizardpage description="Detalles del perro">
    <label value="Proporcione detalles adicionales sobre el perro que le gustaría:"/>
    <radiogroup>
      <caption label="Tamaño"/>
      <radio value="small" label="Pequeño"/>
      <radio value="large" label="Grande"/>
    </radiogroup>
    <radiogroup>
      <caption label="Género"/>
      <radio value="male" label="Macho"/>
      <radio value="female" label="Hembra"/>
    </radiogroup>
  </wizardpage>

</wizard>

El asistente tiene dos páginas, una que tiene un menú desplegable y la otra botones redondos. El asistente será formateado automáticamente, con un título en la parte de arriba y botones en la parte de abajo. El usuario puede navegar entre las páginas con los botones de 'Anterior' (Back) y 'Posterior' (Next). Estos botones se activan y desactivan ellos mismos cuando es necesario. En la última página, además de estos anteriores, aparecerá el botón de Terminar/Finalizar. Todo esto es automático, no hay que hacer nada para manipular las páginas.

El atributo description puede ser opcionalmente colocado en un elemento wizardpage a fin de proporcionar un subtítulo para esa página. En el ejemplo anterior, está puesto en la segunda página, pero no en la primera.

Gestión de los cambios en las página

Generalmente, desearás que se haga algo una vez se presione el botón Finalizar. Se puede definir un atributo onwizardfinish, dentro del elemento wizard para que sea así. Colócalo en un script que realice cualquier tarea que desees y que después devuelva 'true'. Este script se puede usar para guardar la información que incluye el usuario durante el asistente. Por ejemplo:

<wizard id="example-window" title="Select a Dog Wizard"
  onwizardfinish="return saveDogInfo();"
  xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

Cuando el usuario haga clic sobre el botón Finalizar, es llamada la función saveDogInfo(), la cual se definirá en un archivo de script para guardar la información que se ha incluido. Si la función devuelve 'true', el asistente se cierra. Si devuelve 'false', entonces el asistente no se cerrará, lo que suele ocurrir, por ejemplo, si la función saveDogInfo() encuentra una entrada que no es válida.

Existen otros atributos relacionados onwizardback, onwizardnext y onwizardcancel, que son llamados cuando los botones Volver, Siguiente y Cancelar son presionados respectivamente. Estas funciones son llamadas sin considerar qué página se está mostrando actualmente.

Para llamar un código diferente dependiendo de qué página se encuentra el usuario, se utilizan los atributos onpagerewound o onpageadvanced en un elemento wizardpage. Funcionan de manera parecida a las otras funciones con la excepción que se puede usar código diferente en cada página. Esto te permite validar la información incluida en cada página antes de que continúe el usuario.

Un tercer método consiste en usar los atributos onpagehide y onpageshow en el elemento wizardpage. Estos se llamarán cuando la página se oculte o se muestre, independientemente de qué botón se pulse (excepto cuando se presiona Cancel: tienes que usar onwizardcancel para comprobarlo).

Estos tres métodos deberían proporcionar suficiente flexibilidad para gestionar la navegación tanto como necesites. La siguiente tabla es un resumen  de las funciones de los atributos que se llaman cuando el usuario pulsa Siguiente ('Next'), en el orden en que son comprobados. En el momento en que uno devuelva false, se cancelará la navegación.

Un proceso similar ocurre para el botón Volver.

 <wizardpage pageadvanced='return funcName()'></wizardpage></code>