使用带有 JSF 2 的 RichFaces

将您的网页组件迁移到 RichFaces 4

RichFaces 与专门为 JavaServer Faces (JSF) 配套使用而设计的大多数其他 rich/Ajax 组件框架类似,但进行了大量改进,以便与 JSF 2 的重要变更兼容。Joe Sam Shirah 研究了 RichFaces 4.1 中已变更和新增的组件,这些组件提供了与他在 "RichFaces 简介" 中版本 3.1 演示的组件具有相同功能。此外,他还更新了使用带有 JSF 的 RichFaces 的设置要求。

Joe Sam Shirah, 负责人和开发人员, conceptGO

http://www.ibm.com/developerworks/i/p-jshirah.jpgJoe Sam Shirah 是 conceptGO 的负责人和开发人员,该公司提供远程咨询和软件开发服务以及产品,专长是 JDBC、I18N、AS/400、RPG、金融、库存以及后勤方面。Joe Sam 于 1998 年 JavaOne 上获得 Java 社区奖,他也是 Java Developer Connection 上的 JDBC 2.0 Fundamentals 短期课程的作者。他是 developerWorks“Java filter”论坛的主持人,还是 jGuru 的 JDBC、国际化和 Java400 FAQ 的管理人员。Joe Sam 拥有经济学工商管理学士学位以及国际管理硕士学位。



2012 年 2 月 20 日

JavaServer Faces (JSF) 2 于 2009 年推出,包含了对许多领域进行的主要变更和补充,其中包括系统事件、资源以及 Facelets 与 Ajax 处理标准化(参阅 参考资料)。虽然这种演变受到了普遍的欢迎,但是其主要副作用是,如果继续使用的话,几乎所有为 JSF 1.2 编写的富组件框架(包括 RichFaces 版本 3.x 及更低版本)都不再具有可靠性。针对这一点,RichFaces 团队开始为版本 4 进行大范围的重新编写。在本文中,您将看到一些组件名发生了变化;删除了另一些组件,并添加了一些新组件。

RichFaces 4.1

RichFaces 4.1(在撰写本文之时处于里程碑和候选阶段)是本文的目标版本。4.0 发行版中一个令人感到遗憾的地方是缺少 List Shuttle 组件,该组件允许选择和排序多个项目。版本 4.1 对其进行修正,向 Pick List 组件添加了排序功能。

在我 2008 年撰写的一篇文章 "RichFaces 简介" 中,我展示了 RichFaces 版本 3.1 中的若干个组件,并讲解了 RichFaces 和 JavaServer Faces (JSF) 1.2 的设置要求。本文是后续文章,即可为刚刚接触 RichFaces 的开发人员提供指南,又可为从早期版本迁移到版本 4.x 提供协助。我已提供了带有演示代码的 WAR 文件(参见 下载)。

如果您刚刚接触 RichFaces,并想要与 JSF 2 配套使用,那么只需阅读本文(虽然您可能要查看 RichFaces 简介 资料)。如果您已经使用过版本 4 以前的 RichFaces,那么我建议您同时阅读这两篇文章。为了更轻松地比较版本的区别,我在这两篇文章中使用了相同的小节标题。此外,我还尽量重现这些组件的外观和功能。

从这个角度来看,我将使用 RichFaces 来指代版本 4.x,除非我提及一个特定的版本。首先,查看一下使用 RichFaces 进行开发所需的一些基础架构元素。

从头开始

使用 RichFaces 进行开发的最低基础架构要求为:

  • Java™ SE 6
  • 一个 Servlet 2.5 容器
  • 浏览器,比如 Firefox 3.5 或 Internet Explorer 7 或更高版本

我在开发和测试中使用了 JDK 7、Apache Tomcat 7.0.22 和 GlassFish 3.1.1。使用的浏览器为 Firefox 7.0.1 和 Internet Explorer 8。

从我的设置和上述最低要求方面来看通常不会出现任何问题。然而,需要谨记有关 演示代码 的一些事项:

  • 如果您使用只支持 Servlet 2.5 的容器,那么必须在 web.xml 中将 <web-app version="3.0"...> 更改为 <web-app version="2.5"...>
  • 对于 GlassFish V3 和支持 JEE 6 / JSF 2 的其他容器,您可以将 javax.faces.jar 从演示项目中删除。演示中使用的版本为 mojarra-2.1.4。
  • 在邮件列表上,我看到有人提出了某些 JSF 2 版本和旧容器上偶然出现的 Expression Language (EL) 问题。如果您得到奇怪的结果,请尝试下载最新的 EL JAR 文件。

