Zum Hauptinhalt springen

Tree

In ChatGPT öffnen
Schatten dwc-tree 25.01
Java API

Die Tree-Komponente organisiert Daten als Hierarchie von Knoten. Jeder Knoten hat einen eindeutigen Schlüssel und ein Label. Knoten verbinden sich, um Eltern-Kind-Beziehungen zu bilden. Sie können Knoten erweitern oder collapsen, um ihre Kinder anzuzeigen oder zu verbergen. Icons verdeutlichen, um welchen Knotentyp es sich handelt und ob er ausgewählt ist. Die Auswahl unterstützt das gleichzeitige Wählen eines oder mehrerer Knoten.

Knotenmodell und Baumstruktur​

Die Rolle von TreeNode​

Jedes Stück Daten im Baum ist in einem TreeNode eingekapselt. Dieses Objekt hält den Schlüssel, das Textlabel und Verweisen auf die übergeordneten und untergeordneten Knoten. Der Wurzelknoten ist besonders: Er existiert in jedem Baum, ist aber nicht sichtbar. Er dient als Container für alle obersten Knoten und erleichtert die interne Verwaltung der Baumstruktur.

Da Knoten Referenzen auf ihre Eltern und Kinder behalten, ist das Durchqueren des Baums einfach. Egal, ob Sie nach oben, unten oder einen bestimmten Knoten nach Schlüssel suchen möchten, die Verbindungen sind immer zugänglich.

Erstellung und Verwaltung von Knoten​

Knoten werden mit einfachen Fabrikmethoden erstellt, entweder durch Angabe eines Schlüssels und Textes oder nur des Textes (was gleichzeitig als Schlüssel fungiert). Dies gewährleistet, dass jeder Knoten gültig und eindeutig identifizierbar ist.

Das Hinzufügen von Knoten zum Baum erfolgt durch Aufrufen von add() oder insert() auf einem übergeordneten Knoten. Diese Methoden kümmern sich um die Zuordnung der Elternreferenz und benachrichtigen den Baum, dass seine UI aktualisiert werden muss.

Beispiel:

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

Wenn Sie denselben Knoten mehreren Eltern zuweisen, wird eine Ausnahme ausgelöst. Dieser Schutzmechanismus stellt sicher, dass der Baum eine ordnungsgemäße Hierarchie aufrechterhält, indem verhindert wird, dass Knoten mehrere Eltern haben, was die Integrität der Struktur gefährden und unerwartetes Verhalten verursachen würde.

Code anzeigen

Knoten ändern​

Sie aktualisieren das Label eines Knotens, indem Sie setText(String text) aufrufen. Diese Methode ändert den Text, der für den Knoten im Baum angezeigt wird.

Um einen bestimmten untergeordneten Knoten zu entfernen, verwenden Sie remove(TreeNode child). Dies trennt das Kind von seinem Elternteil und entfernt es aus der Baumstruktur. Es löscht auch die Elternreferenz.

Wenn Sie alle Kinder eines Knotens leeren möchten, rufen Sie removeAll() auf. Dies entfernt jeden untergeordneten Knoten, leert deren Elternreferenzen und leert die Kinderliste.

Jeder Knoten unterstützt das Speichern zusätzlicher Informationen auf der Serverseite mit setUserData(Object key, Object data). Dadurch können Sie beliebige Metadaten oder Verweise mit dem Knoten verknüpfen, ohne diese Daten dem Client oder der UI preiszugeben.

Verwendung der Demo zur Änderung des Knotentexts

In der Demo doppelklicken Sie auf einen Knoten, um einen Editor für dessen Text zu öffnen. Geben Sie den neuen Text ein und speichern Sie ihn, um das Label des Knotens im Baum zu aktualisieren.

Code anzeigen

Icons​

Icons bieten visuelle Hinweise darauf, was Knoten repräsentieren und in welchem Zustand sie sich befinden. Sie verbessern die Lesbarkeit, indem sie Knotentypen und Auswahlstatus auf einen Blick unterscheiden. Die Tree-Komponente unterstützt das globale Setzen von Standardicons, das Anpassen von Icons pro Knoten und das Umlegen der Sichtbarkeit von Icons.

Globale Icons​

Der Baum ermöglicht das Setzen von Standardicons für kollabierte Gruppen, erweiterte Gruppen, Blattknoten und ausgewählte Blätter.

Beispiel:

tree.setCollapsedIcon(TablerIcon.create("folder"));
tree.setExpandedIcon(TablerIcon.create("folder-opened"));
tree.setLeafIcon(TablerIcon.create("file"));
tree.setLeafSelectedIcon(TablerIcon.create("file-checked"));
Icon-Quellen

Ein Icon kann jede gültige webforJ Icon-Definition oder eine Ressourcendatei sein, die über einen von webforJ unterstützten Assets-Protokollen geladen wird.

Icons pro Knoten​

Sie können globale Standards überschreiben, indem Sie Icons einzelnen Knoten zuweisen. Dies ist nützlich, wenn bestimmte Knoten unterschiedliche Konzepte darstellen, wie „Projekt“-Ordner oder spezielle Dateien.

Beispiel:

node.setIcon(TablerIcon.create("project"));
node.setSelectedIcon(TablerIcon.create("project-selected"));

