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.
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.
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.
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.
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.
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 laufen gelassen. 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.
Das Fenster sollte folgendermaßen aussehen:
Die Daten werden jetzt nach Kategorien sortiert. Sie können die Sortierung nach einer beliebigen Spalte in der Datenbank vornehmen.
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.
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.
Wenn Sie möchten, können Sie mit den verschiedenen Darstellungen von Pagern und der Seitenstatistikkomponente experimentieren, um die Seite optimal anzupassen.
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.
In einem Listengruppenfeld werden die dorthin gestellten Komponenten in einer einzelnen Spalte oder Zeile angeordnet und können entweder vertikal oder horizontal ausgerichtet werden.
Ihre Seite sollte nun folgendermaßen aussehen:
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.
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.
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.
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.
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.
Die Seite sollte folgendermaßen aussehen:
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.
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.
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:
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.