Übung 1.2: Mit der relationalen Satzliste und Datentabellenkomponenten arbeiten

Bevor Sie beginnen, müssen Sie Übung 1.1: Die erforderlichen Ressourcen importieren abgeschlossen haben.

Die Website in diesem Lernprogramm verwendet dynamische Webseiten, um auf Datenquellen (wie beispielsweise Datenbanken) zuzugreifen und Informationen aus diesen Datenquellen auf der Seite anzuzeigen. In dieser Übung werden Sie die Seite all_records.jsp einrichten, um alle in der Datenbank enthaltenen Kleinanzeigen anzuzeigen. Im Laufe der nächsten Übungen werden Sie dann die anderen Seiten mit der Datenbank verbinden, so dass Benutzer neue Kleinanzeigen aufgeben, ältere Anzeigen bearbeiten und eine gefilterte Liste der Anzeigen darstellen können.

In diesem Lerntext werden zwei Komponenten verwendet, die Seiten unter Verwendung von Java Server Faces mit Datenbanken verbinden: relationale Datensätze und relationale Satzlisten. Diese Komponenten stellen die Daten in einer Datenbank dar, so dass die Daten auf der Seite als Datentabelle oder gewöhnliche HTML-Tabelle dargestellt werden kann. Diese Komponenten verwenden JavaBeans für den Datenzugriff; Weitere Informationen über Beans für den Datenzugriff oder Weitere Informationen über JavaServer Faces und Faces-Komponenten.

Eine neue relationale Satzliste erstellen

Anzeige

Mit diesen Schritten erstellen Sie eine relationale Satzliste, die alle Kleinanzeigen in der Datenbank darstellt. Danach stellen Sie eine Verbindung zur Datenbank her und wählen die Tabelle aus, die die Informationen enthält, die für die relationale Satzliste benötigt werden. Schließlich wird diese relationale Satzliste auf der Seite in einer Datentabelle angezeigt.

  1. Erweitern Sie in der Sicht 'Projekt-Explorer' Dynamische Webprojekte > ClassifiedsTutorial > WebContent.
  2. Klicken Sie im Ordner WebContent die Datei all_records.jsp doppelt an. Die Datei 'all_records.jsp' wird im Editor geöffnet.
  3. Löschen Sie den Standardtext Hier Inhalt einfügen.
  4. Klicken Sie in der Ansicht "Palette" auf den Drawer Daten, um ihn zu erweitern.
  5. Ziehen Sie die Komponente Relationale Satzliste von der Palette in den leeren Inhaltsbereich.

    Möglicherweise werden Sie aufgefordert, die Datei all_records.jsp zu speichern. Klicken Sie in diesem Fall auf OK.

    Das Fenster "Relationale Satzliste hinzufügen" wird daraufhin geöffnet.

  6. Geben Sie im Feld Name all_recordlist ein.

    Namen für relationale Satzlisten und relationale Datensätze müssen den standardmäßigen Java-Namenskonvention für Variablennamen entsprechen (sie dürfen beispielsweise keine Leerzeichen enthalten).

  7. Stellen Sie sicher, dass Datensteuerungen hinzufügen ausgewählt ist.

    Wenn Datensteuerungen hinzufügen ausgewählt ist, erstellt der Assistent eine Datentabelle, um die Satzliste auf der Seite anzuzeigen. Ansonsten erstellt der Assistent nur die Satzliste und keine Darstellung dieser Daten auf der Seite. Zunächst einmal muss der Assistent die Standard-Datentabelle erstellen, die Sie an späterer Stelle dann anpassen werden. Das Fenster "Relationale Satzliste hinzufügen" sollte folgendermaßen aussehen:

    Fenster 'Relationale Satzliste hinzufügen'

  8. Klicken Sie auf Weiter.
  9. Klicken Sie im Feld Verbindungsname auf Neu, um eine Datenbankverbindung zu erstellen.

    Der Dialog Neue Verbindung erscheint. Beachten Sie, dass das Feld Verbindungsname automatisch mit dem Namen ClassifiedsTutorial_Con1 ausgefüllt wird.

  10. Klicken Sie auf Neue DB-Verbindung erstellen. Das Fenster 'Neue Datenbankverbindung' wird angezeigt.
  11. Stellen Sie sicher, dass Einen Datenbankmanager und einen JDBC-Treiber auswählen ausgewählt ist, und klicken Sie anschließend auf Weiter.

Datenbankverbindungsinformationen angeben

Anzeige

