JSF eszközök ismertető - JSF 2.0 alkalmazás összeállítása

Ö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.

Bevezetés

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.


Beállítás

Apache Tomcat kiszolgáló példány beállítása

Állítsa be az Apache Tomcat kiszolgáló egy példányát a jelen ismertető 'Beállítás' részében leírt információk felhasználásával (Webalkalmazás összeépítése és futtatása)

JavaServer Faces projekt létrehozása

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.



Új dinamikus webalkalmazás Projekt szempontok

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.

JSF képességek oldal


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.

JSF képességek oldal


Az eszköz letölti a JAR fájlokat, létrehoz egy JDT felhasználói függvénytárat és hozzáadja azt az aktuális projekthez. Jelölje be az új függvénytár jelölőnégyzetet, ha nincs bejelölve. Ezután kattintson a Függvénytárak kezelése ikonra.

JSF képességek oldal

Kattintson a Befejezés gombra a JavaServer Faces alkalmazás létrehozásához. Lehetséges, hogy a befejezéskor egy kérdés jelenik meg, hogy át kíván-e váltani a J2EE perspektívára. Kattintson az OK gombra.

A JSF alkalmazása elkészült.


Facelets sablon oldalak létrehozása

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.

Facelets sablon létrehozása

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ó.



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 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.



Facelet sablon

JSF oldal létrehozása

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>


Facelets címke attribútum érvényesítés és tartalomsegéd

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.



Facelets címke attribútum érvényesítése

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.



Facelets címke attribútum tartalomsegéd


JSF oldal befejezése

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.



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="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>

Managed Bean komponens konfigurálása

A Projektböngésző nézetben bontsa ki a JSFFaceletsTutorial->WebContent csomópontot. Kattintson duplán a faces-config.xml fájlra. Ez elindítja a Faces beállításszerkesztőt. Válassza a ManagedBean lapot.

Faces konfiguráció szerkesztő ManagedBean

Kattintson a Hozzáadás gombra. Ez elindítja az Új felügyelt bean varázslót. Válassza az Új Java osztály létrehozása lehetőséget. A varázsló következő panelén írja be a csomag nevét com.tutorial formában, valamint az osztály nevét LoginBean formában. Kattintson a Befejezés gombra.
Ez létrehozza a Java osztályt és felügyelt beanként regisztrálja azt. Mentse a Faces konfiguráció szerkesztőt. Egy Java osztály szerkesztéséhez kattintson a ManagedBean osztály hiperhivatkozásra a Felügyelt bean oldalon az ábrán látható módon. Ez elindítja a Java szerkesztőt.

Faces konfiguráció szerkesztő - Felügyelt bean lap


Szerkessze a com.tutorial.LoginBean Java osztályt. Adja hozzá az alábbi kódot és mentse.

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;
    }
}

Másik oldal hozzáadása

Hozzon létre egy új HTML oldalt welcome.xhtml néven a WebContent könyvtárban, a következő tartalommal:


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="Üdvözöljük #{loginBean.name}"></h:outputLabel>
    </ui:define>
</ui:composition>
</html>

Oldalnavigáció szabályainak beállítása

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.

Oldalak hozzáadása a navigációs szabályhoz

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.

Oldalak összekötése a navigációs szabályhoz

Most kattintson a nyílra, és nyissa meg a Tulajdonságok nézetet. Kattintson a ... gombra a “Kimenetből” mező mellett.

Művelet beállítása a navigációs szabályhoz

A párbeszédablakban válassza ki a “Bejelentkezés” elemet. Kattintson az OK gombra.

Művelet kiválasztása a navigációs szabályhoz

A navigációs szabály most be van állítva.

JSF Facelets oldal futtatása

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.