UDA-Componentes RUP. Menú

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 – Menú

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 – Menú ii/21

Control de documentación

Título de documento: Componentes RUP – Menú

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 13/02/2011 Cambios para posibilitar el uso de urls relativas y urls absolutas y para la apertura de nuevas ventanas. Parámetro i18nId.

2.0.0 21/06/2012

Evolución del componente para poder aceptar una estructura html, para poder aplicarle seguridad basada en roles, para añadirle separadores, para poder añadirle iconos y para poder añadirle cabeceras a diferentes grupos de entradas. Además de todo esto se ha tenido especial cuidado en la accesibilidad del componente y en su manejo mediante teclado.

2.1.0 18/09/2012 Actualización de las versiones de las librerías JavaScript subyacentes.

2.1.1 16/01/2013 Corrección de erratas

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:

Componentes RUP – Menú iii/21

Firma: Fecha:

Distribución:

Referencias de archivo

Autor:

Nombre archivo:

Localización:

Componentes RUP – Menú iv/21

Contenido

Capítulo/sección Página

1. Introducción 5

2. Ejemplo 5

3. Casos de uso 6

4. Infraestructura 6

4.1. Ficheros 7

4.2. Dependencias 7

4.3. Versión minimizada 8

5. Invocación 8

5.1. Modo de definición por html 9

5.2. Modo de definición por parámetros 12

5.3. Ejemplos de menús 14

6. Menú mixto 17

7. Sobreescritura del theme 18

8. Internacionalización (i18n) 19

9. Integración con UDA 20

10. Formato de las urls 20

Componentes RUP – Menú 5/21

1. Introducción

La descripción del Componente Menú visto desde el punto de vista de RUP es la siguiente:

Menú de la aplicación mantenido a lo largo de todas las páginas de forma consistente que muestra entradas directas a secciones clave de la aplicación

2. Ejemplo

Se presentan a continuación un ejemplo del componente:

• Menú horizontal:


• Menú vertical:

3. Casos de uso

Se recomienda el uso del componente:

• Cuando exista un sitio web estructurado jerárquicamente y relativamente amplio.

• Cuando se desee facilitar y agilizar la navegación y dar contexto al usuario.

4. Infraestructura

A continuación se comenta la infraestructura necesaria para el correcto funcionamiento del componente.

• Se requiere la inclusión de los ficheros que implementan el componente (js y css) comentados en los apartados Ficheros y Dependencias.


• Se requiere un fichero que defina la estructura del menú. Dicha definición podrá ser implementada como parámetro en la declaración del menú o como estructura html en la pagina que lo alberge.

4.1. Ficheros

Ruta Javascript: rup/scripts/

Fichero de plugin: rup.menu-x.y.z.js

Ruta theme: rup/basic-theme/

Fichero CSS del theme: theme.rup.menu-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

• jquery.ui.menu.js

• jquery.ui.core.menu.js

• jquery.ui.position.menu.js

• jquery.ui.widget.menu.js

• rup.utils-x.y.z.js

• rup.base-x.y.z.js

• rup.compatibility-x.y.z.js

• rup.menu-x.y.z.js

• theme.rup.menu-x.y.z.js


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

Por cuestiones de optimización y seguridad, asociadas a la protección de los menús, el patrón a sido rediseñado para trabajar a partir de una estructura html que determine sus diferentes entradas y funcionalidades. Para mantener la retro-compatibilidad, el patrón sigue disponiendo del modelo antiguo de definición, pero este no seguirá evolucionando y no incluirá algunas de las nuevas y futuras funcionalidades del patrón. En futuras versiones, el modelo de definición por parámetros, quedara del todo deprecado y se dejara de dar soporte al mismo.

La configuración del componente menú se compone de dos partes fundamentales, por un lado, se tiene la definición html y, por el otro lado, la especificación de parámetros mediante JavaScrpt. Según el tipo de modo de definición que se use, el peso de una u otra parte variará sustancialmente.

