< Vorherige Lektion | Nächste Lektion >

Lerneinheit 2.1: Datentabelle formatieren

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 einen Pager, Darstellungsregeln und Bilder der zum Verkauf angebotenen Artikel hinzufügen.

Spaltenheader umbenennen

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 Sicht 'Enterprise-Explorer'
  2. Klicken Sie auf den Spaltenheader Hauptkategorie in der Datentabelle.
  3. Klicken Sie in der Sicht 'Eigenschaften' auf die Registerkarte h:outputText, und ändern Sie den Text im Feld Wert von 'Hauptkategorie' zu Kategorie.
  4. Wenn Sie möchten, können Sie auch die anderen Spalten umbenennen.
  5. Speichern Sie die Seite.

Ausgabekomponenten formatieren

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. Suchen Sie in der Sicht 'Eigenschaften' die Dropdown-Liste Typ, und wählen Sie Währung aus. 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 Sicht 'Eigenschaften' nicht aufgeführt ist, wie beispielsweise Telefonnummern.
  3. Speichern Sie die Seite.

Die Daten sortieren

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 Sicht 'Seitendaten' (Fenster > Sicht anzeigen > Seitendaten), und klicken Sie im Kontextmenü auf Konfigurieren. Das Fenster Relationale Satzliste konfigurieren wird geöffnet. Wenn eine Warnmeldung angezeigt wird, in der Sie darauf hingewiesen werden, dass keine Verbindung zur Datenbank hergestellt werden konnte, 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 Website testen beschrieben wird.
  2. Wählen Sie Vorhandenen Datensatz oder Satzliste aus Bereich abrufen und Metadatendefinition aus einem vorhandenen Datensatz oder Satzliste wiederverwenden aus, und klicken Sie anschließend auf Weiter.
  3. Klicken Sie im nächsten Fenster, um ADS auszuwählen, und klicken Sie anschließend auf Weiter.
  4. Klicken Sie auf der rechten Seite des nächsten Fensters auf Ergebnisse sortieren. Hierdurch wird das Fenster 'Reihenfolge' geöffnet.
  5. Klicken Sie im Teilfenster 'Verfügbare Spalten' auf 'HAUPTKATEGORIE'.
  6. Klicken Sie auf die Schaltfläche >, um die Spalte 'HAUPTKATEGORIE' in das Teilfenster 'Sortieren nach' zu versetzen. Das Fenster sollte wie folgt aussehen:
    Registerkarte 'Sortieren nach' des Fensters 'Relationale Satzliste konfigurieren'.
  7. Klicken Sie auf Schließen, um das Fenster 'Reihenfolge' zu schließen.
  8. Klicken Sie auf Fertig stellen, um die Änderungen 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

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 Sicht 'Eigenschaften' in der Liste der HTML-Tags auf der linken Seite der Sicht auf h:dataTableEx.
  3. Klicken Sie auf die Registerkarte Anzeigeoptionen unter h:dataTableEx.
  4. Geben Sie in das Feld Zeilen pro Seite den Wert 5 ein.
  5. Klicken Sie auf die Schaltfläche neben Web-Darstellungs-Pager hinzufügen. Unten in der Datentabelle wird ein Bild angezeigt, das demonstriert, 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

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 verwenden ein Gruppenfeld, um die Komponenten in ähnlicher Weise anzuordnen wie Sie es mit einer verdeckten HTML-Tabelle tun würden. 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. Klicken Sie in der Palette auf das Ablagefach 'Erweiterte Faces-Komponenten', um dieses zu öffnen. Ziehen Sie die Komponente Anzeige - Gruppenfeld in die Spalte 'TITEL' der Datentabelle. Das Fenster 'Typ auswählen' wird geöffnet.
  2. Wählen Sie im Fenster 'Typ auswählen' Fenster als Gruppenfeldtyp aus, und klicken Sie auf OK. In diesem Gruppenfeld 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 Sicht '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 Ablagefach 'Erweiterte 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 Sicht '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 'FOTO' von 'all_recordlist', indem Sie die Spalte 'FOTO' aus der Sicht 'Seitendaten' auf die Bildkomponente ziehen. Dadurch werden in der Bildkomponente die Bilddaten angezeigt, die sich in der Spalte 'FOTO' des jeweiligen Datensatzes befinden. Wenn die Spalte 'FOTO (ByteArray)' nicht aufgeführt ist, klicken Sie in der Sicht 'Seitendaten' mit der rechten Maustaste auf all_recordlist (ADS), und wählen Sie im Menü Konfigurieren aus. Klicken Sie auf OK, um das URL-Fenster zu schließen, wenn sich dieses öffnet. Klicken Sie im Fenster 'Relationale Satzliste konfigurieren' auf Weiter. Wählen Sie ADS aus, und klicken Sie auf Weiter. Klicken Sie, um das Feld neben FOTO (ByteArray) zu markieren, und klicken Sie anschließend auf Fertig stellen.
  10. Klicken Sie auf die Grafik, die Sie eingefügt haben. Klicken Sie auf der Registerkarte hx:graphicImageEx der Sicht 'Eigenschaften' auf die Schaltfläche Seitendatenobjekt auswählen neben dem Feld Typ. Das Fenster 'Seitendatenobjekt auswählen' wird geöffnet.
  11. Klicken Sie, um all_recordlist (Service Data Object) > all_recordlist (ADS) zu erweitern.
  12. Klicken Sie auf IMAGETYPE (String) (BILDTYP (Zeichenfolge)).
  13. Klicken Sie auf OK, und speichern Sie anschließend die Seite.
