{TWBSCR} {TWBSCR}

Übung 3.4: Eine Diagrammkomponente hinzufügen

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

Die Diagrammkomponente einfügen und konfigurieren

  1. Fügen Sie die Diagrammkomponente ein:
    1. Stellen Sie sicher, dass Ihre JSP-Datei geöffnet ist. Wählen Sie in Ihrer Registeranzeige die Anzeige mit der Bezeichnung Diagramm aus.
    2. Öffnen Sie in der Palette die Ablage für Faces Client-Komponenten, indem Sie auf die Ablage klicken.
    3. Ziehen Sie die Diagrammkomponente in die Diagrammanzeige in der Entwurfssicht.
  2. Konfigurieren Sie die Eigenschaften für die Diagrammkomponente. Die Diagrammkomponente ist eine sehr intelligente Komponente, die Macromedia Flash-Technologie verwendet. Sie verhält sich wie die anderen Faces Client-Komponenten, die Sie bisher kennen gelernt haben. Der Unterschied liegt darin, dass im Browser intern anstelle von JavaScript und DHTML die Macromedia Flash-Technologie zur Darstellung verwendet wird. Daher können Sie im Diagrammsteuerelement viele Datenserien konfigurieren und zwischen Kreis-, Balken und Kurvendiagrammen auswählen, obwohl das Steuerelement kein besonders anspruchsvolles ist. Legen Sie für diesen Lerntext die folgenden Eigenschaften fest:
    1. Stellen Sie sicher, dass die Breite und Höhe der Registeranzeige bereits auf 700 Pixel bzw. 250 Pixel festgelegt wurden. Diese Abmessungen gelten für den gesamten Diagrammbereich, einschließlich Legenden und den Titel.
    2. Wählen Sie auf der Registerkarte odc:graphDraw alle Markierungsfelder für die Eigenschaft Diagramme anzeigen aus, um alle drei verfügbaren Diagrammtypen (Kreis, Balken, Kurve) zu aktivieren.
    3. Wählen Sie Balken im Feld Anfangs anzeigen aus.
    4. Wählen Sie das Markierungsfeld Legende anzeigen aus.
    5. Geben Sie Portfolio als Diagrammtitel ein.
    6. Geben Sie unter den Anzeigeoptionen auf der linken Seite der Sicht Eigenschaften den Wert Aktien für Anzeigeoptionen für x-Achse ein.
    7. Geben Sie Dollar für Anzeigeoptionen für y-Achse ein.
  3. Binden Sie die Daten an die Diagrammkomponente. Die Diagrammsteuerung verwendet Daten als eine oder mehrere Serien mit derselben x-Achseninformation. Dies kann am besten mit einer Tabelle verdeutlicht werden. Angenommen, Sie haben eine Datenstruktur, die eine Liste mit Informationsdatensätzen über den Kauf von Aktien ist. Jedes Objekt hat drei Attribute: den Namen der Aktie, die gekaufte Anzahl Aktien und den Kaufpreis. Sie können die Daten wie folgt darstellen:

    Aktie

    Anzahl

    Preis

    IBM

    100

    58

    IBM2

    250

    130

    IBM3

    1000

    100

    IBM4

    500

    82

    Um dies grafisch darzustellen, benötigen Sie zuerst die Liste selbst als Ankerpunkt. Dann müssen Sie festlegen, welche Spalte als X-Achse verwendet werden soll und schließlich die einzelnen Spalten angeben, die jeweils die einzelnen Datenserien darstellen sollen. Wenn Sie beispielsweise die vier Aktienkäufe grafisch darstellen und die Informationen zu Anzahl und Preis nebeneinander anzeigen wollen, würden Sie die Spalten "Anzahl" und "Preis" als Datenserien angeben.

    Für diesen Lerntext stellen Sie den Inhalt eines Portfolios grafisch dar, binden die Eigenschaft 'positions' und zeichnen nebeneinander den aktuellen Wert der einzelnen Aktien und die erworbene Anzahl ein.

    1. Ziehen Sie in der Clientdatensicht den Knoten root.users.portfolios.positions auf das Diagrammsteuerelement.
    2. Wählen Sie in der Entwurfssicht das Diagrammsteuerelement aus.
    3. Wählen Sie auf der Registerkarte der x-Achsenwerte in der Sicht Eigenschaften die Eigenschaft symbol als x-Achsendaten aus.
    4. Klicken Sie auf die Registerkarte y-Achsenwerte in der Sicht Eigenschaften. Hier werden Sie die Datenserie hinzufügen.
    5. Klicken Sie auf die Schaltfläche Serie hinzufügen, und konfigurieren Sie die einzelnen Datenserien. Wählen Sie für diesen Lerntext im Fenster Serie hinzufügen im Pulldown-Menü den Wert price aus. Ändern Sie das Feld Serienname in Preis. Gehen Sie anhand dieser Schritte vor, um auch eine Datenserie für quantity (Anzahl) zu erstellen.
    6. Geben Sie einen Namen für jede Serie ein, die im Diagramm als Bezeichnung angezeigt wird.

    Hinweis: Wenn Sie Daten mit doppelten Zeilen haben, beispielsweise mehrere Dateneinträge für eine bestimmte Aktie, können Sie ähnliche Datenelemente gruppieren, indem Sie das Markierungsfeld Gruppenwerte auswählen.

    Wenn Sie Werte gruppieren, müssen Sie die Funktion auswählen, die zum Zusammenstellen von zwei oder mehreren zu gruppierenden Datenelementen verwendet werden soll. Das System unterstützt Basisfunktionen wie sum, average, min, max, first und last. Wenn Sie nur zwei Datenserien haben, können Sie sie zusammen in einem Diagramm darstellen und ihre y-Achsenbezeichnungen auf beiden Seiten des Diagramms einzeichnen, sodass Sie eine linke und eine rechte y-Achse haben. Wählen Sie die Funktion SUM zum Gruppieren der Daten aus, da für dieselbe Aktie mehrere Einträge vorhanden sind. Wählen Sie in der Datenformatsanzeige das Format für die einzelnen Datenserien aus. Wenn Sie beispielsweise numerische Daten darstellen, ist es wichtig, dass Sie die Anzahl der anzuzeigenden Dezimalstellen angeben. Das Verhalten der Formatoptionen entspricht ihrem Verhalten für das Diagramm.

Diagrammkomponente in der Diagrammanzeige

Ereignishandler verwalten

Für die Diagrammkomponente sind keine Ereignisse vorhanden, da sie keine Benutzereingaben zulässt. Alle Anzeigenereignisse werden intern von der Flash-Steuerung verwaltet. Die Diagrammkomponente reagiert nur auf andere Seitenereignisse und aktualisiert jeweils ihre Anzeige.

Style-Sheets für die Darstellung bearbeiten

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

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

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