UDA-Componentes RUP. Wizard

UDA - Utilidades de Desarrollo de Aplicaciones
Componentes RUP – Wizard
Fecha: 22/11/2013 Referencia:
EJIE S.A.
Mediterráneo, 14
Tel. 945 01 73 00*
Fax. 945 01 73 01
01010 Vitoria-Gasteiz
Posta-kutxatila / Apartado: 809
01080 Vitoria-Gasteiz
www.ejie.es
UDA – Utilidades de desarrollo de aplicaciones by EJIE is licensed under a Creative Commons Reconocimiento-
NoComercial-CompartirIgual 3.0 Unported License..

Componentes RUP – Wizard iii/18
Control de documentación
Título de documento: Componentes RUP – Wizard
Histórico de versiones
Código: Versión: Fecha: Resumen de cambios:
2.0.0 20/04/2012 Primera versión.
2.0.1 08/08/2012 Añadidos estilos
2.1.0 18/09/2012
Actualización de las versiones de las librerías
JavaScript subyacentes.
2.4.0 22/11/2013
Se distribuye la versión minimizada de los ficheros
javascript y de estilos de RUP.
Cambios producidos desde la última versión
Se distribuye la versión minimizada de los ficheros javascript y de estilos de RUP.
Control de difusión
Responsable: Ander Martínez
Aprobado por:
Firma: Fecha:
Distribución:
Referencias de archivo
Autor:
Nombre archivo:
Localización:

Componentes RUP – Wizard iv/18
Contenido
Capítulo/sección Página
1. Introducción 6
2. Ejemplo 6
3. Casos de uso 6
4. Infraestructura 6
4.1. Ficheros 6
4.2. Dependencias 7
4.3. Versión minimizada 7
5. Invocación 7
6. Parámetros 8
7. Funciones 11
8. Estructura 12
9. Resumen (conversiones) 13
9.1. INPUT 13
9.2. TEXTAREA 14
9.3. SELECT (combo) 14
9.4. LABEL 14
9.5. Componentes RUP 15
9.5.1. Accordion 15
9.5.2. Combo 15
9.5.3. Date 15
9.5.4. Time 15
9.5.5. Tabs 15

Componentes RUP – Wizard v/18
10. Sobreescritura del theme 16
10.1.1. Tabs 18
11. Integración con UDA 19

Componentes RUP – Wizard 6/18
1. Introducción
La descripción del componente wizard, visto desde el punto de vista de RUP, es la siguiente:
Permitir guiar al usuario paso a paso a través de un proceso realizando las tareas dentro de un orden
señalado.
2. Ejemplo
Se presenta a continuación un ejemplo de este componente:
3. Casos de uso
Se recomienda el uso del componente:
• Cuando la tarea sea larga o complicada.
• Cuando la tarea sea nueva para el usuario o no la realice a menudo.
• Cuando la tarea sea delicada y requiera un control alto.
4. Infraestructura
A continuación se comenta la infraestructura necesaria para el correcto funcionamiento del componente.
• Únicamente se requiere la inclusión de los ficheros que implementan el componente (js y css)
comentados en los apartados Ficheros y Dependencias.
4.1. Ficheros
Ruta Javascript: rup/scripts/
Fichero de plugin: rup.wizard-x.y.z.js
Ruta theme: rup/basic-theme/

Fichero css del theme: theme.rup.wizard-x.y.z.css
4.2. Dependencias
Por la naturaleza de desarrollo de los componentes (patrones) como plugins basados en la librería
JavaScript jQuery, es necesaria la inclusión del esta. La versión elegida para el desarrollo ha sido la
versión 1.8.0.
• jQuery 1.8.0: http://jquery.com/
Los ficheros necesarios para el correcto funcionamiento del componente son:
jquery-1.8.0.js
jquery.qtip.js
rup.base-x.y.z.js
rup.wizard-x.y.z.js
theme.rup.wizard-x.y.z.css
4.3. Versión minimizada
A partir de la versión v2.4.0 se distribuye la versión minimizada de los componentes RUP. Estos ficheros
contienen la versión compactada y minimizada de los ficheros javascript y de estilos necesarios para el
uso de todos los compontente RUP.
Los ficheros minimizados de RUP son los siguientes:
• rup/scripts/min/rup.min-x.y.z.js
• rup/basic-theme/rup.min-x.y.z.css
Estos ficheros son los que deben utilizarse por las aplicaciones. Las versiones individuales de cada uno
de los componentes solo deberán de emplearse en tareas de desarrollo o depuración.
5. Invocación
Este componente se invocará mediante un selector que indicará el objeto contenedor de la estructura a
convertir en asistente paso a paso. Por ejemplo
$("#id_form").rup_wizard(properties);
donde el parámetro “properties” es un objeto (var properties = {};) o bien directamente la declaración de los
valores, detallados en el siguiente apartado.

