RichFaces 配置及一些用法

http://blog.163.com/hycizl@126/blog/static/9363976020081026104016178/

 

一、RichFaces (3.1.x) 技术需求

1.JDK 1.5 或更高版本；

2.支持的 JSF 实现：
Sun JSF 1.1 RI - 1.2
MyFaces 1.1.1 - 1.1.5
Facelets JSF 1.1.1 - 1.2

3.支持的应用服务器：
Apache Tomcat 4.1 - 6.0
IBM WebSphere 5.1 - 6.0
BEA WebLogic 8.1 - 9.0
Oracle AS/OC4J 10.1.3
Resin 3.0
Jetty 5.1.X
Sun Application Server 8 (J2EE 1.4)
Glassfish (J2EE 5)
JBoss 3.2 - 4.0.x
Sybase EAServer 6.0.1

4.支持的浏览器：
Internet Explorer 5.5 - 7.0
Firefox 1.5 - 2.0
Opera 8.5 - 9.0
Netscape 7.0
Safari 2.0

二、安装配置

1.解压下载的压缩包文件，复制其中的“richfaces-api-3.1.0.jar”，“richfaces-impl-3.1.0.jar”，“richfaces-ui-3.1.0.jar”文件到应用程序 "WEB-INF/lib" 目录下。

2.添加如下内容到应用程序“WEB-INF/web.xml”文件中。
<context-param>
<param-name>org.richfaces.SKIN</param-name>
<param-value>blueSky</param-value>
</context-param>
<filter>
<display-name>RichFaces Filter</display-name>
<filter-name>richfaces</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
<filter-mapping>
<filter-name>richfaces</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>

3.添加如下几行到应用程序 JSP 页面中：
<%@ taglib uri="http://richfaces.org/a4j " prefix="a4j" %>
<%@ taglib uri="http://richfaces.org/rich " prefix="rich" %>

对于 XHTML 页面：
<xmlns:a4j="http://richfaces.org/a4j " />
<xmlns:rich="http://richfaces.org/rich " />

三、web.xml 中的 Richfaces 参数

I、初始化参数（<context-param>）
1.org.richfaces.SKIN
默认值：DEFAULT

其它八种预定义的皮肤：
DEFAULT
plain
emeraldTown
blueSky
wine
japanCherry
ruby
classic
deepMarine

其值为在应用中使用的皮肤的名字。其值可用一个精确（大小写）的字符串做为皮肤名字，或指向一个字符串属性的 EL 表达式（#{...}），或 org.richfaces.framework.skin 类型的一个属性。

2.org.ajax4jsf.LOGFILE
默认值：none

这是一个指向应用程序或容器日志文件的 URL （如果有日志文件的话）。如果设置了这个参数，那么日志文件的内容将会作为一个调试错误页面在框架（iframe）窗口中显示。

3.org.ajax4jsf.VIEW_HANDLERS
默认值：none

这是一个由逗号分隔的自定义 ViewHandler 实例的序列，用于插入到 Handlers 链路上。Handlers 按照给定的顺序被插入到 RichFaces viewhandlers 之前。例如，在 facelets 应用程序中，这个参数必须包含 com.sun.facelets.FaceletViewHandler，来代替在 faces-onfig.xml 文件中的声明。

4.org.ajax4jsf.CONTROL_COMPONENTS
默认值：none

这是一个逗号分隔的名字序列，用于将一个组件作为一个特殊的控制情形，例如资源文件加载器，别名（alias）bean 组件等等。这是一个从 COMPONENT_TYPE 静态属生反射得到的一个组件类型。对于这样类型组件的编码方法常常在呈现的 Ajax 响应中被调用，尽管这个组件不在被更新部分中。

5.org.ajax4jsf.ENCRYPT_RESOURCE_DATA
默认值：false

为了生成的资源，例如加密生成的数据，它会在资源的 URL 上被编码加密。例如，URL 指向一个由 mediaOutput 组件生成的图片，而 mediaOutput 组件包含一个生成方法的名字，那么对于一个黑客的攻击来说，他很可能创建一个对于任何 JSF baked beans 或其它属性的请求。为了避免这样的攻击，在重要的应用程序中设置这个参数为“true”（应用于 JRE > 1.4）。

6.org.ajax4jsf.ENCRYPT_PASSWORD
默认值：random

用于资源数据加密的一个密码。如果没有设置，将使用一个随机的密码。

7.org.ajax4jsf.COMPRESS_SCRIPT
默认值：true

不允许框架重新格式化 JavaScript 文件（使其不利于调试）

II、org.ajax4jsf.Filter 初始化参数
1.log4j-init-file

这是一个指向 log4j.xml 配置文件的路径（相对于应用程序上下文），log4j.xml 可用于创建每个应用程序的自定义日志信息。

2.enable-cache
默认值：true

启用框架所生成资源（JavaScript，CSS，images，等等）的缓存。为了调试开发自定义的 JavaScript 或 Style(css) 目的，应避免在浏览器中使用旧的缓存数据。

