Descargar

1
NIVEL 16: ESTRUCTURAS RECURSIVAS
N-ARIAS
JTree
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
2
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
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
3
¿Qué es?
• Componente gráfico SWING
• Clase para desplegar un conjunto de datos de
manera jerárquica
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
4
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
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
5
Conceptos
Tiene una raíz
La información
se despliega
de manera
vertical
Una rama tiene
uno o más hijos
Una hoja no tiene
hijos
Cada fila es un
nodo
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
6
Conceptos
• TreePath:
Camino a un nodo
• Encapsula un nodo y todos sus antecesores
• “./Root/Numbers/One”
•
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
7
Conceptos
• Un nodo colapsado
oculta sus hijos.
• Un nodo escondido está debajo de un ancestro
colapsado.
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
8
Conceptos
• Un nodo expandido
no es una hoja y se
identifica mediante: TreeModel.isLeaf(node)
retornando false
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
9
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
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
10
Conceptos
• Métodos de JTree para saber si el nodo está
desplegado:
•
•
•
•
•
•
isRootVisible()
setRootVisible()
scrollPathToVisible()
scrollRowToVisible()
getVisibleRowCount()
setVisibleRowCount()
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
11
Conceptos
• Métodos de JTree para saber si
el nodo es
visible (bajo un nodo expandido):
•
•
isVisible()
makeVisible()
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
12
Conceptos
•
Los nodos del árbol son objetos de la
clase DefaultMutableTreeNode
•
Implementan la interfaz TreeNode
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Conceptos
13
JTree
Representación física
sobre la pantalla
Modelo
getModel( )
Clase: DefaultTreeModel
Interfaz: TreeModel
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Conceptos
14
JTree
Representación física
sobre la pantalla
Un cambio en el Modelo,
genera un evento que hace
que el JTree realice las
actualizaciones necesarias en
la representación visible del
árbol.
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Modelo
15
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
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
16
Creación de un JTree
• Se declara como un atributo en la clase del
panel que va a incluir el árbol.
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
17
Creación de un JTree
• Se crea el nodo
constructor
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
raíz (raiz) en el método
18
Creación de un JTree
• Se crea el árbol a partir de la raíz previamente
creada en el método constructor.
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
19
Creación de un JTree
• Se crea un JScrollPane y se asocia al árbol en el
método constructor.
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
20
Creación de un JTree
• Resultado:
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
21
Creación de un JTree
• Creación de los demás nodos en el constructor
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
22
Creación de un JTree
• Se crean variables para los nuevos nodos
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
23
Creación de un JTree
• Se crea un nodo “Categoría” y se agrega a la raíz del
árbol.
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
24
Creación de un JTree
• Se crea un nodo “Libro” y se agrega a la “Categoría”
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
25
Creación de un JTree
• ¿Qué hay en el constructor de un nodo?
Raíz del árbol
Objetos de
la clase
Object
Nodo “categoria”: es hijo directo de la raíz del árbol
Nodo “libro”: es hijo de un nodo categoria
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
26
Creación de un JTree
• ¿Qué hay en el constructor de un nodo?
Raíz del árbol
String
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
27
Creación de un JTree
• ¿Qué hay en el constructor de un nodo?
Nodo “categoria”: es hijo directo de la raíz del árbol
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
String
28
Creación de un JTree
• ¿Qué hay en el constructor de un nodo?
Libro se
muestra según
el método
toString()
Nodo “libro”: es hijo de un nodo categoria
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
29
Creación de un JTree
• Resultado:
Raíz del árbol
Nodos
“Libro”
Nodos
“Categoría”
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
30
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
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
31
Personalización
• Diferentes estilos de presentación
Estilo Java (por defecto)
Estilo Windows
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
32
Personalización
• Los íconos personalizados se definen en el
constructor del panel que contiene el JTree
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
33
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
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
34
Selección de nodos
• Para expandir o colapsar los nodos de un JTree
no necesario programar nada, Java lo hace
solo.
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
35
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.
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
36
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.
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
37
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.
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
38
Selección de nodos
• Tratar el evento de selección de nodos:
•
Implementar en el panel el método
valueChanged()
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
39
Selección de nodos
• Resulta:
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
40
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
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
41
Actualización dinámica del árbol
JTree
Representación física
sobre la pantalla
Un cambio en el Modelo,
genera un evento que hace que
el
JTree
realice
las
actualizaciones necesarias en la
representación visible del árbol.
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Modelo
Clase: DefaultTreeModel
Interfaz: TreeModel
42
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 DefaultTreeModel
propio, con su propio listener.
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
43
Actualización dinámica del árbol
• Creación de un DefaultTreeModel
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
propio
44
Actualización dinámica del árbol
• Este modelo debe tener su propio listener para
detectar cuándo se modifica
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
45
Actualización dinámica del árbol
• El JTree se crea usando
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
nuestro propio modelo
46
Actualización dinámica del árbol
• Sobre este modelo es posible efectuar cambios
dinámicamente
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
47
Actualización dinámica del árbol
• Resultado:
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
48
Actualización dinámica del árbol
• Ejemplo:
•
¿Qué es?
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
Este modelo debe
tener su propio
listener para detectar
cuándo se modifica
49
• Ejemplo:
•
Una clase propia que implementa la interfaz
Este modelo debe
TreeModelListener.
tener su propio
listener para detectar
cuándo se modifica
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
50
• Ejemplo de TreeModelListener propio:
Es necesario
implementar
TODOS los
métodos de la
interfaz,
aunque sean
vacíos
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
51
• Ejemplo de TreeModelListener propio:
Respuesta a la
modificación de un
nodo
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
52
• Ejemplo de TreeModelListener propio:
Respuesta a la
inserción de un nuevo
nodo
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
53
• Ejemplo de TreeModelListener propio:
Respuesta a la
eliminación de un
nodo
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
54
• Ejemplo de TreeModelListener propio:
Respuesta a la
modificación de la
estructura del árbol
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
55
• Ejemplo de TreeModelListener propio:
•
Nuevo método treeNodesChanged(TreeModelEvent e)
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
56
Actualización dinámica del árbol
• Clase TreeModelEvent:
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
57
Actualización dinámica del árbol
• Resultado
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
58
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?
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
59
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
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
60
Visualización de un archivo XML mediante un JTree
• Ejemplo: Visualizar un XML
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
61
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).
<?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
62
Visualización de un archivo XML mediante un JTree
• Nueva clase que implementa
•
TreeModel:
Se declara una referencia al documento XML
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
63
Visualización de un archivo XML mediante un JTree
• Nueva clase que implementa
•
TreeModel:
Se declara la colección de listeners del Modelo
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
64
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.
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
65
Visualización de un archivo XML mediante un JTree
• En el constructor se carga el archivo XML en un
árbol de nodos DOM
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
66
Visualización de un archivo XML mediante un JTree
• Se lee el archivo
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
67
Visualización de un archivo XML mediante un JTree
• Saca el XML completo y lo parsea utilizando
DOM
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
68
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
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
69
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
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
70
Visualización de un archivo XML mediante un JTree
• NodoDOM es una nueva clase para personalizar un
nodo DOM ().
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
71
Visualización de un archivo XML mediante un JTree
• La nueva clase NodoDOM contiene un atributo
de tipo Node
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
72
Visualización de un archivo XML mediante un JTree
• Métodos toString()
•
de la clase NodoDOM:
Retorna el texto a deplegar en el árbol
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
73
Visualización de un archivo XML mediante un JTree
• Más métodos de la clase ModeloArbolDOM
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
74
Visualización de un archivo XML mediante un JTree
• Métodos para agregar y eliminar listeners al
modelo
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
75
Visualización de un archivo XML mediante un JTree
• Métodos para notificar los cambios a los
listeners
Demás métodos en el ejemplo …
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co
76
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
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
77
Visualización de un archivo XML mediante un JTree
• Creación del modelo desde la clase de la
ventana principal
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
78
Referencias
• http://java.sun.com/docs/books/tutorial/uiswi
ng/components/tree.html
• http://java.sun.com/j2ee/1.4/docs/tutorial/doc
/JAXPDOM6.html
ISIS1206 – Estructuras de Datos
http://cupi2.uniandes.edu.co