El componente, en si mismo, es creado por el wizard de generación de proyectos. Dicho plugin introduce el patrón en el layout correspondiente con la siguiente nomenclatura (War\WebContent\WEB-INF\layouts\menu.jsp).

<div id="x21aPilotoPatronesWar_menu" class="menu">< /div>

Se crea una capa (div) cuyo identificador será el nombre del War (xxxYyyWar) seguido de “_menu” cuya clase asociada es “menu” para los estilos.

En el caso de necesitarse la definición de un menú mixto en la aplicación, se creará una jsp adicional “menuMixto.jsp” con el siguiente código:

<div id="x21aPilotoPatronesWar_menu_mixto" class="m enu"></div>

Una vez definida la parte html, se especifica en el fichero “_layoutLoader.js” la parte javaScript:

$("#idMenu").rup_menu(properties);

El parámetro “properties” representa el conjunto de parámetros usados para definir el comportamiento del menú. Según el modo empleado, los datos empleados para definir el comportamiento diferirán cuantiosamente. El parámetro en si, puede declararse mediante un objeto (var properties = {};) o bien directamente especificando los valores.


5.1. Modo de definición por html

Este modo de definición, se basa en la idea de maximizar la interpretación del html, en detrimento del javaScript, para especificar las características aplicadas al componente.

La idea es sencilla, la estructura del menú será definida, lo más posible, mediante tags html que portaran estilos y características precisas para componer el menú. La parte html será completada mediante una serie de parámetros JavaScript:

• verticalWidth: Valor asociado a cada menú que determinara la anchura vertical del mismo. Este parámetro tiene cabida, tanto, en menús verticales, como, en menús horizontales (al fin y al cabo los dos tienen partes verticales). En caso de no especificar ningún valor, cada uno de los submenús verticales se ajustara al ancho máximo de sus literales.

• display: Orientación del menú: horizontal o vertical. Por defecto horizontal .

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

• menus : Parámetro que determina el tag de html que hará de padre para determinar las entradas del menú (tanto para las entradas normales como para las de los submenús). Su valor por defecto es ‘ul’

Para componer la estructura html de un menú, se han de tener muy presentes las estructuras que se pueden usar y la forma en que se aplican. Lo primero es determinar cual va ser el tag, por defecto, que hará las veces de entrada del menú (tanto simple como con submenú). El valor por defecto de esta es “ul” (parámetro menús ) y, ante lo apropiada que es para dicha tarea, se va a utilizar como base en los ejemplos y descripciones de los elementos (esto no quita el que se pudiera usar un tag diferente como un “div” o cualquier otro).

<div class ="rup_invisible_menu" id ="x21aPilotoPatronesWar_menu_mixto"> <div class ="address-item"> < a href ="#"> <span class ="address-header">John Doe </ span > <span class ="address-content">78 West Main St Apt 3A </ span > <span class ="address-content">Bloomsburg, PA 12345 </ span > </ a> </ div > < div class ="address-item"> <a href ="#"> <span class ="address-header">Jane Doe </ span > <span class ="address-content">78 West Main St Apt 3A </ span > <span class ="address-content">Bloomsburg, PA 12345 </ span > </ a> </ div > < div class ="address-item ui-state-disabled"> < a href ="#"> < span class ="address-header">James Doe </ span > < span class ="address-content">78 West Main St Apt 3A </ span > < span class ="address-content">Bloomsburg, PA 12345 </ span > </ a> </ div > < div class ="address-item"> < a href ="#"> < span class ="address-header">Jenny Doe </ span > < span class ="address-content">78 West Main St Apt 3A </ span > < span class ="address-content">Bloomsburg, PA 12345 </ span > </ a> </ div > < div class ="address-item"> < a href ="#"> < span class ="address-header">John Doe </ span > < span class ="address-content">78 West Main St Apt 3A </ span > < span class ="address-content">Bloomsburg, PA 12345 </ span > </ a> </ div > </ div >


