JSF Facelets檢視 - tw511教學網

Facelets檢視是XHTML頁面。您可以通過向頁面新增元件來建立網頁或檢視，將元件連線到後端bean的值和屬性，並在元件上註冊轉換器，驗證器或偵聽器。

XHTML網頁作為前端。您的應用程式的第一頁預設為index.xhtml。

網頁(如，在index.xhtml中)的第一部分宣告頁面的內容型別，即XHTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
``

在下一段中指定`XHTML`頁面的語言，然後宣告網頁中使用的標籤庫的XML名稱空間。

```html
<html lang="en"  
xmlns="http://www.w3.org/1999/xhtml"  
xmlns:h="http://xmlns.jcp.org/jsf/html"  
xmlns:f="http://xmlns.jcp.org/jsf/core">

一個完整的檔案：index.xhtml 程式碼內容如下所示 -

<?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"  
xmlns:f="http://xmlns.jcp.org/jsf/core">  
<h:head>  
    <title>Jsf Form</title>  
</h:head>  
    <h:body>  
        <h:form id="form">  
        <h:outputLabel for="username">User Name</h:outputLabel>  
        <h:inputText id="name" value="#{user.name}" required="true">  
        <f:validateRequired for="name" />  
        </h:inputText><br/>  
        <h:commandButton value="OK" action="response.xhtml"></h:commandButton>  
        </h:form>  
    </h:body>  
</html>

Facelets HTML標籤以h:開頭，用於在網頁和核心標籤上新增元件f:validateRequired用於驗證使用者輸入。

h:inputText標籤接受使用者輸入，並通過EL表示式#{user.name}設定託管bean屬性名稱的值。

執行index.xhtml檔案後，JSF將呈現一個HTML索引頁面。輸出如下所示 -

這是建立Facelets檢視的過程。現在，您可以建立第二個xhtml頁面：response.xhtml 其中的程式碼內容如下 -

<?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>Response Page</title>  
</h:head>  
<h:body>  
<h1>  
Hello #{user.name}  
</h1>  
</h:body>  
</html>

執行 index.xhtml 檔案後，將顯示以下輸出。

在輸入框中寫入一個名字，提交得到如下結果 -

對映Faces Servlet

通過將Web部署描述符檔案中的Faces Servlet對映到web.xml檔案中來完成JavaServer Faces應用程式的組態。

在NetBeans IDE中，會自動為您建立一個Web部署描述符檔案。下面給出了一個自動生成的web.xml檔案的內容。

<?xml version="1.0" encoding="UTF-8"?>  
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">  
<context-param>  
<param-name>javax.faces.PROJECT_STAGE</param-name>  
<param-value>Development</param-value>  
</context-param>  
<servlet>  
<servlet-name>Faces Servlet</servlet-name>  
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>  
<load-on-startup>1</load-on-startup>  
</servlet>  
<servlet-mapping>  
<servlet-name>Faces Servlet</servlet-name>  
<url-pattern>/faces/*</url-pattern>  
</servlet-mapping>  
<session-config>  
<session-timeout>  
30  
</session-timeout>  
</session-config>  
<welcome-file-list>  
<welcome-file>faces/index.xhtml</welcome-file>  
</welcome-file-list>  
</web-app>