{TWBSCR} {TWBSCR}

Übung 2.5: Daten binden und deren Darstellung anpassen

Bevor Sie mit dieser Übung beginnen, müssen Sie zuerst Übung 2.4: Die Datenrasterkomponente konfigurieren ausführen.

Daten binden und die Darstellung anpassen

Sie wollen im Datenraster Portfoliopositionen (die erworbenen Aktien) anzeigen, sodass der Benutzer den Inhalt eines gegebenen Portfolios ansehen, die Daten durchblättern und sortieren und die Anzahl bearbeiten kann, um einfache Analyseoperationen auszuführen.

  1. Navigieren Sie in der Clientdatensicht zum Knoten root.users.portfolios.positions, und ziehen Sie ihn auf das Datenraster in der Entwurfssicht. Das Datenraster wird für alle Felder für die Klasse Position automatisch zur Anzeige von Basisdaten konfiguriert.
    Gebundenes Datenraster
  2. Stellen Sie sicher, dass das Datenraster ausgewählt ist, und klicken Sie anschließend in der Eigenschaftensicht unter 'odc:dataGrid' auf die Registerkarte Spalten, um die Spalten anzupassen. Sie können die Anordnung der Spalten ändern, indem Sie die Schaltflächen mit Auf- bzw. Abwärtspfeil verwenden. Sie können über die Schaltflächen für Hinzufügen und Entfernen auch Spalten hinzufügen bzw. entfernen. Wenn Sie eine Zeile auswählen, können Sie eine Bezeichnung, die Breite und einen Wert für die Spaltenüberschrift angeben. Standardmäßig wird der Wert des Attributs als Überschrift verwendet.
    Führen Sie für diesen Lerntext Folgendes aus:
    1. Entfernen Sie das Attribut refNum.
    2. Ordnen Sie die Spalten in einer für Sie sinnvollen Reihenfolge um.
    3. Geben Sie eindeutigere Spaltenüberschriften an.
  3. Wählen Sie im Datenraster eine beliebige Zelle aus, und wählen Sie in der Eigenschaftensicht die Registerkarte Spaltendetails aus. Der Inhalt der Registerkarten in der Eigenschaftensicht ist dynamisch und wird automatisch aktualisiert, um die ausgewählte Spalte darzustellen. Auf der Registerkarte 'Spalten' können Sie Folgendes ausführen:Führen Sie für diesen Lerntext Folgendes aus:
    1. Wählen Sie für Anzahl, Preis, Kaufdatum Rechtsausrichtung aus.
    2. Wählen Sie für Anzahl Spalteninhalt kann bearbeitet werden aus.
  4. Sie können auch die Darstellungsweise der einzelnen Spalten konfigurieren. Wenn Sie auf die Registerkarte Spaltendetails klicken, wird eine Liste Format mit vier Auswahlmöglichkeiten angezeigt:Führen Sie für diesen Lerntext Folgendes aus:
    1. Legen Sie die Spalte Kaufdatum als Datum/Uhrzeit fest. Wenn Sie ein Datum in einem Datenraster anzeigen, ist es wichtig, dass Sie die Spalte wirklich als Datum formatieren. Andernfalls wird die Anzahl Millisekunden seit dem 1. Januar 1970, 00:00:00 GMT angezeigt, da dies die interne Darstellung von Datenobjekten in Java oder JavaScript ist.
    2. Legen Sie die Spalten Preis und Anzahl als Nummer fest.

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:

  1. Ausgewähltes Objekt als Root in Zielkomponente festlegen - Dieser Handler nimmt das im aktuellen Steuerelement ausgewählte Objekt (optional einen bestimmten Verweis in diesem Objekt) und macht es zum Stammobjekt im Zielsteuerelement. Für diesen Ereignishandlertyp kann als Zielsteuerelement eine beliebige Faces Client-Komponente außer Web-Service verwendet werden sowie die von Faces Client unterstützten JavaServer Faces-Standardkomponenten, die an denselben Objekttyp gebunden sind wie das Steuerelement, von dem das Ereignis stammt. Die Liste der möglichen Zielsteuerelemente wird in dem angezeigten Konfigurationsdialog angezeigt. Verwenden Sie diesen Ereignishandler, wenn das in der Baumstruktursicht (Quelle) ausgewählte Objekt bestimmen soll, was im Datenraster (Ziel) angezeigt wird. Dieser Handler ändert keine Datenwerte aus der Datenquelle, er legt jedoch fest, was im ausgewählten Steuerelement angezeigt wird.
  2. Ausgewähltes Objekt an anderes Objekt binden - Dieser Handler nimmt den Wert des ausgewählten Objekts (optional einen bestimmten Verweis in diesem Objekt) und bindet ihn an ein anderes Datenobjekt. Dieser Ereignishandler legt in einem Datenobjekt gespeicherte Datenwerte fest, beispielsweise eine JavaBean, einen relationalen Datensatz usw. Wenn beispielsweise im Portfolio-Beispiel von Faces Client ein Benutzer eine bestimmte Aktie im Datenraster auswählt, werden die Werte der Felder in diesem Aktienobjekt (stock) in das Datenobjekt placeHolderStock kopiert, das später als Eingabeparameter für den Web-Service verwendet wird. Der Handler ändert die in diesem Objekt gespeicherten Werte.

Wenn Sie das Datenraster ausgewählt haben, werden in der Anzeige für Schnellbearbeitung die folgenden Ereignisse angezeigt:

onhighlight
Dieses Ereignis wird aufgerufen, wenn eine Zeile 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 eine Zeile ausgewählt wird. Zum Auslösen dieses Ereignisses muss die Zeilenauswahl aktiviert sein.
onunselect
Dieses Ereignis wird aufgerufen, wenn eine Zeile abgewählt wird. Die Zeile muss zuvor ausgewählt worden sein, und zum Auslösen dieses Ereignisses muss die Zeilenauswahl aktiviert sein.

Hinweis: Wenn Sie in der Anzeige für Schnellbearbeitung ein Ereignis auswählen und in die Codeanzeige klicken, sehen Sie einige Kommentare, die den Zweck des Ereignisses und vor allem seine Parameter sowie den erwarteten Rückgabetyp und Wert beschreiben.

Darstellung bearbeiten

Wenn Sie die Darstellung und Funktionsweise (Look and Feel) des Datenrasters anpassen wollen, bearbeiten Sie die CSS-Standarddatei (CSS, Cascading Style Sheet). Diese Datei hat den Namen datagrid.css. Die Datei steht in Ihrem Projekt im Projektnavigator unter /WebContent/theme/datagrid.css zur Verfügung. Weitere Informationen zur Darstellung von Komponenten unter Verwendung von Style-Sheets.

Sie können nun mit Übung 2.6: Auf dem Server testen beginnen.

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