richface的配置、用法介绍和注意事项

richface的配置、用法介绍和注意事项一、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

注意事项：不能用ajax4jsf1.1.1.jar,这个包会导致参数不匹配。 
二、安装配置 
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 sourcue="#{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 应用

文档选项 
  
打印本页 
  
将此页作为电子邮件发送 
  
样例代码 
级别： 初级 
周 进光 (zhoujinguang@yahoo.com.cn), 软件工程师, 舜联软件科技 
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 特性的地方。当删除一行时，页面没有感觉刷新，但表格发生了变化。