Výukové programy WTP - Výukový program JavaServer Faces Tools
Souhrn
V tomto výukovém programu sestavíme a spustíme aplikaci JSF (JavaServer Faces) a zdůrazníme funkce, jimiž přispěl projekt JSF Tools.
Raghu Srinivasan, Oracle Corporation.
15. června 2009
Úvod
V tomto výukovém programu vytvoříme a spustíme webovou aplikaci se schopnostmi rozhraní JavaServer Faces. Projekt WTP JSF Tools nabízí funkce, které zjednodušují sestavení, konfiguraci a provádění aplikací. Patří sem editor webových stránek pro vizuální úpravy webové stránky JSF-JSP, syntaktické a sémantické ověřování a editor konfigurace Faces pro úpravu souboru prostředků aplikační konfigurace.
Před absolvováním tohoto výukového programu může být vhodné navštívit stránku Sestavení a spuštění webové aplikace. Daný výukový program pokrývá nastavení instance serveru, kterým se tento výukový program nezabývá.
Nastavení
Změňte Editor webových stránek na výchozí editor stránek JSP
Editor webových stránek (WPE) dodaný projektem JSF Tools NENÍ registrován jako výchozí editor souborů JSP. Z WPE můžete udělat výchozí editor souborů JSP takto:
- Přejděte na "Okno" -> "Předvolby..." -> "Obecné" ->
"Editory" -> "Přidružení souborů".
- V sekci "Typy souborů" vyberte "*.jsp".
- V sekci "Přidružené editory" vyberte "Editor webových stránek".
- Vyberte tlačítko "Výchozí".
Vytvořte projekt JavaServer Faces
Vytvořte novou dynamickou webovou aplikaci nazvanou JSFTutorial.
Nastavte cílové běhové prostředí na Apache Tomcat 6.0.
V sekci konfigurace vyberte JavaServer Faces Project v1.2. Přeskočte další dva panely na stránku Schopnosti JSF.

Na stránce Schopnosti JSF vyberte v rozevírací nabídce Typ knihovny JSF možnost Uživatelská knihovna.

Klepněte na ikonu Stáhnout knihovnu.
Zobrazí se dialogové okno Stáhnout knihovnu se seznamem poskytovatelů souborů JAR implementace rozhraní JSF. Vyberte knihovnu od Sun Microsystems. Klepněte na tlačítko Další. Přijměte podmínky licence a klepněte na tlačítko Dokončit

Nástroj stáhne soubory JAR, vytvoří uživatelskou knihovnu JDT a přidá ji k aktuálnímu projektu. Pokud není označeno zaškrtávací políčko pro novou knihovnu, označte jej. Dále klepněte na ikonu Spravovat knihovny.
Vytvořte uživatelskou knihovnu JDT k uchování souboru JAR JSTL. Klepněte na tlačítko OK.
Knihovna JSTL se zobrazuje v dialogovém okně Schopnosti JSF. Vyberte knihovnu a klepněte na tlačítko Dokončit
Vaše aplikace JSF byla vytvořena. Povšimněte si, že soubor web.xml byl aktualizován servletem Faces a mapováním servletu, byl vytvořen stub konfiguračního souboru aplikace JSF (faces-config.xml) a cesta sestavení byla aktualizována pomocí implementačních souborů JAR.

Pokud máte již existující dynamickou webovou aplikaci, je možné přidat schopnosti JSF, když přejdete na:
Vlastnosti projektu > Fazety projektu > Přidat\Odebrat fazety projektu…
Vytvořit stránku JSF JSP
Použijte průvodce vytvořením stránky JSP k vytvoření stránky login.jsp ve složce Webový obsah v rámci nové aplikace. V průvodci na stránce Vybrat šablony vyberte šablonu Nová stránka JSP(html) .
Klepněte na tlačítko Dokončit. Stránka se otevře v Editoru webových stránek - viz níže.

Otevřete pohled Vlastnosti. Klepněte pravým tlačítkem myši na plátno návrhu a z kontextové nabídky vyberte Zobrazit->Vlastnosti. Počkejte, než zmizí dialogové okno "Načítání vlastností".
Přidejte na plátno příkazové tlačítko (CommandButton).
- V pohledu Paleta klepněte na sekci JSF HTML, aby se zobrazil seznam komponent.
- Přetáhněte příkazové tlačítko pomocí myši na plátno. Povšimněte si, že editor ohraničí příkazové tlačítko značkami <f:view> a <h:form>.
- V pohledu Vlastnosti klepněte na volbu Rychlá úprava.
- Nastavte atribut Hodnota na Přihlášení.
- Nastavte atribut Akce na přihlášení.
Přidat mřížku panelu
- Z pohledu Paleta přetáhněte mřížku panelu (PanelGrid) pomocí myši na plátno. Všimněte si reakce na cíli umístění.
- Umístěte mřížku panelu před příkazové tlačítko, ale do značky Form. Mřížka panelu se vytvoří s předdefinovanou sadou komponent OutputText.
Upravte komponenty v mřížce panelu.
- Klepněte na volbu OutputText Položka2 a stiskněte klávesu Delete.
- Přidejte za Položku1 a před Položku3 značku InputText (Textový vstup v pohledu Paleta).
- Odstraňte OutputText, Položku 4.
- Přidejte za Položku3 značku InputSecret (Utajený vstup v pohledu Paleta).
- Klepněte na volbu OutputText, Položka1. Změňte hodnotu v pohledu Zdroj na Název.
- Klepněte na volbu OutputText, Položka3. Změňte hodnotu v pohledu Zdroj na Heslo.
- Klepněte na kartu Náhled, stránka se zobrazí vykreslená v prohlížeči.
- Klepněte na značku InputText vedle Názvu. V pohledu Vlastnosti nastavte atribut hodnoty na #{loginBean.name}.
- Uložte stránku. Editor zobrazí varování s tím, že proměnnou loginBean nelze určit.
V Průzkumníku projektů rozbalte uzel JSFTutorial->WebContent.
Poklepejte na soubor faces-config.xml. Tímto se spustí Editor konfigurace Faces. Vyberte kartu Spravovaný objekt typu bean.
Klepněte na tlačítko Přidat. To spustí průvodce novým spravovaným objektem typu bean. Vyberte volbu Vytvořit novou třídu Java. Na dalším panelu průvodce zadejte balík jako com.tutorial a Název třídy jako LoginBean. Klepněte na tlačítko Dokončit.
Vytvoří se třída Java a bude zaregistrována jako spravovaný objekt typu bean. Uložte Editor konfigurace Faces. Chcete-li upravit třídu Java, klepněte na hypertextový odkaz třída ManagedBean na stránce spravovaný objekt typu bean, jak vidíte na obrázku níže. Tím se spustí editor Java.
Upravte třídu Java com.tutorial.LoginBean. Přidejte následující kód a uložte.
V pohledu Průzkumník projektů klepněte pravým tlačítkem myši na stránku JSP login.jsp a z kontextové nabídky vyberte volbu Ověřit. Stránka by nyní měla být platná.
Na stránce Zdroj editoru webových stránek přidejte značku JSF <h:inputSecret value="#{}"></h:inputSecret> . Když je kurzor uvnitř závorek, stiskněte klávesu Ctrl+mezerník. Měla by se zobrazit rozevírací nabídka se seznamem všech implicitních objektů a spravovaným objektem typu bean definovaným výše. Vyberte spravovaný objekt typu bean, loginBean.
Zadejte název vlastnosti, například x, který není definován ve spravovaném objektu typu bean, a změnu uložte. Editor zobrazí varování, že vlastnost nelze určit.
Odstraňte neplatnou vlastnost. Stiskněte klávesu Ctrl+mezerník za '.'
v názvu objektu typu bean. Měla by se zobrazit rozevírací nabídka vypisující vlastnosti definované ve spravovaném objektu typu bean. Z nabídky vyberte heslo.
Vytvořte třídu Java com.tutorial.validatePassword, která implementuje rozhraní Validátor, a uložte.
V Průzkumníku projektů rozbalte uzel JSFTutorial->WebContent.
Poklepejte na soubor faces-config.xml. Tím se spustí Editor konfigurace Faces. Vyberte kartu Komponenta. Rozbalte sekci Validátory.
Klepněte na tlačítko Přidat. Vyberte tlačítko Procházet přidružené k poli Třída validátoru a vyberte třídu com.tutorial.ValidatePassword. Změny uložte.
Přidejte značku JSF <f:validator id=""></f:validator > . Když je kurzor uvnitř uvozovek, stiskněte klávesu Ctrl+mezerník. Měla by se zobrazit rozevírací nabídka se seznamem všech standardních validátorů a s validátory registrovanými v konfiguračním souboru Faces. Vyberte Ověřit heslo.
Nyní přesuneme statické řetězce, které jsme na této stránce použili, do balíku prostředků. Chcete-li to provést, přidejte do složky com.tutorial soubor messages.properties. Definujte vlastnosti zobrazené níže a soubor uložte.
Přidejte značku JSF loadBundle - viz níže. Tuto značku můžete přetáhnout pomocí myši ze sekce JSF Core pohledu Paleta.
Odstraňte řetězec Name v atributu hodnoty značky outputLabel. Umístěte kurzor do závorek a stiskněte klávesu Ctrl+mezerník. Měla by se zobrazit rozevírací nabídka se seznamem, který obsahuje proměnnou msg, kterou jste definovali ve značce loadBundle. Vyberte ji.
Zadejte za msg tečku a stiskněte klávesu Ctrl+mezerník. Měla by se zobrazit rozevírací nabídka se seznamem vlastností definovaných v souboru messages.properties. Vyberte vlastnost name.
Vyplňte stránku pro přihlášení, jak je zobrazeno níže.
Vytvořte novou stránku JSF welcome.jsp, viz níže.
Editor prostředků konfigurace Faces
Projekt JSF Tools obsahuje speciální editor pro soubory prostředků konfigurace Faces. Následující sekce obsahuje stručné seznámení s editorem. V nejbližší době bude publikován úplný výukový program s podrobným popisem všech funkcí editoru.
Poklepáním na soubor faces-config.xml spusťte editor konfigurace Faces. Přejděte na kartu Navigace.
- Přidejte na kartu Navigace soubory login.jsp a welcome.jsp. Vyberte z Palety ovládací prvek Stránka a umístěte jej na kartu Navigace. Zvolte stránku ve výsledném dialogovém okně Vybrat soubor JSP.
- Propojte dvě nové stránky. Klepněte na ovládací prvek Odkaz na Paletě, vyberte stránku přihlášení a nakreslete čáru k úvodní stránce. Vyberte čáru na kartě Navigace a v pohledu Vlastnosti nastavte hodnotu from-outcome na login.
Testování stránky JSF JSP
1) Nyní spustíme stránku na serveru Apache Tomcat.
Když je v navigátoru vybrána stránka login.jsp, zvolte z kontextové nabídky Spustit na serveru.

2) Vyberte svůj server Apache Tomcat a pokud jste to dosud neudělali, podle potřeby jej nastavte.
3) Klepněte na tlačítko Dokončit. V pohledu Konzola by mělo být vidět, že se spustí server Tomcat, a následně se spuštěná stránka pro přihlášení zobrazí ve webovém prohlížeči, podobně jako na obrázku níže.

Klepněte na tlačítko přihlášení. Měli byste přejít na úvodní stránku.
Blahopřejeme! Právě jste vytvořili a spustili svoji první aplikaci JSF (JavaServer Faces) za pomoci nového produktu Eclipse WTP JSF Tools.