Übung 2.2: Eine Datentabelle formatieren

Bevor Sie mit dem Formatieren der Datentabelle beginnen können, müssen Sie entweder das gesamte Modul 1: Webseiten mit Datenverbindungen erstellen oder Übung 2.1: Die erforderlichen Ressourcen importieren vollständig bearbeitet haben.

Die Datentabelle auf der Seite 'all_records.jsp' sieht eher zweckmäßig aus. Sie zeigt - wie beabsichtigt - alle Datensätze in der Datenbank und Verbindungen zu den anderen Seiten an, doch ist sie nicht besonders ansprechend. In dieser Übung werden Sie diese Datentabelle verbessern, indem Sie Elemente wie beispielsweise einen Pager, Darstellungsregeln und Bilder der zum Verkauf angebotenen Artikel hinzufügen.

Spaltenheader umbenennen

Anzeige

In vielen Fällen sollen die Spaltenheader in Ihrer Datentabelle nicht genau denselben Namen haben wie die Spalten aus der Datenbank. Anhand der folgenden Schritte können Sie die Spaltenheader der Datentabelle in besser geeignete Bezeichnungen umbenennen.

  1. Klicken Sie doppelt auf die Seite all_records.jsp in der Ansicht 'Projekt-Explorer'.
  2. Klicken Sie auf den Spaltenheader Hauptkategorie in der Datentabelle.
  3. Ändern Sie in der Ansicht 'Eigenschaften' den Text im Feld Wert von 'Hauptkategorie' in Kategorie.
  4. Wenn Sie möchten, können Sie auch die anderen Spalten umbenennen.
  5. Speichern Sie die Seite.

JSF-Ausgabekomponenten formatieren

Anzeige

Sie haben auch die Möglichkeit, die Ausgabekomponenten zu formatieren. Anhand der folgenden Schritte werden Sie die Ausgabekomponente {PREIS} so formatieren, dass sie nicht wie eine gewöhnliche Zahl, sondern wie ein Geldbetrag dargestellt wird.

  1. Klicken Sie auf die Ausgabekomponente {PREIS} auf der Seite.
  2. Ändern Sie in der Ansicht 'Eigenschaften' den Typ von Dezimal in Währung.
  3. Jetzt wird der Preis jedes Artikels nicht wie eine gewöhnliche Zahl, sondern wie ein Geldbetrag dargestellt.

    Für andere Datentypen wie beispielsweise Prozentsätze, Datums- und Zeitangaben stehen weitere Darstellungen und Formate zur Verfügung. Sie können das Format einer Ausgabekomponente auch anpassen, um einen Datentyp anzuzeigen, der in der Ansicht 'Eigenschaften' nicht aufgeführt ist, wie beispielsweise Telefonnummern.

  4. Speichern Sie die Seite.

Die Daten sortieren

Anzeige

Bisher sind die Daten in keiner bestimmten Reihenfolge angeordnet. Um den Benutzern eine übersichtlichere Liste von Kleinanzeigen zu bieten, können Sie die Datensatzliste nach Kategorien ordnen, sodass ähnliche Artikel zu einer Gruppe zusammengefasst werden.

  1. Klicken Sie mit der rechten Maustaste auf all_recordlist (ADS) in der Ansicht 'Seitendaten' und klicken Sie im Kontextmenü auf Konfigurieren. Das Fenster 'Datenliste konfigurieren' wird geöffnet.

    Wenn eine Warnmeldung erscheint, die Sie darauf hinweist, dass keine Verbindung zur Datenbank hergestellt werden konnte, dann haben Sie nach dem Testen der Website den Server nicht gestoppt. Sollte dies der Fall sein, klicken Sie in jedem Dialog auf 'Abbrechen' und stoppen Sie den Server, wie im Abschnitt Den Server stoppen in Übung 1.3: Die Website testen beschrieben wird.

  2. Klicken Sie in der Registerkarte Bedingungen dieses Fensters auf die Registerkarte Sortieren nach.
  3. Klicken Sie im Teilfenster 'Verfügbare Spalten' auf HAUPTKATEGORIE.
  4. Klicken Sie auf die Schaltfläche >, um die Spalte HAUPTKATEGORIE in das Teilfenster 'Sortieren nach' zu versetzen.

    Das Fenster sollte folgendermaßen aussehen:

    Fenster 'Datenliste konfigurieren'

  5. Klicken Sie auf Schließen, um die Sortierung anzuwenden.

    Die Daten werden jetzt nach Kategorien sortiert. Sie können die Sortierung nach einer beliebigen Spalte in der Datenbank vornehmen.

