NIVEL 16: ESTRUCTURAS RECURSIVAS N-ARIAS · 2018. 7. 19. · ISIS1206 –Estructuras de Datos ...

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