UDA-Componentes RUP. Árbol

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

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:

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

Componentes RUP – Árbol iv/18

10. Sobreescritura del theme 18

11. Integración con UDA 18

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.


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


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.


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.


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:



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></conte nt>" + "<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></conten t>" + "</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.


El contenedor del árbol definido en la jsp sería:


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, HttpServletRespons e 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.


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.


La configuración del plugin se realiza mediante la propiedad checkbox de las opciones de invocación del componente:


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


La configuración del plugin se realiza mediante la propiedad contextmenu de las opciones de invocación del componente:


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


La configuración del plugin se realiza mediante la propiedad sort de las opciones de invocación del componente:


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


La configuración del plugin se realiza mediante la propiedad ui de las opciones de invocación del componente:


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


La configuración del plugin se realiza mediante la propiedad themes de las opciones de invocación del componente:


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


La configuración del plugin se realiza mediante la propiedad unique de las opciones de invocación del componente:


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

UDA-Componentes RUP. Árbol

Technology

Transcript of UDA-Componentes RUP. Árbol