在RichFaces中使用Facelets模板
目录
- Facelets简介
- Facelets标签
- 创建相应文件
Facelets简介
Facelets是用来构建JSF应用程序的默认视图技术。它为表现层提供了一个强有力的模板化系统。这里将简单介绍一下如何在RichFaces中使用Facelets模板标签。开发环境是基于Maven的,至于如何在Maven中构建RichFaces项目,详情可以参考这里。
Facelets标签
下面表格中列举的是模板技术要使用到的标签:
标签 | 说明 |
---|---|
ui:include |
包含另一个文件中的内容。 |
ui:composition |
如果不使用 template 属性,组合是一连串可插入到其它地方的元素。组合可以具有可变部分(使用 ui:insert 子标签指定)。如果使用 template 属性,则加载该模板。 |
ui:define |
定义了匹配 ui:insert 插入到模板中的内容。 |
ui:insert |
将内容插入到模板 |
创建相应文件
下图是示例的最终结构
在 faces-config.xml
中添加资源文件 messages.properties
。
<?xml version=‘1.0‘ encoding=‘UTF-8‘?> <faces-config version="2.2" 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-facesconfig_2_2.xsd"> <application> <resource-bundle> <base-name>messages</base-name> <var>msg</var> </resource-bundle> </application> </faces-config>
indexTitle=Index Page indexContent=Welcome to RichFaces tabTitle=Tab Panel Page colTitle=Collapsible Panel Page header=RichFaces Demo
模板文件 mainLayout.xhtml
。
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <f:view> <h:head> <title><ui:insert name="pageTitle"/></title> <!-- 模板布局css文件 --> <h:outputStylesheet library="css" name="layout.css"/> </h:head> <h:body> <div class="body"> <!-- 页眉 --> <div class="header"> <ui:insert name="header"> <ui:include src="header.xhtml"/> </ui:insert> </div> <div class="main"> <!-- 侧边栏 --> <div class="menu"> <ui:insert name="menu"> <ui:include src="menu.xhtml"/> </ui:insert> </div> <div class="content"> <ui:insert name="content"/> </div> </div> </div> </h:body> </f:view> </ui:composition>
然后是页面共用的页眉 header.xhtml
和侧边栏 menu.xhtml
文件。
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> <h:form> #{msg.header} </h:form> </ui:composition>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> <h:form> <rich:panelMenu> <rich:panelMenuGroup label="panels" expanded="true"> <rich:panelMenuItem> <h:commandLink action="tabPanel" value="Tab Panel"/> </rich:panelMenuItem> <rich:panelMenuItem> <h:commandLink action="colPanel" value="Collapisible Panel"/> </rich:panelMenuItem> </rich:panelMenuGroup> </rich:panelMenu> </h:form> </ui:composition>
最后是拥有具体内容的三个文件 index.xhtml
, tabPanel.xhtml
, colPanel.xhtml
。
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" template="/templates/mainLayout.xhtml"> <!-- ui:define标签对应于模板文件中的ui:insert标签 --> <ui:define name="pageTitle">#{msg.indexTitle}</ui:define> <ui:define name="content"> <rich:panel header="Main"> #{msg.indexContent} </rich:panel> </ui:define> </ui:composition>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" template="/templates/mainLayout.xhtml"> <!-- ui:define标签对应于模板文件中的ui:insert标签 --> <ui:define name="pageTitle">#{msg.tabTitle}</ui:define> <ui:define name="content"> <h:form> <rich:tabPanel switchType="client"> <rich:tab header="Tab One"> this is tab one </rich:tab> <rich:tab header="Tab Two"> this is tab two </rich:tab> </rich:tabPanel> </h:form> </ui:define> </ui:composition>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" template="/templates/mainLayout.xhtml"> <!-- ui:define标签对应于模板文件中的ui:insert标签 --> <ui:define name="pageTitle">#{msg.colTitle}</ui:define> <ui:define name="content"> <h:form> <rich:collapsiblePanel header="Collapsible Panel" switchType="client"> this is collapsible panel </rich:collapsiblePanel> </h:form> </ui:define> </ui:composition>
这样,Facelets通过模板技术将页面的公共部分同具体内容相互区分开来,示例的最终效果如下:
在RichFaces中使用Facelets模板
时间: 2024-11-05 04:34:03