Sichtbarkeit von Icons​

Manchmal möchten Sie vielleicht Icons für Gruppen oder Blätter ausblenden, um Unordnung zu reduzieren. Die Komponente ermöglicht es Ihnen, die Sichtbarkeit für diese Kategorien global zu steuern, sodass Sie das Aussehen des Baums vereinfachen können, ohne die Struktur zu verlieren.

Beispiel:

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

Knoten erweitern und collapsen​

Knoten können erweitert oder collapsen werden, um zu steuern, welche Teile des Baums sichtbar sind. Dies ermöglicht es, sich auf relevante Abschnitte zu konzentrieren und Szenarien wie Lazy Loading oder dynamische Datenaktualisierungen zu unterstützen.

Erweiterungs- und Collapsen-Operationen​

Der Baum unterstützt das Erweitern und Collapsen einzelner Knoten entweder durch ihren Schlüssel oder durch direkte Referenz. Sie können auch alle Nachkommen eines Knotens gleichzeitig erweitern oder collapsen.

Diese Operationen ermöglichen es Ihnen, zu steuern, wie viel vom Baum sichtbar ist, und unterstützen Lazy Loading von Daten oder die Konzentration auf interessante Bereiche.

Beispiel:

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

// collapsen von Unterbäumen
tree.expandFrom(node);
tree.collapseFrom(node);
Kollabieren der Wurzel

Der Wurzelknoten verankert den Baum, bleibt aber verborgen. Das Kollabieren der Wurzel würde normalerweise alles verstecken, wodurch der Baum leer zu erscheinen scheint. Um dies zu vermeiden, kollabiert das Kollabieren der Wurzel tatsächlich alle ihre Kinder, lässt jedoch die Wurzel intern erweitert, sodass der Baum seinen Inhalt weiterhin korrekt anzeigt.

Lazy Loading von Knoten​

Der Baum unterstützt lazy loading von Kindknoten, indem er auf Erweiterungsereignisse reagiert. Wenn ein Benutzer einen Knoten erweitert, kann Ihre App die Kinder dieses Knotens dynamisch laden oder generieren. Dies verbessert die Leistung, indem nur die sichtbaren Teile des Baums nach Bedarf geladen werden.

Verwenden Sie das onExpand-Ereignis, um zu erkennen, wann ein Knoten erweitert wird. Überprüfen Sie im Handler, ob die Kinder des Knotens Platzhalter sind (zum Beispiel ein Spinner oder ein leerer Knoten), und ersetzen Sie diese durch tatsächliche Daten, sobald sie geladen wurden.

Code anzeigen

Auswahl​

Die Auswahl steuert, welche Knoten vom Benutzer ausgewählt werden. Die Tree-Komponente unterstützt flexible Modi und APIs zum Auswählen, Abwählen und Abfragen von Knoten.

Auswahlmodi​

Sie können wählen, ob der Baum die Auswahl eines einzelnen Knotens zur gleichen Zeit oder mehrere Knoten gleichzeitig zulässt. Der Wechsel von mehrfachem zu einfacher Auswahl wählt automatisch alle außer dem ersten ausgewählten Knoten ab.

Beispiel:

tree.setSelectionMode(Tree.SelectionMode.SINGLE);
Multi-Selection-Interaktion

Wenn der Baum im Mehrfachauswahlmodus eingestellt ist, können Benutzer mehr als einen Knoten gleichzeitig auswählen. Die Art und Weise, wie dies funktioniert, hängt vom Gerät ab:

  • Desktop (Maus und Tastatur): Benutzer halten die Ctrl-Taste (oder die Cmd-Taste auf macOS) gedrückt und klicken auf Knoten, um sie zur aktuellen Auswahl hinzuzufügen oder zu entfernen. Dadurch können mehrere einzelne Knoten ausgewählt werden, ohne andere abzuwählen.
  • Mobile und Touch-Geräte: Da Modifikatortasten nicht verfügbar sind, tippen Benutzer einfach auf Knoten, um sie auszuwählen oder abzuwählen. Jeder Tap wechselt den Auswahlstatus dieses Knotens, was eine einfache Mehrfachauswahl durch einfache Taps ermöglicht.

Auswählen und Abwählen​

Knoten können durch Referenz, Schlüssel, einzeln oder in Gruppen ausgewählt oder abgewählt werden. Sie können auch alle Kinder eines Knotens in einem Aufruf auswählen oder abwählen.

Beispiel:

// Knoten nach Referenz oder Schlüssel auswählen
tree.select(node);
tree.selectKey(key);

// Knoten nach Referenz oder Schlüssel abwählen
tree.deselect(node);
tree.deselectAll();

// Auswählen oder Abwählen von Kindern von Knoten
tree.selectChildren(parentNode);
tree.deselectChildren(parentNode);

Abfrage des Auswahlstatus​

Sie können die aktuelle Auswahl mit dem unten angezeigten Code abrufen:

// Referenz des ausgewählten Knotens abrufen
TreeNode selected = tree.getSelected();
List<TreeNode> selectedItems = tree.getSelectedItems();

// Schlüssel des ausgewählten Knotens abrufen
Object selectedKey = tree.getSelectedKey();
List<Object> selectedKeys = tree.getSelectedKeys();
Code anzeigen

Stil​

Loading...