WTP-Lernprogramme - JavaServer Faces Tools-Lernprogramm
Zusammenfassung
In diesem Lernprogramm werden wir eine JavaServer-Faces-Anwendung builden und ausführen und die durch das Projekt 'JSF Tools' beigetragenen Funktionen hervorheben.
von Raghu Srinivasan, Oracle Corporation.
15. Juni 2009
Einführung
In diesem Lernprogramm werden wir eine Webanwendung mit JavaServer Faces-Funktionen erstellen und ausführen. Das WTP-Projekt 'JSF Tools' hat Funktionen zur Verfügung gestellt, die das Builden, Konfigurieren und Ausführen einer Anwendung vereinfachen. Dazu gehören der Webseiteneditor für die visuelle Bearbeitung einer JSF-JSP-Webseite, die syntaktische und semantische Prüfung einer JSF-JSP-Seite und der Faces-Konfigurationseditor für die Ressourcendatei zur Anwendungskonfiguration.
Sie können die Seite Eine Webanwendung builden und ausführen besuchen, bevor Sie dieses Lernprogramm ausführen. Das erwähnte Lernprogramm befasst sich mit der Konfiguration der Serverinstanz, mit der sich dieses Lernprogramm nicht befasst.
Konfiguration
Machen Sie den Webseiteneditor zum Standardeditor für JSP-Seiten
Der durch das Projekt 'JSF Tools' zur Verfügung gestellte Webseiteneditor (WPE) ist NICHT als Standardeditor für JSP-Dateien registriert. Sie können WPE als Standardeditor definieren, indem Sie die folgenden Schritte ausführen:
- Navigieren Sie zu 'Fenster' -> 'Benutzervorgaben...' -> 'Allgemein' ->
'Editoren' -> 'Dateizuordnungen'.
- Wählen Sie im Abschnitt 'Dateitypen' den Eintrag '*.jsp' aus.
- Wählen Sie im Abschnitt 'Zugeordnete Editoren' den Eintrag 'Webseiteneditor' aus.
- Klicken Sie auf die Schaltfläche 'Standard'.
Erstellen Sie ein JavaServer-Faces-Projekt
Erstellen Sie eine neue dynamische Webanwendung mit dem Namen JSFLernprogramm.
Setzen Sie die Ziellaufzeit auf Apache Tomcat 6.0
Im Abschnitt Konfiguration wählen Sie JavaServer Faces Project v1.2 aus. Überspringen Sie die beiden nächsten Anzeigen, um zur Seite 'JSF-Funktionalitäten' zu gelangen.

Wählen Sie auf der Seite 'JSF-Funktionalitäten' in der Dropdown-Liste für den Typ der JSF-Bibliothek die Option Benutzerbibliothek aus.

Klicken Sie auf das Symbol Bibliothek herunterladen.
Das Dialogfenster 'Bibliothek herunterladen' wird mit einer Liste von Providern (Anbietern) der JAR-Dateien für die JSF-Implementierung angezeigt. Wählen Sie die Bibliothek von Sun Microsystems aus. Klicken Sie auf Weiter. Akzeptieren Sie die Lizenzbedingungen und klicken Sie auf Fertig stellen.

Das Tool lädt die JAR-Dateien herunter, erstellt eine JDT-Benutzerbibliothek und fügt diese zum aktuellen Projekt hinzu. Wählen Sie das Kontrollkästchen für die neue Bibliothek aus, sofern diese nicht ausgewählt ist. Klicken Sie danach auf das Symbol Bibliotheken verwalten.
Erstellen Sie eine JDT-Benutzerbibliothek, in der die JSTL-JAR-Datei enthalten sein wird. Klicken Sie auf OK.
Die JSTL-Bibliothek wird im Dialogfenster 'JSF-Funktionalitäten' angezeigt. Wählen Sie die Bibliothek aus und klicken Sie auf Fertig stellen.
Ihre JSF-Anwendung wurde erstellt. Beachten Sie, dass die Datei 'web.xml' mit dem Faces-Servlet und der Servlet-Zuordnung aktualisiert worden ist, dass eine JSF-Anwendungs-Stub-Konfigurationsdatei (faces-config.xml) erstellt worden ist und dass der Buildpfad mit den Implementierungs-JARs aktualisiert worden ist.

Wenn Sie eine vorhandene dynamische Webanwendung haben, ist es möglich, JSF-Funktionalitäten hinzuzufügen, indem Sie
Projekteigenschaften > Projekt-Facetten> Projekt-Facetten hinzufügen/entfernen auswählen.
Erstellen Sie eine JSF-JSP-Seite
Verwenden Sie den Assistenten 'JSP-Seite', um eine Seite namens login.jsp
im Ordner mit Webinhalten der neuen Anwendung zu erstellen. Auf der Seite 'Schablonen auswählen' des Assistenten wählen Sie die Schablone Neue JSP(HTML) aus.
Klicken Sie auf 'Fertig stellen'. Die Seite wird wie unten dargestellt im Webseiteneditor geöffnet.