Einen Pager hinzufügen

Anzeige

Wenn nicht alle Datensätze in Ihrer Datentabelle gleichzeitig angezeigt werden sollen, können Sie auch einen Pager verwenden. Ein Pager teilt die Datensätze automatisch in Seiten einer festgelegten Größe ein, ohne in Ihrem Projekt neue JSP-Dateien zu erstellen.

  1. Klicken Sie auf eine beliebige Stelle in der Datentabelle.
  2. Klicken Sie in der Ansicht 'Eigenschaften' auf der linken Seite auf h:dataTable in der Liste der HTML-Tags.
  3. Klicken Sie in der Ansicht 'Eigenschaften' in der Tagliste auf der linken Seite auf Anzeigeoptionen.
  4. Geben Sie in das Feld Zeilen pro Seite den Wert 5 ein.
  5. Klicken Sie auf Web-Darstellungs-Pager hinzufügen. Unten in der Datentabelle erscheint ein Bild, das zeigt, wie der Pager aussehen wird.

    Die Darstellung des Pagers in Page Designer ist ein Platzhalterbild und gibt nicht genau wieder, wie viele Seiten tatsächlich angezeigt werden, da dies nur ermittelt werden kann, wenn die Seite in einem Browser geladen wird.

  6. Speichern Sie die Seite.

    Wenn Sie möchten, können Sie mit den verschiedenen Darstellungen von Pagern und der Seitenstatistikkomponente experimentieren, um die Seite optimal anzupassen.

Die Komponenten in einem Gruppenfeld als Liste anordnen

Anzeige

Wenn in jeder Spalte der Datentabelle nicht nur genau eine Ausgabekomponente angezeigt werden soll, können Elemente innerhalb von Spalten auch kombiniert werden, um das Layout ansprechender zu gestalten. Sie werden ein Gruppenfeld verwenden, um die Komponenten in ähnlicher Weise anzuordnen wie mit einer verdeckten HTML-Tabelle. Nachdem Sie zuvor die Bildkomponente hinzugefügt haben, um die Site grafisch zu verbessern, werden Sie nun den größten Teil der Textinformationen zu den einzelnen Kleinanzeigen jeweils in eine einzelne Datentabellenspalte stellen, die dann die Bezeichnung DETAILS erhält.

  1. Ziehen Sie die Komponente Anzeige - Gruppenfeld aus dem Drawer 'Faces-Komponenten' der Palette in die Spalte TITEL der Datentabelle. Das Fenster 'Typ auswählen' wird geöffnet.
  2. Wählen Sie Liste im Fenster 'Typ auswählen' als Gruppenfeldtyp aus und klicken Sie auf OK.

    In einem Listengruppenfeld werden die dorthin gestellten Komponenten in einer einzelnen Spalte oder Zeile angeordnet und können entweder vertikal oder horizontal ausgerichtet werden.

  3. Klicken Sie das Gruppenfeld an, um es auszuwählen.
  4. Ändern Sie in der Ansicht 'Eigenschaften' den Wert für Ausrichtung in Vertikal.
  5. Ziehen Sie die Komponente {TITEL} in das Listengruppenfeld. Der Anweisungstext im Gruppenfeld wird nicht mehr angezeigt, sobald Sie dem Feld eine Komponente hinzufügen.
  6. Ziehen Sie die Komponente Bild aus dem Drawer 'Faces-Komponenten' der Palette in das Listengruppenfeld. Es ist sinnvoll, das Bild am unteren Rand des Gruppenfelds zu übergeben, um sicherzustellen, dass das Bild unter dem Titel angeordnet wird.
  7. Klicken Sie auf die soeben hinzugefügte Bildkomponente.
  8. Stellen Sie im Bereich Größe in der Ansicht 'Eigenschaften' die Breite auf 60 Pixel und die Höhe auf 50 Pixel ein. Dadurch wird sichergestellt, dass die Bilder auf der Seite stets in der Größe 60x50 angezeigt werden, unabhängig davon, wie groß sie in der Datenbank sind.
  9. Binden Sie die Bildkomponente an die Spalte PHOTO von 'all_recordlist', indem Sie die Spalte PHOTO aus der Ansicht 'Seitendaten' auf die Bildkomponente ziehen. Dadurch werden in der Bildkomponente die Bilddaten angezeigt, die sich in der Spalte PHOTO des jeweiligen Datensatzes befinden.
  10. Klicken Sie in der Registerkarte 'Grundlagen' der Ansicht 'Eigenschaften' auf die Schaltfläche Seitendatenobjekt auswählen neben dem Feld Typ. Das Fenster "Seitendatenobjekt auswählen" wird geöffnet.
  11. Klicken Sie auf das Symbol +, um die relationale Satzliste 'all_recordlist' zu erweitern.
  12. Klicken Sie auf IMAGETYPE (String) (BILDTYP (Zeichenfolge)).
  13. Klicken Sie auf OK.
  14. Speichern Sie die Seite.

    Ihre Seite sollte nun folgendermaßen aussehen:

    Darstellung der aktuellen Seite

