JSF-Tools-Lernprogramm - JSF 2.0-Anwendung erstellen

Zusammenfassung
In diesem Lernprogramm wird eine Java 2.0-Webanwendung erstellt und ausgeführt, und die vom JSF-Tools-Projekt bereitgestellten Funktionen werden hervorgehoben.

Einführung

Das JSF-Tools-Projekt bietet Tools, die das Erstellen von JSF 2.0-Webanwendungen vereinfachen. Zu diesen Tools gehört ein erweiterter HTML-Quelleneditor, der eine Inhaltshilfe und Prüffunktion für JSF-Tags bereitstellt. In diesem Lernprogramm wird eine JSF 2.0-Webanwendung erstellt und ausgeführt. Auf der Seite Neu und Wissenswert finden Sie eine Liste aller verfügbaren Tools-Funktionen zur Unterstützung bei der Entwicklung einer JSF 2.0-Webanwendung.


Konfiguration

Apache Tomcat-Serverinstanz konfigurieren

Konfigurieren Sie eine Instanz des Apache Tomcat-Servers. Verwenden Sie hierfür die Informationen im Abschnitt 'Konfiguration' dieses Lernprogramms Webanwendung erstellen und ausführen.

JavaServer-Faces-Projekt erstellen

Erstellen Sie eine neue dynamische Webanwendung mit dem Namen JSFFaceletsTutorial. Setzen Sie die Ziellaufzeit auf Apache Tomcat 6.0
Klicken Sie im Abschnitt Konfiguration auf die Schaltfläche Ändern und wählen Sie die Facette “JavaServer Faces 2.0” aus. Überspringen Sie die nächste Anzeige, um zur Seite 'JSF-Funktionalitäten' zu gelangen.



Neue dynamische Webanwendung Projektfacetten

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

Seite 'JSF-Funktionalitäten'


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 JSF 2.0 (Mojarra) aus. Klicken Sie auf Weiter. Akzeptieren Sie die Lizenzbedingungen und klicken Sie auf Fertig stellen.

Seite 'JSF-Funktionalitäten'


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.

Seite 'JSF-Funktionalitäten'

Klicken Sie auf die Schaltfläche Fertig stellen, um die JavaServer-Faces-Anwendung zu erstellen. Nach Fertigstellung werden Sie eventuell aufgefordert, die J2EE-Perspektive auszuwählen. Klicken Sie auf OK.

Ihre JSF-Anwendung wurde erstellt.


Facelets-Schablonenseite erstellen

Als Nächstes wird eine Facelets-Schablonenseite erstellt. Erstellen Sie einen Ordner namens templates (Schablonen) unter dem Ordner WEB-INF. Erstellen Sie mithilfe des HTML-Assistenten eine Schablonenseite namens BasicTemplate.xhtml unter diesem Ordner. Klicken Sie mit der rechten Maustaste auf den Ordner template und wählen Sie Neu » HTML aus, um den HTML-Assistenten zu starten. Wählen Sie auf der Seite 'Schablonen auswählen' des Assistenten die Schablone Neue Facelets-Schablone aus. Klicken Sie auf 'Fertig stellen'.

Facelets-Schablone erstellen

Bearbeiten Sie die Schablonendatei anhand der Anweisungen in der Schablone. Sie werden später die Kopfzeilenschablone (Header) und die Fußzeilenschablone (Footer) erstellen und einschließen. Die abschließende Schablonendatei sollte wie nachstehend gezeigt aussehen.



BasicTemplate.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
  <title><ui:insert name="title">Facelets Tutorial</ui:insert></title>
</head>

<body>

<div id="header">
    <ui:insert name="header">
        <ui:include src="/WEB-INF/templates/header.xhtml"/>
    </ui:insert>
</div>

<div id="content">
    <ui:insert name="content">
    </ui:insert>
</div>

<div id="footer">
    <ui:insert name="footer">
        <ui:include src="/WEB-INF/templates/footer.xhtml"/>
    </ui:insert>
</div>

</body>
</html>


Erstellen Sie die Kopfzeilenschablone und die Fußzeilenschablone unter dem Ordner template. Verwenden Sie hierzu den Assistenten 'Neue HTML-Datei' wie oben beschrieben. Wählen Sie auf der Seite 'Schablone auswählen' des Assistenten die entsprechenden Schablonendateien aus: Neue Facelet-Kopfzeile und Neue Facelet-Fußzeile. Nehmen Sie Änderungen an den Schablonen vor, wie nachstehend beschrieben.



Facelets-Schablone

JSF-Seite erstellen

Erstellen Sie eine JSF-Seite mit Facelets-Tags, die die im vorherigen Schritt erstellte Schablone verwenden. Verwenden Sie den Assistenten 'HTML-Seite', um eine Seite namens login.xhtml im Ordner mit Webinhalten der neuen Anwendung zu erstellen. Wählen Sie auf der Seite 'Schablonen auswählen' des Assistenten die Schablone Neue Facelets-Zusammensetzungsseite aus. Klicken Sie auf 'Fertig stellen'.


login.xhtml


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core">

<ui:composition template="">
    <ui:define name="header">
        Kopfzeile hier einfügen oder löschen, um Standard zu verwenden
    </ui:define>
    <ui:define name="content">
        Inhalt hier einfügen oder löschen, um Standard zu verwenden
    </ui:define>
    <ui:define name="footer">
        Fußzeile hier einfügen oder löschen, um Standard zu verwenden
    </ui:define>
