Crear un asistente

This is an archived page. It's not actively maintained.

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.

Ten en cuenta que actualmente los asistentes solo funcionan adecuadamente desde URLs chrome.

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="http://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>
Image:wizard1.jpg

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="http://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.

Atributo Etiqueta Llamada
pagehide wizardpage Llamada a la p√°gina que el usuario esta dejando.
pageadvanced wizardpage Llamada a la p√°gina que el usuario esta dejando.
wizardnext wizard Llamado en el asitente.
pageshow wizardpage Llamada a la p√°gina que el usuario esta entrando.

Un proceso similar ocurre para el botón Volver.

Siempre que trates de usar una función en el evento anterior, como con pageadvanced, deberías usar

return funcName() en lugar de solo la llamada funcName()o no funcionar√° como se espera, por ejemplo

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