6. Parámetros
A continuación se muestran los posibles parámetros de configuración que recibe el componente.
• submitButton: Identificador del botón de envío del formulario. Sirve para que dicho botón
solo se muestre en el último paso del asistente.
• submitFnc: Función que se ejecuta previamente al envío del formulario.
• summary: Indica si se debe generar o no el paso resumen. Este paso mostrará (como texto
plano) los valores seleccionados en los diferentes pasos habilitados. Si un paso se
encuentra deshabilitado no se utilizarán sus valores para la generación del resumen. El paso
de resumen se genera cuando se navega hacia él. Su valor por defecto es true.
• summaryWithAccordion: Indica si el paso resumen debe formatear los diferentes pasos
del asistente mediante elementos que usan el componente accordion. Su valor por defecto
es false.
o true:
o false:
• summaryWithAccordionSpaceBefore: Indica si cuando se genera un resumen con los
diferentes pasos presentados con accordion, se debe dejar un espacio (</br>) entre el
contenido y la barra con los pasos. Su valor por defecto es true.

• summaryWithAccordionSpaceAfter: Indica si cuando se genera un resumen con los
diferentes pasos presentados con accordion, se debe dejar un espacio (</br>) entre el
contenido y el contenedor de botones (siguiente y enviar). Su valor por defecto es true.
• summaryTabs2Accordion: Indica si los componentes rup_tab de los diferentes pasos del
wizard se deben convertir en elementos del componente accordion a la hora de generar el
paso resumen. Su valor por defecto es false.
o true:
o false:
• summaryFnc_PRE: Función que se invocará previamente a la generación del paso
resumen. En caso de devolver false no se generaría el resumen.
• summaryFnc_INTER: Función que se ejecuta una vez ha comenzado la generación del
paso resumen. Se habrá generado la capa contenedora y duplicado el contenido de los
pasos anteriores pero sin llegar a procesarse (cambiarse por texto plano). En caso de
devolver false no se continuaría con el procesado del contenido de los pasos.
• summaryFnc_POST: Función que se ejecuta una vez se ha generado el paso resumen.

• stepFnc: Objeto json que contiene las diferentes funciones a ejecutar al navegar hacia cada
uno de los pasos. En caso de devolver false no se continuaría la navegación hacia dicho
paso. La clave de cada elemento será el número del paso y el valor será la función a
ejecutar. Por ejemplo:
stepFnc : {
2 : function (){
//Función que se ejecuta al navegar hacia el paso 2
...
}
}
• disabled: Array que indica los pasos a deshabilitar al inicio. En caso de que el elemento del
array sea un número (numeric) se deshabilitará dicho paso y en caso de que sea un literal
(string) se procesará como un intervalo que deberá definirse como “X-Y”. Por ejemplo:
disabled: [1] //Deshabilitar el paso 1
disabled: ["2-4"] //Deshabilitar los pasos 2,3 y 4
• accordion: Define de forma general el funcionamiento del componente rup_accordion en el
paso de resumen. Su valor por defecto es:
accordion: {
animated: "bounceslide",
active: false,
autoHeight: false,
collapsible: true
},
• rupAccordion: Define el funcionamiento del patrón rup_accordion en el resumen (de los
objetos rup_accordion existentes en los pasos anteriores). No tiene valor por defecto, por lo
que en caso de no definirse se toma el valor del parámetro accordion.
• summaryAccordion: Define el funcionamiento del patrón rup_accordion en el resumen
para cada uno de los pasos que lo componen (si configura la generación de resumen y
conversión de pasos en accordion). No tiene valor por defecto, por lo que en caso de no
definirse se toma el valor del parámetro accordion.
• tabAccordion: Define el funcionamiento del patrón rup_accordion en el resumen, para cada
los objetos rup_tab existentes en los pasos anteriores (si configura la generación de
resumen y conversión de pestañas en accordion). No tiene valor por defecto, por lo que en
caso de no definirse se toma el valor del parámetro accordion.
• rupTabsElement: Indica el tipo de objeto HTML en el que se convierten los objetos del
patrón rup_tab en el paso de resumen. Su valor por defecto es <h4 />.
• labelElement: Indica el tipo de objeto HTML en el que se convierten los objetos label en el
paso de resumen. Su valor por defecto es <span />.
• labelSeparatorElement: Indica el tipo de objeto HTML que se utilizará para separar los
valores de sus correspondientes labels en el paso de resumen. Su valor por defecto es
<span />.

