在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經過模板技術將頁面的公共部分同具體內容相互區分開來，示例的最終效果以下：