Manual de Usuario Componentes de Menús

Transcripción

1 Manual de Usuario Componentes de Menús Versión 1.8 Área de Aplicaciones Especiales y Arquitectura de Software

2 Hoja de Control Título Documento de Referencia Responsable Manual de usuario Componentes de Menú NORMATIVA ATLAS Área de Aplicaciones Especiales y Arquitectura de Software Versión 1.8 Fecha Versión 27/06/2014 Registro de Cambios Versión Causa del Cambio Responsable del Cambio Fecha del Cambio 1.0 Versión inicial del documento 1.1 Actualizadas capturas de las diferentes tipos de plantillas. 1.2 Se modifica el nombre del Area Ampliada la descripción del atributo perfil Corregidos errores en los atributos del menú horizontal. Incluida la posibilidad de menús personalizados por usuario Incluido apartado de personalización de plantillas Incluido punto 4.8 uso de menús obtenidos de base de datos Modificado punto 4.5 por la creación del nuevo componente menú visual. - Modificado punto 4.4 para llamar al nuevo menú vertical composite - Añadido apartado Indicador de Carga - Se ha añadido apartado de API JavaScript Área de Integración y Arquitectura de Aplicaciones Área de Integración y Arquitectura de Aplicaciones Área de Aplicaciones Especiales y Arquitectura de Software Área de Aplicaciones Especiales y Arquitectura de Software Área de Aplicaciones Especiales y Arquitectura de Software Área de Aplicaciones Especiales y Arquitectura de Software Área de Aplicaciones Especiales y Arquitectura de Software 25/05/ /02/ /09/ /01/ /08/ /11/ /03/2014 Unidad de Arquitectura 12/5/2014 Unidad de Arquitectura 26/06/ de 37

3 Índice 1. INTRODUCCIÓN AUDIENCIA OBJETIVO CONOCIMIENTOS PREVIOS DESCRIPCIÓN INSTALACIÓN Y CONFIGURACIÓN INSTALACIÓN CONFIGURACIÓN Paso 1: Edición del fichero de opciones del menú USO PASO 1: SELECCIÓN DE LA PLANTILLA PASO 3: CREACIÓN DEL FICHERO XHTML BASADO EN LA PLANTILLA PASO 3: INSERCIÓN DE LA ETIQUETA DE MENÚ HORIZONTAL PASO 4: INSERCIÓN DE LA ETIQUETA DE MENÚ VERTICAL PASO 5: INSERCIÓN DE LA ETIQUETA DE MENÚ VISUAL PERSONALIZACIÓN DE PLANTILLAS USO DE MENÚS PERSONALIZADOS POR USUARIO USO DE MENU S OBTENIDOS DE BASE DE DATOS Crear el menú en base de datos Configuración para el uso de los menús en base de datos INDICADOR DE CARGA API JAVASCRIPT ATLAS RECOMENDACIONES Y BUENAS PRÁCTICAS EJEMPLO DE USO PREGUNTAS MÁS FRECUENTES ENLACES RELACIONADOS de 37

4 1. INTRODUCCIÓN Este documento contiene el manual de uso de los componentes visuales de Menú del Framework Atlas. Actualmente se incluyen tres componentes claramente diferenciados, uno para el menú horizontal (en la parte superior de la página), otro para el menú vertical (en la zona izquierda de la página), y otro para el menú visual (en la zona central de la página, con imágenes para cada opción de menú). Dichos componentes pueden combinarse, de manera que sólo se muestre uno de ellos, dos, o incluso los tres. En este documento se incluye información sobre cómo utilizar dichos componentes en una aplicación Web, así como información acerca de la configuración de los parámetros fundamentales de estos componentes AUDIENCIA OBJETIVO Este documento está orientado a toda aquella persona que esté desarrollando una aplicación Web basada en el Framework Atlas y necesite utilizar los componentes de menús en su aplicación Web CONOCIMIENTOS PREVIOS Para un completo entendimiento del documento, el lector deberá tener conocimientos previos sobre las siguientes tecnologías: Java Server Faces (JSF) Facelets Spring Framework Hibernate Para saber más sobre dichas tecnologías, consultar el apartado de este documento, Enlaces Relacionados. 4 de 37

