頁面組件化能帶來很多優點，當多個頁面引用同一個頁面，這樣，我們就只需要維護一個頁面的代碼，大大減輕開發人員的工作量。
假設網站的根目錄為jsfApp，建立jsfApp/resources/echo目錄，resources為默認的需要組件化的頁面的根目錄，echo為組件的前綴。
第一步
新增jsfApp/resources/echo/echoInputText.xhtml文件，內容如下：
[html] 】
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
<STRONG>xmlns:composite="http://java.sun.com/jsf/composite"</STRONG>>
<h:head>
<title>myjsf</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</h:head>
<!-- INTERFACE -->
<composite:interface>
<composite:attribute name="echo" />
</composite:interface>
<!-- IMPLEMENTATION -->
<composite:implementation>
<div style="padding: 20px;">
<span>請輸入響應文字：</span>
<h:inputText value="#{cc.attrs.echo.echoText}"></h:inputText>
</div>
</composite:implementation>
</html>
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:composite="http://java.sun.com/jsf/composite">
<h:head>
<title>myjsf</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</h:head>
<!-- INTERFACE -->
<composite:interface>
<composite:attribute name="echo" />
</composite:interface>
<!-- IMPLEMENTATION -->
<composite:implementation>
<div style="padding: 20px;">
<span>請輸入響應文字：</span>
<h:inputText value="#{cc.attrs.echo.echoText}"></h:inputText>
</div>
</composite:implementation>
</html>注意[html] view plaincopyprint?<STRONG>xmlns:composite="http://java.sun.com/jsf/composite"</STRONG>
xmlns:composite="http://java.sun.com/jsf/composite"聲明頁面組件必須用到composite名字空間。
[html]
<composite:interface>
<composite:interface>傳入的參數。
[html]
<composite:implementation>
<composite:implementation>真正組件中的內容。
第二步
新增jsfApp/echo2.xhtml文件：
[html]
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:echo="http://java.sun.com/jsf/composite/echo">
<h:head>
<title>myjsf</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</h:head>
<body>
<div id="header"
style="padding: 100px 0 20px 100px; font-size: 22px; font-weight: bold; border-bottom: solid 1px red">
這個應聲器的作者是：#{inputEcho.encoder.author}。</div>
<div>
<h:form id="form" style="padding:20px 0 20px 100px">
<echo:echoInputText echo="#{inputEcho}"></echo:echoInputText>
<div style="padding-left: 50px">
<h:commandButton id="post" style="padding:3px;width:100px;"
value="提交響應" action="echo2" />
</div>
</h:form>
</div>
<h:panelGroup id="after">
<div style="padding: 20px 0 0 100px">
響應：
<h:outputText id="echo" value="#{inputEcho.outText}" escape="false"></h:outputText>
</div>
</h:panelGroup>
</body>
</html>
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:echo="http://java.sun.com/jsf/composite/echo">
<h:head>
<title>myjsf</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</h:head>
<body>
<div id="header"
style="padding: 100px 0 20px 100px; font-size: 22px; font-weight: bold; border-bottom: solid 1px red">
這個應聲器的作者是：#{inputEcho.encoder.author}。</div>
<div>
<h:form id="form" style="padding:20px 0 20px 100px">
<echo:echoInputText echo="#{inputEcho}"></echo:echoInputText>
<div style="padding-left: 50px">
<h:commandButton id="post" style="padding:3px;width:100px;"
value="提交響應" action="echo2" />
</div>
</h:form>
</div>
<h:panelGroup id="after">
<div style="padding: 20px 0 0 100px">
響應：
<h:outputText id="echo" value="#{inputEcho.outText}" escape="false"></h:outputText>
</div>
</h:panelGroup>
</body>
</html>
使用echo前綴
[html]
xmlns:echo="http://java.sun.com/jsf/composite/echo"
xmlns:echo="http://java.sun.com/jsf/composite/echo"
使用echoInputText頁面，並傳入echo參數
[html]
<echo:echoInputText echo="#{inputEcho}"></echo:echoInputText>
<echo:echoInputText echo="#{inputEcho}"></echo:echoInputText>
Bean及工具類如下：
[java]
@ManagedBean(name="inputEcho")
@SessionScoped
public class InputEcho implements Serializable {
/**
*
*/
private static final long serialVersionUID = 7599540489637124942L;
private String echoText = "";
private EchoEncoder encoder;
public InputEcho() {
encoder = new EchoEncoder();
}
/**
* @return the encoder
*/
public EchoEncoder getEncoder() {
return encoder;
}
/**
* @return the echoText
*/
public String getEchoText() {
return echoText;
}
public String getOutText() {
return encoder.Encode(echoText);
}
/**
* @param echoText the echoText to set
*/
public void setEchoText(String echoText) {
this.echoText = echoText;
}
public void echo() {
}
}
@ManagedBean(name="inputEcho")
@SessionScoped
public class InputEcho implements Serializable {
/**
*
*/
private static final long serialVersionUID = 7599540489637124942L;
private String echoText = "";
private EchoEncoder encoder;
public InputEcho() {
encoder = new EchoEncoder();
}
/**
* @return the encoder
*/
public EchoEncoder getEncoder() {
return encoder;
}
/**
* @return the echoText
*/
public String getEchoText() {
return echoText;
}
public String getOutText() {
return encoder.Encode(echoText);
}
/**
* @param echoText the echoText to set
*/
public void setEchoText(String echoText) {
this.echoText = echoText;
}
public void echo() {
}
}
[java]
package com.zolcorp.myjsf.bean;
import java.io.Serializable;
public class EchoEncoder implements Serializable {
/**
*
*/
private static final long serialVersionUID = -5578888194809870790L;
private String author = "pout";
/**
* @return the author
*/
public String getAuthor() {
return author;
}
public String Encode(String msg) {
if(msg == null)
return null;
return msg.replaceAll("<", "<").replaceAll(">", ">").replaceAll("\n", "<br/>");
}
}
package com.zolcorp.myjsf.bean;
import java.io.Serializable;
public class EchoEncoder implements Serializable {
/**
*
*/
private static final long serialVersionUID = -5578888194809870790L;
private String author = "pout";
/**
* @return the author
*/
public String getAuthor() {
return author;
}
public String Encode(String msg) {
if(msg == null)
return null;
return msg.replaceAll("<", "<").replaceAll(">", ">").replaceAll("\n", "<br/>");
}
}
頁面組件化能大大減少維護的工作量。JSF2裡配置也很簡單。
