Tree
El componente Tree organiza datos como una jerarquía de nodos. Cada nodo tiene una clave única y una etiqueta. Los nodos se conectan para formar relaciones de padre-hijo. Puedes expandir o colapsar nodos para mostrar u ocultar sus hijos. Los íconos aclaran qué tipo de nodo estás viendo y si está seleccionado. La selección permite elegir un nodo o varios a la vez.
Modelo de nodos y estructura del árbol
El papel de TreeNode
Cada pieza de datos en el árbol está envuelta en un TreeNode. Este objeto contiene la clave, la etiqueta de texto y enlaces a sus nodos padre e hijos. El nodo raíz es especial: existe en cada árbol pero no es visible. Sirve como contenedor para todos los nodos de nivel superior, facilitando la gestión interna de la estructura del árbol.
Debido a que los nodos mantienen referencias a sus padres e hijos, recorrer el árbol es simple. Ya sea que desees moverte hacia arriba, hacia abajo o encontrar un nodo específico por su clave, las conexiones siempre están accesibles.
Creación y gestión de nodos
Los nodos se crean utilizando métodos de fábrica simples, ya sea proporcionando una clave y texto o solo texto (que actúa como la clave). Esto garantiza que cada nodo sea válido e identificable de manera única.
Agregar nodos al árbol implica llamar a add() o insert() en un nodo padre. Estos métodos se encargan de asignar la referencia del padre y notificar al árbol que actualice su interfaz de usuario.
Ejemplo:
TreeNode parent = Tree.node("Padre");
TreeNode child = Tree.node("Hijo");
parent.add(child);
tree.add(parent);
Intentar asignar el mismo nodo a más de un padre resultará en una excepción. Esta salvaguarda asegura que el árbol mantenga una jerarquía adecuada al prevenir que los nodos tengan múltiples padres, lo que rompería la integridad de la estructura y causaría comportamientos inesperados.
Mostrar Código
- Java
Modificación de nodos
Puedes actualizar la etiqueta de un nodo llamando a setText(String text). Este método cambia el texto mostrado para el nodo en el árbol.
Para eliminar un nodo hijo específico, utiliza remove(TreeNode child). Esto separa al hijo de su padre y lo elimina de la estructura del árbol. También se elimina la referencia al padre.
Si deseas eliminar todos los hijos de un nodo, llama a removeAll(). Esto elimina cada nodo hijo, limpia sus referencias al padre y vacía la lista de hijos.
Cada nodo admite el almacenamiento de información adicional en el lado del servidor utilizando setUserData(Object key, Object data). Esto te permite asociar metadatos o referencias arbitrarias con el nodo, sin exponer estos datos al cliente o a la interfaz de usuario.
En la demostración, haz doble clic en un nodo para abrir un editor para su texto. Ingresa el nuevo texto y guárdalo para actualizar la etiqueta del nodo en el árbol.
Mostrar Código
- Java
- CSS
Íconos
Los íconos proporcionan pistas visuales sobre qué representan los nodos y su estado. Mejoran la legibilidad al distinguir los tipos de nodos y el estado de selección de un vistazo. El componente Tree admite la configuración de íconos predeterminados a nivel global, la personalización de íconos por nodo y el cambio de visibilidad de íconos.
Íconos globales
El árbol te permite establecer íconos predeterminados para grupos colapsados, grupos expandidos, nodos hoja y hojas seleccionadas.
Ejemplo:
tree.setCollapsedIcon(TablerIcon.create("folder"));
tree.setExpandedIcon(TablerIcon.create("folder-opened"));
tree.setLeafIcon(TablerIcon.create("file"));
tree.setLeafSelectedIcon(TablerIcon.create("file-checked"));
Un ícono puede ser cualquier definición válida de ícono de webforJ o un archivo de recurso cargado a través de un protocolos de activos compatibles.
Íconos por nodo
Puedes anular los valores predeterminados globales asignando íconos a nodos individuales. Esto es útil cuando ciertos nodos representan conceptos diferentes, como carpetas de “proyecto” o archivos especiales.
Ejemplo:
node.setIcon(TablerIcon.create("project"));
node.setSelectedIcon(TablerIcon.create("project-selected"));
Visibilidad de íconos
A veces, es posible que desees ocultar íconos para grupos o hojas para reducir el desorden. El componente te permite alternar la visibilidad globalmente para estas categorías, permitiéndote simplificar la apariencia del árbol sin perder la estructura.
Ejemplo:
tree.setGroupIconsVisible(false);
tree.setLeafIconsVisible(false);
Mostrar Código
- Java
Expansión y colapso de nodos
Los nodos pueden ser expandidos o colapsados para controlar qué partes del árbol son visibles. Esto permite enfocarse en secciones relevantes y admite escenarios como carga diferida o actualizaciones de datos dinámicas.
Operaciones de expansión y colapso
El árbol admite la expansión y colapso de nodos individuales ya sea por su clave o referencia directa. También puedes expandir o colapsar todos los descendientes de un nodo a la vez.
Estas operaciones te permiten controlar cuánto del árbol es visible y apoyan la carga diferida de datos o el enfoque en áreas de interés.
Ejemplo:
tree.expand(node);
tree.collapse(key);
// colapsar subárboles
tree.expandFrom(node);
tree.collapseFrom(node);
El nodo raíz ancla el árbol pero permanece oculto. Colapsar la raíz normalmente ocultaría todo, haciendo que el árbol parezca vacío. Para evitar esto, colapsar la raíz colapsa a todos sus hijos pero mantiene la raíz expandida internamente, asegurando que el árbol muestre su contenido correctamente.
Carga diferida de nodos
El árbol admite la carga diferida de nodos hijos reaccionando a eventos de expansión. Cuando un usuario expande un nodo, tu aplicación puede cargar o generar dinámicamente los hijos de ese nodo. Esto mejora el rendimiento al cargar solo las partes visibles del árbol bajo demanda.
Usa el evento onExpand para detectar cuándo se expande un nodo. Dentro del controlador, verifica si los hijos del nodo son marcadores de posición (por ejemplo, un spinner o un nodo vacío) y reemplázalos con datos reales una vez cargados.
Mostrar Código
- Java
Selección
La selección controla qué nodos son elegidos por el usuario. El componente Tree admite modos flexibles y APIs para seleccionar, anular selección y consultar nodos.
Modos de selección
Puedes elegir si el árbol permite seleccionar un solo nodo a la vez o múltiples nodos simultáneamente. Cambiar de selección múltiple a única anula automáticamente la selección de todos, excepto el primer nodo seleccionado.
Ejemplo:
tree.setSelectionMode(Tree.SelectionMode.SINGLE);
Cuando el árbol está configurado en modo de selección múltiple, los usuarios pueden seleccionar más de un nodo a la vez. La forma en que esto funciona depende del dispositivo:
- Escritorio (ratón y teclado): Los usuarios mantienen presionada la tecla Ctrl (o Cmd en macOS) y hacen clic en los nodos para agregarlos o eliminarlos de la selección actual. Esto permite seleccionar nodos individuales múltiples sin deseleccionar otros.
- Dispositivos móviles y táctiles: Dado que no hay teclas modificadoras disponibles, los usuarios simplemente tocan los nodos para seleccionarlos o deseleccionarlos. Cada toque alterna el estado de selección de ese nodo, lo que permite una fácil selección múltiple a través de toques simples.
Selección y deselección
Los nodos pueden seleccionarse o deseleccionarse por referencia, clave, individualmente o en lotes. También puedes seleccionar o deseleccionar todos los hijos de un nodo en una sola llamada.
Ejemplo:
// seleccionar nodo por referencia o clave
tree.select(node);
tree.selectKey(key);
// anular selección de nodo por referencia o clave
tree.deselect(node);
tree.deselectAll();
// seleccionando o deseleccionando hijos de nodos
tree.selectChildren(parentNode);
tree.deselectChildren(parentNode);
Recuperación del estado de selección
Puedes obtener la selección actual utilizando el código que se muestra a continuación:
// obtener la referencia del nodo seleccionado
TreeNode selected = tree.getSelected();
List<TreeNode> selectedItems = tree.getSelectedItems();
// obtener la clave del nodo seleccionado
Object selectedKey = tree.getSelectedKey();
List<Object> selectedKeys = tree.getSelectedKeys();
Mostrar Código
- Java