在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.xhtmltabPanel.xhtmlcolPanel.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

在RichFaces中使用Facelets模板的相关文章

ansible中角色和模板使用及部署lamp平台

一.roles ansilbe自1.2版本引入的新特性,用于层次性.结构化地组织playbook.roles能够根据层次型结构自动装载变量文件.tasks以及handlers等.要使用roles只需要在playbook中使用include指令即可.简单来讲,roles就是通过分别将变量.文件.任务.模块及处理器放置于单独的目录中,并可以便捷地include它们的一种机制.角色一般用于基于主机构建服务的场景中,但也可以是用于构建守护进程等场景中. 一个roles的案例如下所示:        si

Struts2中使用Velocity模板时模板资源路径配置问题

在Struts2中使用Velocity模板时,如何以相对与Web工程的路径来配置模板资源文件路径这个问题网上千篇一律的来自Velocity官方文档.官方文档中指出如果是Web工程的话,模板的相对路径是工程根路径,今天在使用的时候有如下配置: Velocity.properties(默认在WEB-INF下): resource.loader =file, classclass.resource.loader.description = Velocity Classpath Resource Loa

MyEclipse中修改servlet模板

1.在MyEclipse目录下搜索com.genuitec.eclipse.wizards,得到搜索结果 com.genuitec.eclipse.wizards_8.4.100.me200912131330.jar(我的位置是:C:\Users\Administrator\AppData\Local\Genuitec\Common\plugins): 2.备份,复制粘贴一份,完全关闭MyEclipse: 3.使用winrar打开com.genuitec.eclipse.wizards_8.4.

ArcGIS API for Silverlight代码中使用Template模板

原文:ArcGIS API for Silverlight代码中使用Template模板 在项目开发中,会遇到点选中聚焦闪烁效果,但是因为在使用Symbol的时候,会设置一定的OffSetX和OffSetY,所以聚焦闪烁的时候,有些情况下,会出现闪烁点的位置和Symbol的位置不重叠现象,下面的方法就是解决这个问题的. 1.在Silverlight项目中新建一个文件夹Template,新建一个DefaultMarkerSymbol.xaml的Silverlight资源字典文件,如下图: 2.打开

Asp.Net MVC中使用ACE模板之Jqgrid

第一次看到ACE模板,有种感动,有种相见恨晚的感觉,于是迅速来研究.它本身是基于bootstrap和jqueryui,但更nice,整合之后为后台开发节省了大量时间. 发现虽然不是完美,整体效果还是不错,特此分享给园友.这一节先讲其中的Jqgrid.按照国际惯例,先上两张图. 集成了button,form,treeview以及日历,时间轴.chart等控件,非常丰富.下面是Jqgrid在MVC中的使用. jqgrid的加载,排序,查找都是基于后台方法,不是在内存中完成,但也有一些小坑.下面一一道

[工作中的设计模式]模板模式

一.模式解析 准备一个抽象类,将部分逻辑以具体方法以及具体构造函数的形式实现,然后声明一些抽象方法来迫使子类实现剩余的逻辑.不同的子类可以以不同的方式实现这些抽象方法,从而对剩余的逻辑有不同的实现.这就是模板方法模式的用意 模板模式的关键点为: 1.有一个父类,将整体业务逻辑和公用方法进行封装: 2.父类将具体的有差异的业务定义为抽象方法: 3.子类继承父类后,实现这些抽象方法,完成对自己业务流程的: 4.子类不可以改变父类的整体业务逻辑流程: 5.子类也可以覆盖父类中其他方法,实现定制化业务

[Webpy]在webpy中使用jinja2模板

webpy的模板感觉写小的网页还可以,但是如果要是写比较多的html标签就会显得非常乱,于是决定使用jinja2,这个模板类似django的模板,而且跟其他pythonweb框架的兼容性也比较好. 在项目目录下新建一个settings文件 #-*- coding: utf-8 -*- __author__ = 'orangleliu' ''' settings of the project ''' import os import web from web.contrib.template im

VS2013中的MVC5模板部署到mono上的艰辛历程

在Xamarin.Studio创建的asp.net项目,部署过程非常顺利,没有遇到什么问题:但在VS2013中创建的asp.net项目,部署过程会有一些波折.现在想想,原因是Xamarin.Studio中的项目模板比较简单,只是显示几个文字,并没有用到mvc5中的东西. vs2013新建一个asp.net的项目(目标框架是.net4.5),选择mvc,并且更改身份验证为不适用身份验证. 编译,并发布到jexus默认站点指向的目录,访问之.报出的错误信息如下图. 根据异常堆栈信息,应该是调用Htm

在WPF中获取DataGridTemplateColumn模板定义的内容控件

xaml格式描述: <DataGrid Name="dataGrid" Grid.Row="1" ItemsSource="{Binding}"  >            <DataGrid.Columns>              <DataGridTemplateColumn Header="描述">                    <DataGridTemplateCo