< 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 Daten-Parts 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.
Dieses Lernprogramm verwendet JSF-technologie (JavaServer Faces). JSF bietet ein Framework für die Entwicklung von Benutzerschnittstellen für Webanwendungen. Die Webseiten in JSF sind JavaServer Pages (JSPs). JSPs enthalten JavaServer-Steuerelemente, die Sie verwenden können, um Java-Code in die Seite einzubetten; damit können dynamische Inhalte realisiert werden.

Die JSP-Datei aus einer Schablone erstellen

  1. Klicken Sie in der Sicht 'Enterprise-Explorer' mit der rechten Maustaste auf den Ordner WebContent im Projekt 'EGLWeb' und klicken Sie dann 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 von Ihnen 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 Markierungsfeld 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 vollen Editorfenster anzuzeigen. Eventuell wird die Sicht 'JSF-Trace' rechts neben dem Editorfenster angezeigt. Eclipse erstellt diese Sicht standardmäßig und nutzt dabei Arbeitsbereich gemeinsam mit der Sicht 'Palette' und anderen Sichten. Sie benötigen die Sicht 'JSF-Trace' nicht für dieses Lernprogramm. Sie können sie schließen, indem Sie auf das X in der Registerkarte klicken.
    In der Sicht 'JSF-Trace' wird möglicherweise ein gelbes Warndreieck angezeigt.
    In der Regel möchten Sie die Palette in dieser Sicht anzeigen. Eventuell müssen Sie auf den kleinen Doppelpfeil klicken und die Sicht 'Palette' in einem Menü auswählen:
    Die Sicht 'Palette' auswählen.
  9. In der neuen Datei allcustomers.jsp entfernen Sie den Standardtext "Inhalt der Seite hier platzieren" und ersetzen ihn durch den 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

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; damit wird sichergestellt, dass der Anwendungsserver betriebsfähig ist und korrekt funktioniert, bevor die Seite kompliziert wird.
  1. Stellen Sie sicher, dass Ihr Anwendungsserver gestartet ist. Der Servername muss nun in der Sicht Server (befindet sich standardmäßig unterhalb der Sicht "Editor") angezeigt werden. Hinter dem Servernamen sollten die Wörter Gestartet und Synchronisiert in eckigen Klammern angezeigt werden. Falls nicht, klicken Sie auf den Servernamen und anschließend auf Start. Der Startvorgang kann einige Minuten dauern.
    Der WebSphere Application Server ist gestartet und synchronisiert
  2. Erweitern Sie den Ordner EGLWeb/WebContent in der Sicht 'Enterprise Explorer', falls erforderlich. Klicken Sie mit der rechten Maustaste auf die Datei allcustomers.jsp und anschließend 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 Markierungsfeld Diesen Server immer verwendne, wenn dieses Projekt ausgeführt wird.
    Der Server ist ausgewählt.
  5. Klicken Sie auf Fertig stellen.

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 HTTP-404-Fehlernachricht (Seite nicht gefunden) angezeigt wird, starten Sie den Server erneut und aktualisieren Sie das Browserfenster.

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 daraufhin möglicherweise wieder die Sicht 'JSF-Trace' an. Sie können die Sicht dauerhaft entfernen, indem Sie abwärts blättern bis zu einem Link mit dem Text Nicht erneut öffnen und auf diesen Link klicken.
Optionen für das Arbeiten mit der 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