Ihre Seite sollte nun folgendermaßen aussehen:
Momentanes Aussehen der Seite.

Feinanpassung des Layouts mit einem Gruppenfeldraster ausführen

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 eine Komponente Anzeige - Gruppenfeld aus dem Ablagefach 'Erweiterte 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 Sicht '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 weist in der linken Zelle der Tabelle eine solche Bezeichnung auf.
  6. Klicken Sie auf die Ausgabekomponente (sie wird in Page Designer als outputText angezeigt), und ordnen Sie ihr über die Sicht 'Eigenschaften' den Wert Beschreibung: zu.
  7. Ziehen Sie die bereits vorhandene Komponente '{BESCHREIBUNG}' 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 Sicht 'Eigenschaften' den 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'. Ihre Seite sollte nun folgendermaßen aussehen:
    Momentanes Aussehen der Seite.
  13. Löschen Sie die leeren Spalten PREIS und TELEFONNUMMER aus der Datentabelle. Um eine Spalte zu löschen, klicken Sie auf die betreffende Spalte, und öffnen Sie die Sicht 'Eigenschaften'. Klicken Sie anschließend in der Liste der HTML-Tags im linken Bereich der Sicht auf h:dataTable, wählen Sie die jeweils zu löschende Spalte in der Liste im rechten Bereich der Sicht aus, und klicken Sie dann auf 'Entfernen'.
  14. Klicken Sie auf den Header der Spalte 'Beschreibung', und ändern Sie über die Sicht 'Eigenschaften' das Feld Wert in Details. Die Seite sollte nun folgendermaßen aussehen:
    Momentanes Aussehen der Seite.
  15. Speichern Sie die Seite und testen Sie sie. Wenn Sie mit der Ausführung von Anwendungen auf dem Server nicht vertraut sind, finden Sie unter Lerneinheit 1.3: Website testen weiterführende Informationen.
Wenn Sie die Seite testen, sollte Sie folgendermaßen aussehen:
Momentanes Aussehen der Seite während des Testens.

Anzeigen, denen keine Grafik zugeordnet ist, zeigen einen defekten Link an. In der nächsten Lerneinheit lernen Sie, wie Sie eine Komponente zum Hochladen einer Datei zur Seite hinzufügen, um die Grafik einer Anzeige hinzuzufügen oder zu ändern.

Prüfpunkt für die Lerneinheit

Sie haben Lerneinheit 2.1 abgeschlossen. In dieser Lerneinheit haben Sie gelernt, wie Sie Ihre Datentabelle auf verschiedene Arten formatieren können.
Sie haben Folgendes gelernt:
  • Spaltenüberschriften ändern.
  • Daten in der Tabelle sortieren.
  • Pager hinzufügen, um die Daten auf mehrere kleinere Webseiten aufzuteilen.
  • Gruppenfelder auf verschiedene Arten verwenden, um das Layout der Tabelle auf der Webseite zu ändern.
< Vorherige Lektion | Nächste Lektion >
Rückmeldung