Sie müssen der Satzliste mitteilen, wo sie die Daten findet, die Sie anzeigen möchten. Dies wird im Fenster Neue Datenbankverbindung vorgenommen. In diesem Fall geben Sie die Datenbank 'Cloudscape' an, die in der Datei enthalten war, die Sie in der vorherigen Übung importiert haben. Sobald diese Verbindung erstellt wurde, wird sie für die gesamte Website verwendet, so dass Sie diesen Schritt für diesen Lerntext nur einmal ausführen müssen.

  1. Geben Sie im Assistenten für neue Datenbankverbindungen den Datenbankmanager an:
    1. Erweitern Sie unter Neue Datenbankverbindung den Eintrag Cloudscape.
    2. Wählen Sie V5.1 aus.
  2. Geben Sie die Datenbankposition an:
    1. Klicken Sie auf die Schaltfläche Durchsuchen neben Datenbankposition.
    2. Durchsuchen Sie das folgende Verzeichnis:

      <arbeitsbereich>\ClassifiedsTutorial\WebContent\cloudscapesampledata\database

      Dabei ist <arbeitsbereich> das Verzeichnis mit dem Arbeitsbereich, in dem Sie momentan arbeiten.

    3. Wählen Sie den Ordner Datenbank aus, und klicken Sie auf OK.

    Sie brauchen keine Benutzer-ID und kein Kennwort anzugeben, um auf die Datenbank zuzugreifen. Der Assistent Neue Datenbankverbindung sollte folgendermaßen aussehen:

    Fester 'Neue Datenbankverbindung'
  3. Klicken Sie auf Fertig stellen, um den Assistenten für die neue Datenbankverbindung zu schließen.
  4. Klicken Sie im Assistenten für eine neue Verbindung auf Fertig stellen. Sie kehren zum Assistenten 'Relationale Satzliste hinzufügen' zurück.
  5. Nachdem Sie nun eine Verbindung zur Datenbank 'Cloudscape' hergestellt haben, müssen Sie eine Tabelle bzw. den Datensatz auswählen, der dargestellt werden soll. Der Assistent 'Relationale Satzliste hinzufügen' zeigt die Tabellen in der Datenbank an. Für einen Großteil dieses Lerntextes verwenden Sie die Tabelle W5SAMPLE.ADS.

  6. Klicken Sie auf die Tabelle W5SAMPLE.ADS im Feld Tabelle.

    Fenster 'Relationale Satzliste hinzufügen'

    In den übrigen Seiten des Assistenten können Sie Spalten von Ihrer Satzliste ausschließen und erweiterte Optionen ausführen, wie z.B. einen Primärschlüssel definieren, Beziehungen zu anderen Tabellen hinzufügen und Filter- und Sortierkriterien bestimmen. In späteren Übungen werden Sie mehr über diese Seiten erfahren.
  7. Klicken Sie auf Fertig stellen.

Standarddatentabelle optimieren

Anzeige

Die Seitendatenansicht zeigt nun eine Liste der Spalten in der ADS-Tabelle, und die Datei all_records.jsp enthält die Darstellung dieser Daten innerhalb einer Datentabelle. Für den Moment enthält die Standarddatentabelle zu viele Informationen. Für diesen Lerntext müssen Sie lediglich den Titel, die Beschreibung, die Kategorie, den Preis und die Telefonnummer jeder Kleinanzeige darstellen. Befolgen Sie diese Schritte, um die Datentabelle zu trimmen und zu reorganisieren:

  1. Klicken Sie irgendwo in der Datentabelle.
  2. Öffnen Sie die Ansicht "Eigenschaften".

    Die Ansicht "Eigenschaften" befindet sich normalerweise unten in der Mitte der Workbench. Wenn Sie die Ansicht "Eigenschaften" nicht finden können, klicken Sie in der Menüleiste auf Fenster > Ansicht anzeigen > Eigenschaften.

  3. Klicken Sie in der Ansicht "Eigenschaften" in der Liste der HTML-Tags auf der linken Seite der Ansicht auf h:dataTable.
  4. Klicken Sie auf der rechten Seite der Ansicht auf die Spalte ID unter Beschriftung und klicken Sie dann auf Entfernen. Die ID-Spalte wird von der Datentabelle entfernt.
  5. Wiederholen Sie diesen Vorgang, um jede Spalte in der Datentabelle außer den folgenden zu entfernen: TITEL (TITLE), BESCHREIBUNG (DESCRIPTION), HAUPTKATEGORIE (MAINCATEGORY), PREIS (PRICE) und TELEFONNUMMER (PHONE). Die Ansicht "Eigenschaften" sollte nun folgendermaßen aussehen:

    Ansicht 'Eigenschaften'

    Ihre Seite sollte nun so aussehen:

    Aktuelle Darstellung der Seite

    Die Reihenfolge der Spalten ist für eine Kleinanzeige nicht geeignet. Diese Reihenfolge ist etwas aussagekräftiger:

    1. TITEL
    2. BESCHREIBUNG
    3. HAUPTKATEGORIE
    4. PREIS
    5. TELEFONNUMMER
  6. Kehren Sie zur Liste der Spalten in der Ansicht "Eigenschaften" zurück, um die Reihenfolge der Spalten zu ändern. Klicken Sie auf die Beschriftung TITEL und dann auf Nach oben verschieben, bis sich TITEL am Kopf der Liste befindet. Die Spalte TITEL ist nun die erste Spalte der Datentabelle.
  7. Wählen Sie auf die gleiche Art die anderen Spalten nacheinander aus und ändern Sie die Reihenfolge. Der Abschnitt "Spalten" der Ansicht "Eigenschaften" sollte folgendermaßen aussehen:

    Spalten in Ansicht 'Eigenschaften'

  8. Speichern Sie die Seite.

    In der nächsten Übung (Übung 1.3: Die Website testen) sehen Sie, wie diese Seite auf einem echten Web-Server aussieht.

    Für die Formatierung von Datentabellen und JavaServer Faces-Komponenten gibt es viele Möglichkeiten. Einige dieser Optionen werden im nächsten Modul (Modul 2: Erweiterte Funktionen hinzufügen) behandelt. Sie können auch alleine die Ansicht "Eigenschaften" nach den verschiedenen JavaServer Faces-Komponenten auf der Seite durchsuchen (z.B. die Datentabelle und die einzelnen Ausgabekomponenten).

Sie sind nun bereit, um mit Übung 1.3: Die Website testen zu beginnen.

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