5 2. DESCRIPCIÓN Se dispone de tres componentes visuales, uno para el menú horizontal, otro para el vertical y otro para el visual. Estos componentes pueden combinarse en la pantalla, de manera que cuando se pulse sobre una opción de uno de los menús, se actualicen los otros con la nueva opción seleccionada. Para combinar varios menús en la misma página, estos recuperan de la request el id seleccionado y cambian su estado para actualizarse. El contenido del menú se define dinámicamente en un fichero de configuración XML que contiene todos los elementos de menú de la aplicación. A continuación se muestra un ejemplo de los menús horizontal, vertical y visual combinados en la misma pantalla: 3. INSTALACIÓN Y CONFIGURACIÓN En este apartado se incluye información sobre la instalación y la configuración de los componentes de Menú que vienen incluidos en el framework Atlas INSTALACIÓN Los componentes de menú ya vienen instalados en el arquetipo Web, incluidos en el módulo de componentes visuales. Por este motivo no es necesaria una instalación adicional si se parte del arquetipo CONFIGURACIÓN 5 de 37

6 Para configurar los componentes de menú para poder ser utilizados es necesario seguir los pasos descritos a continuación: Paso 1: Edición del fichero de opciones del menú El contenido del menú se obtiene dinámicamente de un fichero de configuración XML que contiene todos los elementos de menú de la aplicación. En el arquetipo de aplicaciones Web viene incluido este fichero, que se encuentra en la ruta src/main/resources/menu.xml del módulo web del arquetipo. El fichero contiene todos los elementos de menú de la aplicación, cada componente de menú (horizontal, vertical o visual) puede decidir qué grupo de estos elementos mostrará, a través de los atributos de la etiqueta que se describe en la sección de uso del componente. Un ejemplo de un fichero de menú XML es el siguiente: menu.xml <?xml version="1.0" encoding="utf-8"?> <!-- edited with XMLSPY v2004 rel. 3 U ( by ICM (Comunidad de Madrid) --> <menu xmlns:xsi=" xsi:nonamespaceschemalocation="menu_aplicacion.xsd"> <elemento id="1" nombre="home" nombre_navegacion="inicio" url="/secure/index.jsf" perfil="role_1"> </elemento> <elemento id="3" nombre="menu1" nombre_navegacion="menu1" url=""> <elemento id="3_1" nombre="submenu1" nombre_navegacion="submenu1" url="/secure/index.jsf"> </elemento> <elemento id="3_2" nombre="submenu2" nombre_navegacion="submenu2" url="/secure/index.jsf"> </elemento> </elemento> <elemento id="4" nombre="información del usuario" nombre_navegacion="infousuario" url="/secure/infousuario.jsf"> </elemento> </menu> En la siguiente tabla se describe cada uno de los atributos de los elementos del menú: Nombre atributo Obligatorio Descripción id SI Identificador de la opción. En subopciones de menú, el id debe empezar por el id de la opción, seguido de un guión bajo y el id de la subopción. 6 de 37

7 nombre SI Nombre a mostrar en el menú nombre_navegacion SI Nombre a mostrar en el rastro de migas url SI URL asociada a esa opción de menú. perfil NO Perfiles de usuario que pueden ver esa opción de menú (si son varios deben aparecer separados por punto y coma). 4. USO Una vez editado el fichero de definición del menú, puede procederse a su utilización. Para ello, en el arquetipo web se incluyen una serie de plantillas para todas las posibles combinaciones de menús (horizontal sólo, horizontal con vertical, etc.). Además de estas plantillas, existen tres componentes jsf que pueden utilizarse a través de etiquetas que incrustan el menú adecuado en la página. A continuación se describen los pasos necesarios para utilizar los menús, primero seleccionando la plantilla y luego incrustando las etiquetas adecuadas Paso 1: Selección de la Plantilla Para utilizar los menús, lo primero que hay que hacer es decidir cuál va a ser el layout o plantilla de nuestra página (cuáles de los tres menús disponibles se van a utilizar). Los ficheros de plantillas están en el arquetipo en el directorio src/main/webapp/web-inf/layout, y son los siguientes: 7 de 37

8 - hc.xhtml: (Horizontal+Contenido). Incluye un menú horizontal, y en el resto de la página se muestra el contenido. Ejemplo: 8 de 37

9 - hvc.xhtml: (Horizontal+Vertical+Contenido). Incluye un menú horizontal, uno vertical y en el resto de la página se muestra el contenido. Ejemplo: 9 de 37

10 - hv.xhtml: (Horizontal+Visual). Incluye un menú horizontal, y en el resto de la página se muestra el menú visual. Ejemplo: 10 de 37

11 - hvv.xhtml: (Horizontal+Vertical+Visual). Incluye un menú horizontal, menú vertical y en el resto de la página se muestra el menú visual. Ejemplo: 11 de 37

12 - vc.xhtml: (Vertical + Contenido). Incluye un menú vertical, y en el resto de la página se muestra el contenido. Ejemplo: 12 de 37

13 - vv.xhtml: (Vertical + Visual). Incluye un menú vertical, y en el resto de la página se muestra el menú visual. Ejemplo: 13 de 37

14 - c.xhtml: (Contenido). No incluye menús, muestra directamente el contenido de la página en la zona central. Ejemplo: 4.2. Paso 3: Creación del fichero xhtml basado en la plantilla Una vez seleccionada la plantilla, debemos crear nuestro fichero xhtml que utilice dicha plantilla, y defina los componentes que se desean insertar en cada zona de la plantilla. En el arquetipo web vienen varios ejemplos de ficheros que utilizan las plantillas, por ejemplo en la página index.xhtml se utiliza la plantilla vc.xhtml (Menú Vertical + Contenido): index.html 14 de 37

15 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xmlns:h=" xmlns:f=" xmlns:t=" xmlns:ui=" xmlns:atlas=" xmlns:a4j=" <ui:composition template="/web-inf/layout/vc.xhtml"> <ui:define name="titulo"> <ui:include src="/secure/titulo.xhtml" /> </ui:define> <ui:define name="rastromigas"> <ui:include src="/rastromigas/rastro.xhtml" /> </ui:define> <ui:define name="menuvertical"> <!-- Se hace referencia al fichero con el menú vertical --> <ui:include src="/menu/menu.xhtml" /> </ui:define> <ui:define name="content"> Aquí va el contenido </ui:define> </ui:composition> </html> Este fichero xhtml tiene que contener las siguientes zonas: 1) Definición del espacio de nombres de etiquetas de Atlas Es necesario establecer la definición del espacio de nombres para las etiquetas de componentes de Atlas. Esto nos permitirá utilizar las etiquetas que incrustan los componentes de menú en la página. Un ejemplo de cabecera de fichero xhtml es la siguiente: <?xml version="1.0" encoding="utf-8"?> Cabecera de fichero xhtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xmlns:h=" xmlns:f=" xmlns:t=" xmlns:ui=" xmlns:atlas=" xmlns:a4j=" 15 de 37

