3. diel - Úvod do JavaServer Faces (JSF)
V minulom dieli tutoriálov o Java EE, Úvod do webových aplikácií v JavaEE , sme si urobili úvod do JavaEE a predstavili rýchlo technológie, ktoré sa v nej používajú. V tejto vetve seriáli budeme používať technológiu JSF. Dnes si v nej vytvoríme prvý jednoduchý projekt, na ktorom si vysvetlíme základné princípy. Pôjde o webový generátor náhodných čísel.
Vytvorenie projektu
V NetBeans vytvorte nový projekt z kategórie Java Web typu Web Application. Ak vám táto kategória projektov v NetBeans chýba, nainštalujte si verziu pre Javu EE alebo doinštalujte pluginy "Java EE base", "JSF" a "EJB and EAR" cez Tools -> Plugins.
Projekt pomenujeme JSFNahodneCislo. V nasledujúcom dialógu vyberieme ako server GlassFish Server. Ak ešte nemáte nainštalovaný server, pridajte ho pomocou tlačidla Add, kde ho potom stiahnete a nainštalujete.
Na poslednom oknu zaškrtneme, že chceme využívať JavaServer Faces a potvrdíme.
NetBeans nám ako obvykle vygeneruje základnú kostru projektu. Dôležitý
pre nás bude najmä súbor index.xhtml, v ktorom sa vygeneroval
nasledujúci obsah:
<?xml version='1.0' encoding='UTF-8' ?> <!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:h="http://xmlns.jcp.org/jsf/html"> <h:head> <title>Facelet Title</title> </h:head> <h:body> Hello from Facelets </h:body> </html>
Vidíme, že stránka je XML dokument. O XML sme si už hovorili v sekcii Práca so súbormi v Jave. Namiesto HTML budeme stránku tvoriť v XHTML, ktoré je takmer rovnaké, len musíme uzatvárať aj nepárové tagy.
Čo je zaujímavé sú menné priestory. Vieme, že XML je univerzálny jazyk, do ktorého možno jednoducho dodať značky z rôznych balíčkov. Vo vygenerovanom dokumente sa nastavuje východiskový menný priestor na http://www.w3.org/1999/xhtml, čo sú klasické XHTML značky pre tvorbu stránok (napr. H1, table a podobne). Okrem tohto menného priestoru však v dokumente povoľujeme značky iz priestoru http://xmlns.jcp.org/jsf/html, kde nájdeme práve JSF značky. Elementy z tohto menného priestoru sú vždy pred vyrenderováním stránky nahradené dynamickým obsahom.
V príklade je vidíme použité v head a body. Hlavička a telo stránky sa pred vykreslením teda ešte spracovávajú Javou, v našom prípade tohto mechanizmu nevyužijeme, ale v budúcich aplikáciách budeme vďaka tomu môcť spojiť hlavičky a tela stránok vo chvíli, keď vkladáme podstránku do šablóny.
Keď aplikáciu teraz spustíme, po chvíli načítanie serveri sa nám zobrazí nasledujúca stránka:
CDi bean
Aplikácie v JEE skladáme z tzv. Beana, ktoré budeme chápať ako komponenty.
Vytvoríme si tzv. Managed bean. To je trieda, ktorej inštancie spravuje JSF, vytvára ich podľa potreby a hlavne ich vlastnosti a metódy prepája s komponentmi na webovej stránke. Z tohto dôvodu označenia managed, JSF riadi životný cyklus týchto Bean a rovnako tak na nich volá metódy.
V projekte si vytvoríme nový package s názvom beans a doň pridáme nový
JSF ManagedBean s názvom GeneratorBean.
Vygeneruje sa nám trieda s nasledujúcim obsahom (ako vždy som vynechal menné priestory):
@Named(value = "generatorBean") @Dependent public class GeneratorBean { public GeneratorBean() { } }
Vidíme, že managed bean je bežná trieda s bezparametrickým konštruktor (aby ju mohlo JSF vytvoriť) as dvoma anotáciami.
Používame mechanizmus CDI bean, CDI označuje Contexts and Dependency Injection (kontexty a injekcie závislostí), ďalej v kurze si ukážeme ešte aké výhody táto technológia prináša.
Staršie verzie NetBeans generovali anotáciu
@ManagedBean, ktorá je dnes už zastaraná.
Prvá anotácia @Named nám jednoducho nazve našu triedu.
Druhá anotácie @Dependent označuje kedy má inštancie triedy
existovať. my ju prepíšeme na @RequestScoped (možno to zvoliť
aj pri generovaní Beana). To znamená, že sa inštancia vytvoria po zaslaní
požiadavke na stránku a po vygenerovaní stránky zanikne. Ďalej môžeme
použiť napr. @SessionScoped, kde inštancie prežíva medzi
požiadavkami pre jedného klienta.
Anotácia sú z menných priestorov javax.inject.Named a
javax.enterprise.context.RequestScoped. Je dôležité, aby ste
používali práve anotácie z týchto priestorov, overte si to.
Môže sa stať, že NetBeans nebudú schopné nájsť anotáciu
@Named. To bude z dôvodu, že chýba knižnica
Java EE Web 8 API Library. V takom prípade je potrebné, aby ste
túto knižnicu dodali ručne do projektu. NetBeans nám našťastie všetko
uľahčuje a túto knižnicu má pre nás už pripravenú na použitie. Stačí
ju teda len pridať do zoznamu použitých knižníc. V strome projektu klikneme
pravým tlačidlom na položku Libraries a zvolíme v
kontextovom menu možnosť: Add library. Zobrazí sa nám nasledujúci
obrázok. Tu vyberieme potrebnú knižnicu -
Java EE Web 8 API Library a stlačením tlačidla Add
library pridáme knižnicu do zoznamu závislostí. Tým by sa mala
vyriešiť neznáma anotácie javax.inject.Named.
Triede vložíme jediný privátny atribút generator typu
Random. V konstruktoru v ňom založíme novú inštanciu. Ďalej
pridáme getter, ktorý vráti vždy ďalšie náhodné číslo z generátora.
Trieda vyzerá asi takto:
@Named(value = "generatorBean") @RequestScoped public class GeneratorBean { private Random generator; public GeneratorBean() { generator = new Random(); } public int getCislo() { return generator.nextInt(100); } }
EL výrazy
Presunieme sa do index.xhtml. Do tejto šablóny teraz
vypíšeme výsledok metódy getCislo() na
GeneratorBean. Za týmto účelom použijeme tzv. EL
výrazy (Expression Language). Pomocou nich môžeme zo šablón
pristupovať k dátam z JavaBeans.
index.xhtml upravíme do nasledujúcej podoby:
<?xml version='1.0' encoding='UTF-8' ?> <!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:h="http://xmlns.jcp.org/jsf/html"> <h:head> <title>Náhodné číslo</title> </h:head> <h:body> <h1>Náhodné číslo</h1> <p style="font-size: 2em;"> #{generatorBean.cislo} </p> </h:body> </html>
V odseku používame EL výraz, ktorý zapíšeme pomocou hash-kríža a zložených zátvoriek. Vypisujeme vlastnosť cislo na inštanciu generatorBean (s malým začiatočným písmenom).
JSF výraz preloží tak, že vytvorí inštanciu triedy GeneratorBean a na
ňu zavolá getter getCislo(), ktorého výstup vloží do kódu
výslednej HTML stránky. Vidíme, že nám JSF značne zjednodušuje život, ak
poznáte MVC architektúru, tak v podstate zautomatizovalo kontrolér, ktorý
prepája šablóny s logickými triedami. Staráme sa teda už len o tieto 2
vrstvy a zvyšok sa deje automaticky.
Keď aplikáciu spustíme, uvidíme nasledujúce HTML stránku:
Po obnovení dostaneme vždy ďalšie náhodné číslo, pretože je bean RequestScoped (žije len v čase vykonávania požiadavke).
Projekt je nižšie k stiahnutiu. Nabudúce, v lekcii Spracovanie formulárov v JSF , si vytvoríme jednoduchú kalkulačku a naučíme sa spracovávať formuláre.
Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 427x (19.52 kB)
Aplikácia je vrátane zdrojových kódov v jazyku Java
David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.