免費(fèi)AI編程助手
JSF Facelets模板示例
2018-09-27 15:32 更新
JSF教程 - JSF Facelets模板示例
以下代碼顯示了如何使用JSF Facelets標(biāo)簽創(chuàng)建模板。
JSF應(yīng)用程序中的模板定義了公共接口布局和樣式。
例如，我們可以創(chuàng)建一個(gè)頁(yè)面模板，其中有橫幅，標(biāo)題和頁(yè)腳中的版權(quán)信息。
然后我們可以重用模板來(lái)創(chuàng)建頁(yè)面。
JSF有以下facelets標(biāo)簽來(lái)創(chuàng)建模板布局。
| 標(biāo)簽 | 描述 |
|---|---|
| ui:insert | 定義要放置在模板中的內(nèi)容。ui:define標(biāo)簽可以替換其內(nèi)容。 |
| ui:define | 在模板中插入內(nèi)容。 |
| ui:include | 將一個(gè)xhtml頁(yè)面的內(nèi)容包含到另一個(gè)xhtml頁(yè)面中。 |
| ui:composition | 使用模板屬性加載模板。它可以定義要插入xhtml頁(yè)面的一組組件。 |
以下步驟顯示如何創(chuàng)建模板。
創(chuàng)建頭部文件：header.xhtml如下使用ui:composition標(biāo)記。
<ui:composition> <h1>Default Header</h1> </ui:composition>
創(chuàng)建頁(yè)腳文件:footer.xhtml作為頁(yè)腳
<ui:composition> <h1>Default Footer</h1> </ui:composition>
創(chuàng)建內(nèi)容文件:contents.xhtml定義內(nèi)容部分的默認(rèn)內(nèi)容。
<ui:composition> <h1>Default Contents</h1> </ui:composition>創(chuàng)建模板：common.xhtml通過(guò)使用ui:insert和ui:include標(biāo)記在模板文件中包含頁(yè)眉/頁(yè)腳和內(nèi)容文件。在ui:insert標(biāo)記中命名每個(gè)部分。
ui:insert標(biāo)簽的name屬性將用于替換相應(yīng)section的內(nèi)容。
<h:body>
<ui:insert name="header" >
<ui:include src="header.xhtml" />
</ui:insert>
<ui:insert name="content" >
<ui:include src="contents.xhtml" />
</ui:insert>
<ui:insert name="footer" >
<ui:include src="footer.xhtml" />
</ui:insert>
</h:body>
以下代碼顯示如何使用帶默認(rèn)內(nèi)容的模板創(chuàng)建home.xhtml
<h:body> <ui:composition template="common.xhtml"> </h:body>
我們也可以結(jié)合模板和其他標(biāo)簽來(lái)創(chuàng)建一個(gè)新的頁(yè)面。使用ui:define標(biāo)記來(lái)覆蓋默認(rèn)值。
<h:body>
<ui:composition template="templates/common.xhtml">
<ui:define name="content">
<h:link value="Page 1" outcome="page1" />
<h:link value="Page 2" outcome="page2" />
</ui:define>
</ui:composition>
</h:body>
例子
以下代碼來(lái)自commonLayout.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://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<h:head>
<h:outputStylesheet name="common-style.css" library="css" />
</h:head>
<h:body>
<div id="page">
<div id="header">
<ui:insert name="header" >
<ui:include src="/template/common/commonHeader.xhtml" />
</ui:insert>
</div>
<div id="content">
<ui:insert name="content" >
<ui:include src="/template/common/commonContent.xhtml" />
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer" >
<ui:include src="/template/common/commonFooter.xhtml" />
</ui:insert>
</div>
</div>
</h:body>
</html>
以下代碼來(lái)自commonFooter.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:ui="http://java.sun.com/jsf/facelets"
>
<body>
<ui:composition>
<h1>This is default footer</h1>
</ui:composition>
</body>
</html>
以下代碼來(lái)自demo.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://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<h:body>
<ui:composition template="template/common/commonLayout.xhtml">
</ui:composition>
</h:body>
</html>
以下代碼來(lái)自page1.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://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<h:body>
<ui:composition template="/template/common/commonLayout.xhtml">
<ui:define name="content">
<h2>This is page1 content</h2>
</ui:define>
<ui:define name="footer">
<h2>This is page1 Footer</h2>
</ui:define>
</ui:composition>
</h:body>
</html>
下面的代碼來(lái)自UserBean.java。
package cn.w3cschool.common;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="user")
@SessionScoped
public class UserBean implements Serializable{
private static final long serialVersionUID = 1L;
}
以下代碼來(lái)自common-style.css。
#page{
width: 800px;
margin: 0 auto;
}
#header{
width: 100%;
height:100px;
border: 1px solid #000;
margin-bottom:16px;
}
#content{
width: 100%;
height:200px;
margin-right:16px;
margin-bottom:16px;
border: 1px solid #000;
}
#footer{
width: 100%;
height:100px;
border: 1px solid #000;
}
以下代碼來(lái)自commonContent.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:ui="http://java.sun.com/jsf/facelets"
>
<body>
<ui:composition>
<h1>This is default content</h1>
</ui:composition>
</body>
</html>
以下代碼來(lái)自commonHeader.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:ui="http://java.sun.com/jsf/facelets"
>
<body>
<ui:composition>
<h1>This is default header</h1>
</ui:composition>
</body>
</html>
下載 Facelets-Template.zip運(yùn)行
將生成的WAR文件從目標(biāo)文件夾復(fù)制到Tomcat部署文件夾，并運(yùn)行Tomcat-Install-folder/bin/startup.bat。
Tomcat完成啟動(dòng)后，在瀏覽器地址欄中鍵入以下URL。
http://localhost:8080/simple-webapp/demo.xhtml
以上內(nèi)容是否對(duì)您有幫助：
← JSF 刪除示例
更多建議：