Tree

Ouvrir dans ChatGPT

Ombre dwc-tree 25.01

Java API

Le composant Tree organise les données sous forme d'une hiérarchie de nœuds. Chaque nœud détient une clé unique et une étiquette. Les nœuds se connectent pour former des relations parent-enfant. Vous pouvez étendre ou réduire les nœuds pour afficher ou masquer leurs enfants. Des icônes clarifient le type de nœud que vous regardez et s'il est sélectionné. La sélection permet de choisir un nœud ou plusieurs à la fois.

Modèle de nœud et structure de l'arbre

Le rôle de TreeNode

Chaque pièce de données dans l'arbre est encapsulée dans un TreeNode. Cet objet détient la clé, l'étiquette textuelle 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 premier niveau, rendant la structure de l'arbre plus facile à gérer en interne.

Comme les nœuds conservent des références à leurs parents et enfants, traverser 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 un texte (qui fait également office de 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 qu'il mette à jour son interface utilisateur.

Exemple :

TreeNode parent = Tree.node("Parent");
TreeNode child = Tree.node("Child");
parent.add(child);
tree.add(parent);

Un seul parent

Essayer d'assigner le même nœud à plus d'un parent provoquera une exception. Cette mesure de sécurité 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 causerait 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 retire de la structure de l'arbre. Cela efface également la référence au 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 parentales et vide la liste des enfants.

Chaque nœud prend en charge le stockage d'informations supplémentaires sur le serveur à l'aide de setUserData(Object key, Object data). Cela vous permet d'associer des métadonnées arbitraires ou des références avec le nœud, sans exposer ces données au client ou à l'interface utilisateur.

Utilisation de la démo pour modifier le texte des nœuds

Dans la démo, double-cliquez sur un nœud pour ouvrir un éditeur pour son texte. Saisissez 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 distinguant 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 d'icônes par défaut à l'échelle mondiale, 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"));

Sources d'icônes

Une icône peut être n'importe quelle définition d'icône webforJ valide ou un fichier de ressource chargé via un protocole de ressources pris en charge webforJ.

Icônes par nœud

Vous pouvez remplacer les valeurs par défaut globales en attribuant des icônes aux 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 pouvez vouloir cacher les icônes pour des groupes ou des feuilles afin de réduire le désordre. Le composant vous permet de basculer la visibilité globalement pour ces catégories, vous permettant de simplifier l'apparence de l'arbre sans perdre la structure.

Exemple :

tree.setGroupIconsVisible(false);
tree.setLeafIconsVisible(false);

Afficher le code

TreeIconsView.java

Expansion et réduction des nœuds

Les nœuds peuvent être étendus 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éduction

L'arbre prend en charge l'expansion et la réduction de nœuds individuels par leur clé ou référence directe. Vous pouvez également étendre ou réduire tous les descendants d'un nœud à la fois.

Ces opérations vous permettent de contrôler la visibilité de l'arbre et prennent en charge le chargement paresseux de données ou le focus sur des zones d'intérêt.

Exemple :

tree.expand(node);
tree.collapse(key);

// collapse sub trees
tree.expandFrom(node);
tree.collapseFrom(node);

Réduction de la racine

Le nœud racine ancre l'arbre mais reste caché. Réduire la racine cacherait normalement tout, faisant apparaître l'arbre comme vide. Pour éviter cela, réduire la racine réduit en fait tous ses enfants mais garde la racine étendue en interne, garantissant que l'arbre montre toujours son contenu correctement.

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. Lorsque l'utilisateur étend 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 quand un nœud est étendu. À 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 de sélectionner un seul nœud à la fois ou plusieurs nœuds simultanément. Passer d'une sélection multiple à une sélection unique désélectionne automatiquement tous sauf le premier nœud sélectionné.

Exemple :

tree.setSelectionMode(Tree.SelectionMode.SINGLE);

Interaction de multi-sélection

Lorsque l'arbre est réglé sur le mode de sélection multiple, les utilisateurs peuvent sélectionner plus d'un nœud à la fois. La manière dont cela fonctionne 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 retirer de la sélection actuelle. Cela permet de sélectionner plusieurs nœuds individuels sans désélectionner les autres.
• Appareils mobiles et tactiles : Comme 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 multi-sélection facile grâce à des tapotements simples.

Sélection et désélection

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 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

Stylisation

Loading...