16 2) Inclusión de la plantilla, y definición del contenido de cada zona En nuestro fichero xhtml es necesario incluir la plantilla a utilizar, así como definir los componentes que van a ir en cada una de las zonas. Por ejemplo, en la página principal del arquetipo web se incluye un menú vertical+contenido (plantilla vc.xhtml), donde la zona del menú vertical hace referencia a otro fichero (menu.xhtml), y el contenido se incluye tal cuál: Ejemplo.xhtml <ui:composition template="/web-inf/layout/vc.xhtml"> <ui:define name="titulo"> <ui:include src="/secure/titulo.xhtml" /> </ui:define> <ui:define name="rastromigas"> <ui:include src="/rastromigas/rastro.xhtml" /> </ui:define> <ui:define name="menuvertical"> <!-- Se hace referencia al fichero con el menú vertical --> <ui:include src="/menu/menu.xhtml" /> </ui:define> <ui:define name="content"> Aquí va el contenido </ui:define> </ui:composition> </html> Otro ejemplo para un menú horizontal, vertical y visual juntos sería el siguiente: Ejemplo.xhtml 16 de 37

17 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="es" xmlns:ui=" xmlns:h=" xmlns:f=" xmlns:a4j=" xmlns:rich=" xmlns:c=" <ui:composition template="/web-inf/layout/hvv.xhtml"> <ui:define name="titulo"> <ui:include src="/secure/titulo.xhtml" /> </ui:define> <ui:define name="menuhorizontal"> <ui:include src="/secure/menuhorizontal/menuhorizontalheadersample.xhtml"/> </ui:define> <ui:define name="rastromigas"> <ui:include src="/rastromigas/rastromigasicm.xhtml"/> </ui:define> <ui:define name="menuvisual"> <ui:include src="/secure/menuvisual/menuvisualsample.xhtml"/> </ui:define> <ui:define name="menuvertical"> <ui:include src="/menu/menuicm.xhtml"/> </ui:define> </ui:composition> </html> En este fichero se hace referencia a otros xhtml en los que se definirá el contenido de cada una de las áreas de la plantilla. En algunas de ellas se deberá incluir cada uno de los tres componentes de menú, según se explica en el siguiente punto. Para ver con detalle las diferentes partes que se pueden incorporar a cada plantilla vea el apartado PERSONALIZACIÓN DE PLANTILLAS 4.3. Paso 3: Inserción de la etiqueta de Menú Horizontal Una vez definida nuestra plantilla y fichero xhtml, debemos de definir el contenido de cada una de las zonas. Concretamente, si estamos utilizando una plantilla con menú horizontal, se utiliza la etiqueta menuhorizontal. A continuación se muestra un ejemplo de cómo se inserta esta etiqueta dentro de una pagina XHTML: Ejemplo.xhtml 17 de 37

