Dynamische Informationen auf Webseiten mit JavaServer Faces anzeigen > Modul 1: Webseiten mit Datenverbindungen erstellen >
< Vorherige Lektion | Nächste Lektion >

Lerneinheit 1.2: Verbindung zu einer Datenbank herstellen und Daten auf einer Webseite anzeigen

In dieser Lerneinheit erfahren Sie, wie eine Verbindung zu einer Datenbank hergestellt wird und wie Datensätze auf einer Webseite angezeigt werden. Sie lernen darüber hinaus, wie Sie eine relationale Satzliste zu Ihrer Webseite hinzufügen.

Die Website in diesem Lernprogramm verwendet dynamische Webseiten mit JavaServer Faces-Komponenten, um auf eine Datenbank zuzugreifen und Informationen auf der Seite anzuzeigen. In diesem Lernprogramm werden relationale Datensätze und relationale Satzlisten verwendet, um die Daten in einer Datenbank darzustellen, so dass die Daten als Datentabelle oder gewöhnliche HTML-Tabelle auf der Seite dargestellt werden können. Java-Access-Beans werden von diesen Komponenten verwendet.

Weitere Informationen über Data-Access-Beans

Data-Access-Beans sind Java-Bean-Darstellungen von Enterprise-Beans. Sie werden normalerweise in Clientprogrammen verwendet, die JavaServer Pages-Dateien (JSP), Servlets oder Enterprise-Beans verwenden, die eine Schnittstelle zu anderen Enterprise-Beans darstellen. Access-Beans bewahren Sie vor der Komplexität der Verwaltung von Enterprise-Bean-Lebenszyklen. Dies bedeutet, dass Sie für Enterprise-Beans ebenso leicht wie für Java-Beans programmieren können, wodurch Ihre Clientprogramme auf Basis von Enterprise-Beans vereinfacht werden und Ihre Entwicklungszeit insgesamt reduziert wird.

Weitere Informationen über JavaServer Faces und Faces-Komponenten

JavaServer Faces ist eine Technologie, die Sie bei der Erstellung von Benutzeroberflächen für auf einem Server laufende dynamische Webanwendungen unterstützt. Das JavaServer Faces-Framework verwaltet den Status der Benutzerschnittstelle über Serveranfragen hinweg und bietet ein einfaches Modell für die Entwicklung serverseitiger Ereignisse, die durch den Client aktiviert werden. JavaServer Faces basiert auf einem Modell-Ansicht-Controller-Framework (MVC). Für JavaServer Faces bedeutet dies, dass der Controller ein Servlet ist, das Modell durch JavaBeans dargestellt wird und die Ansicht sich aus JavaServer Faces-Komponenten mit nur wenig oder gar keinem Anwendungscode zusammensetzt. Ziel dieses Modells ist es, Inhalte von der Darstellung zu trennen.

Tools wie beispielsweise Faces-Komponenten unterstützen Sie bei der Verwendung dieser Technologie für Ihre Webanwendungen. Zu den Faces-Komponenten gehört eine Bibliothek für angepasste JavaServer Page-Tags (JSP-Tags) zum Anzeigen einer JavaServer Faces-Schnittstelle innerhalb einer Seite. Dieser Assistent unterstützt Sie bei der Erstellung von JSP-Dateien, die aktiviert werden, um die Faces-Komponente zu verwenden. Über Faces-Komponenten können Sie eine Webanwendung entwickeln, indem Sie Komponenten aus einem Faces-Drawer in der Sicht "Palette" ziehen, und sie an die Webseite, die Sie gerade erstellen, übergeben.

Sie können beispielsweise ein Eingabetextfeld auf ein Formular in der Seite ziehen und übergeben. Als Nächstes können Sie eine Schaltfläche "Abschicken" neben das Eingabetextfeld ziehen und übergeben. Schließlich können Sie dann noch dieses Eingabetextfeld mit Ihrer Datenquelle verbinden. Hierdurch haben Endbenutzer dann die Möglichkeit, Daten von der Webanwendung in Ihre Datenquelle einzugeben.

