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.
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.
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.
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 JSF 2.0 (Mojarra). Klepněte na tlačítko Další.
Přijměte podmínky licence a klepněte na tlačítko Dokončit
Vaše aplikace JSF byla vytvořena.
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.
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.
<!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.
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>
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>.
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.
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.
<!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>
/**
* 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;
}
}
Vytvořte novou stránku HTML welcome.xhtml ve složce WebContent s následujícím obsahem:
<!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>
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.
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.
Nyní klepněte na šipku a otevřete pohled Vlastnosti. Klepněte na tlačítko s elipsami vedle pole “Z výsledku”.
V tomto dialogovém okně vyberte volbu “Přihlášení”. Klepněte na tlačítko OK.
Naše navigační pravidlo je nyní nastaveno.
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.