本文假定读者拥有 JSF 2 和 Tomcat 或 GlassFish 的基础知识。如果您需要了解更多有关这些技术的背景,请参阅 参考资料 获得相应的链接。


并非小框架

尽管 Facelets 的名称有小框架 (small face) 的意思,但它并非小版本的 JSF。相反,Facelets 的核心是提供 JavaServer Pages (JSP) 的替代方案 - JSF ViewHandler。Facelets 支持所有 JSF UI 组件,并构建了自己的组件树,反映 JSF 应用的视图。JSF 2 规范反对将 JSP 作为视图定义语言 (VDL),并包含标准版本的 Facelets 作为首选 VDL。因此,RichFaces 弃用了 JSP 支持并要求启用 Facelets。

我宁愿尽量保持简洁。在示例项目中,您将看到几乎所有页面代码(而非标记)都由 getters、setters 和方法绑定 (method binding) 的 EL 表达式构成。虽然更复杂的项目可能需要更复杂的表达式,但是通常来说,Facelets 使得能够轻松地将 Java 代码从您的网页标记中分开。

您会发现使用 JSP 进行预 JSF 2 开发的主要区别包括:

  • web.xml 和 faces-config.xml 中的一些其他符号是必选项或已设置默认值。
  • Web 页面是 XHTML 文档。
  • 使用 XML 命名空间而不是使用 JSP 标记库。

至于格式,除了最初的部分(参见清单 1),页面中的一切都应该很熟悉。我将此看作是 Facelets 的低调特性。对于本文的项目(以及其他主要使用 Facelets 处理视图的项目),这正是您需要了解的全部。Facelets 还包含许多其他有用的特性,比如轻松创建模板和元素,这些均简化了网页设计人员的工作。(如需了解关于 Facelets 的更多信息,请参阅 参考资料。)

清单 1. Facelets XHTML 文档的初始部分
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 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">

演示组件

RichFaces 最初似乎令人不知所措;一般每个组件就拥有 20 个特定的属性,加上可以覆盖的常规属性。然而,在典型使用中,创建组件并不难,且大多数属性都具有合理的默认值。版本 4 中修改并添加了一些默认值,值得检查文档。

本文演示的主要组件(指出了与版本 4 相应的替代)包括:

  • Calendar:一个弹出的组件提供日期选择功能。图 1 显示了一个示例。使用 <> 滚动月份;使用 <<>> 滚动年份。在底部点击 Today 会选择今天的日期。Clean 将清除所选的日期。左侧第一栏的数字显示周。
    图 1. RichFaces Calendar 组件
    RichFaces Calendar 组件的屏幕截图
  • Pick List:一个选择和排序组件。Pick List 替代版本 4 中的 List Shuttle,可以在可用的和所选区域之间移动项目,并将项目在所选区域内进行上下移动。图 2 显示了一个示例:
    图 2. RichFaces Pick List 组件
    RichFaces Pick List 组件的屏幕截图
  • AutoComplete:替代版本 4 中的 Suggestion Box 输入组件,提供可点击的建议,以填充或完成一个条目。图 3 显示了一个示例:
    图 3. RichFaces AutoComplete 组件
    RichFaces AutoComplete 组件屏幕截图
  • Tab Panel:创建标签页的输出组件。图 4 显示了一个示例:
    图 4. RichFaces Tab Panel 组件
    RichFaces Tab Panel 组件的屏幕截图
  • Accordion:替代版本 4 中的 Panel Bar 输入组件。样例项目使用 Accordion 作为指南。图 5 显示了一个示例:
    图 5. RichFaces Accordion 组件
    RichFaces Accordion 组件屏幕截图
  • Collapsible Panel:替代版本 4 的 Simple Toggle Panel 组件。样例项目使用 Collapsible Panels 获得结果。图 6 显示了一个示例:
    图 6. RichFaces Collapsible Panel 组件
    RichFaces Collapsible Panel 组件的屏幕截图

RichFaces 基于 Ajax4jsf(参阅 参考资料)。由于有了这个基础,任何组件都能以多种不同方式支持 Ajax。在版本 4 中,Ajax 功能通常是自动的或默认的。示例应用程序使用 AutoComplete 和 Collapsible Panel 组件的 Ajax 功能。


