WTP ismertetők - JavaServer Faces Tools ismertető
Összegzés
Ebben az ismertetőben összeállítunk és futtatunk egy JavaServer Faces alkalmazást és kiemeljük a JSF Tools projekt által hozzáadott szolgáltatásokat.
Szerző: Raghu Srinivasan, Oracle Corporation.
2009 június 15
Bevezetés
Ebben az ismertetőben létrehozunk és futtatunk egy JavaServer Faces képességekkel rendelkező webalkalmazást. A WTP JSF Tools projekt olyan szolgáltatásokat biztosít amelyek egyszerbbé teszik az alkalmazások összeállítását, beállítását és végrehajtását. Ezek között az eszközök között szerepel a Web Page Editor, amelynek segítségével grafikus felületen szerkeszthetők a JSF-JSP weboldalak, a JSF-JSP oldalak szintaktikai és szemantikai ellenőrzése és a Faces konfigurációszerkesztő, amely az alkalmazás konfigurációs erőforrásfájljának szerkesztésére szolgál.
Az ismertetőben leírtak kipróbálása előtt érdemes lehet meglátogatni a következő oldalt: Egy webalkalmazás összeállítása és futtatása. Az említett ismertető bemutatja a kiszolgáló példány beállítását, amely témakört jelen ismertető nem tárgyal.
Beállítás
A Web Page Editor alapértelmezett szerkesztővé tétele JSP oldalak számára
A JSF Tools Projekt által biztosított Web Page Editor (WPE) NEM a JSP fájlok alapértelmezett szerkesztője. A következő lépések elvégzésével teheti a WPE szerkesztőt a JSP fájlok alapértelmezett szerkesztőjévé:
- Lépjen a következő helyre: "Ablak" -> "Beállítások..." -> "Általános" ->
"Szerkesztők" -> "Fájltársítások"
- A "Fájltípusok" részben válassza ki a "*.jsp" típust
- A "Társított szerkesztők" részben válassza a "Web Page Editor" elemet
- Válassza az "Alapértelmezett" gombot
JavaServer Faces projekt létrehozása
Hozzon létre egy JSFTutorial nevű Új dinamikus webalkalmazást.
A cél futási környezetet állítsa a következőre: Apache Tomcat 6.0
A beállítások részben válassza a JavaServer Faces
Project v1.2 lehetőséget. Lépje át a következő két oldalt a JSF Képességek oldalra jutáshoz.

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 Sun
Microsystems függvénytárát. Kattintson a Tovább gombra. Fogadja el a licencet, majd kattintson a Befejezés gombra.

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.
Hozzon létre egy JDT felhasználói függvénytárat a JSTL jar fájlok tárolásához. Kattintson az OK gombra.
A JSTL függvénytár megjelenik a JSF képességek párbeszédablakban. Jelölje ki a függvénytárat, majd kattintson a Befejezés gombra.
JSF alkalmazása elkészült. Figyelje meg azt, hogy a web.xml fájl
frissítésre került a Faces szervlettel és szervletleképezéssel, létrejött
egy csonk JSF alkalmazáskonfigurációs fájl (faces-config.xml) és az
összeépítési útvonal frissült a megvalósítási JAR fájlokkal.

Ha rendelkezik meglévő Dinamikus webalkalmazással, akkor lehetősége nyílik ahhoz JSF
képességeket adni a következő elemek választásával:
Projekt tulajdonságai > Projektszempontok > Projektszempontok hozzáadása/eltávolítása…
Egy JSF JSP oldal létrehozása
A JSP oldal varázsló használatával hozzon létre egy login.jsp
nevű oldalt az új alkalmazás Web content mappájában. A varázsló Sablon választása oldalán válassza az Új JSP(html) sablont.
Kattintson a
Befejezés gombra. Az oldal megjelenik a Web Page Editor alkalmazásban, ahogyan az alább látható