Ein weiterer Vorteil von Anwendungen, die mit Faces-Komponenten erstellt wurden, besteht darin, dass die Benutzerschnittstelle unabhängig von der zugrundeliegenden Programmlogik wiedergegeben wird. Dies bedeutet, dass Ihre Anwendungen auf unterschiedlichen Plattformen wie z.B. Browsern oder Handheld-Geräten laufen und auf Daten zugreifen können.
Ablagefach 'Erweiterte Faces-Komponenten' der Palette.

Eine relationale Satzliste hinzufügen

In dieser Lerneinheit 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.
  • Relationale Datensätze stellen eine Verbindung zu einem einzigen Datensatz in einer Datenbank her. In diesem Fall stellt ein relationaler Datensatz eine einzige Kleinanzeige aus der Beispielsdatenbank dar. Ein relationaler Datensatz wird verwendet, um einen neuen Satz zu erstellen, einen bestehenden Satz zu bearbeiten oder einen älteren Satz zu löschen.
  • Relationale Satzlisten stellen Verbindungen zu mehreren Datensätzen einer Datenbank her. In diesem Fall stellt eine relationale Satzliste zwei bis alle Kleinanzeigen aus der Beispielsdatenbank dar.
  • Datentabellen zeigen die Daten aus einer relationalen Satzliste auf der Seite an. Datentabellen bestimmen lediglich einen Bereich für die Satzlisten. Sie formatieren die Daten nicht zu Zeilen und Spalten, wie dies bei HTML-Tabellen der Fall ist.
    Weitere Informationen über Datentabellen

    Eine Datentabelle ist eine Komponente auf einer Faces JSP-Seite, die Datenobjekte wie beispielsweise eine relationale Satzliste enthält.Obwohl es so aussieht, als hätte eine Datentabelle Zeilen und Spalten wie eine HTML-Tabelle, funktioniert sie nicht wie eine HTML-Tabelle. Wenn Sie Ein- und Ausgabesteuerungen wie in einer Tabelle formatieren möchten, müssen Sie ein Element 'Anzeige - Gruppenfeld' aus dem Ablagefach 'Erweiterte Faces-Komponenten' in der Palette verwenden. Dies wird in 'Übung 2.2: Datentabelle formatieren' behandelt.

    Da Datentabellen keine HTML-Komponenten, sondern Faces-Komponenten sind, werden sie über die Sicht 'Eigenschaften' gesteuert, nicht über die Sicht 'Page Designer'. In der Sicht 'Eigenschaften' können Sie eine Datentabelle auf verschiedene Arten anpassen:
    • Spalten hinzufügen, entfernen oder ihre Reihenfolge ändern
    • Text und Hintergrund formatieren
    • Kopfzeilen, Fußzeilen und Ränder hinzufügen
    • Seitenwechsel für Ergebnisanzeigen hinzufügen

