Tree
Le composant Tree organise les données sous forme d'une hiérarchie de nœuds. Chaque nœud possède une clé unique et une étiquette. Les nœuds se connectent pour former des relations parent-enfant. Vous pouvez développer ou réduire les nœuds pour afficher ou masquer leurs enfants. Les icônes clarifient le type de nœud que vous examinez et si celui-ci est sélectionné. La sélection prend en charge le choix d'un nœud ou de plusieurs à la fois.
Modèle de nœud et structure d'arbre
Le rôle de TreeNode
Chaque élément de données dans l'arbre est encapsulé dans un TreeNode. Cet objet contient la clé, l'étiquette de texte, et des liens vers ses nœuds parent et enfant. Le nœud racine est spécial : il existe dans chaque arbre mais n'est pas visible. Il sert de conteneur pour tous les nœuds de niveau supérieur, rendant ainsi la structure de l'arbre plus facile à gérer en interne.
Comme les nœuds gardent des références à leurs parents et enfants, la navigation dans l'arbre est simple. Que vous souhaitiez monter, descendre ou trouver un nœud spécifique par clé, les connexions sont toujours accessibles.
Création et gestion des nœuds
Les nœuds sont créés à l'aide de méthodes de fabrique simples, soit en fournissant une clé et un texte, soit juste du texte (qui fait double emploi en tant que clé). Cela garantit que chaque nœud est valide et identifiable de manière unique.
Ajouter des nœuds à l'arbre implique d'appeler add() ou insert() sur un nœud parent. Ces méthodes gèrent l'attribution de la référence parent et notifient l'arbre pour mettre à jour son interface utilisateur.
Exemple :
TreeNode parent = Tree.node("Parent");
TreeNode child = Tree.node("Child");
parent.add(child);
tree.add(parent);
Essayer d'assigner le même nœud à plus d'un parent entraînera une exception. Cette protection garantit que l'arbre maintient une hiérarchie appropriée en empêchant les nœuds d'avoir plusieurs parents, ce qui briserait l'intégrité de la structure et provoquerait des comportements inattendus.
Afficher le code
- TreeView.java
Modification des nœuds
Vous mettez à jour l'étiquette d'un nœud en appelant setText(String text). Cette méthode change le texte affiché pour le nœud dans l'arbre.
Pour supprimer un nœud enfant spécifique, utilisez remove(TreeNode child). Cela détache l'enfant de son parent et le supprime de la structure de l'arbre. Cela efface également la référence parent.
Si vous souhaitez effacer tous les enfants d'un nœud, appelez removeAll(). Cela supprime chaque nœud enfant, efface leurs références parent, et vide la liste des enfants.
Chaque nœud prend en charge le stockage d'informations supplémentaires côté serveur à l'aide de setUserData(Object key, Object data). Cela vous permet d'associer des métadonnées ou des références arbitraires avec le nœud, sans exposer ces données au client ou à l'interface utilisateur.
Dans la démo, double-cliquez sur un nœud pour ouvrir un éditeur pour son texte. Entrez le nouveau texte et enregistrez-le pour mettre à jour l'étiquette du nœud dans l'arbre.
Afficher le code
- TreeModifyView.java
- tree-modify-view.css
Icônes
Les icônes fournissent des indices visuels sur ce que représentent les nœuds et leur état. Elles améliorent la lisibilité en faisant la distinction entre les types de nœuds et l'état de sélection d'un coup d'œil. Le composant Tree prend en charge la définition globale d'icônes par défaut, la personnalisation des icônes par nœud, et le basculement de la visibilité des icônes.
Icônes globales
L'arbre vous permet de définir des icônes par défaut pour les groupes réduits, les groupes étendus, les nœuds feuilles, et les feuilles sélectionnées.
Exemple :
tree.setCollapsedIcon(TablerIcon.create("folder"));
tree.setExpandedIcon(TablerIcon.create("folder-opened"));
tree.setLeafIcon(TablerIcon.create("file"));
tree.setLeafSelectedIcon(TablerIcon.create("file-checked"));
Une icône peut être toute définition d'icône valide webforJ ou un fichier de ressource chargé via des protocoles de ressources pris en charge par webforJ.
Icônes par nœud
Vous pouvez remplacer les valeurs par défaut globales en attribuant des icônes à des nœuds individuels. Cela est utile lorsque certains nœuds représentent des concepts différents, comme des dossiers de “projet” ou des fichiers spéciaux.
Exemple :
node.setIcon(TablerIcon.create("project"));
node.setSelectedIcon(TablerIcon.create("project-selected"));
Visibilité des icônes
Parfois, vous pourriez vouloir cacher les icônes pour des groupes ou des feuilles afin de réduire l'encombrement. Le composant vous permet de basculer la visibilité globalement pour ces catégories, vous permettant de simplifier l'apparence de l'arbre sans perdre sa structure.
Exemple :
tree.setGroupIconsVisible(false);
tree.setLeafIconsVisible(false);
Afficher le code
- TreeIconsView.java
Expansion et rétraction des nœuds
Les nœuds peuvent être développés ou réduits pour contrôler quelles parties de l'arbre sont visibles. Cela permet de se concentrer sur des sections pertinentes et prend en charge des scénarios tels que le chargement paresseux ou les mises à jour de données dynamiques.
Opérations d'expansion et de rétraction
L'arbre prend en charge l'expansion et la rétraction de nœuds individuels soit par leur clé soit par référence directe. Vous pouvez également développer ou réduire tous les descendants d'un nœud en une seule opération.
Ces opérations vous permettent de contrôler combien de l'arbre est visible et prennent en charge le chargement paresseux de données ou la concentration sur des zones d'intérêt.
Exemple :
tree.expand(node);
tree.collapse(key);
// collapse sub trees
tree.expandFrom(node);
tree.collapseFrom(node);
Le nœud racine ancre l'arbre mais reste caché. Réduire la racine cacherait normalement tout, rendant l'arbre apparemment vide. Pour éviter cela, réduire la racine réduit en fait tous ses enfants tout en maintenant la racine développée en interne, garantissant que l'arbre montre toujours correctement son contenu.
Chargement paresseux des nœuds
L'arbre prend en charge le chargement paresseux des enfants de nœuds en réagissant aux événements d'expansion. Lorsqu'un utilisateur développe un nœud, votre application peut charger ou générer dynamiquement les enfants de ce nœud. Cela améliore les performances en ne chargeant que les parties visibles de l'arbre à la demande.
Utilisez l'événement onExpand pour détecter lorsque qu'un nœud est développé. À l'intérieur du gestionnaire, vérifiez si les enfants du nœud sont des espaces réservés (par exemple, un spinner ou un nœud vide) et remplacez-les par des données réelles une fois chargées.
Afficher le code
- TreeLazyLoadView.java
Sélection
La sélection contrôle quels nœuds sont choisis par l'utilisateur. Le composant Tree prend en charge des modes et des API flexibles pour sélectionner, désélectionner et interroger des nœuds.
Modes de sélection
Vous pouvez choisir si l'arbre permet la sélection d'un seul nœud à la fois ou de plusieurs nœuds simultanément. Passer d'une sélection multiple à une sélection simple désélectionne automatiquement tous les nœuds sauf le premier sélectionné.
Exemple :
tree.setSelectionMode(Tree.SelectionMode.SINGLE);
Lorsque l'arbre est configuré en mode de sélection multiple, les utilisateurs peuvent sélectionner plus d'un nœud à la fois. Le fonctionnement dépend de l'appareil :
- Bureau (souris et clavier) : Les utilisateurs maintiennent la touche Ctrl (ou la touche Cmd sur macOS) et cliquent sur les nœuds pour les ajouter ou les supprimer de la sélection actuelle. Cela permet de sélectionner plusieurs nœuds individuels sans en désélectionner d'autres.
- Appareils mobiles et tactiles : Étant donné que les touches de modification ne sont pas disponibles, les utilisateurs tapent simplement sur les nœuds pour les sélectionner ou les désélectionner. Chaque tapotement bascule l'état de sélection de ce nœud, permettant une sélection multiple facile par des tapotements simples.
Sélectionner et désélectionner
Les nœuds peuvent être sélectionnés ou désélectionnés par référence, clé, individuellement ou par lots. Vous pouvez également sélectionner ou désélectionner tous les enfants d'un nœud en un seul appel.
Exemple :
// select node by reference or key
tree.select(node);
tree.selectKey(key);
// deselect node by reference or key
tree.deselect(node);
tree.deselectAll();
// selecting or deselecting children of nodes
tree.selectChildren(parentNode);
tree.deselectChildren(parentNode);
Récupération de l'état de sélection
Vous pouvez obtenir la sélection actuelle en utilisant le code affiché ci-dessous :
// get the reference of selected node
TreeNode selected = tree.getSelected();
List<TreeNode> selectedItems = tree.getSelectedItems();
// get the key of selected node
Object selectedKey = tree.getSelectedKey();
List<Object> selectedKeys = tree.getSelectedKeys();
Afficher le code
- TreeSelectionView.java