</ui:composition>
</html>


Überprüfung von Facelets-Tag-Attributen und Inhaltshilfe

Das JSF-Tools-Projekt bietet zusätzliche Unterstützung zur Überprüfung der Attribute von Facelets-Tags und stellt auch eine Inhaltshilfe für diese zur Verfügung. Bitte beachten Sie die Warnung bezüglich des Attributs template des Tags <ui:composition>.



Überprüfung von Facelets-Tag-Attributen

Positionieren Sie den Cursor zwischen den doppelten Anführungszeichen des Attributs template und drücken Sie die Tastenkombination Strg + Leertaste, um Inhaltshilfe abzurufen. Es sollte ein Dialogfenster mit einer Auflistung der Verzeichnisse unter dem Ordner WebContent (Webinhalt) angezeigt werden. Wählen Sie /WEB-INF/templates/BasicTemplate.xhtml aus.



Inhaltshilfe für Facelets-Tag-Attribute


Vervollständigen Sie die JSF-Seite

Löschen Sie die Tags <ui:define> für die Kopf- und Fußzeile. Die Seite erhält die Kopf- und Fußzeile aus der Schablone. Fügen Sie die Tags für die Anmeldung im Inhaltsabschnitt content wie nachstehend gezeigt hinzu. Bitte beachten Sie, dass das aktuelle Release des JSF-Tools-Projekts keine grafische Darstellung von XHTML-Seiten im JSF-Webseiteneditor unterstützt. Es stehen jedoch alle Produktivitätsfunktionen, die auf der Quellenseite des Webseiteneditors für die Bearbeitung von JSP-Seiten bereitgestellt werden, im HTML-Quelleneditor zum Erstellen von JSF-Facelets-Seite in XHTML zur Verfügung.



login.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core">

<ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml">
    <ui:define name="content">
        <h:form>
            <h:panelGrid columns="2">
                <h:outputText value="Name"></h:outputText>
                <h:inputText value="#{loginBean.name}"></h:inputText>
                <h:outputText value="Password"></h:outputText>
                <h:inputSecret value="#{loginBean.password}"></h:inputSecret>
            </h:panelGrid>
            <h:commandButton value="Login" action="login"></h:commandButton>
        </h:form>
    </ui:define>
</ui:composition>
</html>

Verwaltete Bean (Managed Bean) konfigurieren

Erweitern Sie im Projektexplorer den Knoten 'JSFFaceletsTutorial->WebContent'. Doppelklicken Sie auf faces-config.xml. Hierdurch wird der Faces-Konfigurationseditor gestartet. Wählen Sie die Registerkarte Verwaltete Bean aus.

Faces-Konfigurationsdateieditor - Verwaltete Bean

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.

Faces-Konfigurationseditor - Registerkarte 'Verwaltete Bean'


Bearbeiten Sie die Java-Klasse com.tutorial.LoginBean. Fügen Sie den folgenden Code hinzu und speichern Sie.

LoginBean.java

/**
 * LoginBean.java
 * 
 */

package com.tutorial;

public class LoginBean
{
    private String name;
    private String password;


    public String getName ()
    {
        return name;
    }


    public void setName (final String name)
    {
        this.name = name;
    }


    public String getPassword ()
    {
        return password;
    }


    public void setPassword (final String password)
    {
        this.password = password;
    }
}

Weitere Seite hinzufügen

Erstellen Sie im Webinhalt (WebContent) eine neue HTML-Seite namens 'welcome.xhtml' mit folgendem Inhalt:


welcome.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core">

<ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml">
    <ui:define name="content">
        <h:outputLabel value="Welcome #{loginBean.name}"></h:outputLabel>
    </ui:define>
</ui:composition>
</html>

Seitennavigationsregeln konfigurieren

Doppelklicken Sie auf die Datei 'faces-config.xml', um den Faces-Konfigurationseditor zu öffnen. Klicken Sie auf die Registerkarte Navigationsregel. Ziehen Sie nun die Dateien 'login.xhtml' und 'welcome.xhtml' aus dem Projektexplorer in das Gitter mit den Navigationsregeln, wie gezeigt.

Seiten für die Navigationsregel hinzufügen

Klicken Sie auf das Link-Tool in der Palette auf der rechten Seite. Zeichnen Sie nun wie gezeigt einen Pfeil von der Datei 'login.xhtml' zur Datei 'welcome.xhtml'.

Seiten für die Navigationsregel verlinken

Klicken Sie nun auf den Pfeil und öffnen Sie die Ansicht Eigenschaften. Klicken Sie auf die Schaltfläche mit den Auslassungspunkten neben dem Feld “Von Ergebnis”.

Aktion für die Navigationsregel festlegen

Wählen Sie in diesem Dialog die Option für “Anmeldung” aus. Klicken Sie auf OK.

Aktion für die Navigationsregel auswählen

Die Navigationsregel ist nun konfiguriert.

JSF-Facelets-Seite ausführen

Als Nächstes wird die Seite login.xhtml auf dem Apache Tomcat-Server ausgeführt. Wählen Sie Auf Server ausführen aus dem Kontextmenü aus, während Sie die Seite login.xhtml im Navigator auswählen. Wählen Sie Ihren Apache Tomcat-Server aus und konfigurieren Sie ihn entsprechend, wenn Sie dies nicht bereits getan haben. 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.


Glückwunsch! Sie haben Ihre erste JSF-Facelets-Anwendung erstellt und ausgeführt.