我的 face 示例

dwRichFaces4Demo1 示例应用程序很简单;其惟一的真正目的是展示所选组件的设置和用法。因此,它的作用便是收集和显示输入数据。请想象一下如何在生产应用程序中使用数据和组件。除了必要的 JAR、图像、支持资源绑定的属性文件以及层叠样式表 (CSS) 文件,该应用程序还包括两个 XHTML 页面和两个 Java 类。

图 7 显示的输入页面的 URL(假设 Tomcat 或 GlassFish 的默认设置)为 http://localhost:8080/dwRichFaces4Demo1。在输入页面,你可以使用 Calendar 组件选择一个日期。Pick List 组件允许您移动和重新排序可用的项目。City AutoComplete 组件允许您输入一个城市名称。City 支持 Ajax;如果您按空格键,将显示所有可用的城市。如果您输入以 A 或 J 开头的城市名称,则显示相应的城市列表。当您输入更多字符时,列表上可用的城市会缩减。可以点击左侧的 Accordion 项,获得基本的组件说明。

图 7. dwRichFaces4Demo1 输入页面
dwRichFaces4Demo1 输入页面的屏幕截图

在输入后,点击 Submit 按钮。该应用程序非常简单,因此无法执行编辑。因为对 Calendar 组件禁用了手动输入,因此甚至不能输入一个无效的日期。按下 Submit 按钮会显示结果页面,如图 8 所示:

图 8. dwRichFaces4Demo1 结果页面
dwRichFaces4Demo1 结果页面的屏幕截图

在结果页面,点击 Result 选项卡,然后点击相应的 Collapsible Panel 项,查看输入值。点击 Edit 按钮返回输入页面。

请注意 图 7 中的 Submit 按钮的背景颜色和 图 8 中的 Edit 按钮与其他元素的背景颜色相匹配,即使这些按钮是标准的 JSF 而非 RichFaces 组件。我将在下一节介绍原因。


设置环境

应用程序首先需要的是 JSF、Facelets 和 RichFaces 使能器(即实现其功能的 JAR)。对于迁移,请注意版本 4.x 中的依赖性已经完全改变了。这些 JAR(与下述版本一起)包含在可下载 WAR 的库目录中(参见 下载)。该列表假设您的 Web 容器支持当前的 EL 和 Servlet API 版本。如果在运行演示时遇到问题,请检查 JSF、Facelets 和 RichFaces 要求(参阅 参考资料)。您还应阅读 下载 注释。

任何 RichFaces 项目都需要的 JAR 包括:

  • JSF 2(包括在如 GlassFish V3.x 等 JEE 6 容器中)
    • javax.faces.jar
  • Facelets
    • 包括在 JSF 2 JAR 中
  • RichFaces
    • richfaces-components-api-ver.jar
    • richfaces-components-ui-ver.jar
    • richfaces-core-api-ver.jar
    • richfaces-core-impl-ver.jar
  • 其他所需的依赖性:
    • cssparser-ver.jar
    • guava-ver.jar
    • sac-ver.jar

在我的项目以及 下载 WAR 中(参阅 参考资料 了解下载站点)所使用的版本包括:

  • JSF 2
    • javax.faces.jar — mojarra-2.1.4
  • Facelets
    • 包含在 javax.faces.jar 中
  • RichFaces
    • richfaces-components-api-4.1.0.20111111-CR1.jar
    • richfaces-components-ui-4.1.0.20111111-CR1.jar
    • richfaces-core-api-4.1.0.20111111-CR1.jar
    • richfaces-core-impl-4.1.0.20111111-CR1.jar
  • 其他所需的依赖性:
    • cssparser-0.9.5.jar
    • guava-10.0.1.jar
    • sac-1.3.jar