Öffnen Sie die Ansicht 'Eigenschaften'. Klicken Sie mit der rechten Maustaste auf den Designer-Zeichenbereich und wählen Sie aus dem Kontextmenü 'Anzeigen-'>'Eigenschaften' aus. Warten Sie, bis der Dialog 'Lesen der Eigenschaften' nicht mehr angezeigt wird.
Fügen Sie dem Zeichenbereich eine Befehlsschaltfläche hinzu.
- In der Ansicht Palette klicken Sie auf den Abschnitt JSF HTML, um eine Liste der Komponenten anzuzeigen.
- Ziehen und übergeben Sie die Befehlsschaltfläche in den Zeichenbereich. Beachten Sie, dass der Editor die Befehlsschaltfläche mit dem Tag <f:view> und <h:form> einbettet.
- In der Ansicht 'Eigenschaften' klicken Sie auf Schnellbearbeitung.
- Setzen Sie das Attribut Wert auf Login.
- Setzen Sie das Attribut Aktion auf login.
Ein Anzeigegitter hinzufügen
- Aus der Ansicht 'Palette' ziehen und übergeben Sie das Anzeigegitter in den Zeichenbereich. Beachten Sie das Feedback am Übergabeziel.
- Übergeben Sie das Anzeigegitter vor der Befehlsschaltfläche, aber innerhalb des Formulartags. Das Anzeigegitter wurde mit einer Gruppe vordefinierter Ausgabetextkomponenten erstellt.
Ändern Sie die Komponenten innerhalb des Anzeigegitters
- Klicken Sie auf 'Ausgabetext' Element2 und auf 'Löschen'.
- Fügen Sie ein Eingabetext-Tag (Texteingabe in der Ansicht 'Palette') nach Element1 und vor Element3 hinzu.
- Löschen Sie Ausgabetext, Element 4
- Fügen Sie ein Tag 'Geheime Eingabe' (Geheime Eingabe in der Ansicht 'Palette') nach Element3 hinzu.
- Klicken Sie auf 'Ausgabetext', Element1. Ändern Sie dessen Wert in der Ansicht 'Quelle' auf Name.
- Klicken Sie auf 'Ausgabetext', Element3. Ändern Sie dessen Wert in der Ansicht 'Quelle' auf Kennwort.
- Klicken Sie auf die Registerkarte Vorschau, um die Seitenwiedergabe in einem Browser anzuzeigen.
- Klicken Sie auf das Tag 'Eingabetext' neben Name. In der Ansicht 'Eigenschaft' setzen Sie das Attribut 'Wert' auf #{loginBean.name}.
- Speichern Sie die Seite. Der Editor markiert eine Warnung, die angibt, dass die Variable loginBean nicht aufgelöst werden kann.
Im Projektexplorer erweitern Sie den Knoten 'JSFLernprogramm->Webinhalt'.
Doppelklicken Sie auf faces-config.xml. Hierdurch wird der Faces-Konfigurationseditor gestartet. Wählen Sie die Registerkarte Verwaltete Bean aus.
Klicken Sie auf die Schaltfläche
Hinzufügen. Hierdurch wird der Assistent 'Neue verwaltete Bean' gestartet. Wählen Sie die Option Neue Java-Klasse erstellen aus. In der nächsten Anzeige des Assistenten geben Sie das Paket als com.tutorial und den Namen der Klasse als LoginBean ein. Klicken Sie auf die Schaltfläche 'Fertig stellen'.
Hierdurch wird die Java-Klasse erstellt und als eine verwaltete Bean registriert. Speichern Sie den Faces-Konfigurationseditor. Um die Java-Klasse zu bearbeiten, klicken Sie auf den Hyperlink Verwaltete Beanklasse auf der Seite 'Verwaltete Bean', wie in der folgenden Abbildung gezeigt wird. Hierdurch wird der Java-Editor gestartet.
Bearbeiten Sie die Java-Klasse com.tutorial.LoginBean. Fügen Sie den folgenden Code hinzu und speichern Sie.
In der Ansicht 'Projektexplorer' klicken Sie mit der rechten Maustaste auf die JSP-Seite login.jsp und wählen im Kontextmenü die Option Prüfen aus. Beachten Sie, dass die Seite nun gültig sein sollte.
Auf der Seite 'Quelle' des Webseiteneditors fügen Sie das JSF-Tag
<h:inputSecret value="#{}"></h:inputSecret>
hinzu. Wenn der Cursor innerhalb der Klammern positioniert ist, betätigen Sie Strg+Leertaste. Es sollte ein Dialogfenster mit einer Liste aller impliziten Objekte und der oben definierten verwalteten Bean angezeigt werden. Wählen Sie die verwaltete Bean loginBean aus.
Geben Sie den Namen einer Eigenschaft ein, z.B. 'x', die nicht in der verwalteten Bean definiert ist und speichern Sie die Änderung. Der Editor wird die Warnung ausgeben, dass die Eigenschaft nicht aufgelöst werden kann.
Löschen Sie die ungültige Eigenschaft. Betätigen Sie Strg+Leertaste
nach dem
'.'
im Bean-Namen. Es sollte ein Dialogfenster mit einer Auflistung der in der verwalteten Bean definierten Eigenschaften angezeigt werden. Wählen Sie im Menü Kennwort aus.
Erstellen Sie eine Java-Klasse com.tutorial.validatePassword,
die die Schnittstelle Prüfprogramm implementiert und speichern Sie.
Im Projektexplorer erweitern Sie den Knoten 'JSFLernprogramm->Webinhalt'.
Doppelklicken Sie auf faces-config.xml. Hierdurch wird der Faces-Konfigurationseditor gestartet. Wählen Sie die Registerkarte
Komponente aus. Erweitern Sie den Abschnitt Prüfprogramme.
Klicken Sie auf die Schaltfläche
Hinzufügen. Wählen Sie die Schaltfläche Durchsuchen aus, die dem Feld Prüfprogrammklasse zugeordnet ist und wählen Sie die Klasse com.tutorial.ValidatePassword aus. Speichern Sie die Änderungen.
Fügen Sie das JSF-Tag <f:validator id=""></f:validator >
hinzu. Wenn der Cursor innerhalb der Anführungszeichen steht, betätigen Sie Strg+Leertaste
. Es sollte ein Dialogfenster mit einer Liste aller Standardprüfprogramme und dem in der Datei 'faces-config' registrierten angezeigt werden. Wählen Sie Kennwort prüfen aus.
Wir werden nun die statischen Zeichenfolgen, die wir auf der Seite verwendet haben, in ein Ressourcenpaket verschieben. Dazu fügen Sie eine Datei namens messages.properties
im Ordner com.tutorial hinzu. Definieren Sie die Eigenschaften wie unten gezeigt und speichern Sie die Datei.
Fügen Sie das JSF-Tag loadBundle, wie unten gezeigt, hinzu. Sie können das Tag aus dem Abschnitt JSF-Kern in der Ansicht 'Palette' ziehen und übergeben.
Löschen Sie die Zeichenfolge Name
im Wertattribut des Tags outputLabel. Setzen Sie den Cursor zwischen die Klammern und drücken Sie die Tastenkombination Strg+Leertaste. Es sollte ein Dialogfenster mit einer Liste angezeigt werden, die die Variable msg
enthält, die Sie im Tag loadBundle definiert haben. Wählen Sie diese aus.
Geben Sie nach msg einen Punkt ein und drücken Sie die Tastenkombination Strg+Leertaste. Es sollte ein Dialogfenster mit einer der in der Datei messages.properties
definierten Eigenschaften angezeigt werden. Wählen Sie die Eigenschaft Name aus.
Vervollständigen Sie die Anmeldeseite, wie unten gezeigt.
Erstellen Sie eine neue JSF-Seite welcome.jsp, wie unten gezeigt.
Ressourceneditor für Faces-Konfiguration
Das Projekt 'JSF Tools' beinhaltet einen speziellen Editor für die Ressourcendateien für Faces-Konfiguration. Der folgende Abschnitt enthält eine kurze Einführung in den Editor. Ein umfassenderes Lernprogramm mit allen Funktionen wird in Kürze veröffentlicht werden.
Doppelklicken Sie auf die Datei faces-config.xml, um den Faces-Konfigurationseditor zu starten. Wechseln Sie auf die Registerkarte Navigation.
- Fügen Sie login.jsp und welcome.jsp der Registerkarte 'Navigation' hinzu. Wählen Sie das Steuerelement Seite aus der Palette aus und übergeben Sie es an die Registerkarte 'Navigation'. Wählen Sie die Seite in dem resultierenden Dialog JSP-Datei auswählen aus.
- Verbinden Sie die beiden Seiten. Klicken Sie in der Palette auf das Steuerelement Link, wählen Sie die Seite Anmeldung aus und ziehen Sie eine Linie zur Seite Willkommen. Wählen Sie auf der Registerkarte 'Navigation' die Linie aus und setzen Sie in der Ansicht 'Eigenschaft' den Wert von from-outcome auf login .
Testen der JSF-JSP-Seite
1) Wir werden nun die Seite auf dem Apache Tomcat-Server ausführen.
Wählen Sie Auf Server ausführen unter Verwendung des Kontextmenüs aus, während Sie die Seite 'login.jsp' im Navigator auswählen.

2) Wählen Sie Ihren Apache Tomcat-Server aus und konfigurieren Sie ihn entsprechend, wenn Sie dies nicht bereits schon gemacht haben.
3) Klicken Sie auf 'Fertig stellen'. In der Ansicht 'Konsole' sollten Sie nun sehen, dass der Tomcat-Server startet und dann sollten Sie sehen, dass die ausgeführte Anmeldeseite im Webbrowser, wie unten gezeigt, angezeigt wird.

Klicken Sie auf die Schaltfläche Anmelden. Sie sollten zur Seite Willkommen navigieren.
Glückwunsch! Sie haben Ihre erste JavaServer-Faces-Anwendung mit den neuen JSF-Tools der Eclipse WTP erstellt und ausgeführt.