以下代码显示了如何使用JSF Facelets标签创建模板。
JSF应用程序中的模板定义了公共接口布局和样式。
例如,我们可以创建一个页面模板,其中有横幅,标题和页脚中的版权信息。
然后我们可以重用模板来创建页面。
JSF有以下facelets标签来创建模板布局。
标签 | 描述 |
---|---|
ui:insert | 定义要放置在模板中的内容。ui:define标签可以替换其内容。 |
ui:define | 在模板中插入内容。 |
ui:include | 将一个xhtml页面的内容包含到另一个xhtml页面中。 |
ui:composition | 使用模板属性加载模板。它可以定义要插入xhtml页面的一组组件。 |
以下步骤显示如何创建模板。
创建头部文件:header.xhtml如下使用ui:composition标记。
<ui:composition> <h1>Default Header</h1> </ui:composition>
创建页脚文件:footer.xhtml作为页脚
<ui:composition> <h1>Default Footer</h1> </ui:composition>
创建内容文件:contents.xhtml定义内容部分的默认内容。
<ui:composition> <h1>Default Contents</h1> </ui:composition>创建模板:common.xhtml通过使用ui:insert和ui:include标记在模板文件中包含页眉/页脚和内容文件。在ui:insert标记中命名每个部分。
<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>
以下代码显示如何使用带默认内容的模板创建home.xhtml
<h:body> <ui:composition template="common.xhtml"> </h:body>
我们也可以结合模板和其他标签来创建一个新的页面。使用ui:define标记来覆盖默认值。
<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>
以下代码来自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>
以下代码来自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>
以下代码来自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>
以下代码来自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>
下面的代码来自UserBean.java。
package cn..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; }
以下代码来自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; }
以下代码来自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>
以下代码来自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
将生成的WAR文件从目标文件夹复制到Tomcat部署文件夹,并运行Tomcat-Install-folder/bin/startup.bat。
Tomcat完成启动后,在浏览器地址栏中键入以下URL。
http://localhost:8080/simple-webapp/demo.xhtml
JSF教程 -JSF表单文本框示例h:inputText标签渲染类型为“text"的HTML输入元素。以下JSF标记h:inputText value="Hello World!" /...
JPA教程 - JPA一对多映射示例以下代码显示了如何在JPA中执行一对多映射。部门可以有一个或多个员工。在Java代码中,我们可以创建...
Java 实例 - 读取文件内容 Java 实例以下实例演示了使用 readLine() 方法来读取文件 test.log 内容,其中 test.log 文件内容为:...
Java设计模式 - 适配器模式我们在现实生活中使用适配器很多。例如,我们使用存储卡适配器连接存储卡和计算机,因为计算机仅支持...