Este documento describe el componente de migas de RUP. Explica cómo funciona, su infraestructura, invocación y configuración a través de propiedades. También cubre temas como la internacionalización, personalización visual y su integración con el módulo de seguridad de UDA para mostrar el usuario autenticado y permitir la desconexión.

1. UDA – Utilidades de desarrollo de aplicaciones by EJIE is licensed under a Creative Commons Reconocimiento-
NoComercial-CompartirIgual 3.0 Unported License.
UDA - Utilidades de Desarrollo de Aplicaciones
Componentes RUP – Migas
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

2. Componentes RUP – Migas ii/12
Control de documentación
Título de documento: Componentes RUP – Migas
Histórico de versiones
Código: Versión: Fecha: Resumen de cambios:
1.0.0 06/06/2011 Primera versión.
1.0.1 18/07/2011
Correcciones en los números de versión de ficheros,
añadido ejemplo visual.
1.1.0 14/09/2011
Actualización de las versiones de las librerías
JavaScript subyacentes.
Añadido el apartado Integración con UDA.
1.2.1 16/02/2012 Añadidos los parámetros initURL e i18nId
2.0.0 11/07/2012
Cambios de formato y correcciones ortográficas.
Aparición del usuario autenticado.
2.1.0 18/09/2012
Actualización de las versiones de las librerías
JavaScript subyacentes.
Gestión del usuario autenticado.
2.1.1 07/01/2013
Actualización de nomenclaturas por cambios en el
modulo de seguridad.
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:

3. Componentes RUP – Migas iii/12
Distribución:
Referencias de archivo
Autor:
Nombre archivo:
Localización:

4. Componentes RUP – Migas iv/12
Contenido
Capítulo/sección Página
1. Introducción 5
2. Ejemplo 5
3. Casos de uso 5
4. Infraestructura 5
4.1. Ficheros 6
4.2. Dependencias 6
4.3. Versión minimizada 6
5. Invocación 7
6. Propiedades 7
7. Sobreescritura del theme 9
8. Internacionalización (i18n) 9
9. Integración con UDA 10

5. Componentes RUP – Migas 5/12
1. Introducción
La descripción del Componente Migas, visto desde el punto de vista de RUP, es la siguiente:
El componente de migas muestra a los usuarios la ruta de navegación que ha seguido por la aplicación
permitiéndoles volver hacia niveles superiores hasta la página de inicio.
2. Ejemplo
Se muestra a continuación una maquetación típica del patrón:
3. Casos de uso
Se aconseja la utilización de este componente:
• Cuando queramos mostrar al usuario la ruta de navegación que ha seguido, en qué página está y
permitirle volver fácilmente a niveles superiores.
• Se recomienda usarlas en aplicaciones web con tres o más niveles de jerarquía ya que es en este
tipo de aplicaciones donde son realmente útiles.
Las razones para el uso del componente son las siguientes:
• Es una solución conocida por los usuarios y fácil de comprender.
• Aporta flexibilidad a la navegación al permitir volver a niveles superiores.
• Ocupa poco espacio en la interfaz.
• Refuerza el contexto y la navegación ya que muestra a los usuarios dónde están y cómo está
estructurada la información.
• Ayuda a los usuarios a comprender la estructura de la aplicación.
4. Infraestructura
A continuación se comenta la infraestructura necesaria para el correcto funcionamiento del patrón.
• Únicamente se requiere la inclusión de los ficheros que implementan el patrón (js y css) comentados
en los apartados Ficheros y Dependencias.

6. Componentes RUP – Migas 6/12
4.1. Ficheros
Ruta JavaScript: rup/scripts/
Fichero de plugin: rup.breadCrumb-x.y.z.js
Ruta fichero de recursos: rup/resources/rup.i18n_idioma.json
Ruta theme: rup/basic-theme/
Fichero CSS del theme: theme.rup.breadCrumb-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/
La gestión de la ciertas partes visuales de los componentes, se han realizado mediante el plugin jQuery
UI que se basa en jQuery y se utiliza para construir aplicaciones web altamente interactivas. Este plugin,
proporciona abstracciones de bajo nivel de interacción y animación, efectos avanzados de alto nivel,
componentes personalizables (estilos) ente otros. La versión utilizada en el desarrollo ha sido la 1.8.23.
• jQuery UI 1.8.23: http://jqueryui.com/
Los ficheros necesarios para el correcto funcionamiento del componente son:
• jquery-1.8.0.js
• jquery-ui-1.8.23.custom.js
• jquery-ui-1.8.23.custom.css
• xbreadcrumbs.js
• rup.base-x.y.z.js
• rup.breadCrumb-x.y.z.js
• theme.rup.breadCrumb-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.