其次是 web.xml 条目,如清单 2 所示,需要这些条目来支持 JSF。请注意当使用 JSF 2 和 Servlet 3.0 容器时,这些条目是可选的。我更加喜欢显式的。如果省略,则自动映射 *.faces*.jsf/faces/* <url-pattern />

清单 2. web.xml 中最少的 JSF 条目
<servlet>
   <servlet-name>Faces Servlet</servlet-name>
   <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
   <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
   <servlet-name>Faces Servlet</servlet-name>
   <url-pattern>*.jsf</url-pattern>
</servlet-mapping>

在 JSF 2 之前,Facelets 需要 javax.faces.DEFAULT_SUFFIX 条目将默认后缀 .jsp 覆盖为 .xhtml。但是,现在不再需要该条目,因为现在 Facelets 是默认的 VDL。

RichFaces 4 在 web.xml 中不再需要 org.ajax4jsf.VIEW_HANDLERSfilterfilter-mapping 元素。

清单 3 显示了与 RichFaces 相关的 web.xml 条目,正如在演示应用程序中所使用的:

清单 3. web.xml 中与 RichFaces 相关的条目
<context-param>
  <param-name>org.richfaces.skin</param-name>
  <param-value>classic</param-value>
</context-param>
<context-param>
  <param-name>org.richfaces.enableControlSkinning</param-name>
  <param-value>true</param-value>
</context-param>

清单 3 包括两个上下文参数:

  • <param-name>org.richfaces.skin</param-name> 定义应用程序的配色方案(皮肤)。RichFaces 有多个内置皮肤。classic 皮肤是浅蓝色。如果省略了该元素,则默认为浅灰色。
  • <param-name>org.richfaces.enableControlSkinning</param-name> 值对 RichFaces (出乎意料的是)标准 JSF 组件的外观有影响。如果其值为 true,标准控件都涂色。例如,这正是图 78 中的 Submit 和 Edit 按钮的颜色与 RichFaces 主题的颜色相同的原因。如果省略该元素,则默认值为 true

有关清单 23 中条目的好消息是,它们几乎与所有应用程序的条目和基本样板代码相同。如果您愿意接受默认设置,不在乎显式,您可以连同它们一起省略。

在每个应用程序中您还将看到另一个条目:应用 XHTML 页面中的 RichFaces 命名空间。清单 4 是对 清单 1 的修改,其中包括 RichFaces 命名空间:

清单 4. Facelets/RichFaces XHTML 文档的初始部分
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 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" >

准备开工

现在可以观看如何使用 RichFaces 组件。首先讨论 Accordion 和 Accordion 项(参见 图 5)。这些项取代了 RichFaces 4 之前的版本中的 Panel Bar 和 Panel Bar 项。您可能不经常使用它们,但是它们易于使用并提供了 RichFaces 句法的一个很好的首个用例。

此处的观点是 Accordion 是 Accordion 项的容器。每个 Accordion 项都有一个头,同时可以容纳任何其他组件。Accordion 项彼此堆叠;当点击该项的栏时会显示实际内容。一次只显示一个项的内容。在这种情况下,正如清单 5 所示,我只使用文本。请注意所有组件都有一个 rich: 前缀,它表示 清单 4 中所包含的命名空间条目。在演示中,Accordion 是包含在标准 JSF PanelGrid 中:

清单 5. RichFaces Accordion 组件
<rich:accordion style="width: 256px;" styleClass="floatLeft">
    <rich:accordionItem header="#{dwRF4D1.calComp} #{dwRF4D1.info}">
        <h:outputText value="#{dwRF4D1.calCompText}" style="font: menu;" />
    </rich:accordionItem>
    <rich:accordionItem header="#{dwRF4D1.plComp} #{dwRF4D1.info}">
        <h:outputText value="#{dwRF4D1.plCompText}" style="font: menu;" />
    </rich:accordionItem>
    <rich:accordionItem header="#{dwRF4D1.acComp} #{dwRF4D1.info}">
        <h:outputText value="#{dwRF4D1.acCompText}" style="font: menu;" />
    </rich:accordionItem>
</rich:accordion>

基本的 <rich:accordionItem /> 元素只需要一个头,使用 EL 表达式将头从资源包拖到此处。

演示 Accordion 项的实际内容只是一个 <h:outputText /> 元素,也是取自资源包的文本。我使用 font 样式元素保持一致的可读性,同时也表明 RichFaces 实现了 CSS 灵活性。

请注意所生成的 JavaScript 不需要程序员参与。只需几个步骤,您便可以创建一个外形美观、多面板、可点击的组件。这是 RichFaces 的最大优势之一。甚至如此简单的一个组件也能支持 Ajax(通过 switchType 属性)、激活/非激活样式、事件等。


让我们制作一个日期

Calendar 组件(参见 图 1)应该比较常见;日期选择可能是最早对网页进行 JavaScript 增强所提供的。RichFaces Calendar 拥有 80 个可用的属性,但是,如清单 6 所示,您可以在数行内启用许多功能:

清单 6. RichFaces Calendar 组件
<label for="CalendarID" >#{dwRF4D1.calendar}:</label>
<rich:calendar id="CalendarID"
               value="#{dwRF4D1Handler.selectedDate}"
               timeZone="#{dwRF4D1Handler.timeZone}"
               datePattern="#{dwRF4D1.datePattern}" >
</rich:calendar>

datePattern 属性需要由 java.text.SimpleDateFormat 所定义的一个标准日期模式。示例再次使用了资源包里的值,它将 datePattern 密钥定义为 yyyy-MM-ddvaluetimeZone 属性使用来自管理 bean 的方法加载,这是在 faces-config.xml 中定义的,如清单 7 所示:

清单 7. 管理 bean 定义的 dwRF4D1Handler
<managed-bean>
  <managed-bean-name>dwRF4D1Handler</managed-bean-name>
  <managed-bean-class>com.dw.dwRF4D1Handler</managed-bean-class>
  <managed-bean-scope>session</managed-bean-scope>
</managed-bean>

com.dw.dwRF4D1Handler 类是基础(主要由初始化程序、getter 和 setter 构成),无需进一步讨论。getSelectedDate()setSelectedDate() 方法期待 java.util.DategetTimeZone() 方法只返回 java.util.TimeZone.getDefault();是否适合生产取决于您的应用程序的需求。

如果您还想允许用户输入日期值,请将 enableManualInput 属性设置为 true。如果您只想显示日历,则将 popup 属性设置为 false。显然有许多设置可用,然而,这些都是您的基本日历功能所需的全部。

如果您从以前的 RichFaces 版本进行迁移,为演示代码中的功能建立 Calendar 组件的操作几乎与版本 4 完全相同。


增强组件

用带有 orderable 属性的 Pick List 组件替代版本 4 中的 List Shuttle(参见 图 2RichFaces 4.1 侧栏)是原始组的选择和排序项的理想选择。清单 8 展示了它比您最初想象的更加易于使用:

清单 8. RichFaces Pick List 组件
<label for="plID">#{dwRF4D1.pl}:</label>
<rich:pickList id="plID
               value="#{dwRF4D1Handler.orderByTarget}" 
               orderable="true" listWidth="10em" 
               sourceCaption="#{dwRF4D1.available}"  
               targetCaption="#{dwRF4D1.selected}" >
     <f:selectItems value="#{dwRF4D1Handler.orderBySource}" />
</rich:pickList>

示例代码中的 XHTML 标记包括额外的属性来覆盖一些默认标签,但典型用法只需要 value<f:selectItems /> 以及 orderable

所选值的 value 和可用选项的 <f:selectItems /> 是包含任何类型对象的 java.util.List 类。在 JSF 2 中,<f:selectItems /> 的值可以是任何类型对象的集合或包含任何类型对象的数组;toString() 被调用以提供标签。正如演示代码,大多数情况下您可能会使用包含 String 的列表。除了 <f:selectItems /> 属性值的 List 初始化,清单 9 还显示了与示例 Pick List 有关的所有 Java 源代码。Java 代码与 "RichFaces 简介" 中所使用的代码几乎保持不变。

清单 9. 相关的 dwRF4D1Handler Pick List 代码
private List<String> lOrderBySource = new ArrayList<String>(),
                     lOrderByTarget = new ArrayList<String>();
...
public List getOrderBySource()
{
  return lOrderBySource;
}

public List getOrderByTarget()
{
  return lOrderByTarget;
}
...
public void setOrderBySource( List<String> orderBySource )
{
  lOrderBySource = orderBySource;
}

public void setOrderByTarget( List<String> orderByTarget )
{
  lOrderByTarget = orderByTarget;
}

用户选择之后,在提交时,您的处理程序会接收包含该选择的列表。


当面告诉我

如果您经常查看论坛和邮件列表,您迟早会发现一个问题,询问如何处理将数千或数百万的条目下载到一个下拉列表上。AutoComplete 组件(参见 图 3)替代了 Suggestion Box,提供显示有效输入选择的方式而无需尝试行不通的极端方式。事实上,这个问题正是我开始调研 RichFaces 和类似套件的主要原因:正在进行的应用程序中的多个条目项(比如城市),拥有许多可能性以致于下拉列表不实用。AutoComplete 功能与许多桌面应用程序中提供的常见 AutoComplete 组件类似。显然,如果希望此类功能能够在 Web 应用程序中高效地工作,可能需要涉及到 Ajax 提交。

清单 10 显示了 AutoComplete 组件的标记。可输入或从下拉列表中选择该字段输入值。

清单 10. RichFaces AutoComplete 组件
<h:form>
  <a4j:queue ignoreDupResponses="true"/> 

...

<label for="CityID">#{dwRF4D1.city}:</label>
<rich:autocomplete id="CityID" mode="ajax" 
                   value="#{dwRF4D1Handler.city}"  
                   autocompleteMethod="#{dwRF4D1City.suggest}" 
                   autofill="false" 
                   selectedItemClass="selCtl" > 
</rich:autocomplete>

如果您过去使用过 Suggestion Box,那么您会喜欢 AutoComplete 的简单性。所需的最少属性为 modevalueautocompleteMethod

  • mode 通常是 ajax,每次击键均会调用 Ajax 请求(很棒并且基本上是自动的)。其他值分别为 Cached AjaxClientLazy Client
  • value 对于大多数其他组件都相同:通常是来自管理 bean 的 getter 和 setter。
  • autocompleteMethod 方法是另一个管理 bean 中的 suggest(),基于演示代码中的第二个 Java 类 com.dw.City。方法签名为 public List suggest(Object anObject)

在演示代码中,在初始化时便创建了以 A 和 J 字母开头的城市的列表。如果用户按 City 文本字段中的空格键,则返回整个列表。如果按 A,则返回包含以 A 开头的城市的子列表;以同样的方式处理 J 个城市。随着更多按键会缩减结果范围。使用您自己的代码,您可以做您想做的适用于输入的任何事。在我的生产环境应用程序中,结果是来自于有限的数据库集,这可能非常典型。如果您熟悉数据,通常可以通过该方法的几个步骤来优化结果。例如,在某些情况下,可以忽略某些按键,以便返回此该方法,而无需访问数据库。

在版本 4.x 中,RichFaces 基于标准的 JSF 队列。不再需要 <a4j:queue /> 属性,但是您可能想要经常使用该属性。此处是为了 ignoreDupResponses 而使用该属性;查看其他功能的文档。请注意 <a4j:queue /> 只用于 RichFaces 组件事件。您可以在视图或表单级使用它。通过 <param-name>org.richfaces.queue.global.enabled</param-name> 上下文参数可以在 web.xml 中启用全局应用队列。

您还可以创建一个已命名的队列,组件可以通过 <a4j:attachQueue name="myRequestQueue" /> 引用来使用。

selectedItemClass 是应用到组件的 CSS 类。RichFaces 使用皮肤概念。这将会传递到组件的选择背景上。我自己的应用程序有多个标准的 JSF 下拉列表,可将系统颜色用作背景。AutoComplete 组件使用 classic 皮肤颜色,这使得各个项看起来不太一致。SelCtl 类告知组件使用 lightgrey 背景色。


使用选项卡

Tab Panel 组件(参见 图 4)易于使用,尽管在迁移操作中需要注意某些变更。典型的 RichFaces 属性都可用,然而,主要使用的是 switchType。其默认值为 server。对于常量信息,您可能经常需要 clientajax 选项也可用。正如清单 11 所示,使用 <rich:tabPanel /> 元素的典型 RichFaces “三明治” 和 <rich:tab /> 元素的堆叠 “三明治” 制作一组标签页:

清单 11. RichFaces Tab Panel 组件
<rich:tabPanel switchType="client" >
        <rich:tab >
          <f:facet name="header">
            <h:panelGrid columns="2">
              <h:outputText value="#{dwRF4D1.info}" />
              <h:graphicImage value="/images/roseTab.jpg" height="20" width="25" />
            </h:panelGrid>
          </f:facet>
          #{dwRF4D1.resultText}
        </rich:tab> 

        <rich:tab header="#{dwRF4D1.result}">
...
        </rich:tab> 
... 
</rich:tabPanel>

header 属性用作每个选项卡的显示名称。在演示代码中,像往常一样,从资源包取值。与 Accordion 项一样,选项卡可以包含任何类型的组件。在演示中,我使用了 Info 选项卡内容的资源包文本和 Result 选项卡内容的 Collapsible Panel。

作为 header 属性的替代方案,您可以使用称为 "header" 的 <f:facet />,以包括更多内容。演示代码使用包含 Info 选项卡头的文本和图像的 <h:panelGrid />


每当我看到你的笑脸

Collapsible Panel 是在版本 4.x 中替代 Simple Toggle Panel 的组件。它包含一个栏和一个内容显示,它可以是任何组件(参见 图 6)。使用 header 属性作为标题。点击栏显示或隐藏内容,这与只有一个项的 Accordion 非常相似。清单 12 显示了演示项目的 Collapsible Panel 标记:

清单 12. RichFaces Collapsible Panel 组件
<h:panelGrid columns="1" width="50%">
  <rich:collapsiblePanel switchType="ajax" 
                         header="#{dwRF4D1.calComp} #{dwRF4D1.value}" 
                         expanded="false" >
      #{dwRF4D1Handler.selectedDate} 
  </rich:collapsiblePanel> 
  <rich:collapsiblePanel switchType="ajax" 
                         header="#{dwRF4D1.plComp} #{dwRF4D1.value}" 
                         expanded="false" >
      #{dwRF4D1Handler.orderByTarget} 
  </rich:collapsiblePanel> 
  <rich:collapsiblePanel switchType="ajax" 
                         header="#{dwRF4D1.acComp} #{dwRF4D1.value}" 
                         expanded="false" >
      #{dwRF4D1Handler.city}
  </rich:collapsiblePanel> 
  <rich:collapsiblePanel switchType="ajax" 
                         header="#{dwRF4D1.face}" 
                         expanded="false" >
       <img src="images/myphoto.jpg" 
            height="80" width="64"/>
  </rich:collapsiblePanel>
</h:panelGrid>

请注意 switchType 属性再次出现。除了在代码中使用的 ajax 值,还可以使用 clientserver 值。expanded 属性决定是否在第一条显示中显示内容。在演示中,我将多个 Collapsible Panel 放在了 JSF <h:panelGrid /> 中,将其放在一个选项卡中,该选项卡放在选项卡面板中。


组装起来

RichFaces 提供大量 JSF 组件,用于构建 RIA 和支持 Ajax 的应用程序。本文只演示了其中少数组件,但您应该了解在 RichFaces 下的工作方式,并看到可用于多数应用程序的多个组件。在推出了版本 4 后,Richfaces 现在能够与 JSF 2 兼容,并提供了您所欣赏的简单性和效率。RichFaces 项目页面提供套件中所有可用组件的在线演示、文档和其他参考资料(参阅 参考资料)。

如果您选择使用 RichFaces,那么我鼓励您深入研究 a4j: 组件和文档中讨论的处理,从而了解如何将概念应用到其他 RichFaces 组件。您在研究中所花费时间可在开发流程和运行时性能方面得到回报。


下载

描述名字大小
本文的演示 WAR 文件1j-richfaces4.zip8.9MB

注意:

  1. Java 源代码包含在 WAR 文件中。有关使用 WAR 文件的指南,请参阅下载中包含的 readme.txt 文件。

参考资料

学习

  • RichFaces:RichFaces 网站提供信息、文档、在线演示和下载的链接。
  • JSF 主页:寻找 JSF 参考实现的开发人员参考资料。
  • "RichFaces 简介"(Joe Sam Shirah,developerWorks,2008 年 3 月)该作者以前的文章涵盖了 RichFaces 3.x 和 JSF 1.2。
  • JSF 2 fu:David Geary 在 developerWorks 发表的系列文章,演示了 JSF 2 的各种特性。
  • What's New in JSF 2?:Andy Schwartz 博客中提到的此条目虽然有点过时,但仍然是关于 JSF 2 功能的有用参考资料。
  • Need to implement Richfaces 4.0 with JSF 2.0:RichFaces 论坛中的该线程包含关于配套使用 RichFaces 4 和 IBM WebSphere 的信息。
  • Ajax4jsf:Ajax4jsf 现在是 RichFaces 的组成部分,最初是作为一个独立的项目。
  • 浏览 技术书店,寻找关于这些和其他技术主题的书籍。
  • developerWorks 中国网站 Java 技术专区:这里有数百篇关于 Java 编程各个方面的文章。

获得产品和技术

讨论

  • 加入 developerWorks 中文社区。查看开发人员推动的博客、论坛、组和维基,并与其他 developerWorks 用户交流。

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Java technology, Open source
ArticleID=794792
ArticleTitle=使用带有 JSF 2 的 RichFaces
publish-date=02202012