Este documento describe el componente Árbol de RUP. Explica cómo inicializar el árbol con datos en formato HTML, JSON, XML o mediante AJAX. Detalla las funciones y plugins disponibles como Core, Checkbox, Menú contextual y Theme. Además, indica cómo configurar y personalizar el componente mediante parámetros.

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. 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. 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. Componentes RUP – Árbol iv/18
10. Sobreescritura del theme 18
11. Integración con UDA 18

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