在RichFaces中使用Facelets模板

在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通过模板技术将页面的公共部分同具体内容相互区分开来，示例的最终效果如下：