首页 > 代码库 > 在RichFaces中使用Facelets模板

在RichFaces中使用Facelets模板

2024-07-11 10:10:49   218人阅读

<style></style>

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


联系
我们