1. 把 jsf-facelets.jar 拷贝到 WEB-INF/lib 目录(在应用程序部署时,它最终必须放在 WEB-INF/lib 目录中)。
2. 把 Facelet 初始化参数添加到 web.xml 文件中。
在web.xml里面添加以下参数:
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
这告诉 JSF 采用 xhtml 前缀,Facelet 渲染器能够解释这个前缀。
3. 把 FaceletViewHandler 添加到 faces-config.xml 文件中。
通过添加以下视图处理器到 faces-config.xml 中,就把 Facelets 插进了 JSF 中:
<application>
<locale-config>
<default-locale>en</default-locale>
</locale-config>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>
4. 制作Facelets模板相当于.net的master page
<!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>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title>Enterprise Project Management System</title>
</head>
<body>
<!-- tabpanel begin -->
<ui:insert name="content">content</ui:insert>
<!-- tabpanel end -->
</body>
</html>
5. 制作页面并使用模板
<!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"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<ui:composition template="/commons/templates/main.xhtml">
<ui:define name="content">
<f:view>
<a4j:form>
<rich:panel header="RichFaces Greeter" style="width: 315px">
<h:outputText value="Your name: " />
<h:inputText value="#{user.name}">
<f:validateLength minimum="1" maximum="30" />
</h:inputText>
<a4j:commandButton value="Get greeting" reRender="greeting" />
<h:panelGroup id="greeting">
<h:outputText value="Hello, " rendered="#{not empty user.name}" />
<h:outputText value="#{user.name}" />
<h:outputText value="!" rendered="#{not empty user.name}" />
</h:panelGroup>
</rich:panel>
</a4j:form>
</f:view>
</ui:define>
</ui:composition>
</html>