Manual de Usuario. Componentes de Menús

Transcripción

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

2 Hoja de Control Título Documento de Referencia Manual de usuario Componentes de Menú NORMATIVA ATLAS Responsable Área de Arquitectura Versión framework Versión 1.10 Fecha Versión 10/12/2015 Registro de Cambios Versión Causa del Cambio Responsable del Cambio Fecha 1.0 Versión inicial del documento Unidad de Arquitectura 25/05/ Actualizadas capturas de las diferentes tipos de plantillas. Unidad de Arquitectura 15/02/ Se modifica el nombre del Area Unidad de Arquitectura 27/09/ Ampliada la descripción del atributo perfil Unidad de Arquitectura 11/01/ Corregidos errores en los atributos del menú horizontal. Incluida la posibilidad de menús personalizados por usuario Unidad de Arquitectura 07/08/2012 Unidad de Arquitectura 27/11/ Incluido apartado de personalización de plantillas Unidad de Arquitectura 13/03/ 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 Unidad de Arquitectura 12/5/2014 Unidad de Arquitectura 26/06/ de 39

3 Versión Causa del Cambio Responsable del Cambio Fecha Se modifica el pantallazo de las tablas de BBDD para agregar el campo DS_RASTRO_MIGAS Se agrega en la descripción del menú vertical que desde la versión es de solo 3 niveles Se actualiza el pantallazo del modelo de datos y actualizan los campos de las tablas Incluido apartado para crear menus con enlaces a otras aplicaciones Mejora gestión de enlaces externos. Agregado atributo menumultiaplicacion. Punto 4.9 Arquitectura de Software 09/01/2015 Arquitectura de Software 10/12/ de 39

4 Í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 DEL COMPONENTE 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 MENÚ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 LLAMADA A PÁGINAS O ENLACES EXTERNOS DESDE EL MENÚ: ATRIBUTO MENUMULTIAPLICACION INDICADOR DE CARGA API JAVASCRIPT ATLAS RECOMENDACIONES Y BUENAS PRÁCTICAS EJEMPLO DE USO PREGUNTAS MÁS FRECUENTES ENLACES RELACIONADOS de 39

5 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. 5 de 39

6 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 Para configurar los componentes de menú para poder ser utilizados es necesario seguir los pasos descritos a continuación: 6 de 39

7 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"?> <menu xmlns:xsi=" xsi:nonamespaceschemalocation="menu_aplicacion.xsd"> </menu> <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> 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. 7 de 39

8 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). 8 de 39

9 4. USO DEL COMPONENTE 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: hc.xhtml: (Horizontal+Contenido). Incluye un menú horizontal, y en el resto de la página se muestra el contenido. Ejemplo: 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 39

10 10 de 39

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

12 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: 12 de 39

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

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

15 c.xhtml: (Contenido). No incluye menús, muestra directamente el contenido de la página en la zona central. Ejemplo: 15 de 39

16 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 <?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=" </html> <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> 16 de 39

17 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=" 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> 17 de 39

18 <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 <?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.xht ml"/> </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> 18 de 39

19 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 P 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 <?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 bundle NO Nombre del bundle del que se obtendrán las etiquetas height NO Altura del menú. Por defecto 26px 19 de 39

20 menumultiaplicacion NO Boolean que permite hacer llamadas a páginas y URLs externas. Para más información ver el apartado 4.9 mode NO Modo del menú. Por defecto ajax 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 El menú vertical a partir de la versión es tipo composite y solo acepta 3 niveles de profundidad, si se quiere usar más de 3 niveles se deberá solicitar una autorización excepcional para usar el menú nocomposite. 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 página 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:atlasc=" <ui:composition> <div id="menu" class="menu_vert"> </div> <atlasc:menuvertical id="idmenuvertical" menu="#{menubean.menu}"/> </ui:composition> </html> 20 de 39

21 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 menu SI java.util.list EL ( Expression Language) que indica la lista de opciones del menú, debe ser una lista de objetos atlas.componentes.menu.menuitem. id NO String Identificador del componente immediate NO Boolean Indica si la validación del componente debe adelantarse a la fase 'Apply Request Values' o no. Valor por defecto false menumultiaplicacion NO Boolean Boolean que permite hacer llamadas a páginas y URLs externas. Para más información ver el apartado 4.9 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. 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: 21 de 39

22 Figura Menú visual Y a continuación se muestra un ejemplo del componente con opciones de segundo nivel: Figura Menú visual 2 22 de 39

23 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> 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. 23 de 39

24 bundle NO Nombre del bundle del que se obtendrán las etiquetas. Su valor por defecto es bundle. 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. imagenclass NO Estilo para la imagen de las opciones de primer nivel. menumultiaplicacion NO Boolean que permite hacer llamadas a páginas y URLs externas. Para más información ver el apartado 4.9 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. 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. 24 de 39

25 txtelementoclass NO Estilo para el texto de la descripcion de cada celda del menú. Su valor por defecto es label. width NO Ancho de las columnas. Su valor por defecto es 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"> <!-- Contenido --> </ui:define> </ui:composition> <! > 25 de 39

