ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
NIVEL 16: ESTRUCTURAS RECURSIVAS N-ARIAS
JTree
1
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Agenda
• ¿Qué es?
• Conceptos
• Creación de un JTree
• Personalización de un JTree
• Selección de nodos
• Actualización dinámica del árbol
• Visualización de un archivo XML mediante un JTree
2
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
¿Qué es?
• Componente gráfico SWING
• Clase para desplegar un conjunto de datos de manera jerárquica
3
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Agenda
• ¿Qué es?
• Conceptos
• Creación de un JTree
• Personalización de un JTree
• Selección de nodos
• Actualización dinámica del árbol
• Visualización de un archivo XML mediante un JTree
4
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Conceptos
5
La información se despliega de manera vertical
Cada fila es un nodo
Tiene una raíz
Una rama tiene uno o más hijos
Una hoja no tiene hijos
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
• TreePath:• Camino a un nodo
• Encapsula un nodo y todos sus antecesores
• “./Root/Numbers/One”
Conceptos
6
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
• Un nodo colapsado oculta sus hijos.
• Un nodo escondido está debajo de un ancestro colapsado.
Conceptos
7
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Conceptos
• Un nodo expandido no es una hoja y se identifica mediante: TreeModel.isLeaf(node)retornando false
8
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Conceptos
• Todos los nodos padres visibles están expandidos, pero pueden o no estar desplegados.
• Un nodo desplegado es un nodo visible y está en el área de visualización
9
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Conceptos
• Métodos de JTree para saber si el nodo está desplegado:
• isRootVisible()
• setRootVisible()
• scrollPathToVisible()
• scrollRowToVisible()
• getVisibleRowCount()
• setVisibleRowCount()
10
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Conceptos
• Métodos de JTree para saber si el nodo es visible (bajo un nodo expandido):
• isVisible()
• makeVisible()
11
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Conceptos
• Los nodos del árbol son objetos de la clase DefaultMutableTreeNode
• Implementan la interfaz TreeNode
12
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Conceptos13
JTree
Representación física sobre la pantalla
Modelo
getModel( )
Clase: DefaultTreeModelInterfaz: TreeModel
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Conceptos14
JTree
Representación física sobre la pantalla
Modelo
Un cambio en el Modelo,genera un evento que haceque el JTree realice lasactualizaciones necesarias enla representación visible delárbol.
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Agenda
• ¿Qué es?
• Conceptos
• Creación de un JTree
• Personalización de un JTree
• Selección de nodos
• Actualización dinámica del árbol
• Visualización de un archivo XML mediante un JTree
15
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Creación de un JTree
• Se declara como un atributo en la clase del panel que va a incluir el árbol.
16
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Creación de un JTree
• Se crea el nodo raíz (raiz) en el método constructor
17
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Creación de un JTree• Se crea el árbol a partir de la raíz previamente creada en el método constructor.
18
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Creación de un JTree
• Se crea un JScrollPane y se asocia al árbol en el método constructor.
19
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Creación de un JTree
• Resultado:
20
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Creación de un JTree
• Creación de los demás nodos en el constructor
21
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Creación de un JTree• Se crean variables para los nuevos nodos
22
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Creación de un JTree• Se crea un nodo “Categoría” y se agrega a la raíz del
árbol.
23
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Creación de un JTree• Se crea un nodo “Libro” y se agrega a la “Categoría”
24
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Creación de un JTree• ¿Qué hay en el constructor de un nodo?
25
Raíz del árbol
Nodo “categoria”: es hijo directo de la raíz del árbol
Nodo “libro”: es hijo de un nodo categoria
Objetos de la claseObject
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Creación de un JTree
• ¿Qué hay en el constructor de un nodo?
26
Raíz del árbol
String
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Creación de un JTree
• ¿Qué hay en el constructor de un nodo?
27
Nodo “categoria”: es hijo directo de la raíz del árbolString
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Creación de un JTree
• ¿Qué hay en el constructor de un nodo?
28
Nodo “libro”: es hijo de un nodo categoria
Libro se
muestra según el método toString()
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Creación de un JTree
• Resultado:
29
Nodos “Categoría”
Raíz del árbol
Nodos “Libro”
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Agenda
• ¿Qué es?
• Conceptos
• Creación de un JTree
• Personalización de un JTree
• Selección de nodos
• Actualización dinámica del árbol
• Visualización de un archivo XML mediante un JTree
30
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Personalización
• Diferentes estilos de presentación
31
Estilo Java (por defecto) Estilo Windows
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Personalización• Los íconos personalizados se definen en el constructor del panel que contiene el JTree
32
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Agenda
• ¿Qué es?
• Conceptos
• Creación de un JTree
• Personalización de un JTree
• Selección de nodos
• Actualización dinámica del árbol
• Visualización de un archivo XML mediante un JTree
33
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Selección de nodos
• Para expandir o colapsar los nodos de un JTree no necesario programar nada, Java lo hace solo.
34
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Selección de nodos
• Tratar el evento de selección de nodos:
• Si al seleccionar un nodo se quiere hacer algo más que expandir o colapsar, hay que programarlo.
35
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Selección de nodos
• Tratar el evento de selección de nodos: • Hay que habilitar al panel para que “oiga” los eventos de
selección del árbol.
36
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Selección de nodos
• Tratar el evento de selección de nodos:
• Decir al árbol que es el panel el que va a recibir el evento.
37
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Selección de nodos
• Tratar el evento de selección de nodos: • Implementar en el panel el método
valueChanged()
38
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Selección de nodos• Resulta:
39
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Agenda
• ¿Qué es?
• Conceptos
• Creación de un JTree
• Personalización de un JTree
• Selección de nodos
• Actualización dinámica del árbol
• Visualización de un archivo XML mediante un JTree
40
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Actualización dinámica del árbol
41
JTree
Representación física sobre la pantalla
Modelo
Un cambio en el Modelo,genera un evento que hace queel JTree realice lasactualizaciones necesarias en larepresentación visible del árbol.
Clase: DefaultTreeModelInterfaz: TreeModel
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Actualización dinámica del árbol
• Se pueden invocar métodos sobre el modelo (DefaultTreeModel) para modificarlo:
• insertNodeInto(MutableTreeNode
newChild, MutableTreeNode parent,
int index)
• removeNodeFromParent(MutableTreeNo
de node)
• nodeRoot(TreeNode node)
• Es necesario crear un DefaultTreeModelpropio, con su propio listener.
42
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Actualización dinámica del árbol• Creación de un DefaultTreeModel propio
43
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Actualización dinámica del árbol• Este modelo debe tener su propio listener para detectar cuándo se modifica
44
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Actualización dinámica del árbol• El JTree se crea usando nuestro propio modelo
45
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Actualización dinámica del árbol• Sobre este modelo es posible efectuar cambios dinámicamente
46
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Actualización dinámica del árbol
• Resultado:
47
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
• Ejemplo:
• ¿Qué es?
Actualización dinámica del árbol
48
Este modelo debe tener su propio listener para detectar cuándo se modifica
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
• Ejemplo:
• Una clase propia que implementa la interfaz TreeModelListener.
49
Este modelo debe tener su propio listener para detectar cuándo se modifica
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
• Ejemplo de TreeModelListener propio:
50
Es necesario implementar TODOS los métodos de la interfaz, aunque sean vacíos
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
• Ejemplo de TreeModelListener propio:
51
Respuesta a la modificación de un nodo
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
• Ejemplo de TreeModelListener propio:
52
Respuesta a la inserción de un nuevo nodo
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
• Ejemplo de TreeModelListener propio:
53
Respuesta a la eliminación de un nodo
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
• Ejemplo de TreeModelListener propio:
54
Respuesta a la modificación de la estructura del árbol
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
• Ejemplo de TreeModelListener propio:• Nuevo método treeNodesChanged(TreeModelEvent e)
55
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Actualización dinámica del árbol
• Clase TreeModelEvent:
56
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Actualización dinámica del árbol
• Resultado
57
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Actualización dinámica del árbol
• Crear Modelos de Datos
• ¿Qué estructura jerárquica con su propio modelo de datos hemos visto?
• ¿Se podría usar un JTree para visualizarla?
58
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Agenda
• ¿Qué es?
• Conceptos
• Creación de un JTree
• Personalización de un JTree
• Selección de nodos
• Actualización dinámica del árbol
• Visualización de un archivo XML mediante un JTree
59
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Visualización de un archivo XML mediante un JTree
• Ejemplo: Visualizar un XML
60
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Visualización de un archivo XML mediante un JTree
• Ejemplo: Visualizar un XML
• Este ejemplo permite visualizar los nodos DOM resultantes de cargar el archivo XML donde persistía la clase Números (vista en la presentación de XML).
61
<?xml version="1.0" encoding="UTF-8" ?> <numeros nombre="Ejemplo1">
<numero>10</numero> <numero>23</numero> <numero>195</numero> <numero>4</numero> <numero>888</numero>
</numeros>
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Visualización de un archivo XML mediante un JTree
• Nueva clase que implementa TreeModel:
• Se declara una referencia al documento XML
62
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Visualización de un archivo XML mediante un JTree
• Nueva clase que implementa TreeModel:
• Se declara la colección de listeners del Modelo
63
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Visualización de un archivo XML mediante un JTree
• Nueva clase que implementa TreeModel:
• Se declara un atributo booleano que informa si el nodo está comprimido o no.
64
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Visualización de un archivo XML mediante un JTree
• En el constructor se carga el archivo XML en un árbol de nodos DOM
65
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Visualización de un archivo XML mediante un JTree
• Se lee el archivo
66
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Visualización de un archivo XML mediante un JTree
• Saca el XML completo y lo parsea utilizando DOM
67
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Visualización de un archivo XML mediante un JTree
• Nueva clase que implementa TreeModel:
• Esta nueva clase DEBE implementar TODOS los métodos de la interfaz TreeModel
68
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Visualización de un archivo XML mediante un JTree
• El método getRoot() retorna el nodo documento del árbol DOM
• El método isLeaf(Object aNode) indica si el nodo del parámetro es hoja
69
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Visualización de un archivo XML mediante un JTree
• NodoDOM es una nueva clase para personalizar un nodo DOM ().
70
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Visualización de un archivo XML mediante un JTree
• La nueva clase NodoDOM contiene un atributo de tipo Node
71
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Visualización de un archivo XML mediante un JTree
• Métodos toString() de la clase NodoDOM:
• Retorna el texto a deplegar en el árbol
72
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Visualización de un archivo XML mediante un JTree
• Más métodos de la clase ModeloArbolDOM
73
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Visualización de un archivo XML mediante un JTree
• Métodos para agregar y eliminar listeners al modelo
74
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Visualización de un archivo XML mediante un JTree
• Métodos para notificar los cambios a los listeners
75
Demás métodos en el ejemplo …
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Visualización de un archivo XML mediante un JTree• Por último…
• En el panel donde se va a visualizar el árbol con el XML se crea el JTree
76
public class PanelArbol extends JPanel
{
private JTree arbol;
public PanelArbol( )
{
DefaultMutableTreeNode top = new DefaultMutableTreeNode( "No se ha cargado nada" );
arbol = new JTree( top );
this.add( arbol, BorderLayout.CENTER );
}
public void actualizar( DomTreeModel modelo )
{
arbol.setModel( modelo );
}
}
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Visualización de un archivo XML mediante un JTree
• Creación del modelo desde la clase de la ventana principal
77
public void cargarArbol( )
{
try
{
//Seleccionar el archivo
JFileChooser fc = new JFileChooser( "./data/" );
fc.setDialogTitle( "Seleccionar XML a desplegar" );
int resultado = fc.showOpenDialog( this );
if( resultado == JFileChooser.APPROVE_OPTION )
{
File archivoCadena = fc.getSelectedFile( );
//Se crea el modelo
DomTreeModel modelo = new DomTreeModel( archivoCadena.getPath()
);
panelArbol.actualizar( modelo );
}
} ...
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Referencias
• http://java.sun.com/docs/books/tutorial/uiswing/components/tree.html
• http://java.sun.com/j2ee/1.4/docs/tutorial/doc/JAXPDOM6.html
78