3.forceparser
默认值：true

通过一个 HTML 语法检查器强制解析每一个 JSF 页面。如果为“false”，只有 Ajax 响应才被语法检查器解析且被转换为规范的 XML。设置为“false”除了提高了性能，还为 Ajax 更新提供视觉的效果。

四、其他

因为本人现在使用的是 Myfaces，所以下面列出了有关 Myfaces 与 RichFaces 集成的问题：

问题在于 web.xml 文件中所定义的多个不同的过滤器之间存在冲突。为了避免这些问题，RichFaces 过滤器在配置文件中的位置必须被定义在其它过滤器之上。

当使用 MyFaces + Seam 时，还有其它问题。如果使用这个组合，那么应该在 <f:view> 标签内部使用 <a4j:page> 标签，然后再在 <a4j:page> 标签中包含其它内容，因为 Myfaces 中的 <f:view> 实现存在一些问题。

这个问题可能在不久的将来被攻克。

RichFaces 3.1.3 发布了, 相关主要改动介绍如下: from http://in.relation.to/Bloggers/RichFaces313Released

Updated - 添加了<rich:orderingList /> 组件, calendar组件添加了locale设置

RichFaces 开发小组发布了 RichFaces 3.1.3.GA. 这是自从 3.1.0以后的第一个发布版本,包含了一些新的组件(也包含3.1.1 和3.1.2中的bug 修复),因此这里我想着重介绍下主要的改进地方.

Time Picker

RichFaces timepicker 漂亮的地方是和calendar control集成了 - 你可以很容易的为 date, time or date and time 字段提供一个图形输入控件.这是很容易使用的, 仅仅绑定该组件到模型上就可以了:
<rich:calendar value="#{flight.departureDate}"
               locale="#{locale}"
               datePattern="dd/M/yy hh:mm" />
就如你看到的一样, 她还是完全国际化的呢!
Controlling one component from another

当一个js事件在当前的控件上触发时,<rich:componentControl /> 允许你再另外一个组件上触发一个动作. 这是非常强大的功能,所以可能很难理解. 下面我们来看个简单的例子:这里我们有个modal panel (a bit like a css/div based popup), 我们想从页面上的其他地方来启动这个panel:

<rich:modalPanel id="panel" width="350" height="100">
  <f:facet name="header">
    <h:outputText value="Modal Panel" />
  </f:facet>
  <h:outputText value="This panel is called using rich:componentControl"/>
</rich:modalPanel>
<h:outputLink value="#">
  Show Modal Panel
  <rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/>
</h:outputLink>

不用调用一些js代码了, 我们只要再link上面添加一个component controller,然后告诉她在什么组件上执行什么动作就可以了.

<rich:componentControl /> 可以做的不只这些 - 详细情况请参考 online demo .

Shuttle list

这是个很不错的控件, 我很赞赏RichFaces guys,当然这也很容易使用:

 

 

<rich:listShuttle sourceValue="#{items.availableItems}"
            targetValue="#{items.selectedItems}"
            var="item"
            sourceCaptionLabel="Available Items"
            targetCaptionLabel="Currently Active Items">

  <rich:column width="18">
    <h:graphicImage value="#{item.icon}"/>
  </rich:column>
  <rich:column>
    <h:outputText value="#{item.label}"/>
  </rich:column>

</rich:listShuttle>
注意我们是如何在lists 面板上添加其他 rich 组件的.
Notice how we've embedded other rich components to layout the lists!
Orderable list

另外一个类似的组件是 orderable list. 使用起来也是很简单的

 

 

 

 

 

<rich:orderingList value="#{myMusic}" var="album">

  <rich:column>
    <f:facet name="header">
      Song Name
    </f:facet>
    <h:outputText value="#{album.title}"/>
  </rich:column>

  <rich:column>
    <f:facet name="header">
      Artist Name
    </f:facet>
    <h:outputText value="#{album.artist.name}" />
  </rich:column>

</rich:orderingList>
Context sensitive menu

RichFaces 已经有组件来显示 menu bar了,现在在 3.1.3又添加了右键菜单.
<s:div id="flower">
  <h:graphicImage value="flower.jpg"/>
  <rich:contextMenu event="oncontextmenu"
                    attached="true"
                    submitMode="none">
    <rich:menuItem value="Zoom In"
                   onclick="enlarge();"/>
    <rich:menuItem value="Zoom Out"
                   onclick="decrease();"/>
  </rich:contextMenu>
</s:div>
我们添加了一个上下文右键菜单到<s:div /> 中.
There's also

Big improvements to Portal support (we are just finishing off support for Seam and RichFaces in a portlet)
A system for customising how styles are loaded (one big lump, or on demand)
Over 180 bug fixes (see the release notes)
Congratulations to the RichFaces team!

使用 Richfaces/Ajax4Jsf 创建 Web 应用
 
 
 
文档选项
  
打印本页
  
将此页作为电子邮件发送
  