26 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 cabeceracentral content footer headerinsert c,errorlayout, hc, hv, hvc, hvv, loginlayout, vc, vv c,errorlayout, hc, hvc, loginlayout, vc c,errorlayout, hc, hv, hvc, hvv, vc, vv c,errorlayout, hc, hv, hvc, hvv, loginlayout, vc, vv 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. 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 Contenido que será insertado en el <h:head> de la aplicación 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 panelayuda c, hc, hv, hvc, hvv, vc, vv Contenido que será insertado en la zona reservada para el panel de ayuda rastromigas c, hc, hv, hvc, hvv, vc, vv Contenido que será insertado en la zona reservada para el rastro de migas titulo c, hc, hv, hvc, hvv, vc, vv Contenido que será insertado en la zona reservada para el título 26 de 39

27 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 27 de 39

28 */ public static void setmenu(string menucode, Menu menu) throws ServiceException; 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(); 28 de 39

29 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); 4.8. Uso de menú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 29 de 39

30 Descripción de los campos de las tablas del Menu. GAT_MENU_ELEMENT Campo ID_MENU_ELEMENT CD_APLICACION ID_MENU ID_PADRE DS_URL DS_TEXTO DS_ETIQUETA DS_TEXTO_DETALLE DS_ETIQUETA_DETALLE Descripción PK de la tabla. Se genera a partir de la secuencia GAT_S_MENU_ELEMENT Código de la aplicación que usa el menú, el mismo valor que se define en el application.properties. Identificador del menú Identificador del menú padre de este menú. URL que se invoca al hacer click. 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. Valor que se muestra cuando el menú es tipo de visual. Valor que se muestra cuando el menú es tipo de visual. DS_RASTRO_MIGAS Descripción que se muestra en el componente de rastro de migas. 30 de 39

31 ICONO IMAGEN NM_ACTIVO NM_DESTACADO NM_POPUP NM_ORDEN Icono que se muestra al lado del texto del elemento del menú. Valor de la imagen que se muestra cuando el menú es tipo de visual. Si el elemento del menú se encuentra activo. 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. Si al hacer click la url(ds_url) se abre en modo popup. Número de orden en el cual aparece el menú. GAT_MENU_ELEMENT_ROL Campo ID_MENU_ELEMENT_ROL CD_APLICACION ID_MENU DS_ROL NM_DESTACADO Descripción PK de la Tabla. Se genera a partir de la secuencia GAT_S_MENU_ELEMENT_ROL Código de la aplicación que usa el menú, el mismo valor que se define en el application.properties. Identificador del menú Descripción del Rol Destacado por Rol 31 de 39

32 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> 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 32 de 39

33 Una vez hechos estos cambios al ejecutar la aplicación el menú se cargará desde la definición del mismo en base de datos Llamada a páginas o enlaces externos desde el menú: atributo menumultiaplicacion Los componentes de menú de Atlas (horizontal, vertical, visual y rastro de migas) están configurados por defecto para que los enlaces se formen de la siguiente forma: dominio:puerto/miaplicacion/secure/enlace.jsf Normalmente los elementos de menú se crean con la URL /secure/enlace.jsf en el fichero xml o en BBDD, lo cual permite hacer llamadas a enlaces dentro de la aplicación, en este caso MiAplicacion. Si la aplicación que se está desarrollando necesita hacer llamadas a páginas externas a la propia aplicación, por ejemplo, dominio:puerto/otraaplicacion/secure/otroenlace.jsf, entonces debe establecerse a true el parámetro menumultiaplicacion. Dicho parámetro indica al componente que entre sus enlaces puede haber enlaces internos y externos, por lo que es el componente quien analiza cada uno de los enlaces y lo trata de forma adecuada. <?xml version="1.0" encoding="utf-8"?> menuvertical.xhtml <!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}" menumultiaplicacion="true"/> </div> </ui:composition> </html> El atributo menumultiaplicacion= true se deberá agregar a todos los componentes de menú que utilice la aplicación, ya que en todos ellos los enlaces serán tratados como internos si no lo tienen. 33 de 39

34 4.10. 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 atlas.ui.busyindicator.show atlas.ui.busyindicator.hide Descripción Muestra el indicador de carga Esconde el indicador de carga 34 de 39

35 atlas.ui.busyindicator.disable atlas.ui.busyindicator.enable Deshabilita el indicador de carga Habilita el indicador de carga atlas.ui.busyindicator.options(options) 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); 35 de 39

36 }); </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> 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 atlas.$ atlas.ui.showbusyindicator atlas.ui.hidebusyindicator atlas.ui.busyindicator Descripción Dado un elemento DOM cuyo id es del tipo JSF, ccid (component client id), devuelve su objeto jquery Alias para atlas.jquery Muestra el indicador de carga Esconde el indicador de carga Dentro de este objeto se encuentran los métodos de ayuda para el indicador de carga. Ver apartado anterior Recomendaciones y buenas prácticas Se debe 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. 36 de 39

37 4.13. 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 / de 39

38 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 tiene 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 Composite. Los mensajes de error se extraen del contexto de JSF. 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 4 USO DEL COMPONENTE. 38 de 39

39 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 39