18 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="es" xmlns:ui=" xmlns:h=" xmlns:f=" xmlns:atlasc=" <ui:composition> <f:loadbundle basename="msg/messages" var="bundle" /> <atlasc:menuhorizontal id="menu" menu="#{menubean.menu}" /> </ui:composition> </html> En la siguiente tabla se muestra el significado de cada uno de los atributos de la etiqueta: Nombre atributo Obligatorio Descripción menu SI Lista de los elementos de menu de tipo MenuItem height NO Altura del menú. Por defecto 26px mode NO Modo del menu. Por defecto ajax bundle NO Nombre del bundle del que se obtendrán las etiquetas styleclasstexto NO Estilos para el texto de los elementos de menú styleclasstextoadicional NO Estilos para el texto adicional de cada elemento de menú 4.4. Paso 4: Inserción de la etiqueta de Menú Vertical Si estamos utilizando una plantilla con menú vertical, se utiliza la etiqueta menuvertical. A continuación se muestra un ejemplo de cómo se inserta esta etiqueta dentro de una pagina XHTML: Ejemplo.xhtml 18 de 37

19 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="es" xmlns:ui=" xmlns:h=" xmlns:f=" xmlns:atlasc=" <ui:composition> <div id="menu" class="menu_vert"> <atlasc:menuvertical id="idmenuvertical" menu="#{menubean.menu}"/> </div> </ui:composition> </html> Este componente sirve para mostrar un conjunto de elementos de menú provenientes del menubean. Tiene estructura jerárquica de árbol, con lo que se puede incluir distintos nodos que aparecerán agrupados por niveles. En la siguiente tabla se muesta el significado de cada uno de los atributos de la etiqueta: Nombre atributo Obligatorio Tipo Descripción id NO String Identificador del componente menu SI java.util.list Clave del fichero de pares clavevalor application.properties para identificar el fichero de menú cuyos elementos serán presentados por el componente de menú. immediate NO Boolean Indica si la validación del componente debe adelantarse a la fase 'Apply Request Values' o no. Valor por defecto false rendered NO Boolean Valor true false para seleccionar si este componente se va a mostrar. Por defecto es true 4.5. Paso 5: Inserción de la etiqueta de Menú Visual Si estamos utilizando una plantilla con menú visual, se utiliza la etiqueta menuvisual. Este componente sirve para mostrar un conjunto de elementos de menú estructurado mediante una tabla. Se apoya en el componente de RichFaces datagrid. 19 de 37

20 Muestra opciones en 2 niveles, el primer nivel con imagen y el segundo nivel como una lista de enlaces dentro de las de primer nivel. El aspecto del componente es el siguiente: Figura Menú visual Y a continuación se muestra un ejemplo del componente con opciones de segundo nivel: 20 de 37

21 Figura Menú visual 2 A continuación se muestra un ejemplo de cómo se inserta esta etiqueta dentro de una pagina XHTML: Ejemplo.xhtml <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="es" xmlns:ui=" xmlns:h=" xmlns:f=" xmlns:c=" xmlns:fn=" xmlns:a4j=" xmlns:rich=" xmlns:atlasc=" <ui:composition> <f:loadbundle basename="msg/messages" var="bundle" /> <h:form id="provinciasformbean"> <atlasc:menuvisual id="indexvisual" menu="#{menubean.menu}" columns="3" width="250" /> </h:form> </ui:composition> </html> 21 de 37