7. Componentes RUP – Migas 7/12
5. Invocación
El componente de migas se crea y configura según la disposición seleccionada en el asistente de
generación de aplicación del plugin UDA.
El componente se posiciona justo después del menú en una capa cuyo identificador se corresponde con el
nombre del War (xxxYyyWar) seguido de “_migas” y cuya clase asociada para los estilos es “rup-
breadCrumb_root”:
<div id="x21aDemoWAR_migas" class="rup-breadCrumb_root"></div>
La creación del componente se realiza en la plantilla de inclusión de js con la siguiente instrucción:
$("#idMenu").rup_menu(properties);
donde el parámetro “properties” es un objeto (var properties = {};) o bien directamente la declaración de lo
valores directamente. Sus posibles valores se detallan en el siguiente apartado.
Para generar la miga de una ventana se usa la URL a la que se está invocando desde el contextPath. Por
ejemplo, si la url es “http://desarrollo.jakina.ejiedes.net:7001/x21aPilotoPatronesWar/patrones/tooltip”, se
separa el substring de después del contextPath, en este caso “patrones/tooltip”. La configuración de las
migas contendrá un elemento “patrones” dentro del cual existirá un subelemento “tooltip”.
En el siguiente apartado se explican las propiedades y se adjunta un ejemplo más detallado.
6. Propiedades
Las propiedades configurables del patrón para poder dotar al patrón de funcionamientos adecuados a las
necesidades de la aplicación son las siguientes:
• breadCrumb: La estructura de las migas se define mediante un array en notación json cuyo
nombre será el mismo que el identificador del elemento sobre el que se aplica el
componente. Cada elemento conformará una miga definido mediante un literal (mapeado
mediante la url) y contendrá los siguientes elementos:
o i18nCaption: Texto que se mostrará como miga. Obtenido del fichero de literales de
la aplicación.
o literal: Submiga (mapeada mediante la URL). Internamente tendrá una estructura
definida con los atributos i18nCaption, literales (submigas) y sublevel.
o sublevel: Define un submenú para la miga a la que se asocia. Los subelementos del
menú deberán tener los siguientes atributos:
i18nCaption: Texto que se mostrará como elemento del menú obtenido del
fichero de literales de la aplicación.
url: Define la ruta a seguir cuando se pulse sobre el elemento.