样例代码

级别： 初级
周 进光 ([e-mail] ), 软件工程师, 舜联软件科技
2007 年 11 月 30 日
本文简要介绍如何运用 Richfaces/A4J 来构建 JSF 应用，包括如何定义配置文件、控件使用等。
概念介绍
JSF 和 Ajax 概念大家一定不陌生，二者结合起来衍生出 A4J（Ajax4JSF）。其目的就是将 Ajax 的功能集成到 JSF 组件中去。后来 JBoss 收购 A4J 后，又将其集成到 RichFaces 中，不但丰富了控件库和还添加了新功能。现在 RichFaces 已经是一个具有 Ajax 和 JSF 特性 的 Web 框架。对开发人员来说，只要按照 JSF 的组件规范来组织页面，免去了书写或调用庞杂的 JavaScript 代码或库，就能达到梦寐以求的 Ajax 效果 ---- 可以只更新局部内容而不用刷新整个页面，增强了用户体验。
 
请访问 Ajax 技术资源中心，这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。

   订阅 Ajax 相关文章和教程的 RSS 提要

样例
下面就举一个简单的例子来说明如何使用 Richfaces。该例是一个对列表的编辑，实现对数据的修改/删除/添加，主要用到了 rich:dataTable 控件。如下图示：

图 1. 样例
 
Jar 包
开发 RichFaces 应用，除了 RichFaces 的 Jar 文件外，还需用到 Jsf，jakatar-commons 以及 log4j 等 Jar 包。本例中用到的 RichFaces 的版本为 3.1.0, Jsf 采用 Apache MyFaces 1.1.5。详细 Jar 包列表如下图：

图 2. Jar 包清单
 
类图
JSF 需要把页面数据和操作对象化，通过 component 来封装。这里有两个类，其中 Bean 为控制类，定义响应用户点击按钮的事件方法，并作为连接视图和数据层的桥梁。 Person 为数据类，用来封装页面数据。它们之间关系参见下图：

图 3. 类图
 
配置文件
Java 的 Web 运用一般通过 War 的形式发布，其中需要 web.xml 作为应用的配置文件。RichFaces 要求在该配置文件中除了通常的 JSF Servlet 定义外，再加上一个 RichFaces 的过滤器就行了。下面是样例配置说明。
web.xml 文件

图 4. web.xml 配置
 
faces-config.xml 文件
按照 JSF 要求，需要配置 faces-config.xml 文件，如下图所示：

图 5. faces-config.xml 配置
 
代码
这里着重介绍视图 JSP 页面的编码。首先申明所需的 taglib，如下：
<%@ taglib uri="http://java.sun.com/jsf/core " prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html " prefix="h"%>
<%@ taglib uri="http://richfaces.org/a4j " prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich " prefix="rich"%>

f，h 用来引用 JSF 的控件，a4j 和 rich 用来引用 Ajax4JSF 和 RichFaces 控件。
先建立 a4j:form，并将 rich:dataTable 放在里面。dataTable 作为数据显示的载体。
<rich:dataTable id="p" value="#{bean.people}" var="person" width="100%"
     binding="#{bean.table}">
 <f:facet name="header">
  <rich:columnGroup> 
      <rich:column>
       <h:outputText value="name"/>
      </rich:column>
      <rich:column>
       <h:outputText value="agender"/>
      </rich:column>
      <rich:column>
       <h:outputText value="age"/>
      </rich:column>
      <rich:column>
       <h:outputText value="address"/>
      </rich:column>
      <rich:column>
       <h:outputText value="action"/>
      </rich:column>
  </rich:columnGroup>
 </f:facet>
 
 <rich:columnGroup> 
     <rich:column>
         <h:outputText value="#{person.name}"/>
     </rich:column>
     <rich:column>
         <h:outputText value="#{person.agender}"/>
     </rich:column>
     <rich:column>
         <h:inputText id="age" value="#{person.age}"/>
     </rich:column>
     <rich:column>
         <h:outputText value="#{person.address}"/>
     </rich:column>
     <rich:column>
         <a4j:commandLink onclick="checkDel()" value="delete"
                action="#{bean.del}" reRender="p">
             <a4j:actionparam name="rowIndex" value="#{bean.table.rowIndex}"
                    assignTo="#{bean.curRow}"/>
         </a4j:commandLink>
     </rich:column>
 </rich:columnGroup>
 
 <f:facet name="footer">
  <rich:columnGroup> 
         <rich:column colspan="5">
            <h:outputText value="total is #{bean.table.rowCount} items"/>
         </rich:column>
        </rich:columnGroup>
   </f:facet>       
     
 </rich:dataTable>

请注意 delete 按钮，它的 Action 绑定到 Bean 的方法 del()。最神奇的地方是通过 reRender 属性来把动作执行的结果来刷新整个 dataTable。这就是 richfaces 体现 ajax 特性的地方。当删除一行时，页面没有感觉刷新，但表格发生了变化。