Tutorial de XUL:Creando un asistente

De MDC

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

[editar] El asistente

Un asistente es un tipo especial de diálogo que contiene una cantidad de páginas. Los botones de navegación entre páginas aparecen en la parte de abajo del diálogo. Los asistentes son usualmente utilizados para ayudar al usuario la realización de tareas complejas. Cada página contiene una simple cuestión o varias preguntas relacionadas. Después de la última página, la operación es realizada.

XUL proporciona un elemento asistente el cual permite crear asistentes. Dentro del elemento asistente se incluye la totalidad del contenido de todas las páginas del asistente. 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 asistente consta de varias secciones, por supuesto la forma del asistente puede variar para cada plataforma. El asistente se mostrara 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. Las páginas del asistente se crean con el elemento wizardpage. Dentro de cada wizardpage se coloca cualquier contenido necesario.

[editar] 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>

El asistente tiene dos páginas, una que tiene un menú de selección y la otra botones de radio. El asistente será formado 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). Éstos botones se activan y desactivan ellos-mismos en los momentos apropiados. 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.

[editar] Gestión de los cambios

Generalmente, se necesita hacer algo una vez se presionó el botón de finalizar. Se puede definir un atributo onwizardfinish, dentro del elemento wizard para que se ejecute lo que se necesite. Colocarlo en un script que mejore cualquier tarea necesaria y que después devuelva 'true'. Este script se puede usar para salvar la información que entra 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 presiona el botón Finalizar, la función saveDogInfo() es llamada, la cual fue definida en el archivo de script para guardar la información entrada. Si la función devuelve 'true', el asistente se cierra. Si devuelve 'false', entonces el asistente no se cerrará, suele ocurrir por ejemplo, si la función saveDogInfo() encuentra una entrada inválida.

Aquí es relacionado con los atributos onwizardback, onwizardnext y onwizardcancel, los cuales son llamados cuando los botones: Volver, Siguiente y Cancelar son presionados respectivamente. Estas funciones son llamadas sin considerar en que página están actualmente mostrados.

Para llamar un código diferente dependiendo en que página se encuentra el usuario, se utilizan los atributos onpagerewound o onpageadvanced en un elemento wizardpage. Trabajan de manera parecida que las otras funciones con la excepción que se puede usar código diferente en cada página. This allows you to validate the input entered on each page before the user continues.

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, dependiendo de que botón se pulse (excepto cuando se presiona Cancel -- necesitas usar onwizardcancel para comprobarlo.)

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

Un proceso similar ocurre para el botón: Volver.

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