Gehen Sie wie folgt vor, um eine neue relationale Satzliste zu erstellen:

  1. Erweitern Sie in der Sicht 'Projektexplorer' in der Perspektive 'Web' ClassifiedsTutorial > WebContent.
  2. Klicken Sie im Ordner 'WebContent' doppelt auf all_records.jsp. Die Datei 'all_records.jsp' wird im Editor geöffnet.
  3. Löschen Sie den Standardtext Standardinhalt des Hauptbereichs.
  4. Erweitern Sie in der Sicht 'Palette' das Ablagefach Daten.
  5. Ziehen Sie die Komponente Relationale Satzliste von der Palette in den leeren Inhaltsbereich. 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-Namenskonventionen 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 erstellt der Assistent die Standarddatentabelle, die Sie zu einem späteren Zeitpunkt anpassen. Das Fenster 'Relationale Satzliste hinzufügen' sollte wie folgt aussehen:
    Fenster 'Relationale Satzliste hinzufügen'

    Klicken Sie auf Weiter.

  8. Klicken Sie im Feld Verbindungsname auf der nächsten Seite des Assistenten auf Neu, um eine neue Datenbankverbindung zu erstellen. Der Dialog Neue JDBC-Verbindung wird geöffnet. Wählen Sie das Optionsfeld Neue Verbindung erstellen aus, und klicken Sie anschließend auf Weiter.
  9. Erweitern Sie in der Liste Datenbankmanager auswählen die Option Derby, und wählen Sie anschließend 10.1 aus.
  10. Klicken Sie im Feld 'Datenbankposition' auf Durchsuchen, und wählen Sie<arbeitsbereichsposition>\ClassifiedsTutorial\WebContent\\database aus, wobei <arbeitsbereichsposition> das Verzeichnis Ihres aktuellen Arbeitsbereichs ist. Klicken Sie auf OK, um das Fenster Nach Ordner durchsuchen zu schließen.
  11. Geben Sie im Feld Klassenposition die Position der JAR oder JARs ein, die die JDBC-Treiberklasse implementieren, oder klicken Sie auf Durchsuchen, um die Position in Ihrem Dateisystem auszuwählen. Nachdem Sie die Position der JAR-Dateien ausgewählt haben, klicken Sie auf Öffnen.
  12. Unter Umständen müssen Sie eine Benutzer-ID eingeben, um auf die Datenbank zuzugreifen. Ein Kennwort ist nicht erforderlich. Der Assistent 'Neue Datenbankverbindung' sollte folgendermaßen aussehen:
    Fenster 'Neue Datenbankverbindung'
  13. Klicken Sie im Assistenten 'Neue JDBC-Verbindung' auf Fertig stellen. Sie kehren zum Assistenten Relationale Satzliste hinzufügen zurück.
  14. Klicken Sie auf Datenbankverbindungen des Projekts konfigurieren. Das Fenster 'Eigenschaften der JDBC-Verbindungen' wird geöffnet.
  15. Klicken Sie auf Bearbeiten neben dem Abschnitt 'Details der Laufzeitverbindung'. Wählen Sie als Laufzeitverbindungstyp Treibermanagerverbindung verwenden aus. Klicken Sie auf Fertig stellen und anschließend auf OK, um zum Dialog 'Relationale Satzliste hinzufügen' zurückzukehren. Nachdem Sie nun eine Verbindung zur Datenbank 'Derby' 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.
  16. Erweitern Sie W5SAMPLE, und wählen Sie ADS aus. Klicken Sie auf Weiter. Auf den übrigen Seiten des Assistenten können Sie Spalten aus 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 erfahren Sie Näheres über diese Seiten.
    Dialog 'Relationale Satzliste hinzufügen'.
  17. Auf der Seite Relationalen Datensatz hinzufügen des Dialogs geben Sie die Spalten an, die in Ihrer relationalen Satzliste enthalten sein sollen. Klicken Sie auf Weiter.
  18. Für dieses Lernprogramm müssen Sie lediglich den Titel, die Beschreibung, die Kategorie, den Preis und die Telefonnummer der einzelnen Kleinanzeigen anzeigen. Standardmäßig sind alle Spalten ausgewählt. Klicken Sie, um alle Spalten mit Ausnahme der folgenden aus der Anzeige zu löschen:
    • HAUPTKATEGORIE: Zeichenfolge
    • TITEL: Zeichenfolge
    • BESCHREIBUNG: Zeichenfolge
    • PREIS: BigDecimal
    • TELEFONNUMMER: Zeichenfolge
  19. Sie können die Organisation der Anzeige der Datentabelle auf Ihrer Webseite weiter präzisieren. Sie können die Reihenfolge der Spalten ändern, indem Sie eine Spalte auswählen und auf die Auf- und Abwärtspfeile klicken, bis sich die Spalte an der gewünschten Position befindet.
    Arrangieren Sie die Spalten in der folgenden Reihenfolge:
    • TITEL
    • BESCHREIBUNG
    • HAUPTKATEGORIE
    • PREIS
    • TELEFONNUMMER
    Klicken Sie auf Fertig stellen.
    Ihre Webseite sieht nun folgendermaßen aus:
    Momentanes Aussehen der Seite.
  20. Speichern Sie die Seite.
In der nächsten Lerneinheit erfahren 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 behandelt. Sie können auch alleine die Sicht 'Eigenschaften' nach den verschiedenen JavaServer Faces-Komponenten auf der Seite durchsuchen (z.B. die Datentabelle und die einzelnen Ausgabekomponenten).

Prüfpunkt für die Lerneinheit

Sie haben Lerneinheit 1.2 abgeschlossen. In dieser Lerneinheit haben Sie gelernt, wie Sie eine Verbindung zu einer Datenbank herstellen und Datensätze über eine relationale Satzliste auf einer Webseite anzeigen können.

< Vorherige Lektion | Nächste Lektion >