• labelSeparatorText: Indica el contenido del objeto HTML que se utilizará para separar los
valores de sus correspondientes labels en el paso de resumen. Su valor por defecto es
   .
Ejemplo:
<span class="rup-wizard_summaryLabel">Nombre</span>
<span class="rup-wizard_separator"> </span>
<span class="rup-wizard_summaryValue">Juan</span>
• textareaElement: Indica el tipo de objeto HTML en el que se convierten los objetos textarea
en el paso de resumen. Su valor por defecto es <p />.
NOTA: La numeración de los pasos comienza en cero.
7. Funciones
A continuación se detallan las diferentes funciones que integran el componente wizard:
• step: Selecciona el paso recibido como parámetro. La invocación se realizará de la siguiente
manera:
$(selector).rup_wizard("step", 1);
• first: Selecciona el primer paso del asistente. La invocación se realizará de la siguiente manera:
$(selector).rup_wizard("first");
• last: Selecciona el último paso del asistente. La invocación se realizará de la siguiente manera:
$(selector).rup_wizard("last");
• getCurrentStep: Devuelve el número del paso actual. La invocación se realizará de la siguiente
manera:
$(selector).rup_wizard("getCurrentStep");
• isCurrentStep: Indica si el paso recibido como parámetro es el activo. La invocación se realizará de
la siguiente manera:
$(selector).rup_wizard("isCurrentStep", 1);
• isCurrentStepFirst: Indica si el paso activo es el primero. La invocación se realizará de la siguiente
manera:
$(selector).rup_wizard("isCurrentStepFirst");
• isCurrentStepLast: Indica si el paso activo es el último. La invocación se realizará de la siguiente
manera:
$(selector).rup_wizard("isCurrentStepLast");
• isCurrentStepSummary: Indica si el paso activo es el resumen. La invocación se realizará de la
siguiente manera:
$(selector).rup_wizard("isCurrentStepSummary");
• enableStep: Habilita el paso recibido como parámetro. La invocación se realizará de la siguiente
manera:
$(selector).rup_wizard("enableStep", 1);
• disableStep: Deshabilita el paso recibido como parámetro. La invocación se realizará de la
siguiente manera:

$(selector).rup_wizard("disableStep", 1);
• isStepDisabled: Indica si el paso recibido como parámetro está deshabilitado. La invocación se
realizará de la siguiente manera:
$(selector).rup_wizard("isStepDisabled", 1);
NOTA: La numeración de los pasos comienza en cero.
8. Estructura
A continuación se detalla la estructura que debe seguir el formulario a convertir en wizard.
Cada paso del wizard estará formado por un fieldset y la descripción del paso se definirá dentro del fieldset
mediante la etiqueta legend. Un ejemplo de la estructura:
<form id="wizardForm">
<fieldset>
<legend>Paso primero </legend>
...
</fieldset>
<fieldset>
<legend>Paso segundo </legend>
...
</fieldset>
...
<fieldset>
<legend>Paso n </legend>
...
</fieldset>
</form>
Una vez definida la estructura bastará con lanzar el componente para obtener el wizard con la siguiente
estructura (se han obviado los estilos, detallados en otro apartado más adelante, para facilitar la
comprensión):
<ul id="steps">
<li id="stepDesc0">
<span>1. Paso primero</span>
</li>
<li id="stepDesc1">
<span>2. Paso segundo</span>
</li>
...
<li id="stepDescn">
<span>n. Paso enésimo</span>
</li>
</ul>
<form id="wizardForm">
<div id="step0">
<fieldset>
<legend>Paso primero</legend>
...
</fieldset>

</div>
<div id="step1">
<fieldset>
<legend>Paso segundo</legend>
...
</fieldset>
</div>
...
<div id="stepn">
<fieldset>
<legend>Paso enésimo</legend>
...
</fieldset>
</div>
</form>
Por lo expuesto anteriormente se deduce que la conversión de la estructura inicial en asistente paso a paso
es la siguiente:
Se genera una lista no numerada UL que contiene los enlaces a los diferentes pasos. Estará al
mismo nivel que el formulario y su identificador será steps.
La lista no numerada contendrá un elemento de lista LI por cada paso definido en el asistente. Los
identificadores de los elementos de la lista serán correlativos y con la nomenclatura siguiente:
stepDescX (siendo x un número comenzando en 0).
Cada elemento de la lista alojará en su interior un SPAN donde se define el texto del paso. Este
texto se obtendrá del legend del paso correspondiente.
Los fieldsets que definen los diferentes pasos serán recubiertos con una capa DIV. El identificador
de este elemento serán correlativos y con la nomenclatura siguiente: stepX (siendo x un número
comenzando en 0).
9. Resumen (conversiones)
El patrón wizard genera por defecto un paso Resumen donde se muestran en texto plano los diferentes
datos introducidos en los pasos anteriores. A continuación se detalla la conversión realizada con los
diferentes elementos posibles. Se han omitido los estilos que se detallan en el siguiente apartado.
9.1. INPUT
En este apartado se detallan las conversiones de los diferentes tipos de los elementos de introducción
de datos, que se transformarán en elementos span.
text
<input type="text" id="nombre" name="nombre" />
<span>Juan<span/>
password: Caracteres cambiados por *
<input type="password" id="password" name="password" />