Die Komponenten in einem Gruppenfeld als Raster anordnen

Anzeige

Komponenten können in einem Gruppenfeld auch im Format einer Tabelle angeordnet werden. Ein Gruppenfeld vom Typ einer Liste kann lediglich eine Zeile oder Spalte haben, ein Gruppenfeld vom Typ eines Rasters hingegen kann eine beliebige Anzahl an Zeilen und Spalten enthalten. Anhand der folgenden Schritte werden Sie die Komponenten {PREIS} und {TELEFONNUMMER} in die Spalte BESCHREIBUNG der Datentabelle versetzen und entsprechende Bezeichnungen hinzufügen.

  1. Ziehen Sie die Komponente 'Anzeige - Gruppenfeld' aus dem Drawer 'Faces-Komponenten' der Palette in die Spalte BESCHREIBUNG der Datentabelle. Das Fenster 'Typ auswählen' wird geöffnet.
  2. Klicken Sie auf Raster als Typ der hinzuzufügenden Komponente und klicken Sie auf OK.
  3. Klicken Sie auf das neue Rastergruppenfeld.
  4. Stellen Sie in der Ansicht 'Eigenschaften' für die Anzahl der Spalten in diesem Gruppenfeld den Wert 2 ein.
  5. Ziehen Sie die Komponente Ausgabe aus dem Drawer 'Faces-Komponenten' der Palette in das Rastergruppenfeld.

    Diese Ausgabekomponente wird als Bezeichnung für die Beschreibung des zum Verkauf angebotenen Artikels dienen. Jede Ausgabekomponente wird in der linken Zelle der Tabelle solch eine Bezeichnung aufweisen.

  6. Klicken Sie auf die Ausgabekomponente (sie wird in Page Designer als outputText angezeigt) und ordnen Sie ihr über die Ansicht 'Eigenschaften' den Wert Beschreibung: zu.
  7. Ziehen Sie die bereits vorhandene Komponente {BESCHREIBUNG} der Seite zum unteren Rand des Rastergruppenfelds.

    Wenn Sie Schwierigkeiten haben, die Komponenten an die richtige Stelle im Gruppenfeld zu ziehen, versuchen Sie, die Maustaste gedrückt zu halten und den Cursor zu beobachten. Die Position des Cursors im Gruppenfeld zeigt an, wo die Komponente angezeigt wird, wenn Sie die Maustaste loslassen. Zum Zwecke dieser Übung sollten Sie die Maustaste loslassen, wenn sich der Cursor rechts neben der vorherigen Komponente befindet.

  8. Ziehen Sie eine weitere Ausgabekomponente aus der Palette und übergeben Sie sie rechts vom Gruppenfeld.
  9. Ordnen Sie ihr über die Ansicht 'Eigenschaften' den Wert Wert Preis: zu.
  10. Ziehen Sie die bereits vorhandene Ausgabekomponente {PREIS} rechts neben den Ausgabetext 'Preis'.
  11. Ziehen Sie in gleicher Weise eine neue Ausgabekomponente für die Bezeichnung der Komponente {TELEFONNUMMER} aus der Palette und geben Sie ihr die Bezeichnung 'Telefonnummer:'.
  12. Ziehen Sie die bereits vorhandene Komponente {TELEFONNUMMER} in das Rastergruppenfeld rechts neben den Ausgabetext 'Telefonnummer'. Die Seite sollte nun folgendermaßen aussehen:

    Darstellung der aktuellen Seite

  13. Ziehen Sie den bereits vorhandenen Hyperlink Eintrag aktualisieren in die Spalte BESCHREIBUNG, aber nicht innerhalb des Rastergruppenfelds.

    Am besten wird hierzu auf das Linksymbol selbst geklickt, die Taste gedrückt gehalten und das Symbol dann direkt unter das Rastergruppenfeld gezogen. Auf diese Weise werden sowohl die Textbezeichnung als auch das Linksymbol versetzt, und der Link bleibt funktionsfähig. Wenn nur der Link oder nur der Text versetzt wird, funktioniert der Link nicht mehr. Falls dies passiert, klicken Sie in der Menüleiste auf Bearbeiten > Rückgängig und probieren es erneut.

  14. Löschen Sie die leeren Spalten PREIS, TELEFONNUMMER und AKTUALISIEREN aus der Datentabelle.

    Um eine Spalte zu löschen, klicken Sie auf die betreffende Spalte und öffnen Sie die Ansicht 'Eigenschaften'. Klicken Sie anschließend in der Liste der HTML-Tags links in der Ansicht auf h:dataTable, wählen die jeweils zu löschende Spalte aus der Liste rechts in der Ansicht aus, und klicken auf Löschen.

  15. Klicken Sie auf den Header der Spalte 'Beschreibung' und ändern Sie über die Ansicht 'Eigenschaften' das Feld Wert in Details.

    Die Seite sollte folgendermaßen aussehen:

    Darstellung der aktuellen Seite

  16. Speichern Sie die Seite.

