Výukový program JSF Tools - Sestavení aplikace JSF 2.0

Souhrn
V tomto výukovém programu sestavíme a spustíme webovou aplikaci JSF 2.0 a zdůrazníme funkce poskytované projektem JSF Tools.

Úvod

Projekt JSF Tools poskytuje nástroje, které mohou zjednodušit sestavování webových aplikací JSF 2.0. Tyto nástroje zahrnují rozšířený editor zdrojů HTML, který poskytuje obsahovou asistenci a ověřování pro značky JSF. V tomto výukovém programu vytvoříme a spustíme webovou aplikaci JSF 2.0. Na stránce Novinky a zajímavosti je uveden seznam všech funkcí nástrojů dostupných pro podporu vývoje webové aplikace JSF 2.0.


Nastavení

Nastavení instance serveru Apache Tomcat

Nastavte instanci serveru Apache Tomcat pomocí informací v sekci "Nastavení" v tomto výukovém programu Sestavení a spuštění webové aplikace.

Vytvořte projekt JavaServer Faces

Vytvořte novou dynamickou webovou aplikaci nazvanou JSFFaceletsTutorial. Nastavte cílové běhové prostředí na Apache Tomcat 6.0.
V sekci Konfigurace klepněte na tlačítko Upravit a vyberte fazetu “JavaServer Faces 2.0”. Přeskočte další panel na stránku Schopnosti JSF.



Nová dynamická webová aplikace Fazety projektu

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

Stránka schopností JSF


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

Stránka schopností JSF


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.

Stránka schopností JSF

Klepnutím na tlačítko Dokončit vytvoříte aplikaci JavaServer Faces. Po dokončení budete možná vyzváni k volbě perspektivy J2EE. Klepněte na tlačítko OK.

Vaše aplikace JSF byla vytvořena.


Vytváření stránek šablon Facelets

Nyní vytvoříte stránku šablon Facelets. Vytvořte složku nazvanou šablony ve složce WEB-INF. Pomocí průvodce HTML v této složce vytvořte stránku šablony s názvem BasicTemplate.xhtml. Klepněte pravým tlačítkem myši na složku šablona a pomocí volby Nové » HTML spusťte průvodce HTML. V průvodci na stránce Vybrat šablony vyberte šablonu Nová šablona Facelet. Klepněte na tlačítko Dokončit.

Vytvořit šablonu Facelets

Upravte soubor se šablonou dle pokynů v šabloně. Vytvoříte a vložíte šablony záhlaví a zápatí. Váš konečný soubor se šablonou by měl vypadat tak, jak je zobrazeno níže.



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 Tutorial</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>


Vytvořte šablony záhlaví a zápatí ve složce šablona pomocí průvodce novou stránkou HTML, jak je popsáno výše. V průvodci na stránce Vybrat šablony vyberte odpovídající soubory se šablonami Nové záhlaví Facelet a Nové zápatí Facelet. Proveďte změny šablon, jak je znázorněno níže.



Šablona Facelets

Vytvoření stránky JSF

Vytvořte stránku JSF se značkami Facelets, která použije šablonu vytvořenou v předchozím kroku. Použijte průvodce vytvořením stránky HTML k vytvoření stránky login.xhtml ve složce Webový obsah v rámci nové aplikace. V průvodci na stránce Vybrat šablony vyberte šablonu Nová stránka kompozice Facelet. Klepněte na tlačítko Dokončit.


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">
        Zde přidejte své záhlaví nebo je odstraňte a použijte výchozí.
    </ui:define>
    <ui:define name="content">
        Zde přidejte svůj obsah nebo jej odstraňte a použijte výchozí.
    </ui:define>
    <ui:define name="footer">
        Zde přidejte své zápatí nebo je odstraňte a použijte výchozí.
    </ui:define>
</ui:composition>
</html>


Ověřování atributů a obsahová asistence značek Facelets

Projekt JSF Tools přidává podporu pro ověřování atributů značek Facelets a také k nim poskytuje obsahovou asistenci. Všimněte si varování o atributu template značky <ui:composition>.



Ověřování atributů značek Facelets

Umístěte kurzor mezi dvojité uvozovky atributu template a stisknutím kombinace kláves Ctrl + mezerník otevřete Obsahovou asistenci. Měl by se zobrazit rozevírací seznam adresářů ve složce WebContent. Vyberte cestu /WEB-INF/templates/BasicTemplate.xhtml.



Obsahová asistence atributů značek Facelets


Dokončete stránku JSF.

Odstraňte značky <ui:define> pro záhlaví a zápatí. Stránka získá záhlaví a zápatí ze šablony. Přidejte značky pro přihlášení do sekce obsahu, jak je znázorněno níže. Pamatujte, že aktuální verze projektu JSF Tools nepodporuje vizuální znázornění stránek XHTML v editoru webových stránek JSF. Avšak všechny funkce produktivity dostupné na stránce Zdroj v editoru webových stránek pro úpravu stránek JSP jsou dostupné v editoru zdrojů HTML pro sestavení stránky JSF Facelets v XHTML.



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="Name"></h:outputText>
                <h:inputText value="#{loginBean.name}"></h:inputText>
                <h:outputText value="Password"></h:outputText>
                <h:inputSecret value="#{loginBean.password}"></h:inputSecret>
            </h:panelGrid>
            <h:commandButton value="Login" action="login"></h:commandButton>
        </h:form>
    </ui:define>
</ui:composition>
</html>

Konfigurace spravovaného objektu typu Bean

V Průzkumníku projektů rozbalte uzel JSFFaceletsTutorial->WebContent. Poklepejte na soubor faces-config.xml. Tímto se spustí Editor konfigurace Faces. Vyberte kartu Spravovaný objekt typu bean.

Spravovaný objekt typu bean v editoru konfigurace Faces

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.

Editor konfigurace Faces - Karta Spravovaný objekt typu bean


Upravte třídu Java com.tutorial.LoginBean. Přidejte následující kód a uložte.

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

Přidání další stránky

Vytvořte novou stránku HTML welcome.xhtml ve složce WebContent s následujícím obsahem:


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="Welcome #{loginBean.name}"></h:outputLabel>
    </ui:define>
</ui:composition>
</html>

Nastavení navigace stránkami

Poklepáním na soubor faces-config.xml otevřete editor konfigurace Faces. Klepněte na kartu Navigační pravidlo. Nyní přetáhněte soubory login.xhtml a welcome.xhtml z průzkumníka projektů na mřížku Navigační pravidlo, jak je zde zobrazeno.

Přidávání stránek pro navigační pravidlo

Klepněte na nástroj Odkaz na paletě vpravo. Nyní přetáhněte šipku ze souboru login.xhtml do souboru welcome.xhtml, jak je zde znázorněno.

Propojení stránek pro navigační pravidlo

Nyní klepněte na šipku a otevřete pohled Vlastnosti. Klepněte na tlačítko s elipsami vedle pole “Z výsledku”.

Nastavení akce pro navigační pravidlo

V tomto dialogovém okně vyberte volbu “Přihlášení”. Klepněte na tlačítko OK.

Výběr akce pro navigační pravidlo

Naše navigační pravidlo je nyní nastaveno.

Spuštění stránky JSF Facelets

Nyní spustíte stránku login.xhtml na serveru Apache Tomcat. Když je v navigátoru vybrána stránka login.xhtml, vyberte z kontextové nabídky volbu Spustit na serveru. Vyberte svůj server Apache Tomcat, a pokud jste to dosud neudělali, podle potřeby jej nastavte. 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.


Blahopřejeme! Právě jste vytvořili a spustili svoji první aplikaci JSF Facelets.