8. Componentes RUP – Migas 8/12
• initURL: Define la ruta a seguir cuando se pulse sobre el primer elemento (ej. “Inicio”). Tomará
como valor la ruta del contexto (contextPath) y le concatenará el literal indicado. El literal se definirá
sin barra ‘/’ inicial.
• i18nId: Indica el identificador del objeto JSON para la resolución de los literales del
componente. En caso de no definirse se tomará el ID del objeto sobre el que se crea el
componente.
• showSpeed (por defecto fast): Propiedad que indica la velocidad de despliegue del subnivel en
milisegundos o en términos de jQuery (posibles valores: “normal”,”slow”).
• hideSpeed (por defecto ‘’): Propiedad que indica la velocidad de colapso del subnivel en
milisegundos o en términos de jQuery (posibles valores: “normal”,”slow”).
• collapsible (por defecto false): Propiedad que indica si el primer nivel es plegable.
• collapsedWidth (por defecto 10px): Propiedad de indica el tamaño del texto cuando está colapsado.
URL del ejemplo: http://desarrollo.jakina.ejiedes.net:7001/x21aPilotoPatronesWar/patrones/tooltip
$("#x21aPilotoPatronesWar_migas").rup_breadCrumb({
breadCrumb: {
"patrones" : {
//Literal
"i18nCaption" : "patrones",
//Elementos (url)
"all" : { "i18nCaption" : "all" },
"autocomplete" : { "i18nCaption" : "autocomplete" },
"toolbar" : { "i18nCaption" : "toolbar" },
"comboSimple" : {"i18nCaption":"comboSimple" },
"comboEnlazadoSimple" : { "i18nCaption":"comboEnlazadoSimple" },
"comboEnlazadoMultiple" : { "i18nCaption":"comboEnlazadoMulti" },
"dialog" : { "i18nCaption" : "dialog" },
...
"tooltip" : { "i18nCaption" : "tooltip" },
//Submenu
"subLevel":[
{"i18nCaption":"all", "url":

9. Componentes RUP – Migas 9/12
"/x21aPilotoPatronesWar/patrones/all" },
{"i18nCaption":"autocomplete", "url":
"/x21aPilotoPatronesWar/patrones/autocomplete" },
{"i18nCaption":"toolbar", "url":
"/x21aPilotoPatronesWar/patrones/toolbar" },
{"i18nCaption":"comboSimple", "url":
"/x21aPilotoPatronesWar/patrones/comboSimple" },
{"i18nCaption":"comboEnlazadoSimple", "url":
"/x21aPilotoPatronesWar/patrones/comboEnlazadoSimple" },
{"i18nCaption":"comboEnlazadoMulti", "url":
"/x21aPilotoPatronesWar/patrones/comboEnlazadoMultiple" },
{"i18nCaption":"dialog", "url":
"/x21aPilotoPatronesWar/patrones/dialog" },
...
]
},
...
});
7. Sobreescritura del theme
El componente migas se presenta con una apariencia visual definida en el fichero de estilos
theme.rup.breadCrumb-x.y.z.css.
Si se quiere modificar la apariencia del componente, se recomienda redefinir el/los estilos necesarios en un
fichero de estilos propio de la aplicación situado dentro del proyecto de estáticos
(codAppStatics/WebContent/codApp/styles).
Los estilos más relevantes son los siguientes:
• rup-breadCrumbs_span: estilo asociado al literal “Usted está en:”
• .rup-breadCrumb_main LI A: estilo asociado a cada elemento miga (no final)
• rup-breadCrumb_current: estilo asociado a la última miga (elemento final)
8. Internacionalización (i18n)
Como se ha comentado anteriormente para la internacionalización del patrón se usa el fichero de recursos
de la aplicación con una estructura como la siguiente:
"x21aPilotoPatronesWar_migas" :{
"patrones" : "Patrones",
"all" : "[Todos los patrones]",
"autocomplete" : "Autocomplete",
"toolbar" : "Botonera",
"comboSimple" : "Combo Simple",
"comboEnlazadoSimple" : "Combo Enlazado (simple)",
"comboEnlazadoMulti" : "Combo Enlazado (múltiple)",
"dialog" : "Diálogos",
"date" : "Fecha",

10. Componentes RUP – Migas 10/12
"feedback" : "Feedback",
"time" : "Hora",
"message" : "Mensajes",
"menu" : "Menú Horizontal",
"menuVertical":"Menú Vertical",
"menuMixto":"Menú Mixto",
"tabs" : "Pestañas",
"grid" : "Tabla",
"tooltip" : "Tooltip",
"experimental": "Experimental",
"generic_object": "Objeto genérico",
"maestro_detalle": "Maestro-Detalle",
"z-index": "z-index"
}
9. Integración con UDA
Entre los distintos aspectos que pueden intervenir en el desarrollo de una aplicación, uno de los temas más
críticos e importantes es la gestión de la seguridad. Dentro de los distintos elementos de interacción con el
modulo de seguridad, destacan la necesidad de trasmitir, en todo momento, el estado del usuario
(autenticado o no) y la disposición de un sistema para la desconexión del sistema.
Para facilitar, tanto, la gestión de la desconexión de los usuarios, como, la especificación del usuario
autenticado, el componente de migas incluye la capacidad de presentar el nombre completo del usuario
autenticado y un enlace para permitir la desconexión, bajo demanda, del sistema de seguridad.
El procedimiento de desconexión, automáticamente, presenta un mensaje de confirmación para completar el
proceso.

11. Componentes RUP – Migas 11/12
La gestión y procesado de estos dos servicios, por parte de las migas, se hace de manera automática y
requiere de la presencia de una variable JavaScript “LOGGED_USER” y del parámetro “logOutUrl”.
La variable JavaScript “LOGGED_USER” determina el nombre visualizado en la identificación del usuario. El
parámetro “logOutUrl”, especificado en la definición de las propias migas, determina la url de la página
que se cargara una vez efectuado el procedimiento de logOut
La variable “LOGGED_USER” puede integrarse de múltiples formas pero UDA, por defecto, la incluye en la jsp
“base-includes.jsp” mediante el siguiente código:
En caso de no especificarse la variable “LOGGED_USER”, el componente no presentara el nombre del
usuario ni el botón de desconexión. En caso de no tener especificado el parámetro “logOutUrl”,
únicamente, no se presentara el botón de desconexión.
Además de permitir a los usuarios interaccionar con su información de seguridad, el componente de migas
también exterioriza el concepto de desconexión o salida manejado por el sistema de seguridad. Según la
especificación de parámetros realizada, el sistema de seguridad permite a los usuarios que salgan,
únicamente, de la aplicación o que, además, se desconecten de XLNets (terminando con ellos su sesión de
usuario).
Para que el componente sea consciente del tipo de modelo de desconexión se esta aplicando, es necesario
especificárselo mediante la variable JavaScript “DESTROY_XLNETS_SESSION”. La variable puede integrarse
de múltiples formas pero UDA, por defecto, la incluye en la jsp “base-includes.jsp” mediante el siguiente
código:
//breadCrumbs
DESTROY_XLNETS_SESSION = "${!empty sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal
? sessionScope.SPRING_SECURITY_CONTEXT.authentication.credentials.destroySessionSecuritySystem :
sessionScope.destroySessionSecuritySystem}";
//breadCrumbs
LOGGED_USER = "${!empty sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal ?
sessionScope.SPRING_SECURITY_CONTEXT.authentication.credentials.fullName :
sessionScope.userData.fullName}";

12. Componentes RUP – Migas 12/12
En caso de no incluir la variable JavaScript “DESTROY_XLNETS_SESSION”, por defecto, el componente
considerar que la sesión de XLNets deberá ser respetada (manteniendo intacto el concepto de single sign-
on asociado a XLNets).
Según el modelo empleado, el componente de migas podrá tener cualquiera de los siguientes aspectos:
Con desconexión de XLNets:
Sin desconexión de XLNets: