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>
上一篇：
JSF Facelets技術介紹
下一篇：
JSF Facelets範本