< Zurück | Weiter >

Lerneinheit 5: Eine Webseite erstellen

In dieser Lerneinheit erstellen Sie eine Webseite in Form einer Faces-JSP-Datei. In der nächsten Lerneinheit werden Sie dieser Seite unter Verwendung der Datenabschnitte und Funktionen, die Sie in der vorherigen Lerneinheit erstellt haben, Daten hinzufügen. Wenn die Seite fertig gestellt ist, zeigt sie eine Liste eines jeden Datensatzes in der Datenbank an.

Informationen zu diesem Vorgang

In diesem Lernprogramm wird die JSF-Technologie (JSF = JavaServer Faces) verwendet. JSF stellt ein Gerüst für die Entwicklung von Benutzerschnittstellen für Webanwendungen bereit. Die Webseiten in JSF sind JavaServer Pages (JSPs). JSPs enthalten JavaServer-Steuerelemente, mit denen Sie Java-Code in die Seite einbetten und damit dynamische Inhalte bereitstellen können.

Die JSP-Datei aus einer Schablone erstellen

Informationen zu diesem Vorgang

So geht's

Vorgehensweise

  1. Klicken Sie in der Sicht 'Enterprise-Explorer' mit der rechten Maustaste auf den Ordner WebContent im Projekt 'EGLWeb' und klicken Sie auf Neu > Webseite. Es ist wichtig, den Ort auszuwählen, an dem Sie Ihre neuen Dateien ablegen möchten, da sonst die Dateien eventuell nicht an dem erwarteten Ort angezeigt werden. Das Fenster 'Neue Webseite' wird geöffnet.
  2. Im Feld Dateiname geben Sie diesen Dateinamen einschließlich der Erweiterung ein:
    allcustomers.jsp
  3. Vergewissern Sie sich, dass im Feld Ordner der Ordner /EGLWeb/WebContent aufgeführt wird.
  4. In der Liste Schablone erweitern Sie Beispielschablonen und klicken auf Familie A (keine Navigation). Die einfachen Webseitenschablonen in dieser Kategorie werden im Fenster Vorschau angezeigt.
  5. Im Fenster Vorschau klicken Sie auf die Schablone A_gray.htpl.
  6. Stellen Sie sicher, dass das Kontrollkästchen Seite mit Schablone verlinken ausgewählt ist.

    Das Fenster 'Neue Webseite' sieht wie folgt aus:

    Die Anzeige 'Neue Webseite'

  7. Klicken Sie auf Fertig stellen. Die neue Faces-JSP-Datei wird im Editor geöffnet.
  8. Klicken Sie auf Entwurf, um die Entwurfssicht im gesamten Editorfenster anzuzeigen. Möglicherweise wird rechts im Editorfenster die Sicht 'JSF-Trace' angezeigt. Eclipse erstellt diese Sicht standardmäßig, wobei Speicherplatz mit der Sicht 'Palette' und anderen Elementen gemeinsam genutzt wird. Sie benötigen die Sicht 'JSF-Trace' für dieses Lernprogramm nicht. Sie können sie schließen, indem Sie auf der Registerkarte auf X klicken.
    In der Sicht 'JSF-Trace' wird möglicherweise ein gelbes Dreieck zur Warnung angezeigt.
    In der Regel empfiehlt es sich, in dieser Sicht die Palette anzuzeigen. Möglicherweise müssen Sie auf den kleinen Doppelpfeil klicken und in einem Menü die Sicht 'Palette' auswählen:
    Auswahl der Sicht 'Palette'
  9. Entfernen Sie in der neuen Datei allcustomers.jsp den Standardtext "Inhalt der Seite hier platzieren" und ersetzen Sie ihn durch folgenden Text:
    Liste aller Kunden
  10. Drücken Sie die Eingabetaste drei mal, um Leerzeilen einzufügen. Diese Zeilen lassen Ihnen den Platz, in der nächsten Lerneinheit Inhalte zu dieser Seite hinzuzufügen.

    Die Seite sieht wie folgt aus:

    Aussehen der Seite

  11. Speichern Sie die Datei.

Vorschau der Webseite auf dem Server

Informationen zu diesem Vorgang

Noch befinden sich keine Daten aus der Datenbank auf der Webseite, aber Sie können die JSP-Datei auf dem Webanwendungsserver ausführen und sehen, wie die Seite bis dahin aussieht. Dies ist ein wichtiger Schritt. Er stellt sicher, dass der Anwendungsserver ordnungsgemäß funktioniert, bevor die Seite komplex wird.

Vorgehensweise

  1. Stellen Sie sicher, dass der Anwendungsserver gestartet wird. Der Servername sollte in der Sicht Server (befindet sich standardmäßig unter der Editorsicht) angezeigt werden. Nun sollten nach dem Servernamen in eckigen Klammern die Wörter Gestartet und Synchronisiert angezeigt werden. Wenn nicht, klicken Sie mit der rechten Maustaste auf den Servernamen und auf Start. Der Startvorgang dauert möglicherweise einige Minuten.
    WebSphere Application Server wird gestartet und synchronisiert.
  2. Erweitern Sie in der Sicht 'Enterprise-Explorer' bei Bedarf den Ordner EGLWeb/WebContent. Klicken Sie mit der rechten Maustaste auf die Datei allcustomers.jsp und klicken Sie auf Ausführen als > Auf Server ausführen. Das Fenster 'Neuen Server definieren' wird geöffnet.
  3. Wählen Sie im Fenster Neuen Server definieren Ihren Server aus.
  4. Wählen Sie das Kontrollkästchen Bei Ausführung dieses Projekts immer diesen Server verwenden aus.
    Der Server ist ausgewählt.
  5. Klicken Sie auf Fertig stellen.

Ergebnisse

Die Webseite wird in einem Web-Browser innerhalb der Workbench geöffnet. Die Seite sieht wie folgt aus:

Aussehen der Seite im internen Web-Browser

Wenn eine Fehlernachricht wegen einer nicht gefundenen Seite (HTTP 404) angezeigt wird, müssen Sie den Server erneut starten und das Browserfenster aktualisieren.

Wenn Sie vorziehen, einen externen Web-Browser zu verwenden, können Sie die URL aus dem Web-Browser innerhalb der Workbench kopieren und diese URL in das Adressfeld des externen Browsers einfügen.

Eclipse zeigt möglicherweise wieder die Sicht 'JSF-Trace' an. Sie können die Sicht dauerhaft entfernen. Blättern Sie dazu nach unten bis zum Link Nicht mehr öffnen und klicken Sie darauf.
Optionen für die Sicht 'JSF-Trace'.

Diese Seite enthält noch keine Daten. In der nächsten Lerneinheit werden Sie dieser Seite unter Verwendung von EGL Daten hinzufügen.

< Zurück | Weiter >

Feedback