Összegzés
Ebben az ismertetőben összeállítunk és futtatunk egy JSF 2.0 alkalmazást és kiemeljük a JSF Tools projekt által biztosított szolgáltatásokat.
A JSF Tools projekt olyan eszközöket biztosít, amelyek leegyszerűsítik a JSF 2.0 webalkalmazások készítését. Ezek közé tartozik egy bővített HTML forrásszerkesztő, amely tartalomsegédet és érvényesítést biztosít a JSF címékhez. Ebben az ismertetőben létrehozunk és futtatunk egy JSF 2.0 webalkalmazást. Az Új és említésre méltó oldal felsorolja a JSF 2.0 alkalmazások fejlesztésének támogatásához elérhető valamennyi eszközt.
Hozzon létre egy új dinamikus webalkalmazást, melynek neve JSFFaceletsTutorial.
A cél futási környezetet állítsa a következőre: Apache Tomcat 6.0
A Konfiguráció részben kattintson a Módosítás gombra, majd
válassza ki a “JavaServer Faces 2.0” szempontot. Hagyja
ki a következő panelt és lépjen át a JSF képességek oldalra.
A JSF képességek oldalon a JSF függvénytár típusa legördülő listából válassza ki a Felhasználói függvénytár elemet.
Kattintson a Függvénytár letöltése ikonra. Megjelenik a Függvénytár letöltése oldal a JSF megvalósítás JAR fájlok szolgáltatóinak listájával. Válassza
ki a JSF 2.0 (Mojarra) függvénytárat. Kattintson a Tovább gombra.
Fogadja el a licencet, majd kattintson a Befejezés gombra.
A JSF alkalmazása elkészült.
Most létre fog hozni egy Facelets sablon oldalt. Hozzon létre egy templates nevű mappát a WEB-INF mappában. A HTML varázsló segítségével hozzon létre a mappában egy BasicTemplate.xhtml nevű sablon oldalt. Kattintson a jobb egérgombbal a templates mappára, majd válassza az előugró menü Új » HTML menüpontját a HTML varázsló indításához. A varázsló Sablon kiválasztása oldalán válassza ki az Új Facelet sablon sablont. Kattintson a Befejezés gombra.
Szerkessze a sablonfájlt a sablonban lévő útmutatásoknak megfelelően. Létre fogja hozni a fejléc és lábléc sablonokat, és hozzáadja ezeket a sablonhoz. A végső sablon az alább láthatóhoz hasonló.
<!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 ismertető</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>
Hozza létre a fejléc és lábléc sablonokat a templates mappa alatt az Új HTML varázsló segítségével a fentiek szerint. A varázsló Sablon kiválasztása oldalán válassza ki a megfelelő sablonfájlokat, az Új Facelet fejléc és Új Facelet lábléc sablonokat. Módosítsa a sablonokat az alábbiak szerint.
Hozzon létre egy JSF oldalt Facelets címkékkel, amely az előző lépésben
létrehozott sablont fogja használni. A HTML oldal varázsló használatával
hozzon létre egy login.xhtml nevű oldalt az új alkalmazás Webes
tartalom mappájában. A varázsló Sablon kiválasztása oldalán válassza ki az
Új Facelet összeállítási oldal sablont. Kattintson a
Befejezés gombra.
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">
Adja hozzá a fejlécet itt, vagy törölje az alapértelmezés használatához
</ui:define>
<ui:define name="content">
Adja hozzá a tartalmat itt, vagy törölje az alapértelmezés használatához
</ui:define>
<ui:define name="footer">
Adja hozzá a láblécet itt, vagy törölje az alapértelmezés használatához
</ui:define>
</ui:composition>
</html>
A JSF Tools projekt támogatást ad a Facelets címkék attribútumainak érvényesítéséhez, valamint tartalomsegédet is biztosít ezekhez. Figyelje meg a figyelmeztetést az <ui:composition> címke template attribútumához.
A tartalomsegéd meghívásához helyezze a kurzort a template attribútumot közrefogó dupla idézőjelek közé, majd nyomja meg a Ctrl + szóköz billentyűkombinációt. Egy előugró ablakot kell látnia, amely felsorolja a WebContent mappa alatt található könyvtárakat. Válassza ki a /WEB-INF/templates/BasicTemplate.xhtml fájlt.
Törölje a fejléc és lábléc <ui:define> címkéit. Az oldal a fejlécet és a láblécet a sablonból fogja venni. Adja hozzá a bejelentkezéshez szükséges (login) címkéket a content szakaszban (lásd alább). Vegye figyelembe, hogy a JSF Tools projekt jelenlegi kiadása nem támogatja az XHTML oldalak megjelenítését a JSF weboldal szerkesztőben. Azonban a weboldal szerkesztő Forrás lapján a JSP oldalak szerkesztéséhez elérhető valamennyi szolgáltatás elérhető a HTML forrásszerkesztőben is, ahol JSF Facelets oldalakat készíthet XHTML nyelven.
<!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="Név"></h:outputText>
<h:inputText value="#{loginBean.name}"></h:inputText>
<h:outputText value="Jelszó"></h:outputText>
<h:inputSecret value="#{loginBean.password}"></h:inputSecret>
</h:panelGrid>
<h:commandButton value="Bejelentkezés" 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;
}
}
Hozzon létre egy új HTML oldalt welcome.xhtml néven a WebContent könyvtárban, a következő tartalommal:
<!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="Üdvözöljük #{loginBean.name}"></h:outputLabel>
</ui:define>
</ui:composition>
</html>
Kattintson duplán a faces-config.xml fájlra a Faces konfiguráció szerkesztő megnyitásához. Kattintson a Navigációs szabály lapra. Húzza át a login.xhtml és a welcome.xhtml fájlokat a Projektböngésző nézetből a Navigációs szabály rácsba az alábbiak szerint.
Kattintson a jobboldali palettán a Hivatkozás eszközre. Most húzzon egy nyilat a login.xhtml fájltól a welcome.xhtml fájlig, amint az ábra mutatja.
Most kattintson a nyílra, és nyissa meg a Tulajdonságok nézetet. Kattintson a ... gombra a “Kimenetből” mező mellett.
A párbeszédablakban válassza ki a “Bejelentkezés” elemet. Kattintson az OK gombra.
A navigációs szabály most be van állítva.
Most futtatni fogja a login.xhtml oldalt az Apache Tomcat
kiszolgálón. A Navigátor nézetben jelölje ki a login.xhtml fájlt,
majd kattintson az előugró menü Futtatás a kiszolgálón
menüpontjára. Válassza ki az Apache Tomcat kiszolgálót és ha még nem
állította be, akkor tegye meg most. Kattintson a
Befejezés gombra. A Konzol nézetben láthatja, hogy a
Tomcat kiszolgáló elindul, majd láthatja a futtatott bejelentkezési oldal
megjelenését a webböngészőben az alább látható módon.
Gratulálunk! Létrehozta és futtatta első JSF Facelets alkalmazását.