22 En la siguiente tabla se muesta el significado de cada uno de los atributos de la etiqueta: Nombre atributo Obligatorio Descripción id SI Identificador del componente menu SI EL ( Expression Language) que indica la lista de opciones del menú, debe ser una lista de objetos atlas.componentes.menu.menuitem. columns NO Establece el número de columnas que se quiere establecer en la tabla principal del menú visual. El valor por defecto para este valor es 3 idinicial NO Identificador de la opción de menú que se quiera establecer como inicial. Si se quiere establecer una opción que no sea de primer nivel, se deben concatenar los id s con guión bajo, Ej: 1_2. primernivel NO Valor true false, si es true siempre se mostrará el primer nivel del menú, en este caso no tendría efecto el parámetro idinicial. width NO Ancho de las columnas. Su valor por defecto es 250. bundle NO Nombre del bundle del que se obtendrán las etiquetas. Su valor por defecto es bundle. rendered NO Valor true false para seleccionar si este componente se va a mostrar. Por defecto es true styleclass NO Estilo para el componente. Su valor por defecto es tablamenuvisual. styleclasstexto NO Estilo para el texto de los enlaces. Su valor por defecto es enlace. styleclasstextoadicional NO Estilo para el texto adicional de los enlaces (si lo hay). Su valor por defecto es enlace. tituloclass NO Estilo del título para cada celda del menú. Su valor por defecto es legend. txtelementoclass NO Estilo para el texto de la descripcion de cada celda del menú. Su valor por defecto es label. 22 de 37

23 imagenclass NO Estilo para la imagen de las opciones de primer nivel. 23 de 37

24 4.6. PERSONALIZACIÓN DE PLANTILLAS Los diferentes layouts están realizados con la tecnología Facelet la cual permite, a través de un sistema de plantillas, la personalización de ciertas partes de las páginas. Para definir el contenido que se quiere incorporar en una plantilla hay que utilizar la etiqueta <ui:define> indicando, en el atributo name, el mismo valor que el de la etiqueta de definición <ui:insert> que se quiere rellenar. Para ver los diferentes <ui:insert> que existen en las diferentes plantillas se recomienda ver el xhtml de los layout (carpeta \web\src\main\webapp\web-inf\layout). A continuación se muestra, de nuevo, el ejemplo del index.xhtml que viene incorporado en el arquetipo web: index.html <!-- --> <ui:composition template="/web-inf/layout/vc.xhtml"> <ui:define name="titulo"> <h:outputtext styleclass="titulopagina" value="titulo"/> <h:outputtext styleclass="subtitulopagina" value="subtitulo"/> </ui:define> <ui:define name="rastromigas"> <ui:include src="/rastromigas/rastro.xhtml" /> </ui:define> <ui:define name="menuvertical"> <ui:include src="/menu/menuvertical.xhtml" /> </ui:define> <ui:define name="content"> <!-- --> </ui:define> </ui:composition> <!-- --> Como se puede apreciar, en esa página se ha definido el contenido de las partes título, rastromigas, menuvertical y content. Dependiendo de la plantilla que se esté utilizando habrá que definir algunos contenido u otros. Lista completa de contenidos personalizables: Nombre Plantilla Descripción headerinsert c,errorlayout, hc, hv, hvc, hvv, loginlayout, vc, vv cabeceracentral c,errorlayout, hc, hv, hvc, hvv, loginlayout, vc, vv Contenido que será insertado en el <h:head> de la aplicación Contenido que será insertado en la parte central de la cabecera de la aplicación. Por defecto no se inserta nada. La clase CSS.cabeceraCentral define el estilo del div que lo contiene. 24 de 37

25 rastromigas c, hc, hv, hvc, hvv, vc, vv Contenido que será insertado en la zona reservada para el rastro de migas panelayuda c, hc, hv, hvc, hvv, vc, vv Contenido que será insertado en la zona reservada para el panel de ayuda titulo c, hc, hv, hvc, hvv, vc, vv Contenido que será insertado en la zona reservada para el título content c,errorlayout, hc, hvc, loginlayout, vc footer c,errorlayout, hc, hv, hvc, hvv, vc, vv Contenido que será insertado en la zona reservada para la parte principal de la aplicación Contenido que será insertado en la zona reservada para el footer menuhorizontal hc, hv, hvc, hvv Contenido que será insertado en la zona reservada para el menú horizontal menuvertical hvc, hvv, vc, vv Contenido que será insertado en la zona reservada para el menú vertical menuvisual hv, hvv, vv Contenido que será insertado en la zona reservada para el menú visual 25 de 37

