Lekce 4 - Úvod do JavaServer Faces (JSF)
V minulé lekci, Instalace WildFly a Maven, jsme si nainstalovali aplikační server WildFly, přistoupili do jeho administrace a ke konci si nainstalovali Maven.
V této větvi kurzu budeme používat technologii JSF. Dnes si v ní vytvoříme první jednoduchý projekt, na kterém si vysvětlíme základní principy. Půjde o webový generátor náhodných čísel. Naše první aplikace bude vypadat takto:
Hned na úvod by bylo dobré zmínit, že tento kurz je pokročilý a bude potřeba opravdu dost trpělivosti. Technologie JEE je totiž velmi komplexní. Odměnou vám za ni bude snad nejvyšší plat v IT sféře přesahující 100.000 Kč/měsíc. Věřím, že spolu látku zvládneme probrat.
Vytvoření projektu
V kurzu budeme sice používat IDE NetBeans, ale ukážeme si alternativně i jak pracovat s projektem přes příkazovou řádku. Tím jej pak dokážete spravovat v jakémkoli jiném IDE a zároveň získáme i širší možnosti.
Vytvoření Maven projektu
V NetBeans vytvoříme nový projekt z kategorie Java with Maven typu Project from Archetype. Pokud vám tato kategorie projektů v NetBeans chybí, je třeba ještě aktivovat JEE podporu, viz dále:
Vytvoření Maven projektu přes příkazovou řádku
Alternativně (za předpokladu, že máme Maven nainstalovaný z předchozí lekce) můžeme založit projekt Maven příkazem, který zavoláme ve složce, kde chceme projekt založit:
mvn archetype:generate -DgroupId=org.apache.maven.archetypes -DartifactId=jsf-random -DarchetypeArtifactId=maven-archetype-webapp
Aktivace JEE v NetBeans
Jak jsme již zmiňovali, pokud nemáte JEE aktivovanou v NetBeans, musíte
si jí aktivovat. Aktivace je velmi snadná. Poté, co klikneme na tlačítko
Next > v okně, které vypadá stejně jako obrázek výše,
musíme nastavit, jaký aplikační server chceme využívat. V našem
případě to je WildFly, který jsme si instalovali a nastavovali v předchozí
lekci:
Klekněme na Add... a tam si vyberme aplikační server WildFly.
Dále potřebujeme nastavit cestu k našemu aplikačnímu serveru. Políčko
Server Configuration se samo vyplní:
Dále klikněme na tlačítko Finish:
Aplikační server máme nastavený.
Nastavení archetype projektu
Jelikož vytváříme projekt přes Maven, musíme si zvolit z jakého archetype máme vygenerovat projekt. Archetype je tedy šablona projektu.
Vhodnou šablonu vyhledáme tak, že do políčka Search
napíšeme maven-archetype-webapp. Zobrazí se nám 3 možné
archetypes. Zvolme ten, který má Group ID nastavený na
org.apache.maven.archetypes a klikněme na
Next >:
Projekt pojmenujeme JSFNahodneCislo:
NetBeans nám pomocí archetype jako obvykle vygeneruje základní kostru
projektu. Důležitá je pro nás složka webapp, kde se nachází
index.jsp.
index.xhtml
Jelikož chceme JSF projekt a ne JSP, smažme index.jsp a
vytvořme index.xhtml, který je typu JSF Page. Je
možné, že vám NetBeans nezobrazí tento typ souboru v menu, z tohoto důvodu
si ho vyberte v Others:
Když otevřeme index.xhtml, uvidíme následující kus
kódu:
<?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>
Pokud vám NetBeans nevygeneroval prefix h:
před <body> a <head>, doporučuji přidat
namespace http://xmlns.jcp.org/jsf/html a dopsat jej tam. Dnes by
to nemělo vadit, ale v příštích lekcích už ano.
Vidíme, že stránka je XML dokument. O XML jsme si již říkali v sekci Práce se soubory v Javě. Místo HTML budeme stránku tvořit v XHTML, které je téměř stejné, jen musíme uzavírat i nepárové tagy.
Co je zajímavé jsou jmenné prostory. Víme, že XML je univerzální
jazyk, do kterého lze jednoduše dodat značky z různých balíčků. Ve
vygenerovaném dokumentu se nastavuje výchozí jmenný prostor na
http://www.w3.org/1999/xhtml, což jsou klasické XHTML značky pro
tvorbu stránek (např. <h1>, <table> a
podobně). Kromě tohoto jmenného prostoru však v dokumentu povolujeme značky
i z prostoru http://xmlns.jcp.org/jsf/html, kde nalezneme právě
JSF značky. Elementy z tohoto jmenného prostoru jsou vždy před
vyrenderováním stránky nahrazeny dynamickým obsahem.
V příkladu je vidíme použité v <h:head> a
<h:body>. Hlavička a tělo stránky se před vykreslením
tedy ještě zpracovávají Javou, v našem případě tohoto mechanismu
nevyužijeme, ale v budoucích aplikacích budeme díky tomu moci spojit
hlavičky a těla stránek ve chvíli, kdy vkládáme podstránku do
šablony.
Nasazení
Pojďme aplikaci nasadit.
NetBeans v době psaní této lekce a již cca rok dozadu obsahuje bug při nasazování na server (jinak by projekt stačilo jen spustit v NetBeans). Proto si ukážeme jak nasadit pomocí Maven a WIldFly pluginu, což se nám stejně hodí při nasazování na skutečný server.
pom.xml
Přesuňme se do pom.xml. Pojďme přidat tzv. Maven plugin,
který nám poslouží k nasazení našeho webu na aplikační server. Do
značky <plugins> přidejme následujicí kus XML kódu:
<plugin> <groupId>org.wildfly.plugins</groupId> <artifactId>wildfly-maven-plugin</artifactId> <version>2.1.0.Beta1</version> </plugin>
Aplikační server spustíme (opět přes konzoli spuštěním souboru
standalone.bat na Windows nebo bash standalone.sh na
UNIX). V kořenové složce projektu zavoláme dva příkazy. První nám
stáhne závislosti, které jsme nadefinovali v pom.xml:
mvn clean install
Druhý nám zabalí projekt a nasadí jej na server:
mvn wildfly:deploy
Pojďme se tedy podívat jak naše aplikace bude vypadat na stránce
http://localhost:8080/JSFRandom:
Proč nám server na hlavní stránce vyhodil Forbidden? Je to z
důvodu, že nemáme nastavený tzv. routování. Routování budeme nastavovat
v dalších lekcích v souboru web.xml. Prozatím si budeme muset
vystačit s používáním jen následující URL adresy:
http://localhost:8080/JSFNahodnoCislo/index.xhtml. Když tedy
otevřeme tuto URL adresu, uvidíme následujicí stránku:
Příště, v lekci Úvod do Context Dependency Injection (CDI), si vytvoříme svou první webovou aplikaci v JEE.
Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 427x (19.52 kB)
Aplikace je včetně zdrojových kódů v jazyce Java
David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.