{TWBSCR} {TWBSCR}

Übung 3.3: Eine Baumstrukturkomponente hinzufügen

Bevor Sie mit dieser Übung beginnen, müssen Sie zuerst Übung 3.2: Eine Registeranzeigenkomponente hinzufügen ausführen.

Die Baumstrukturkomponente einfügen und konfigurieren

  1. Fügen Sie die Baumstrukturkomponente ein:
    1. Stellen Sie sicher, dass Ihre JSP-Datei geöffnet ist. Wählen Sie die Baumstrukturanzeige in Ihrer Registeranzeige aus.
    2. Öffnen Sie in der Palette die Ablage für Faces Client-Komponenten, indem Sie auf die Ablage klicken.
    3. Ziehen Sie die Baumstrukturkomponente in die Baumstrukturanzeige in der Entwurfssicht.
  2. Konfigurieren Sie die Eigenschaften für die Baumstrukturkomponente:
  3. Stellen Sie sicher, dass Ihnen clientseitige Daten zur Verfügung stehen. Wenn Sie die anderen Abschnitte in diesem Lerntext ausgeführt haben, müsste in Ihrer Seitendatensicht bereits eine JavaBean und in der Clientdatensicht eine entsprechende JavaBean vorhanden sein. Ist dies nicht der Fall, erstellen Sie die JavaBeans, wie in Übung 2.2: Serverseitige Daten hinzufügen und Übung 2.3: Clientdaten erstellen und konfigurieren beschrieben.
  4. Binden Sie die Daten an die Baumstrukturkomponente. Die Baumstruktur soll die Liste der Benutzer und deren Portfolios anzeigen.
    1. Ziehen Sie die JavaBean Root aus der Clientdatensicht auf die Baumstruktur. Sie stellen der Baumstruktur einen Ausgangspunkt (ein Stammobjekt für den Anfangsknoten (Root) der Baumstruktur) zur Verfügung und geben dann an, welche Eigenschaften dieses Anfangsknotens als oberste Ebene der Baumstruktur verwendet werden sollen. Für jeden Knoten in der Baumstruktur geben Sie an, wie den Daten zu folgen ist, um untergeordnete Knoten zu finden.
    2. Klicken Sie in der Sicht "Eigenschaften" auf Baumstruktur, und wählen Sie die Registerkarte Baumstrukturknotenliste aus.
    3. Erweitern Sie alle Knoten, und wählen Sie root, users und portfolios aus. Sie können die Zuordnungen ändern und andere Knoten auswählen und sich ansehen, wie sich dies auf die Darstellung der Baumstruktur auswirkt. Sie können mehrere untergeordnete Knoten eines Knotens auswählen (falls vorhanden). Auch wenn sich ein Knoten in der Mitte Ihrer Datenstruktur befindet (Portfolio enthält beispielsweise eine Liste mit Positionen (positions), und jede Position enthält Aktien (stock)), müssen Sie keine untergeordneten Knoten auswählen, um den ausgewählten Knoten zu einem Blattknoten zu machen. Indem Sie root (implizit ausgewählt), users und portfolios auswählen, weisen Sie die Baumstruktur an, nur diesen bestimmten Datenpfad anzuzeigen und bei den Portfolios zu stoppen.
    4. Sie können für jeden Knoten die Art der Darstellung anpassen. Sie haben dabei verschiedene Möglichkeiten:
      • Wenn ein Knoten Eigenschaften hat, können Sie auswählen, welche Eigenschaft als Bezeichnung für den Knoten verwendet werden soll.
      • Wenn der Knoten keine Eigenschaft hat, können Sie als Knotenbezeichnung einen Wert eingeben.
      • Sie können Symbole für erweiterte oder ausgeblendete Knoten angeben und damit die Standardsymbole für Ordner und Dateien ersetzen.

      Für die Knoten root und portfolios ist nur eine Eigenschaft vorhanden, sodass die Standardauswahl beibehalten werden kann. Die Klasse User hat jedoch mehrere Eigenschaften. Klicken Sie auf die Klasse users, und wählen Sie die Eigenschaft @{lastName} für das Feld Label value aus, damit die entsprechenden Knoten die Nachnamen der Benutzer anzeigen.

      Anpassungen für Knoten werden jeweils auf Klassenbasis vorgenommen. Das bedeutet, wenn in Ihrer Baumstruktur an mehreren Stellen Knoten auf Basis z. B. der Klasse User vorkommen, haben diese Knoten dieselben angepassten Optionen. Unabhängig davon, wie viele Verweise auf User Ihre Datenstruktur enthält, ist jedoch nur eine Klasse User vorhanden.
Baumstrukturkomponente in Registeranzeige

Ereignishandler konfigurieren und verwalten

Ereignishandler für die Faces Client-Komponenten werden über die Anzeige für Schnellbearbeitung geschrieben. Für die Datenraster- und Baumstrukturkomponenten können Sie die bereitgestellten Ereignishandler verwenden oder eigene, angepasste Ereignishandler schreiben. Es werden zwei Ereignishandler zur Verfügung gestellt:

Die Baumstruktur unterstützt auch verschiedene clientseitige Ereignisse, die unter Verwendung von JavaScript im Browser auftreten. Wenn Sie die gesamte Baumstrukturkomponente auswählen, können Sie in der Anzeige für Schnellbearbeitung die folgenden allgemeinen Ereignisse sehen, die in Scripts verwendet werden können, wenn in der Baumstruktur ein Knoten in irgendeiner Weise verändert wird:

onnodecollapse
Dieses Ereignis wird aufgerufen, wenn ein Knoten vom Benutzer ausgeblendet wird und gibt dem Entwickler die Möglichkeit, als Antwort eine beliebige Logik zu implementieren. Wenn für einen bestimmten Knoten bereits ein Ereignishandler für das Ereignis oncollapse definiert wurde, wird der Handler zuerst aufgerufen, bevor dieser Handler aufgerufen wird.
onnodeexpand
Dieses Ereignis wird aufgerufen, wenn ein Knoten vom Benutzer eingeblendet/erweitert wird und gibt dem Entwickler die Möglichkeit, als Antwort eine beliebige Logik zu implementieren. Wenn für einen bestimmten Knoten bereits ein Ereignishandler für das Ereignis onexpand definiert wurde, wird der Handler zuerst aufgerufen, bevor dieser Handler aufgerufen wird.
onnodehighlight
Dieses Ereignis wird aufgerufen, wenn ein Knoten vom Benutzer hervorgehoben wird und gibt dem Entwickler die Möglichkeit, als Antwort eine beliebige Logik zu implementieren. Beispielsweise das Ausführen einer Berechnung, das Aufrufen einer URL-Adresse oder das Ausführen von Änderungen auf einer Seite. Wenn für einen bestimmten Knoten bereits ein Ereignishandler für das Ereignis onhighlight definiert wurde, wird der Handler zuerst aufgerufen, bevor dieser Handler aufgerufen wird.
onnodeselect
Dieses Ereignis wird aufgerufen, wenn ein Knoten ausgewählt wird. Zum Auslösen dieses Ereignisses muss die Knotenauswahl aktiviert sein. Wenn für einen bestimmten Knoten bereits ein Ereignishandler für das Ereignis onselect definiert wurde, wird der Handler zuerst aufgerufen, bevor dieser Handler aufgerufen wird.
onnodeunselect
Dieses Ereignis wird aufgerufen, wenn ein zuvor ausgewählter Knoten abgewählt wird. Zum Auslösen dieses Ereignisses muss die Knotenauswahl aktiviert sein. Wenn für einen bestimmten Knoten bereits ein Ereignishandler für das Ereignis onnodeunselect definiert wurde, wird der Handler zuerst aufgerufen, bevor dieser Handler aufgerufen wird.
Wenn Sie in der Baumstruktur einen einzelnen Knoten auswählen, werden in der Anzeige für Schnellbearbeitung die folgenden lokalen Ereignisse angezeigt:
oncollapse
Dieses Ereignis wird aufgerufen, wenn ein Knoten vom Benutzer ausgeblendet wird und gibt dem Entwickler die Möglichkeit, als Antwort eine beliebige Logik zu implementieren.
onexpand
Dieses Ereignis wird aufgerufen, wenn ein bestimmter Knoten vom Benutzer eingeblendet/erweitert wird und gibt dem Entwickler die Möglichkeit, als Antwort eine beliebige Logik zu implementieren.
onhighlight
Dieses Ereignis wird aufgerufen, wenn ein bestimmter Knoten vom Benutzer hervorgehoben wird und gibt dem Entwickler die Möglichkeit, als Antwort eine beliebige Logik zu implementieren. Beispielsweise das Ausführen einer Berechnung, das Aufrufen einer URL-Adresse oder das Ausführen von Änderungen auf einer Seite.
onselect
Dieses Ereignis wird aufgerufen, wenn der angegebene Knoten ausgewählt wird. Zum Auslösen dieses Ereignisses muss die Knotenauswahl aktiviert sein.
onunselect
Dieses Ereignis wird aufgerufen, wenn der angegebene Knoten abgewählt wird. Der Knoten muss zuvor ausgewählt worden sein, und zum Auslösen dieses Ereignisses muss die Knotenauswahl aktiviert sein.

Anpassungen für Knoten werden jeweils an der Klasse vorgenommen. Wenn Sie beispielsweise einen Ereignishandler für die Klasse User implementieren, wird dieses Ereignis in allen Vorkommen der Klasse User in der Baumstruktur angewendet.

Hinweise:

Darstellung bearbeiten

Wenn Sie die Darstellung und Funktionsweise (Look and Feel) der Baumstruktur anpassen wollen, bearbeiten Sie die CSS-Standarddatei (CSS, Cascading Style Sheet). Diese Datei hat den Namen tree.css. Die Datei steht in Ihrem Projekt im Projektexplorer unter /WebContent/theme/tree.css zur Verfügung.

Sie können nun mit Übung 3.4: Eine Diagrammkomponente hinzufügen beginnen.

Nutzungsbedingungen | Feedback
(C) Copyright IBM Corporation 2000, 2005. Alle Rechte vorbehalten.