26 4.7. USO DE MENÚS PERSONALIZADOS POR USUARIO A partir de la versión de ATLAS, es posible modificar el menú que se muestra a cada usuario, personalizándolo. Nota: Para usar esta funcionalidad es necesaria la autorización explícita por parte de ICM. Para personalizar el menú de un usuario, se puede utilizar la clase atlas.componentes.utiles.atlasmenuutils. A continuación se muestran los métodos de dicha clase, que pueden utilizarse para establecer el menú personalizado de un usuario, u obtener el menú por defecto de la aplicación: atlas.componentes.utiles.atlasmenuutils import atlas.componentes.jaxb.menuaplicacion.menu; /** * Establece un menú personalizado para un usuario menu El menú para el usuario. Null para utilizar el menú por defecto */ public static void setcustommenu(menu menu); /** * Obtiene el menú personalizado de un usuario, o null si no tiene menú personalizado El menú personalizado de un usuario, o null si no tiene menú personalizado */ public static Menu getcustommenu(); /** * Obtiene un menú por defecto de la aplicación menucode codigo del menu (si null, entonces menu por defecto) El menú por defecto de la aplicación */ public static Menu getmenu(string menucode) throws ServiceException; /** * Establece el menú por defecto de la aplicación menucode codigo del menu (si null, entonces menu por defecto) menu ServiceException */ public static void setmenu(string menucode, Menu menu) throws ServiceException; 26 de 37

27 A continuación se muestra un ejemplo de personalización el menú para el usuario actualmente autenticado. El ejemplo obtiene el menú por defecto (definido en el fichero menu.xml), y le añade algunas opciones al final: Ejemplo de menú personalizado import atlas.componentes.jaxb.menuaplicacion.celdamenutype; import atlas.componentes.jaxb.menuaplicacion.elementotype; import atlas.componentes.jaxb.menuaplicacion.menu; import atlas.componentes.utiles.atlasmenuutils; // Establece menu personalizado, incluye una nueva opcion en el menu actual Menu menu = AtlasMenuUtils.getMenu(null); /*****************************************/ /*************** 1 ***********************/ ElementoType elemento1 = new ElementoType(); elemento1.setid("1"); elemento1.setperfil("role_1"); elemento1.seturl("/secure/menusapp/indexgeneral.jsf"); elemento1.setnombrenavegacion("look and Feel"); elemento1.setnourl(false); elemento1.setnombre("maquetación"); CeldaMenuType celdamenutype1 = new CeldaMenuType(); celdamenutype1.seturlimagen("img/componentes/estilos.jpg"); celdamenutype1.setapartado("maquetación"); celdamenutype1.seturlapartado("/secure/menusapp/indexgeneral.jsf"); celdamenutype1.settexto("ejemplos de estilos e iconos disponibles"); elemento1.setceldamenu(celdamenutype1); /*****************************************/ /*************** 1_1 *********************/ ElementoType elemento11 = new ElementoType(); elemento11.setid("1_1"); elemento11.setperfil("role_1"); elemento11.seturl("/secure/estilos/estilosoption.jsf"); elemento11.setnombrenavegacion("estilos"); elemento11.setnourl(false); elemento11.setnombre("estilos"); CeldaMenuType celdamenutype11 = new CeldaMenuType(); celdamenutype11.seturlimagen("img/componentes/estilos.jpg"); celdamenutype11.setapartado("estilos"); celdamenutype11.seturlapartado("/secure/estilos/estilosoption.jsf"); celdamenutype11.settexto("pagina de ejemplo con estilos del framework"); elemento11.setceldamenu(celdamenutype11); elemento1.getelemento().add(elemento11); menu.getelemento().add(elemento1); AtlasMenuUtils.setCustomMenu(menu); 27 de 37