Style-Sheet-Regeln anwenden

Anzeige

Cascading Style Sheets (CSS) sind nicht nur eine der besten Möglichkeiten, die Darstellung und Funktionsweise (Look-and-Feel) einer Website zu steuern, sondern können auch zum Steuern der Darstellung und Funktionsweise einzelner JavaServer Faces-Komponenten verwendet werden. Im nächsten Abschnitt werden Sie mit Hilfe der im Projekt bereitgestellten CSS-Datei die Darstellung dieser Seite ändern. Sie werden insbesondere eine Regel auf die Spaltenheader und zwei Regeln auf die Zeilen anwenden, um einen alternierenden Farbeffekt zu erzielen, durch den sich die einzelnen Zeilen in der Datentabelle voneinander unterscheiden lassen.

  1. Wählen Sie die Datentabelle aus, indem Sie auf einen der Spaltenheader klicken.
  2. Klicken Sie in der Ansicht 'Eigenschaften' auf h:dataTable.
  3. Klicken Sie auf die Schaltfläche Alle Attribute oben rechts in der Ansicht 'Eigenschaften'.
  4. Klicken Sie unter Attributname auf den Eintrag headerClass. Diese Einstellung steuert, wie die Headerzeile der Datentabelle aussehen wird.
  5. Klicken Sie anschließend auf die Schaltfläche Klasse auswählen , die im Feld Wert neben headerClass angezeigt wird.

    Das Fenster 'Klasse auswählen' wird geöffnet und zeigt alle in den Style-Sheets des Projekts verfügbaren Darstellungen an. Derzeit befindet sich in diesem Projekt lediglich ein Style-Sheet.

  6. Erweitern Sie das Style-Sheet und klicken Sie auf .columnHeaderClass.
  7. Klicken Sie auf OK.

    Fenster 'Klasse auswählen'

  8. Klicken Sie als Nächstes auf den Eintrag rowClasses unter Attributname und klicken Sie dann auf die Schaltfläche Klassen auswählen im Feld Wert, um das Fenster 'Klassen auswählen' erneut zu öffnen. Mit der Option rowClasses wird gesteuert, wie die Zeilen in der Datentabelle aussehen werden.
  9. Erweitern Sie das Style-Sheet und wählen Sie diesmal die Regeln .rowClass1 und .rowClass2 aus, indem Sie beim Anklicken die Taste Strg gedrückt halten. Diese beiden Regeln haben unterschiedliche Farbschemata. Die Auswahl beider Regeln führt zu alternierenden Zeilenfarben.
  10. Klicken Sie auf OK.
  11. Speichern Sie zum Schluss Ihre Seite und führen Sie sie auf dem Testserver aus.

    Informationen dazu, wie Anwendungen auf dem Server ausgeführt werden, finden Sie in Übung 1.3: Die Website testen.

    Beim Test sollte die Seite folgendermaßen aussehen:

    Darstellung der aktuellen Seite

Jetzt kennen Sie ein paar Tricks, mit denen Sie einer Datentabelle ein ansprechenderes Aussehen geben können.

Sie können nun mit Übung 2.3: Die Komponente zum Hochladen von Dateien verwenden beginnen.

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