UDA-Componentes RUP. Árbol

347 views

Published on

UDA-Utilidades de desarrollo de aplicaciones
• UDA-Componentes RUP. Árbol

http://uda-ejie.github.io/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
347
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

UDA-Componentes RUP. Árbol

  1. 1. UDA – Utilidades de desarrollo de aplicaciones by EJIE is licensed under a Creative Commons Reconocimiento- NoComercial-CompartirIgual 3.0 Unported License. UDA - Utilidades de Desarrollo de Aplicaciones Componentes RUP – Árbol Fecha: 13/03/2014 Referencia: EJIE S.A. Mediterráneo, 14 Tel. 945 01 73 00* Fax. 945 01 73 01 01010 Vitoria-Gasteiz Posta-kutxatila / Apartado: 809 01080 Vitoria-Gasteiz www.ejie.es
  2. 2. Componentes RUP – Árbol ii/18 Control de documentación Título de documento: Componentes RUP – Árbol Histórico de versiones Código: Versión: Fecha: Resumen de cambios: 2.4.1 13/03/2014 Primera versión. Cambios producidos desde la última versión Primera versión Control de difusión Responsable: Ander Martínez Aprobado por: Firma: Fecha: Distribución: Referencias de archivo Autor: Nombre archivo: Localización:
  3. 3. Componentes RUP – Árbol iii/18 Contenido Capítulo/sección Página 1. Introducción 5 2. Ejemplo 5 3. Casos de uso 5 4. Infraestructura 6 4.1. Ficheros 6 4.2. Dependencias 6 4.3. Versión minimizada 7 5. Invocación 7 6. Obtención de los datos 7 6.1. Html 8 6.2. JSON 9 6.3. XML 9 6.4. Carga mediante Ajax 10 7. Parámetros 11 8. Funciones 12 9. Plugins 12 9.1. Core 12 9.2. Checkbox 12 9.3. Menú contextual 13 9.4. Ordenación 14 9.5. Selección (UI) 15 9.6. Theme 16 9.7. Nodos únicos 17
  4. 4. Componentes RUP – Árbol iv/18 10. Sobreescritura del theme 18 11. Integración con UDA 18
  5. 5. Componentes RUP – Formulario 5/18 1. Introducción La descripción del Componente Árbol, visto desde el punto de vista de RUP, es la siguiente: Permite al usuario mostrar y ocultar de manera selectiva, información mostrada en una estructura jerárquica. 2. Ejemplo Se presenta a continuación un ejemplo de este componente: 3. Casos de uso Se aconseja la utilización de este componente: • Cuando sea necesario mostrar información jerarquizada.
  6. 6. Componentes RUP – Formulario 6/18 4. Infraestructura A continuación se comenta la infraestructura necesaria para el correcto funcionamiento del componente. • Únicamente se requiere la inclusión de los ficheros que implementan el componente (js y css) comentados en los apartados Ficheros y Dependencias. 4.1. Ficheros Ruta Javascript: rup/scripts/ Fichero de plugin: rup.tree-x.y.z.js Ruta theme: rup/basic-theme/ Fichero CSS del theme: theme.rup.tree-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/ Las distintas funcionalidades que aporta el componente y las prestaciones generales del mismo, se apoyan en el plugin jsTree. Para el correcto funcionamiento del componente Arbol, se precisa de la inclusión de dicho plugin. • jsTree 1.x : http://old.jstree.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.jstree.js • rup.tree-x.y.z.js
  7. 7. Componentes RUP – Formulario 7/18 4.3. Versión minimizada A partir de la versión v2.4.0 se distribuye la versión minimizada de los componentes RUP. Estos ficheros contienen la versión compactada y minimizada de los ficheros javascript y de estilos necesarios para el uso de todos los compontente RUP. Los ficheros minimizados de RUP son los siguientes: • rup/scripts/min/rup.min-x.y.z.js • rup/basic-theme/rup.min-x.y.z.css Estos ficheros son los que deben utilizarse por las aplicaciones. Las versiones individuales de cada uno de los componentes solo deberán de emplearse en tareas de desarrollo o depuración. 5. Invocación El componente árbol se invoca sobre un elemento html existente en la jsp. Dicho elemento servirá de contenedor del arbol. Un contenedor válido puede ser un simple tag html <div>: <div id="ejemploArbolDiv"><div> La invocación del componente sobre el contenedor se realiza del siguiente modo: var properties={ // Propiedades de configuración }; $("#ejemploArbolDiv").rup_tree(properties); Como ya se profundizará mas adelante, mediante las propiedades indicadas en la invocación del componente, se realiza la configuración del mismo. 6. Obtención de los datos El componente permite inicializar los nodos que componen el árbol a partir de diferentes tipos de datos. Es posible utilizar información en formato html, xml o json.
  8. 8. Componentes RUP – Formulario 8/18 6.1. Html El componente permite inicializar los datos del árbol a partir de una lista html compuesta por los elementos ul y li. Un ejemplo de una estructura html sería la siguiente: <div id="tree_example" class="tree_example_code"> <ul> <li id="node1"> <a href="#">Padre 1</a> <ul> <li id="node11"> <a href="#">Padre 1.1</a> <ul> <li id="node111"> <a href="#">Hoja 1.1.1</a> </li> <li id="node112"> <a href="#">Padre 1.1.2</a> <ul> <li id="node1121"> <a href="#">Hoja 1.1.2.1</a> </li> <li id="node1122"> <a href="#">Hoja 1.1.2.2</a> </li> </ul> </li> </ul> </li> <li id="node12"> <a href="#">Hoja 1.2></a> </li> </ul> </li> </ul> </div> La invocación necesaria al componente para la creación del árbol a partir del html anterior sería: $("#tree_example").rup_tree({ }); El componente toma como opción por defecto la inicialización del árbol a partir del html del objeto sobre el que se inicializa, de modo que no sería necesario indicar ningún parámetro adicional. Las propiedades con las que se puede parametrizar la inicialización del componente árbol mediante html se detallan en la API del plugin subyacente jsTree.
  9. 9. Componentes RUP – Formulario 9/18 6.2. JSON El componente permite inicializar los datos que se muestran en el árbol a partir de la información existente en un objeto JSON. Al no obtener los datos a partir de un html el objeto sobre el que se inicializa se simplifica: <div id="tree_example" class="tree_example_code"></div> El objeto JSON se indicaría en la inicialización del componente árbol: $("#tree_example").rup_tree({ "core" : { "initially_open" : ["Padre 1" ] }, "json_data" : { "data" : [ { "data" : "Padre 1", "children" : [ { "data":"Padre 1.1", "children" : [{ "data":"Hoja 1.1.1" }, { "data":"Padre 1.1.2", "children" : ["Hoja 1.1.2.1","Hoja 1.1.2.2"] }] }, { "data":"Hoja 1.2" }] }] } }); Las propiedades con las que se puede parametrizar la inicialización del componente árbol mediante json se detallan en la API del plugin subyacente jsTree. 6.3. XML El componente permite inicializar los datos que se muestran en el árbol a partir de la información existente en un XML. Al no obtener los datos a partir de un html el objeto sobre el que se inicializa se simplifica:
  10. 10. Componentes RUP – Formulario 10/18 <div id="tree_example" class="tree_example_code"></div> El contenido del XML se indicaría en la inicialización del componente árbol: $("#xmlTreeDemo").rup_tree({ "core" : { "initially_open" : ["padre_1" ] }, "xml_data" : { "data" : ""+ "<root>"+ "<item id='padre_1'>"+ "<content><name><![CDATA[Padre 1]]></name></content>"+ "<item id='padre_1_1' parent_id='padre_1'>"+ "<content><name><![CDATA[Padre 1.1]]></name></content>"+ "<item id='hoja_1_1_1' parent_id='padre_1_1'>"+ "<content><name><![CDATA[Hoja 1.1.1]]></name></content>"+ "</item>"+ "<item id='padre_1_1_2' parent_id='padre_1_1'>"+ "<content><name><![CDATA[Padre 1.1.2]]></name></content>"+ "<item id='hoja_1_1_2_1' parent_id='padre_1_1_2'>"+ "<content><name><![CDATA[Hoja 1.1.2.1]]></name></content>"+ "</item>"+ "<item id='hoja_1_1_2_2' parent_id='padre_1_1_2'>"+ "<content><name><![CDATA[Hoja 1.1.2.2]]></name></content>"+ "</item>"+ "</item>"+ "</item>"+ "<item id='hoja_1_2' parent_id='padre_1'>"+ "<content><name><![CDATA[Hoja 1.2]]></name></content>"+ "</item>"+ "</item>"+ "</root>" } }); Las propiedades con las que se puede parametrizar la inicialización del componente árbol mediante xml se detallan en la API del plugin subyacente jsTree. 6.4. Carga mediante Ajax El componente permite inicializar los datos del árbol a partir de la respuesta de una petición AJAX. En la API del plugin jsTree se detalla la configuración necesaria para inicializar el árbol mediante una petición AJAX que devuelva datos en formato html, json o xml. Como ejemplo, vamos a detallar la implementación necesaria para inicializar un árbol mediante un objeto json que es devuelto por una petición AJAX.
  11. 11. Componentes RUP – Formulario 11/18 El contenedor del árbol definido en la jsp sería: <div id="tree_example" class="tree_example_code"></div> El objeto JSON se indicaría en la inicialización del componente árbol: $("#tree_example").rup_tree({ "json_data" : { "ajax" : { "url" : "url_peticion_ajax" } } }); Desde el controller que escucha la petición se devolverá el json correspondiente a la representación de elementos que se quiere visualizar en el árbol. @RequestMapping(value = "url_peticion_ajax", method = RequestMethod.GET) public Object getTreeAjax(Model model, HttpServletResponse response) { // Se crea y retorna el objeto json } El formato del objeto json es idéntico que en el caso de proporcionarse en la inicialización del componente. 7. Parámetros A continuación se muestran los posibles parámetros de configuración que recibe el componente. • beforeSerialize: Función de callback que será invocada antes de realizarse la serialización del formulario. Permite la modificación de los datos del formulario antes de que estos sean recuperados para su procesado por el componente. Valor por defecto, null.
  12. 12. Componentes RUP – Formulario 12/18 8. Funciones A continuación se detallan las diferentes funciones que integran el componente árbol: • ajaxForm: Configura un formulario para ser enviado vía AJAX. Para ello añade los event listener jQuery que sean necesarios. Este método no realiza el envío del formulario. Esta función puede ser invocada sin parámetros o con un simple parámetro que puede ser o una función de callback o un objeto con las propiedades de configuración. 9. Plugins El diseño del componente árbol sigue el mismo modelo modular que el plugin subyacente en el que se basa. De este modo las diferentes funcionalidades se implementan en forma de módulos o plugins. Los plugins existentes son los siguientes: 9.1. Core Proporciona las propiedades de configuración para las funcionalidades comunes. La configuración del plugin se realiza mediante la propiedad core de las opciones de invocación del componente: $("#ejemploArbolDiv").rup_tree({ "core":{ } }); Las propiedades de configuración del plugin core pueden consultarse en la API del plugin jsTree. 9.2. Checkbox Añade un campo checkbox a cada nodo que se visualiza en el árbol.
  13. 13. Componentes RUP – Formulario 13/18 La configuración del plugin se realiza mediante la propiedad checkbox de las opciones de invocación del componente: $("#ejemploArbolDiv").rup_tree({ "checkbox":{ } }); Las propiedades de configuración del plugin checkbox pueden consultarse en la API del plugin jsTree. 9.3. Menú contextual Añade un menú contextual a cada nodo que se visualiza en el árbol.
  14. 14. Componentes RUP – Formulario 14/18 La configuración del plugin se realiza mediante la propiedad contextmenu de las opciones de invocación del componente: $("#ejemploArbolDiv").rup_tree({ "contextmenu":{ } }); Las propiedades de configuración del plugin contextmenu pueden consultarse en la API del plugin jsTree. 9.4. Ordenación Ordena automáticamente los nodos que se muestran en la tabla.
  15. 15. Componentes RUP – Formulario 15/18 La configuración del plugin se realiza mediante la propiedad sort de las opciones de invocación del componente: $("#ejemploArbolDiv").rup_tree({ "sort":{ } }); Las propiedades de configuración del plugin sort pueden consultarse en la API del plugin jsTree. 9.5. Selección (UI) El plugin UI gestiona la selección, deselección y resaltado de nodos.
  16. 16. Componentes RUP – Formulario 16/18 La configuración del plugin se realiza mediante la propiedad ui de las opciones de invocación del componente: $("#ejemploArbolDiv").rup_tree({ "ui":{ } }); Las propiedades de configuración del plugin ui pueden consultarse en la API del plugin jsTree. 9.6. Theme El plugin Theme controla la apariencia del componente árbol.
  17. 17. Componentes RUP – Formulario 17/18 La configuración del plugin se realiza mediante la propiedad themes de las opciones de invocación del componente: $("#ejemploArbolDiv").rup_tree({ "themes":{ } }); Las propiedades de configuración del plugin ui pueden consultarse en la API del plugin jsTree. 9.7. Nodos únicos El plugin unique se encarga de evitar que existan dos nodos del mismo padre que tengan el mismo nombre.
  18. 18. Componentes RUP – Formulario 18/18 La configuración del plugin se realiza mediante la propiedad unique de las opciones de invocación del componente: $("#ejemploArbolDiv").rup_tree({ "unique":{ } }); Las propiedades de configuración del plugin unique pueden consultarse en la API del plugin jsTree. 10. Sobreescritura del theme El componente árbol se presenta con una apariencia visual definida en el fichero de estilos theme.rup.tree- 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. 11. Integración con UDA No aplica.

×