28 4.8. USO DE MENU S OBTENIDOS DE BASE DE DATOS Se pueden configurar los menú para que en vez de leerse del fichero XML de menú se lean de base de datos y además sean distintos por roles, e incluso por usuario Crear el menú en base de datos Los elementos de menu y los roles habrá que darlos de alta en BBDD en las tabla MENU_ELEMENT y MENU_ELEMENT_ROL del esquema DBA_GAT La tabla MENU_ELEMENT contendrá los elementos de menu y su relación padre/hijo entre ellos La tabla MENU_ELEMENT_ROL contendrá que elementos de menu puede ver cada rol Descripción de los campos de las tablas del Menu. GAT_MENU_ELEMENT Campo ID_MENU_ELEMENT ID_MENU_PADRE CD_APLICACION DS_TEXTO DS_ETIQUETA DS_URL NM_ACTIVO Descripción PK de la tabla. Identificador del menú padre. Código de la aplicación que usa el menú, el mismo valor que se define en el application.properties. Valor texto que se muestra en el menú. Etiqueta que se lee del resource bundle, si se ingresa este valor entonces el campo DS_TEXTO es ignorado. URL que se invoca al hacer click. Si el elemento del menú se encuentra activo. 28 de 37

29 NM_ORDEN NM_POPUP IMAGEN ICONO DS_ETIQUETA_DETALLE DS_TEXTO_DETALLE NM_DESTACADO Número de orden en el cual aparece el menú. Si al hacer click la url(ds_url) se abre en modo popup. Valor de la imagen que se muestra cuando el menú es tipo de visual. Icono que se muestra al lado del texto del elemento del menú. Valor que se muestra cuando el menú es tipo de visual. Valor que se muestra cuando el menú es tipo de visual. Valores 0 y 1 (Estableces a 0 el valor por defecto); si el valor es 1 entonces el elemento del menú aparecerá destacado sobre el resto. Esta funcionalidad es solo para el menú de tipo visual. GAT_MENU_ELEMENT_ROL Campo ID_MENU_ELEMENT_ROL DS_ROL ID_MENU_ELEMENT NM_DESTACADO Descripción PK de la Tabla Descripción del Rol FK correspondiente a la PK de la tabla GAT_MENU_ELEMENT Destacado por Rol Configuración para el uso de los menús en base de datos Modificar el applicattioncontext-database que se escaneen las entidades de bbdd para menús applicationcontext-database.xml <property name="packagestoscan"> <list> <!-- Necesario si se quiere utilizar el componente de calendario - -> <value>atlas.componentes.domain</value> <value>atlas.core.seguridad.domain</value> <value>atlas.componentes.menu.domain</value> </list> </property> 29 de 37

30 Modificar el provider interno del cacheprovider definiendolo como atlasdabasemenuprovider y poner las opciones de cacheo y el tiempo de cacheo (en segundos) applicationcontext-services.xml <bean id="cachemenuprovider" class="atlas.componentes.menu.impl.cachemenuprovider"> <constructor-arg ref="atlasdatabasemenuprovider" /> <property name="cachearporusuario" value="true" /> <property name="cachearporroles" value="true" /> <property name="tiempocache" value="86400" /> </bean> <bean id="menumanager" class="atlas.componentes.menu.menumanager" p:provider-ref="cachemenuprovider" /> Añadir al applicattion.properties la variable menu.aplicacion que será el código de aplicación y que es el que hay que meter en todos los registros de nuestro menú en la tabla GAT_MENU_ELEMENT application.properties # Configuracion para el menu de la aplicación en BBDD menu.aplicacion=ejpl Una vez hechos estos cambios al ejecutar la aplicación el menú se cargará desde la definición del mismo en base de datos. 30 de 37

31 4.9. INDICADOR DE CARGA Al utilizar cualquiera de las plantillas se cargará, por defecto, la librería JavaScript de atlas (/webapp/resources/js/atlas.js). Este script activa un indicador de carga tanto para las peticiones HTTP como para las Ajax. A continuación se muestra el aspecto del indicador de carga en funcionamiento: Para configurar el indicador de carga se proporciona el siguiente API JavaScript: Nombre Descripción atlas.ui.busyindicator.show Muestra el indicador de carga atlas.ui.busyindicator.hide Esconde el indicador de carga atlas.ui.busyindicator.disable Deshabilita el indicador de carga 31 de 37