Nyissa meg a Tulajdonságok nézetet. Kattintson a jobb egérgombbal a tervezői rajzolási területre és a helyzetérzékeny menüben válassza ki a Megjelenítés->Tulajdonságok lehetőséget. Várjon, amíg a "Tulajdonságok olvasása" párbeszédablak eltűnik.
Adjon egy CommandButton elemet a rajzolási területhez.
- A Paletta nézetben kattintson a JSF HTML részre az összetevők listájának megjelenítéséhez.
- Fogd-és-vidd módszerrel helyezze a CommandButton elemet a rajzolási területre. Figyelje meg azt, hogy a szerkesztő a CommandButton elemet <f:view> és <h:form> címkékkel veszi körül.
- A tulajdonságok nézetben kattintson a Gyors szerkesztés elemre.
- A Value attribútumot állítsa be Bejelentkezés
értékre.
- Az Action attribútumot állítsa login értékre
PanelGrid hozzáadása
- A Paletta nézetből fogd-és-vidd módszerrel helyezze a PanelGrid elemet a rajzolási területre. Figyelje meg a visszajelzést cél lerakásakor.
- Rakja le a panelrácsot a parancsgomb elé, de a Form címkén belülre. A panelrács előre meghatározott OutputText összetevők készletével jön létre.
Módosítsa a panelrácson belüli összetevőket
- Kattintson az Item2 OutputText elemre és nyomja meg a Törlés gombot
- Vegyen fel egy InputText (Szövegbevitel a Paletta nézetben) címkét az Item1 után, de az Item3 előtt
- Törölje az Item 4 OutputText elemet
- Vegyen fel egy InputSecret (Titkos bevitel a paletta nézetben) címkét az Item3 után
- Kattintson az Item1 OutputText elemre. Módosítsa annak értékét a Forrás nézetben Name értékre
- Kattintson az Item3 OutputText elemre. Módosítsa annak értékét a Forrás nézetben Password értékre
- Kattintson az Előkép lapra az oldal böngészőben történő megjelenítéséhez
- Kattintson az InputText címkére a Name mellett. A Tulajdonságok nézetben, állítsa az érték attribútumot a következőre: #{loginBean.name}.
- Mentse az oldalt. A szerkesztő arra fog figyelmeztetni, hogy a loginBean változó nem oldható fel.
A Projektböngészőben bontsa ki a következő csomópontot: JSFTutorial->WebContent.
Kattintson duplán a
faces-config.xml
fájlra. Ez elindítja a Faces beállításszerkesztőt. Válassza a
Kezelt komponens
lapot.
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.
Szerkessze a com.tutorial.LoginBean Java osztályt. Adja hozzá az alábbi kódot és mentse.
A Projektböngésző nézetben kattintson a jobb
egérgombbal a login.jsp JSP oldalra, majd kattintson az előugró
menü Érvényesítés menüpontjára. Megjegyzés: az oldalnak most már érvényesnek kell lennie.
A Weboldal szerkesztő Forrás oldalán vegye fel a következő JSF címkét:
<h:inputSecret value="#{}"></h:inputSecret> . Amikor a
kurzor a szögletes zárójelek között van nyomja le a Ctrl+szóköz
billentyűkombinációt. Egy előugró ablakot láthat, amelyen az implicit
objektumok listája és a fent meghatározott felügyelt bean látható. Válassza ki a
loginBean felügyelt beant.
Írja be a tulajdonság nevét, például x, ami nincs meghatározva a felügyelt
beanben, majd mentse a módosítást. A szerkesztő arra fog figyelmeztetni, hogy a tulajdonság nem oldható fel.
Törölje az érvénytelen tulajdonságot. Nyomja meg a Ctrl+szóköz
billentyűkombinációt a '.' után
a bean nevében. A felügyelt
beanben meghatározott tulajdonságok listáját láthatja egy előugró
ablakban. Válassza a password elemet a menüből.
Hozza létre a com.tutorial.validatePassword Java osztályt, amely
megvalósítja a Validator felületet és mentsen.
A Projektböngészőben bontsa ki a következő csomópontot: JSFTutorial->WebContent.
Kattintson duplán a faces-config.xml fájlra. Ez elindítja
faces-config szerkesztőjét. Válassza a Komponens lapot. Bontsa ki
az Érvényesítők részt.
Kattintson a Hozzáadás gombra. A Validator osztály mellett
kattintson a Tallózás gombra, majd válassza ki a
com.tutorial.ValidatePassword osztályt. Mentse a változásokat.
Vegye fel a következő JSF címkét: <f:validator id=""></f:validator >
. Amikor a kurzor a dupla idézőjelek között van, nyomja le a Ctrl+szóköz billentyűkombinációt. Egy előugró ablakot láthat, amelyen a szabványos érvényesítők listája és a
faces-config fájlban regisztrált érvényesítők szerepelnek. Válassza a Jelszó érvényesítése lehetőséget.
Most áthelyezzük az oldalon használt
statikus karaktersorozatokat egy erőforráskötegbe. Ennek elvégzéséhez
adjon egy messages.properties nevű mezőt a com.tutorial
mappához. Határozza meg a tulajdonságokat az alább láthatóak szerint és mentse a fájlt.
Vegye fel a loadBundle JSF címkét az alább látható módon. Fogd-és-vidd módszerrel is áthelyezheti a címkét a Paletta nézet JSF Core részéből.
Törölje a Name karaktersorozatot az outputLabel címke érték attribútumából. Amikor a kurzor a szögletes zárójelek között van nyomja le a Ctrl+szóköz billentyűkombinációt. Felugró ablakot láthat, amelynek listáján szerepel az
msg változó, amelyet a loadBundle címkében határozott meg. Válassza ezt.
Írjon be egy pontot az msg után és üsse le a Ctrl+szóköz billentyűkombinációt. Előugró ablakot láthat a messages.properties fájlban meghatározott tulajdonságok listájával. Válassza a name tulajdonságot.
Töltse ki a bejelentkező oldalt az alábbiak szerint.
Hozzon létre egy új, welcome.jsp nevű JSF oldalt az alábbiak szerint.
Faces beállítások Erőforrás-szerkesztő
A JSF Tools projekt magában foglal egy speciális szerkesztőt a faces
konfigurációs erőforrásfájlok számára. A következő részben egy rövid bevezető következik a szerkesztőről. Hamarosan
elérhető lesz a szerkesztő minden szolgáltatását bemutató ismertető is.
Kattintson duplán a faces-config.xml fájlra a Faces konfiguráció
szerkesztő indításához. Váltson át a Navigáció lapra.
- Adja hozzá a login.jsp és welcome.jsp elemeket a Navigáció laphoz. Válassza az Oldal vezérlőelemet a Palettáról és rakja le azt a Navigáció lapra. Válassza ki az oldalt az eredményül kapott JSP fájl kiválasztása párbeszédablakban.
- Kösse össze a két oldalt. Kattintson a Csatolás vezérlőelemre
a Palettán, majd válassza ki a login oldalt és rajzoljon egy vonalat a welcome oldalig. Válassza ki a vonalat a Navigáció lapon és a Tulajdonság nézetben
állítsa a from-outcome értékét login értékre.
JSF JSP oldal tesztelése
1) Most futtatjuk az oldalt Apache Tomcat kiszolgálón.
A Naviágtorban jelölje ki a login.jsp oldalt, majd kattintson az előugró
menü Futtatás a kiszolgálón menüpontjára.

2) Válassza ki az Apache Tomcat kiszolgálót és - ha még nem tette
volna meg - állítsa be azt a kívánt módon.
3) 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.

Kattintson a Bejelentkezés gombra. Lépjen a welcome oldalra.
Gratulálunk! Létrehozta és futtatta első JavaServer Faces alkalmazását az új Eclipse WTP JSF Tools használatával.