El padre, o tag padre, que albergara el menú, será el primer elemento que se ha de crear. Dicho tag contendrá todo el y será el que se deba invocara a la hora de ejecutar el javaScriprt. Para la mejor visualización del menú, ya que quita efectos perniciosos de composición, es recomendable asignarle al padre la clase “rup_invisible_menu ”. Esta clase, mejorara la composición de la página ya que minimizara la visibilidad del menú sin terminar.

Con el esqueleto creado, el siguiente paso es ir colocando las distintas entradas del menú. Para ello se pueden utilizar diferentes tipos de entradas:

• Entradas básicas: Cosiste en el elemento básico de un menú. Cada una de estas entradas deberá incluir un tag ‘a’, que albergara la redirección del menú, y un tag de mensajes que mantenga la internacionalización (‘<spring :message >’). La especificación de las rutas (urls), se puede hacer de forma relativa o de forma absoluta (véase el capítulo 11. Formato de las urls). Si se precisara de la apertura de una nueva ventana, al tag ‘a’ se le debería añadir target="_blank" . Todas las entradas de este tipo, serán indicadas mediante el icono “external link”.

• Entradas múltiples (submenús): Tipo de entrada capaz de albergar múltiples entradas de menú. Se representa mediante un desplegable que alberga dichas entradas. Dicho desplegable requiere de un literal, representado por un tag ‘a’ que contiene un tag de mensajes que mantenga la internacionalización (‘<spring :message >’). A continuación se incluirá un elemento padre, o tag padre, que albergara al submenú como si este fuera uno totalmente independiente. Las posibles entradas utilizables son las mismas que en el caso inicial.

<ul id ="x21aPilotoPatronesWar_menu" class ="rup_invisible_menu">

</ ul >

<li > < a href ="/x21aPilotoPatronesWar/../x21aMantenimientosWar/" > < spring:message code ="mantenimientos" /> </ a> </ li >

jQuery( "#x21aPilotoPatronesWar_menu" ).rup_menu({ display: (vertical ? 'vertical' : 'horizontal' ), verticalWidth: "16.5em"

});


• Separador: El tipo de entrada separadora es aquella que ha sido diseñada para separar y ordenar varias entradas de menú. Se pueden utilizar dos tipos de separadores. Por un lado se tendrían los separadores lineales y por otro los separadores de cabecera. El separador lineal es únicamente una línea divisora que permite ordenar la distribución de las entradas y el divisor de cabecera es un literal que permite ilustrar el grupo de entradas. Una entrada cualquiera será separador lineal, si esta alberga las clases ‘ui-widget-content’ y ‘ui-menu-divider’. El separador de cabecera debe albergar un tag ‘strong’ que a su vez contenga un tag de mensajes que mantenga la internacionalización (‘<spring :message >’).

• Entradas con iconos: Cualquier entrada, a excepción de los separadores, pueden albergar un icono. Para ello solo será necesario que la entrada disponga de la clase ‘ui-icon’ y otra clase con el icono asociado a la entrada del menú. El componente puede albergar cualquier icono pero se ha de tener en cuenta que el tamaño de los mismo no puede ser superior a 256 x 240 (tamaño asociado a los iconos de los sprites de JQuery-UI). Un tamaño superior supondría que se descuadraran las entradas del menú (no quedarían bien los estilos).

• Entradas deshabilitadas: Cualquier entrada, a excepción de los separadores, pueden comenzar configuradas como entradas deshabilitadas. Para ello cada entrada deshabilitada, únicamente, debe contener la clase ‘ui-state-disabled’. El estado deshabilitado puede ser variado mediante las funciones enable y disable del componente.

• Entradas con seguridad: Una de las principales novedades que presenta el menú en su versión 2.0.0 es, facilitar la aplicación de seguridad a las distintas entradas del menú. La idea aplicada es bien sencilla, partiendo del modulo de seguridad aportado por spring-security, se pueden aplicar los tags que este dispone a las entradas de menú para que