32 atlas.ui.busyindicator.enable atlas.ui.busyindicator.options(options) Habilita el indicador de carga Establece las opciones del indicador de carga. Opciones disponible: enable: true/false. Indica si el componente está activo o no nonajax: true/false. Indica si hay que mostrar el indicador de carga para las peticiones HTTP (no ajax) ajax: true/false. Indica si hay que mostrar el indicador de carga en las peticiones ajax. A continuación mostramos ejemplos de uso de interés del API descrito. 1. Desactivar el indicador de carga: disablebusyindicatorsample.xhtml <h:outputscript target="head"> jquery(document).ready(function() { atlas.ui.busyindicator.disable(); }); </h:outputscript> 2. Desactivar el indicador de carga para las llamadas Ajax: disableajaxbusyindicator.xhtml <h:outputscript target="head"> jquery(document).ready(function() { atlas.ui.busyindicator.options({ajax:false}); }); </h:outputscript> 3. Mostrar el indicador de carga al hacer click en un elemento: onclickbusyindicator.xhtml <h:outputscript target="head"> jquery(document).ready(function() { atlas.$('calendarioform:enviarresultado').click(atlas.ui.busyindicator.show); }); </h:outputscript> <h:form id="calendarioform"> <h:commandlink action="#{calendariosamplebean.enviardatos}" id="enviarresultado" value="#{bundle['c.boton']}"> <h:graphicimage value="/img/ico_nuevo.gif"/> </h:commandlink> </h:form> 32 de 37

33 4.10. API JAVASCRIPT ATLAS Como se ha indicado en el punto anterior, al utilizar cualquiera de las plantillas se dispondrá del API JavaScript de Atlas. Esta librería, que se encuentra en webapp/resources/js/atlas.js, se ha creado para recopilar métodos útiles para las aplicaciones web creadas con Atlas (arquetipos web, gstaweb y documentumweb). A continuación se detallan los métodos disponibles: Nombre atlas.jquery Descripción Dado un elemento DOM cuyo id es del tipo JSF, ccid (component client id), devuelve su objeto jquery atlas.$ Alias para atlas.jquery atlas.ui.showbusyindicator Muestra el indicador de carga atlas.ui.hidebusyindicator atlas.ui.busyindicator Esconde el indicador de carga Dentro de este objeto se encuentran los métodos de ayuda para el indicador de carga. Ver apartado anterior. 33 de 37

34 4.11. RECOMENDACIONES Y BUENAS PRÁCTICAS Se debe de validar el XML de menú contra su esquema: menu_aplicacion.xsd, que es el esquema de menús existente en ICM, en su versión que admite elementos del tipo celda-menu. Estos elementos están diseñados para soportar componentes del tipo Menú Visual. 34 de 37

35 4.12. EJEMPLO DE USO Se puede ver un ejemplo de los componentes de menú en la aplicación de demostración de componentes, bajo la siguiente secuencia de navegación: Inicio > Menú > Menú Horizontal / Vertical /. 35 de 37

36 5. PREGUNTAS MÁS FRECUENTES Pregunta: Dónde puedo encontrar información general sobre los componentes? Respuesta: En la aplicación de demostración de los componentes del Framework Atlas Pregunta: Qué interacción un componente de menú con el resto de elementos de Menú? Respuesta: Puesto que los enlaces que construye este componente tienen un parámetro id con el valor del elemento de menú correspondiente, cualquier otro componente de menú comprueba, cuando se produce una petición, este parámetro en el objeto Request y su valor. Entonces, determina cuál es la opción que se ha elegido y se proceden a representar con el elemento de menú seleccionado como destacado. Pregunta: Cómo se ha implementado el componente en su capa de presentación? Respuesta: Mediante un componente de Facelets. Los mensajes de error se extraen del contexto de Faces. Pregunta: Cómo puedo modificar los estilos del componente? Respuesta: Mediante los atributos de estilo del componente. Para más información consultar la tabla de atributos en la sección de Uso del componente. 36 de 37

37 6. ENLACES RELACIONADOS Producto Ajax4JSF Barbecue Commons BeanUtils Commons Configurations Facelets Hibernate Hibernate Annotations JAXB Jcaptcha JPA JSF JSFUnit Log4J MyFaces Core RichFaces Spring Spring Security Tomahawk Velocity URL commons.apache.org/beanutils/ jcaptcha.sourceforge.net/ de 37