UDA-Componentes RUP. Migas

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

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:

Componentes RUP – Migas iii/12

Distribución:

Referencias de archivo

Autor:

Nombre archivo:

Localización:

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

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.


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.


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_r oot"></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.


• 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/x21aPilot oPatronesWar/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":"comb oEnlazadoSimple" }, "comboEnlazadoMultiple" : { "i18nCaption":"co mboEnlazadoMulti" }, "dialog" : { "i18nCaption" : "dialog" },

... "tooltip" : { "i18nCaption" : "tooltip" }, //Submenu "subLevel":[ {"i18nCaption":"all", "url":


"/x21aPilotoPatronesWar/patrones/all" }, {"i18nCaption":"autocomplete", "url":

"/x21aPilotoPatronesWar/patrones/autocomplete" }, {"i18nCaption":"toolbar", "url":

"/x21aPilotoPatronesWar/patrones/toolbar" }, {"i18nCaption":"comboSimple", "url":

"/x21aPilotoPatronesWar/patrones/comboSimple" }, {"i18nCaption":"comboEnlazadoSimple", "ur l":

"/x21aPilotoPatronesWar/patrones/comboEnlazadoSimpl e" }, {"i18nCaption":"comboEnlazadoMulti", "url ":

"/x21aPilotoPatronesWar/patrones/comboEnlazadoMulti ple" }, {"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" ,


"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.


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.auth entication.principal ? sessionScope.SPRING_SECURITY_CONTEXT.authenticati on.credentials.destroySessionSecuritySystem : sessionScope.destroySessionSecuritySystem}" ;

//breadCrumbs LOGGED_USER = "${!empty sessionScope.SPRING_SECURITY_CONTEXT.auth entication.principal ? sessionScope.SPRING_SECURITY_CONTEXT.authentication .credentials.fullName : sessionScope.userData.fullName}" ;


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 :

Technology

UDA-Componentes RUP. Migas