<span>*****<span/>
radio: Solo se mostrará el elemento seleccionado
<input type="radio" name="group1" value="hombre"
id="radio_hombre" checked="checked"/>
<input type="radio" name="group1" value="mujer"
id="radio_mujer"/>
<span>Hombre<span/>
checkbox: Cada elemento irá precedido de un par de corchetes [ ] y los elementos
seleccionados contendrán una equis en su interior [X]
<input type="checkbox" name="mes_enero" value="0"/>
<input type="checkbox" name="mes_febrero" value="1"/>
<input type="checkbox" name="mes_marzo" value="2"/>
<span>[X]<span/>
<span>[ ]<span/>
<span>[ ]<span/>
9.2. TEXTAREA
Los elementos de tipo textarea se convierten en elementos paragraph (<p>). Opcionalmente se puede
configurar el elemento en el que se convierte mediante el parámetro textareaElement.
<textarea id="aficiones" name="aficiones" cols="150" rows="10"></textarea>
<p>Esto es un ejemplo de texto</p>
9.3. SELECT (combo)
Los combos se convierten en elementos span, que mostrará el label (literal) del elemento seleccionado.
<select id="ejie">
<option value="0" selected="selected">No</option>
<option value="1">Sí</option>
</select>
<span>No</span>
9.4. LABEL
Los elementos de tipo label se convierten en elementos span. Opcionalmente se puede configurar el
elemento en el que se convierte mediante el parámetro labelElement.
<label for="username">Usuario</label>
<span>Usuario</span>

9.5. Componentes RUP
Además de los elementos básicos de HTML se pueden incluir componentes RUP en el asistente paso a
paso y a continuación se detalla su correspondiente conversión.
9.5.1. Accordion
Cuando se duplica un accordion en el paso de resumen simplemente se modifica el identificador que
contiene el accordion pasando a llamarse como su original con el literal “_summary” concatenado al
final. Para configurar el funcionamiento del accordion se utilizará el parámetro rupAccordion.
<div id="meses">
<h1><a>Jornada reducida</a></h1>
...
</div>
<div id="meses_summary">
<h1><a>Jornada reducida</a></h1>
...
</div>
9.5.2. Combo
En el procesamiento de este elemento se debe eliminar los elementos sobrantes para mostrar el
literal del elemento seleccionado bajo un span.
9.5.3. Date
En el procesamiento de este elemento se debe eliminar los elementos sobrantes, en este caso la
imagen para seleccionar fecha.
9.5.4. Time
En el procesamiento de este elemento se debe eliminar los elementos sobrantes, en este caso la
imagen para seleccionar hora.
9.5.5. Tabs
El procesamiento de las pestañas se realiza mediante un algoritmo recursivo que comprueba los
diferentes niveles de las pestañas y los procesa. Se realizan las siguientes transformaciones:
El nombre de la pestaña (originalmente contenido en una lista no numerada) se traduce en
un elemento <h4 /> que opcionalmente se puede configurar mediante el parámetro
rupTabsElement.
El contenido de la pestaña (capa) se extrae de la capa adicional que la contiene
(generalmente con un identificador del tipo “rupRandomLayerId-?”). En caso de que la

pestaña sea una sub-pestaña, su identificador se verá modificado añadiéndole “subtab_” por
delante.
A continuación se detalla un ejemplo para mejorar la comprensión:
<div id="tabs">
<ul>
<li><a><div>Pestaña 1</div></a></li>
<li><a><div>Pestaña 2</div></a></li>
</ul>
<div id="rupRandomLayerId-0">
<div id="pest2">
<ul>
<li><a><div>Subpestaña 2.1</div></a></li>
<li><a><div>Subpestaña 2.2</div></a></li>
</ul>
</div>
<div id="pest22">

</div>
</div>
<div id="pest21">

</div>
</div>
</div>
<div id="pest1">

</div>
</div>
</div>
La conversión del rup-tab sería la siguiente:
<h4>Pestaña 1</h4>
<div id="pest1"></div>
<h4>Pestaña 2</h4>
<div id="subtab_pest2">
<h4> Subpestaña 2.1</h4>
<div id="pest21"></div>
<h4>Subpestaña 2.2</h4>
<div id="pest22"></div>
</div>
10. Sobreescritura del theme
El componente wizard se presenta con una apariencia visual definida en el fichero de estilos
theme.rup.wizard-x.y.z.css.

A continuación se detallan los estilos:
.rup-wizard_stepsDescContainer UL que contiene los diferentes pasos.
.rup-wizard_stepDesc Cada uno de los pasos (LI).
.rup-wizard_stepDesc:hover Cada uno de los pasos (LI) con el ratón encima.
.rup-wizard_stepDesc.current Paso activo (LI).
.rup-wizard_stepDesc.disabled Paso deshabilitado (LI).
.rup-wizard_firstStepDesc Primer paso.
.rup-wizard_lastStepDesc Último paso (sin tener en cuenta el paso resumen).
.rup-wizard_summary Paso resumen.
.rup-wizard_stepDesc span Descripción de cada paso (texto).
Se detalla un ejemplo con su estructura:
<ul id="steps" class="rup-wizard_stepsDescContainer">
<li id="stepDesc0" class="rup-wizard_stepDesc
rup-wizard_firstStepDesc
current">
<a href="#">1. Datos de la cuenta</a>
</li>
disabled">
<a href="#">2. Deshabilitado</a>
</li>
<li id="stepDesc2" class="rup-wizard_stepDesc">
<a href="#">3. Datos del trabajador</a>
</li>
<li id="stepDesc3" class="rup-wizard_stepDesc">
<a href="#">4. Plan de trabajo</a>
</li>
rup-wizard_summary
rup-wizard_lastStepDesc">
<a href="#">5. Resumen</a>
</li>
</ul>
Existen estilos asociados a los botones “Anterior” y “Siguiente” que se utilizan para navegar entre los pasos:
.rup-wizard_prev Botón “Anterior”.
.rup-wizard_next Botón “Siguiente”.
.rup-wizard_submitButton Botón “Enviar”.
Estilos asociados a las imágenes para decorar el wizard:
Paso no activo: .rup-wizard_stepDesc a

Paso anterior al activo: .rup-wizard_stepDesc.visited a
Paso activo: .rup-wizard_stepDesc.current a
Último paso (no activo): .rup-wizard_lastStepDesc a
Último paso (activo): .rup-wizard_lastStepDesc.current a
10.1.1.Tabs
Cuando se genera el paso resumen y este va a contener algún elemento rup-tabs se realiza una
trasformación para modificar la estructura final de la página como se explica el en apartado anterior.
A la hora de realizar dicha transformación existen dos opciones:
Convertir las pestañas en un rup-accordion con lo que la configuración de los estilos se
realiza a través de las clases del componente.
No realizar la conversión las pestañas traduciéndose a texto plano (combinación de h4 y
div).
Para personalizar la visualización de las pestañas en el resumen se han definido los siguientes
estilos:
.rup-wizard_tabLevel-? Elemento pestaña
.rup-wizard_tabContainerLevel-? Elemento contenedor de pestañas
Como el componente pestañas permite definir tantos niveles de pestañas como se desee, también
los estilos deben poder seguir esa jerarquía de niveles. Es por ello que los estilos aplicados a las
diferentes pestañas y subpestañas van aumentando el valor definido con la “?” según se profundiza
en los diferentes niveles.
Ejemplo:
.rup-wizard_tabLevel-0
.rup-wizard_tabLevel-1
...
.rup-wizard_tabLevel-n
RUP por defecto trae los estilos de los primeros niveles (0, 1 y 2) aunque se pueden definir tantos
como se necesiten.

A la hora de definir las pestañas de un componente rup-tabs existen elementos que contienen datos
directamente, es lo que hemos denominado pestañas. Aunque también existen elementos que
contienen subpestañas en los que no se contienen datos. Estos últimos elementos los hemos
denominado contenedores de pestañas. En función del tipo de elemento que se procesa a la hora
de procesar las pestañas se asignará un estilo u otro.
11. Integración con UDA
No aplica.

UDA-Componentes RUP. Wizard

Más contenido relacionado

La actualidad más candente (15)

Destacado (11)

Similar a UDA-Componentes RUP. Wizard (20)

Más de Ander Martinez (19)

Último (20)

UDA-Componentes RUP. Wizard