Zusammenfassung
In diesem Lernprogramm wird eine Java 2.0-Webanwendung erstellt und ausgeführt, und die vom JSF-Tools-Projekt bereitgestellten Funktionen werden hervorgehoben.
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.
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.
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
JSF 2.0 (Mojarra) aus. Klicken Sie auf Weiter.
Akzeptieren Sie die Lizenzbedingungen und klicken Sie auf Fertig stellen.
Ihre JSF-Anwendung wurde erstellt.
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'.
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.
<!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.
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>
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>.
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.
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.
<!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>
/**
* 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;
}
}
Erstellen Sie im Webinhalt (WebContent) eine neue HTML-Seite namens 'welcome.xhtml' mit folgendem Inhalt:
<!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>
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.
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'.
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”.
Wählen Sie in diesem Dialog die Option für “Anmeldung” aus. Klicken Sie auf OK.
Die Navigationsregel ist nun konfiguriert.
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.