<li class ="ui-widget-content ui-menu-divider"></ li > <li ><strong ><spring:message code ="titulo-notifi" /></ strong ></ li >

<li > < a> < spring:message code ="administracion" /> </ a> < ul > < li > < a href ="/x21aMantenimientosWar/administracion/alumno/maint"> < spring:message code ="Alumno" /> </ a> . . . </ li > </ ul > </ li >

<li > < a href ="#"><span class ="ui-icon ui-icon-wrench"></ span >Delphi </ a> < ul > < li ><a href ="#">Ada</ a></ li > < li ><a href ="#">Saarland </ a></ li > < li ><a href ="#">Salzburg </ a></ li > </ ul > </ li >

<li class ="ui-state-disabled"> < a href ="/x21aPilotoPatronesWar/patrones/tabsAjax"> < spring:message code ="tabsAjax" /> </ a> </ li >


aparezcan o no según el usuario. Este formato de seguridad en los menús, permite darle una lógica de presentación a los menús cuando la jsp que los alberga es servida. El modo de funcionamiento de Spring-security en la capa de presentación es bien sencillo. Mediante los tag específicos que el distribuye, permite acotar áreas de html que van a ser visualizadas en función de unos criterios de seguridad. Dichos criterios, pueden pasan por la disposición de un role especifico de seguridad o por la simple capacidad de logarte en el sistema. Las alternativas son variadas, por lo que se recomienda la visualización de la documentación de Spring-Security para tal efecto (19. JSP Tag Libraries ).

Según el código presentado, un poco mas arriba, la entrada múltiple (submenú) ‘experimental’ no será visualizada a no ser que el usuario que este accediendo este logado en la aplicación y disponga del ‘ROLE_X21A-IN-0003’.

Como nota final, es interesante comentar que, el tag ‘accesscontrollist’ de Spring-Security no puede ser utilizado, ya que esa diseñado para el modulo de seguridad ACL y este no esta siendo utilizado, actualmente, en UDA.

5.2. Modo de definición por parámetros

Este modo de definición, se basa en la idea de maximizar el uso de javaScript, en detrimento del html, para especificar las características aplicadas al componente.

Las propiedades disponibles para poder dotar al componente, según las necesidades de la aplicación, de las funcionalidades adecuadas son las siguientes:

• display: Orientación del menú: horizontal o vertical. Por defecto horizontal .

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

• forceAbs: Parámetro de configuración que activa el uso de la función relToAbsUrl. Dicha función hace que todas las llamadas relativas se transformen a absolutas. El uso de este parámetro responde a situaciones en el que el navegador, por diferentes cuestiones funcionales, no gestiona bien las urls relativas (se tratan todas las urls relativas como urls

<sec:authorize access="hasRole('ROLE_X21A - IN - 0003')" > < li > < a> < spring:message code ="experimental" /> </ a> < ul > < li > < a href ="/x21aPilotoPatronesWar/experimental/maestro_detalle"> < spring:message code ="maestro_detalle" /> </ a> </ li > . . . < li > < a href ="/x21aPilotoPatronesWar/experimental/z-index"> < spring:message code ="z-index" /> </ a> </ li > </ ul > </ li > </sec:authorize>


absolutas para evitar el posible problema. Por ejemplo: problemas con portales). Este parámetro se puede aplicar tanto a nivel de entrada como a nivel general del menú. El parámetro acepta valores true y false. Por defecto, el comportamiento del menú corresponderá con el valor false del parámetro, es decir, las urls relativas se tratarán como tal.

• verticalWidth: Valor asociado a cada menú que determinara la anchura vertical del mismo. Este parámetro tiene cabida, tanto, en menús verticales, como, en menús horizontales (al fin y al cabo los dos tienen partes verticales). En caso de no especificar ningún valor, cada uno de los submenús verticales se ajustara al ancho máximo de sus literales.

• menu : Estructura del menú 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. No se limita el número de submenús. Por coherencia se ha decidido que los elementos que contengan submenús no serán enlaces y viceversa. Cada elemento de un menú será un objeto JSON que tendrá los siguientes atributos:

o i18nCaption : Texto que se mostrará en el menú obtenido del fichero de literales de la aplicación.

o pathUrl: Define la ruta (url) a seguir cuando se pulse sobre el elemento, en caso de no tener submenú. La especificación de las rutas (urls), se puede hacer de forma relativa o de forma absoluta (véase el capítulo 11. Formato de las urls).

o submenu: Define una estructura JSON submenú.

o newWindow: Si el valor es true, el enlace del menú se abrirá en una nueva ventana del navegador, en caso contrario (false), se aplicará sobre la ventana que alberga el menu. Todas las entradas de este tipo, serán indicadas mediante el icono “external link”. Por defecto, el valor del atributo será false.

o Divider: Parámetro encargado de indicar si la entrada del menú es un elemento de división o un objeto del menú. Cuando el valor de “divider” sea true, la entrada en cuestión, es un divisor. Existen dos tipos de divisores que se diferencian en la presencia del parámetro "i18nCaption". En caso de no tenerlo, el divisor es únicamente una línea divisora de entradas. En caso contrario, el divisor es una cabecera. En ambos casos, el resto de parámetros no tienen importancia y no serán tomados en cuanta a la hora de componer el menú. Su valor por defecto es false.

o Disabled: Determina si la entrada del menú esta habilitada o deshabilitada. El valor por defecto del campo es false. Dicho estado puede ser variado mediante las funciones enable y disable del componente.

o Icon: Especifica el class que tiene asociado el icono que regirá la entrada de menú. El componente puede albergar cualquier icono pero se ha de tener en cuenta que el

{ "divider" : true},

{ "divider" : true, "i18nCaption" : "titulo-notifi" },


tamaño de los mismo no puede ser superior a 256 x 240 (tamaño asociado a los iconos de los sprites de JQuery-UI). Un tamaño superior supondría que se descuadraran las entradas del menú (no quedarían bien los estilos).

o forceAbs: Parámetro de configuración que activa el uso de la función relToAbsUrl. Dicha función hace que todas las llamadas relativas se transformen a absolutas. El uso de este parámetro responde a situaciones en el que el navegador, por diferentes cuestiones funcionales, no gestiona bien las urls relativas (se tratan todas las urls relativas como urls absolutas para evitar el posible problema. Por ejemplo: problemas con portales). Este parámetro se puede aplicar tanto a nivel de entrada como a nivel general del menú. El parámetro acepta valores true y false. Por defecto, el comportamiento del menú corresponderá con el valor false del parámetro, es decir, las urls relativas se tratarán como tal.

5.3. Ejemplos de menús

A continuación se muestra una serie de ejemplos de menús y su correspondencia con la configuración utilizada para su creación:

{ "i18nCaption" : "patrones" , "icon" : "ui-icon-plusthick" , "submenu" :[


$( "#x21aPilotoPatronesWar_menu ").rup_menu({ display: (vertical ? 'vertical' : 'horizontal'), menu: [ {"i18nCaption":"mantenimientos", "pathUrl": "../ x21aMantenimientosWar/"}, {"i18nCaption":"inicio", "pathUrl": "" }, {"i18nCaption":"patrones", "submenu":[

{"i18nCaption":"all", "pathUrl": "patrones/all" }, {"i18nCaption":"autocomplete", "pathUrl": "patrone s/autocomplete" }, {"i18nCaption":"toolbar", "pathUrl": "patrone s/toolbar" }, {"i18nCaption":"combo", "submenu":[ {"i18nCaption":"comboSimple", "pathUrl":

"patrones/comboSimple" }, {"i18nCaption":"comboEnlazadoSimple", "pathUr l":

"patrones/comboEnlazadoSimple" }, {"i18nCaption":"comboEnlazadoMulti", "pathUrl":

"patrones/comboEnlazadoMultiple" } ]},

{"i18nCaption":"dialog", "pathUrl": "patrones /dialog" }, {"i18nCaption":"date", "pathUrl": "patrones/date" } ,

{"i18nCaption":"feedback", "pathUrl": "patrones/fe edback" }, {"i18nCaption":"time", "pathUrl": "patrones/time" } ,

{"i18nCaption":"message", "pathUrl": "patrones/mes sage" }, {"i18nCaption":"menu", "submenu":[

{"i18nCaption":"menuHorizontal", "pathUrl": "patrones/menu" }, {"i18nCaption":"menuVertical", "pathUrl":

"patrones/menuVertical"}, {"i18nCaption":"menuMixto", "pathUrl": "patr ones/menuMixto"}

]}, {"i18nCaption":"tabs", "pathUrl": "patrones/t abs" }, {"i18nCaption":"grid", "pathUrl": "patrones/grid" }, {"i18nCaption":"tooltip", "pathUrl": "patrones/too ltip" }

]}, ... ]});


Declaración JavaScript: jQuery( "#x21aPilotoPatronesWar_menu" ).rup_menu({ display: (vertical ? 'vertical' : 'horizontal' ), verticalWidth: "16.5em" });

Declaración html <ul id ="x21aPilotoPatronesWar_menu" class ="rup_invisible_menu"> < li > < a href ="/x21aPilotoPatronesWar/../x21aMantenimientosWar/"> < spring:message code ="mantenimientos" /> </ a> </ li > < li > < a href ="/x21aPilotoPatronesWar/"> < spring:message code ="inicio" /> </ a> </ li > < li > < a> < spring:message code ="patrones" /> </ a> < ul > < li > < a href ="/x21aPilotoPatronesWar/patrones/all"> < spring:message code ="all" /> </ a> </ li > < li class ="ui-widget-content ui-menu-divider"></ li > < li ><strong ><spring:message code ="titulo-notifi" /></ strong ></ li > < li > < a href ="/x21aPilotoPatronesWar/patrones/feedback"> < spring:message code ="feedback" /> </ a> </ li > < li > < a href ="/x21aPilotoPatronesWar/patrones/tooltip"> < spring:message code ="tooltip" /> </ a> </ li > < li > < a href ="/x21aPilotoPatronesWar/patrones/message"> < spring:message code ="message" /> </ a> </ li > < li > < a href ="/x21aPilotoPatronesWar/patrones/dialog"> < spring:message code ="dialog" /> </ a> </ li > < li class ="ui-widget-content ui-menu-divider"></ li > < li ><strong ><spring:message code ="titulo-nave" /></ strong ></ li > < li > < a> < spring:message code ="menu" /> </ a> < ul > < li >

. . .


6. Menú mixto

De acuerdo a los tipos de menú considerados en el Libro de Estilo de Gobierno Vasco se da la posibilidad de la utilización de una disposición mixta del mismo.

El menú mixto consiste en la combinación de un menú con disposición horizontal y otro con disposición vertical. De este modo es posible, por ejemplo, organizar mediante el menú vertical acciones funcionales sobre el contenido de las pantallas a las que se accede a través del menú horizontal.

Un ejemplo de la visualización de un menú mixto sería el siguiente.

Para la creación de un menú de estas características es necesario definir:

1. Un layout que estructure la pantalla de forma adecuada para albergar ambos menús. El layout se definirá mediante una template y la inclusión de las definiciones correspondientes en el fichero tiles.xml (p.e. templateMixto.jsp).

2. Dos capas, una por cada disposición del menú, sobre las que se generarán las estructuras correspondientes.

• menu.jsp:

<div id="x21aDemoWAR_menu" class="menu"></div> . . . </div>

• menuMixto.jsp

<div id="x21aDemoWAR_menu_mixto" class="menu"> . . . </div>


3. Por último se crearán ambos menús.

7. Sobreescritura del theme

El componente menu se presenta con una apariencia visual definida en el fichero de estilos theme.rup.menu-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 del componente se basan en los estilos básicos de los widgets de jQuery UI, con lo que los cambios que se realicen sobre su fichero de estilos manualmente o mediante el uso de la herramienta Theme Roller podrán tener repercusión sobre todos los componentes que compartan esos mismos estilos (pudiendo ser el nivel de repercusión general o ajustado a un subconjunto de componentes).

A continuación se muestran unas capturas del componente con los estilos asociados dependiendo del uso de imágenes. Los estilos que contengan la palabra “ui-“ son los propios de jQuery UI que en caso de ser necesario serán sobrescritos y no se comentarán en este documento por no ser su ámbito.

• Menú horizontal:

o .rup_menu_horizontal : Estilo asociado al menú en posición horizontal.

o .rup_menu_horizontal_children_entry : Estilo aplicado a todas las entradas, menos la ultima, del menú horizontal.

o .rup_menu_horizontal_children_entry_last : Estilo aplicado a la ultima entrada del menú horizontal. Esta diferencia de estilos se debe a la excepción visual que representa ser la ultima entrada.

o .rup_menu_horizontal_childrenMenuIcon : Estilo asociado a la imagen que indica que la entrada de menú es múltiple (submenú).

o .ui state disabled : Estilo de JQuery-UI que indica entrada deshabilitada.

var vertical = false, mixto = false; if ($.rup.LAYOUT === "vertical" ) {

vertical = true; } else if ($.rup.LAYOUT === "mixto" ) {

mixto = true; }

$("#x21aPilotoPatronesWar_menu").rup_menu({

display: (vertical ? 'vertical' : 'horizontal' ), });

if (mixto) {

$("# x21aPilotoPatronesWar_menu_mixto").rup_menu({ display: (vertical ? 'vertical' : 'horizontal' ),

}); }


• Menú vertical:

o .rup_menu_vertical : Estilo asociado al menú en posición vertical.

o .rup_menu_vertical_children : Estilo aplicado a todas las entradas del menú vertical.

o .ui state disabled : Estilo de JQuery-UI que indica entrada deshabilitada.

8. Internacionalización (i18n)

Según el modo que se este utilizando para configurar y ejecutar el componente, la responsabilidad de mantener y respetar los literales, según se este en un lenguaje u otro, recae en diferentes elementos de la aplicación.

En caso de usarse el modo de definición por html, la internacionalización deberá llevarse a cabo en las jsp’s y, por tanto, deberá ser gestionado por los tag’s (‘<spring :message >’) asociados al gestor de mensajes de Spring. Los ficheros de recursos, a nivel de aplicación (EAR) o a nivel de modulo web (WAR), deberán albergar los diferentes literales, en los diferentes idiomas, del menú como si de cualquier otro elemento de una jsp se tratara.

En caso de usarse el modo de definición por parámetros, la internacionalización se realiza mediante el fichero de recursos que se encontrará en la parte estática bajo codAplic/resources/codAplic.i18n.json (con sus variantes según idioma ej: codAplic/resources/codAplic.i18n_es.json). En dicho fichero se deberá declarar el objeto JSON con una estructura como la siguiente:

"x21aPilotoPatronesWar_menu" : { "inicio" : "Inicio" , "mantenimientos" : "x21aMantenimientosWar" , "patrones" : "Patrones" , "all" : "[Todos los patrones]" , "autocomplete" : "Autocomplete" , "toolbar" : "Botonera" , "combo" : "Combo" , "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ú" , "menuHorizontal": "Horizontal" , "menuVertical": "Vertical" , "menuMixto": "Mixto" , "tabs" : "Pestañas" , "grid" : "Tabla" , "tooltip" : "Tooltip" , "experimental": "Experimental" , "generic_object": "Objeto genérico" , "maestro_detalle": "Maestro-Detalle" , "z-index": "z-index" }

Es importante tener en cuenta que, la ubicación de los recursos lingüísticos (literales), según el modo de configurar del menú, varía y puede provocar que los literales puedan estar duplicados. Ante esta circunstancia, es razonable utilizar un solo modo de definición para todos los menús de una aplicación. Considerando que el modo por html va a prevalecer frente al otro (deprecado), es razonable pensar que si es necesario migrar o crear algún menú en el modo html, se migren o creen todos los menús en dicho modo.

9. Integración con UDA

Por cuestiones funcionales, en la evolución RUP, ha sido necesario cambiar el nombre y el comportamiento asociado al atributo (url) que determina la ruta a la que se redirige la aplicación. Inicialmente, el nombre de dicho atributo era url y su comportamiento no se ajustaba al estándar de manejo de rutas. Con la aparición del nuevo parámetro (pathUrl) y de las nuevas funcionalidades asociadas al mismo (newWindow, forceAbs), el parámetro url y su comportamiento quedan deprecados (a partir de la versión 1.2.1 ). Por cuestiones de compatibilidad con versiones anteriores, se seguirá respetando el comportamiento del atributo url en la actualización de la versión de RUP. Pero en el desarrollo de nuevos menús se debe tener en cuenta que se trata de un atributo deprecado, por lo que no soportará nuevas funcionalidades que se puedan desarrollar sobre el menú (debiendo usarse el atributo pathUrl).

10. Formato de las urls

El componente menú, al igual que muchos otros mecanismos asociados al ámbito web, al tratar urls debe respetar las recomendaciones marcadas por el estándar (http://www.w3.org/Addressing/) definidas para el manejo de dichos mecanismos. Las urls, generalmente, se pueden dividir en dos tipos básicos: absolutas y relativas. En general, cualquiera de los dos tipos se puede usar, indistintamente, en links de cualquier sitio web. El componente menú respeta y mantiene los estándares asociados al entorno web; por lo que, para especificar las rutas a las que hace la redirección cada entrada del menú, se puede usar, indistintamente, el tipo de rutas relativas y absolutas.


Para aclarar la forma de uso de cada tipo de ruta (url), a continuación, se presenta un ejemplo con los distintos formatos y las rutas (urls) resultantes a partir de ellos:

Partiendo de la url: http://desarrollo.jakina.ejiedes.net:7001/x21aMantenimientosWar/usuario/multi

Relativas:

about.html => http://desarrollo.jakina.ejiedes.net:7001/x21aMantenimientosWar/usuario/about.html tuto1/ => http://desarrollo.jakina.ejiedes.net:7001/x21aMantenimientosWar/usuario/tuto1/ tuto2.html => http://desarrollo.jakina.ejiedes.net:7001/x21aMantenimientosWar/usuario/tuto2.html / => http://desarrollo.jakina.ejiedes.net:7001/ /experts/ => http://desarrollo.jakina.ejiedes.net:7001/experts/ //www.internet.com/ => http://www.internet.com/ // => http:// ../ => http://desarrollo.jakina.ejiedes.net:7001/x21aMantenimientosWar/ ../experts/ => http://desarrollo.jakina.ejiedes.net:7001/x21aMantenimientosWar/experts/ ..experts/ => http://desarrollo.jakina.ejiedes.net:7001/x21aMantenimientosWar/experts/ ../../../ => http://desarrollo.jakina.ejiedes.net:7001/ ../../ => http://desarrollo.jakina.ejiedes.net:7001/ ../../../../ => http://desarrollo.jakina.ejiedes.net:7001/ ../../../../great.html => http://desarrollo.jakina.ejiedes.net:7001/great.html ./ => http://desarrollo.jakina.ejiedes.net:7001/x21aMantenimientosWar/usuario/ ./about.html => http://desarrollo.jakina.ejiedes.net:7001/x21aMantenimientosWar/usuario/about.html

Absolutas:

http://www.jakina.net /x21aPilotoPatronesWar/ => http://www.jakina.net/x21aPilotoPatronesWar/

UDA-Componentes RUP. Menú

Technology

Transcript of UDA-Componentes RUP. Menú