richfaces简介_RichFaces简介

最新推荐文章于 2024-04-20 15:12:20 发布

cuyi7076

最新推荐文章于 2024-04-20 15:12:20 发布

阅读量522

点赞数

文章标签： python java 大数据编程语言人工智能

原文链接：https://www.ibm.com/developerworks/web/library/j-richfaces/index.html

版权

richfaces简介

最近，一位客户委托我的公司从事我认为是梦想中的项目。他们没有工作人员开发人员，因此要求我们设计和开发他们的第一个生产应用程序，其中包括带有浏览器客户端的服务器。该应用程序将使用虚拟专用网络（VPN）在其局域网（LAN）和Internet上运行。对于我来说，从构思到实施和培训来开展项目并不罕见，但这是难得的机会，几乎可以指定项目中涉及的所有内容。该项目的一个主要方面（如果未说明）是每个人都习惯了桌面应用程序。他们可能不会特别注意浏览器用户界面中是否包含类似功能，但是毫无疑问，如果缺少这些功能，将会引起很多抱怨。例如，项目初始阶段的主页将收集动态查询的选择条件。几个输入部分要求进行客户端操作，至少需要一个Ajax功能。最后，我选择了RichFaces的组件套件，它是建立在与Ajax4jsf的（见合并相关主题）。

选择，选择

本文的目的不是推广特定的产品或组件套件。相反，它为您提供了足够的信息来开始使用RichFaces，并提供了一些背景，供您在开发自己的RIA或Rich Web Client时进行比较。我鼓励您使用本文和其他文章作为指导来检查可能性，并得出您自己的结论。

开始研究的一个好地方是JSF AJAX组件库功能列表（请参阅参考资料）。请务必查看该页面底部的所有注释，因为该矩阵很少更新，并且该区域变化很快。我自己的短名单很快就缩小到只有RichFaces，Woodstock与ICEfaces的（参见相关主题）。

除了富Internet应用程序（RIA）功能和Ajax，我的需求还包括：

开源，LGPL或Apache样式的许可证（如果可能）
与JSF和Facelets一起使用
与JSF参考实现（RI）组件一起使用
灵活但一致的外观或主题
足够大的组件集可以满足大多数应用程序需求
合理易用，无需挡块
具有可用API的动态创建功能
积极发展与社区

至此，RichFaces已满足这些条件，并且这些组件在创建有效且功能强大的应用程序中非常有价值。与往常一样，您的条件和里程可能会有所不同。

本文探索了几个有用的RichFaces组件，并包括了一个演示应用程序的代码（请参阅下载）。但是，在开始研究RichFaces之前，有一些必要的基础架构要素需要介绍。

从一开始就

尽管在最初阶段，客户端的应用程序可以仅使用Servlet容器运行，但是将来的工作将需要其他支持，并且可能包括其他公司子公司的项目。为了尽可能保持标准，我选择了开源的Glassfish Application Server V2，它支持JEE 5，并使用Java SE 6作为基础运行时。对于Web框架，我选择JSF和Facelets。另外，Java EE 5中包含JSF支持。对于Glassfish V2，WebSphere Application Server社区版V2和其他版本，支持的JSF版本是1.2。 Facelets（或类似的）支持是JSF 2.0的目标，而主要的Facelets开发人员在JSF专家组中。

本文假定读者具有这些领域的基本知识。该示例代码下载包含了Tomcat 6.0.16和Glassfish所需的所有内容，并且已经在两者上进行了测试。在线版本（请参阅参考资料）在Glassfish V2上运行。如果您需要更多有关这些技术的背景知识，请参见参考资料中的适当链接。

不小的面Kong

尽管Facelets叫它名字，但它并不是JSF的较小版本。相反，Facelets在其核心部分提供了JSP的替代品JSF ViewHandler ，这就是我们在这里使用的替代品。当我第一次研究JSF时，遇到了Hans Bergsten的文章“通过转储JSP改进JSF”（请参阅参考资料）。此后不久，我发现了Facelets，从此再也没有回头。 Facelets支持所有JSF UI组件，并构建其自己的组件树，以反映JSF应用程序的视图。尽管JSP和JSF技术都得到了改进，可以更好地协同工作，但是Facelets可以正常工作，完全消除了Bergsten文章中提到的问题。

我更喜欢保持事物整洁和直接。在示例项目中，您将看到几乎所有代码（与标记相反）都由用于getter，setter和方法绑定的Expression Language（EL）表达式组成。尽管更复杂的项目可能需要更复杂的表达式，但一般而言，Facelets使将Java代码与Web页面标记分离的操作变得容易。

您将在这里注意到与使用JSP进行“正常” JSF开发的主要区别是：

您将需要jsf-facelets.jar。
web.xml和faces-config.xml中的一些符号。
网页是XHTML文档。
使用XML命名空间而不是JSP标签库。

就格式化而言，除了初始部分（请参见清单1 ）之外，Web页面中的所有内容都应该看起来很熟悉。我认为这是一个低估的Facelets功能。对于本文的项目，以及许多其他主要使用Facelets来处理视图的项目，这确实是您需要知道的全部。 Facelets还包括许多其他有用的功能，例如简单的模板和使网页设计人员的生活更轻松的元素。对于有兴趣学习更多有关Facelets的读者，我建议从“ Inside Facelets第1部分：简介”开始（请参阅参考资料）。

清单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:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html" >

演示组件

RichFaces似乎势不可挡。平均组件具有20多个特定属性，以及可以被覆盖的常规属性。但是，大多数属性都有合理的默认值，在典型用法中，组件的设置并不困难。有几个处理各种效果的浮华组件，例如Google Maps和Virtual Earth。您可能希望使用它们来激发用户群，但是在这里，我将重点介绍在许多应用程序中有用的组件。这对我来说足够令人兴奋。

本文演示的主要组件是：

日历 -一个允许选择日期的弹出组件。图1显示了一个示例。 <和>滚动月份； <<和>>滚动年份。单击底部的今天以选择今天的日期。清除清除日期选择。左侧的数字列显示一年中的星期。
图1. RichFaces Calendar组件
列表班车 —一种选择和排序组件，可以在可用区域和选定区域之间以及在选定区域中上下移动项目。图2显示了一个示例：
图2. RichFaces List Shuttle组件
建议框 —一个输入组件，提供可单击的建议以完成输入。图3显示了一个示例：
图3. RichFaces建议框组件
选项卡面板 -创建选项卡式页面的输出组件。图4显示了一个示例：
图4. RichFaces选项卡面板组件

我们还将使用面板栏进行说明。图5显示了一个示例：

图5. RichFaces面板栏组件

我们将使用简单切换面板来获得结果。图6显示了一个示例：

图6. RichFaces Simple Toggle Panel组件

如前所述，RichFaces是基于Ajax4jsf构建的。有了这个基础，任何组件都可以通过几种不同的方式启用Ajax。该示例应用程序对“建议框”和“简单切换面板”组件使用Ajax功能。

我勇敢的脸

dWRFDemo1示例应用程序最少。其唯一的真实目的是演示所选组件的设置和使用。因此，它所做的就是收集并显示输入数据。我将让您想象一下如何在生产应用程序中使用数据和组件。除了必要的JAR，图像，用作资源束的属性文件和级联样式表（CSS）文件之外，该应用程序还包含两个XHTML页面和两个Java类。这种简单性也使代码与IDE无关。实际上，我是故意使用Java编辑器，用于文件的Wordpad， javac和jar命令创建的。

假设默认设置为Tomcat或Glassfish，图7中显示的输入页面的URL为http：// localhost：8080 / dWRichFacesDemo1。输入页面允许您使用日历组件选择日期。 “ 按列表穿梭”排序组件使您可以移动和重新排序可用项目。城市建议框可让您键入城市名称。 City已启用Ajax；如果按空格键，将显示所有可用的城市。如果您键入以A或J开头的城市名称，则会显示相应城市的列表。键入更多字符时，列表中的可用城市会变窄。您可以单击左侧的面板栏项目以获取非常基本的组件说明。

图7. `dWRFDemo1`输入页面

输入条目后，单击“ 提交”按钮。该应用程序非常小，无法执行任何编辑。由于“日历”组件的手动输入已禁用，因此您甚至无法输入无效的日期。提交按钮将显示结果页面，如图8所示：

图8. `dWRFDemo1`结果页面

在结果页面上，单击“ 结果”选项卡，然后单击相应的“简单切换面板”项以查看输入值。单击编辑按钮返回到输入页面。

陷害我

对于应用程序而言，最重要的第一件事就是JSF，Facelets和RichFaces启用程序，即实现这些功能的JAR。这些JAR（具有以下列表中列出的版本）包含在可下载的WAR的lib目录中（请参见下载）。该列表假定您的Web容器支持当前的EL和Servlet API版本。如果您有运行演示问题，请检查JSF，Facelets和RichFaces的需求（参见相关主题。）您也应该查看下载说明。

JSF 1.2（包含在Glassfish V2中）
- jsf-api.jar
- jsf-impl.jar
小面1.1.14
- jsf-facelets.jar
RichFaces
- richfaces-api-3.1.4.GA.jar
- richfaces-impl-3.1.4.GA.jar
- richfaces-ui-3.1.4.GA.jar
尽管未将它们作为明确的要求记录下来，但是RichFaces假定还可以使用以下JAR：
- commons-beanutils-1.7.0.jar
- commons-collections-3.2.jar
- commons-digester-1.8.jar
- commons-logging-1.0.4.jar
- jhighlight-1.0.jar

接下来是启用JSF所需的web.xml条目，如清单2所示：

清单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>

清单3显示了Facelets所需的另一个web.xml条目。该条目将覆盖.jsp默认后缀。通常，Facelets需要在faces-config.xml中为视图处理程序提供另一个替代项，但是正如您将在下面看到的那样，RichFaces设置在web.xml中包括替代项。

清单3. Facelets后缀的web.xml条目

<context-param>
 <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
 <param-value>.xhtml</param-value>
</context-param>

清单4显示了web.xml中启用RichFaces所需的元素：

清单4.启用RichFaces的web.xml条目

<context-param>
  <param-name>org.richfaces.SKIN</param-name>
  <param-value>classic</param-value>
</context-param>
<context-param>
  <param-name>org.ajax4jsf.VIEW_HANDLERS</param-name>
  <param-value>com.sun.facelets.FaceletViewHandler</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>

我将按照使事物可操作的顺序来解释清单4中的元素，而不是它们在web.xml中出现的顺序：

<filter>和<filter-mapping>
RichFaces使用过滤器来处理在Ajax请求中接收到的代码。这些元素定义了过滤器类（ org.ajax4jsf.Filter ），并将其映射到清单2中定义的JSF Faces Servlet。
<context-param>和<param-name>org.ajax4jsf.VIEW_HANDLERS</param-name>
RichFaces需要知道在应用程序中将使用Facelets。这些元素执行该任务，并有效地替换faces-config.xml中的常规Facelets条目。请注意，Facelets视图处理程序类是com.sun.facelets.FaceletViewHandler 。
<context-param>和<param-name>org.richfaces.SKIN</param-name>
RichFaces具有几种内置的配色方案或外观。这些元素定义您要在应用程序中使用的皮肤。 classic皮肤是中等的蓝色。

关于清单2、3和4中的条目的好消息是，它们在所有应用程序中都基本相同，并且实质上是样板代码。在此过程中，让我们省去在每个应用程序中看到的更多内容：清单5是对清单1的修改，以在应用程序XHTML页面中包括RichFaces命名空间：

清单5. 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:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
     xmlns:rich="http://richfaces.org/rich" >

准备摇滚

现在，我们准备使用RichFaces组件。我将从面板栏和面板栏项目开始（请参见图5 ）。您可能不会经常使用它们，但是它们易于使用，并为RichFaces语法提供了很好的首次使用案例。

这里的想法是，面板栏是面板栏项目的容器。面板栏项目具有标签，并且可以包含任何其他组件。面板栏项目彼此堆叠；单击项目的栏会显示实际内容。一次仅显示一项内容。在这种情况下，如清单6所示，我们仅使用文本。注意，所有组件都有一个rich:前缀，它引用清单5中包含的名称空间条目。

清单6. RichFaces面板栏组件

<rich:panelBar height="192" width="256">
  <rich:panelBarItem label="#{dWRFD1.calComp} #{dWRFD1.info}">
     <h:outputText value="#{dWRFD1.calCompText}" style="font: menu;" />
  </rich:panelBarItem>
  <rich:panelBarItem label="#{dWRFD1.lsComp} #{dWRFD1.info}">
     <h:outputText value="#{dWRFD1.lsCompText}" style="font: menu;" />
  </rich:panelBarItem>
  <rich:panelBarItem label="#{dWRFD1.sbComp} #{dWRFD1.info}">
     <h:outputText value="#{dWRFD1.sbCompText}" style="font: menu;" />
  </rich:panelBarItem>
</rich:panelBar>

哪里？

在JSF 1.2中，您可以在faces-config.xml中定义基于属性的资源包，因此不再需要每个页面上的<f:loadBundle> 。该定义类似于托管Bean的条目，但特定于资源包。示例： <resource-bundle> <base-name>dWRFDemo1</base-name> <var>dWRFD1</var> </resource-bundle> <resource-bundle> <base-name>dWRFDemo1</base-name> <var>dWRFD1</var> </resource-bundle>

基本的<rich:panelBarItem />元素只需要一个标签即可，这里需要使用EL表达式将其从资源包中拉出。

演示面板栏项目的实际内容只是一个<h:outputText />元素，同样包含资源包中的文本。我使用font样式元素来保持一致的可读性，但同时也表明RichFaces允许CSS灵活性。

请注意，无需程序员参与生成JavaScript。仅需几个步骤，您就可以创建一个外观漂亮的多面板可单击组件。这是RichFaces的长处之一。甚至像这样简单的组件也可以使用活动/不活动的样式，事件等。

我们约会吧

Calendar组件（请参见图1 ）应该很熟悉；日期选择可能是最早的Web页面JavaScript增强功能之一。 RichFaces日历具有80多个可用属性，但是，如清单7所示，通常可以减少使用：

清单7. RichFaces Calendar组件

<label for="CalendarID" >#{dWRFD1.calendar}:</label>
<rich:calendar name="Calendar" id="CalendarID"
               value="#{dWRFD1Handler.selectedDate}"
               timeZone="#{dWRFD1Handler.timeZone}"
               datePattern="#{dWRFD1.datePattern}" >
</rich:calendar>

datePattern属性需要由java.text.SimpleDateFormat定义的标准日期模式。该示例再次使用资源束作为值，该值将datePattern键定义为yyyy-MM-dd 。 value和timeZone属性是使用托管Bean中的方法加载的，该方法的定义如清单8所示：

清单8. `dWRFD1Handler`托管bean定义

<managed-bean>
    <managed-bean-name>dWRFD1Handler</managed-bean-name>
    <managed-bean-class>com.dW.dWRFD1Handler</managed-bean-class>
    <managed-bean-scope>session</managed-bean-scope>
  </managed-bean>

com.dW.dWRFD1Handler类是基本类，主要由初始化程序，getter和setter组成，因此不需要进行更多讨论。 getSelectedDate()和setSelectedDate()方法需要一个java.util.Date 。 getTimeZone()方法仅返回java.util.TimeZone.getDefault() ; 在生产中是否合适取决于您的应用要求。

如果您还希望允许用户键入日期值，请将enableManualInput属性设置为true 。如果只想显示日历，请将popup属性设置为false 。显然还有许多其他设置，但这就是基本日历功能所需的全部。

不管怎样

List Shuttle组件（请参见图2 ）非常适合从初始组中选择和订购商品。清单9展示了它比您最初想象的还要容易使用：

清单9. RichFaces List Shuttle组件

<label for="OrderByID">#{dWRFD1.orderBy}:</label>
<rich:listShuttle sourceValue="#{dWRFD1Handler.orderBySource}"
  name="OrderBy" id="OrderByID"
  targetValue="#{dWRFD1Handler.orderByTarget}" var="items"
  <h:column>
  <h:outputText value="#{items}"></h:outputText>
  </h:column>
</rich:listShuttle>

示例代码中的实际XHTML标记包括其他属性来覆盖某些默认标签，但是典型用法仅需要sourceValue ， targetValue ， var和column属性。

sourceValue和targetValue值是包含任何类型的对象的java.util.List类。与演示代码一样，您大多数时候可能会使用包含String的列表。除了sourceValue的初始化之外，清单10展示了与示例List Shuttle相关的所有Java代码：

清单10.相关的`dWRFD1Handler`列表班车代码

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;
  }

var属性声明一个变量，该变量将用于遍历列表，这是JSF组件经常使用的模式。如果列表中的对象支持多个字段，则实际上您可以有多个列。在这种情况下，表示法会从value="#{items}"更改为value="#{items.getterMethodName}" ，这并不奇怪。这里我们有String类的列表，因此只有一列。用户做出所需的选择后，您的处理程序在提交时会收到包含选择的有序目标列表。

告诉我我的脸

如果您经常访问论坛和邮件列表，则迟早会看到一个问题，询问如何处理将成千上万个条目下载到下拉列表中。 “建议框”组件（请参见图3 ）提供了一种显示有效选择的方法，而不会尝试这种无法解决的极端情况。实际上，这种担心是我开始研究RichFaces和类似套件的主要原因，因为该应用程序中的多个输入项（例如城市）对于下拉列表来说没有太多意义。建议框功能类似于许多桌面应用程序中提供的熟悉的自动完成组件。很明显，这种能力可能必须涉及Ajax提交，才能有机会在Web应用程序中有效工作。

清单11显示了有效功能所需的三个截然不同的组成部分：标签和输入文本（注意，它们是标准JSF RI组成部分）， <a4j:region>和<rich:suggestionbox> 。 <h:inputText>将getCity()和setCity()方法与托管bean结合使用以获取其值。该字段的输入可以是键输入，也可以从“建议”框中选择。

清单11. RichFaces建议框组件

<label for="CityID">#{dWRFD1.city}:</label>
<h:inputText name="City" id="CityID" size="10"
    value="#{dWRFD1Handler.city}" />
<a4j:region renderRegionOnly="true">
  <rich:suggestionbox id="citySuggestionBoxId" for="CityID"
    suggestionAction="#{dWRFD1City.suggest}" var="result"
    eventsQueue="foo" ignoreDupResponses="true"
    selectedClass="selCtl" >
    <h:column>
      <h:outputText value="#{result}" style="font: menu;" />
    </h:column>
  </rich:suggestionbox>
</a4j:region>

<a4j:region>表示在Ajax提交上发送的区域。您需要注意，通常，如果不包括区域，RichFaces会假定默认区域为<f:view>到</f:view> 。本质上就是整个页面。当我第一次使用<rich:suggestionbox> ，一切正常，但是单步调试显示所有其他字段也已提交，包括验证，转换和整个JSF生命周期。坦率地说，对于每一次按键响应而言，这都不是一个好情况。通常，适用于RichFaces开发人员指南（请参阅参考资料）中讨论另一种形式的Ajax提交的摘录，并且应该引申为：

请注意，“ ajaxSingle” =“ true”会减少即将到来的流量，但不会阻止对服务器端的其他输入组件进行解码。某些JSF组件（例如<h：selectOneMenu>）会将请求映射值中的缺失数据识别为空值，并尝试以失败的结果通过验证过程。因此，使用<a4j：region>限制组件树的一部分，该部分将在需要时在服务器端进行处理。

至于renderRegionOnly属性，《 RichFaces开发人员指南》以这种方式描述它：

标记以禁用AJAX响应中活动区域之外的内容的呈现。如果将此属性设置为“ true”，则AJAX响应中不会包含区域以外的任何组件。如果设置为“ false”，将在所有树上搜索作为响应要包括的组件。默认为“ false”。

在这种情况下，我们要返回到服务器的唯一元素是suggestionAction方法请求及其Object参数（当前键输入String ）。返回时，仅“建议框”内容应更新和呈现。

建议框本身所需的最小属性是suggestionAction ， var和至少一列以显示结果。该suggestionAction方法是suggest()在基于演示代码，第二Java类另一个托管bean com.dW.City 。该方法的签名为： public List suggest(Object anObject) 。

在演示代码中，将在初始化时创建以A和J开头的城市列表。如果用户按下“城市”文本字段中的空格键，则返回整个列表。如果按A，则返回包含以A开头的城市的子列表； J个城市的处理方式相同。每次击键都会缩小结果。在您自己的代码中，您可以执行适合输入的任何所需操作。在实际的应用程序中，结果来自有限的数据库集，这可能是最典型的。如果您熟悉数据，则可以采取该方法中的步骤来优化结果。例如，在某些情况下，某些击键可以忽略，因此该方法仅返回，从而消除了访问数据库的麻烦。

var属性定义用于输出列内容的迭代变量。它与List Shuttle组件的var属性所使用和讨论的概念相同。

eventsQueue属性不是必需的，但我建议您这样对待它。您只需要添加属性并提供名称。它执行两项重要服务：

方法调用（事件）排队，保证顺序；在上一个请求返回之前，不会发送队列中的下一个方法请求。
如果队列中有多个相同类型的事件，则仅发送最新事件。例如，建议箱在每次击键时都会发送一个请求。如果在前一个请求返回时队列中有多个击键请求，则只有最后一个将进入服务器。请记住，尽管请求是在每次击键时发送的，但发送的参数是输入文本组件的全部内容。

ignoreDupResponses属性的目的不言而喻。

selectedClass是要应用于组件CSS类。 RichFaces使用皮肤概念。这会转到组件上的选择栏。我自己的应用程序有几个RI下拉列表，这些下拉列表使用条形图的系统颜色。 “意见箱”使用了classic肤色，使外观看起来不一致。 SelCtl类告诉“建议框”改用系统突出显示的颜色。

保持标签

Tab Panel组件（参见图4 ）易于使用。典型的RichFaces属性是可用的，但是您将使用的主要属性是switchType 。默认值是server ，您可能最需要client 。也可以使用ajax 。如清单12所示，典型的RichFaces <rich:tabPanel>元素“三明治”和<rich:tab>元素的堆叠“三明治”用于制作一组选项卡式页面：

清单12. RichFaces选项卡面板组件

<rich:tabPanel switchType="client" >
  <rich:tab label="#{dWRFD1.info}">
    #{dWRFD1.resultText}
  </rich:tab>
  <rich:tab label="#{dWRFD1.result}">
  </rich:tab>
</rich:tabPanel>

label属性用于每个选项卡的显示名称。在演示代码中，像往常一样， label值是从资源束中提取的。与面板栏项目类似，选项卡可以包含任何类型的组件。对于演示，我将资源包文本用作“信息”选项卡内容，并将“简单切换面板”用作“结果”选项卡内容。

每当我看到你的笑脸

我怀疑您在想，“对最后一个没有太大的意思”，您是对的。了解RichFaces的基本知识之后，大多数组件的简单用法就是：简单。出于这个原因，我将把大部分的简单切换面板（参见图6和清单13 ）留给您练习。

清单13. RichFaces Simple Toggle Panel组件

<h:panelGrid columns="1" width="50%">
  <rich:simpleTogglePanel switchType="ajax"
     label="#{dWRFD1.calComp} #{dWRFD1.value}" opened="false" >
    #{dWRFD1Handler.selectedDate}
  </rich:simpleTogglePanel>
  <rich:simpleTogglePanel switchType="ajax"
     label="#{dWRFD1.lsComp} #{dWRFD1.value}" opened="false" >
    #{dWRFD1Handler.orderByTarget}
  </rich:simpleTogglePanel>
  <rich:simpleTogglePanel switchType="ajax"
     label="#{dWRFD1.sbComp} #{dWRFD1.value}" opened="false" >
    #{dWRFD1Handler.city}
  </rich:simpleTogglePanel>
  <rich:simpleTogglePanel switchType="ajax"
     label="#{dWRFD1.face}" opened="false" >
    <img src="images/myphoto.jpg"
       height="80" width="64"/>
  </rich:simpleTogglePanel>
</h:panelGrid>

“简单切换面板”包含一个栏和一个内容显示，可以是任何组件。通过单击该栏可以显示或隐藏内容，其行为非常类似于只有一项的面板栏。注意， switchType属性重新出现。 opened属性确定内容是否显示在第一显示屏上。对于演示，我将几个简单的Toggle面板放在JSF RI <h:panelGrid> ，该面板位于一个选项卡中，该选项卡位于一个选项卡面板中。

结语

RichFaces提供了大量用于构建RIA和支持Ajax的Web应用程序的JSF组件。本文仅演示了一些，但是您应该对RichFaces下的工作原理有所了解，并看到了在许多应用程序中可能有用的几个组件。所有的套房，文档中提供的组件和其它资源的在线演示都可以从“最重要的环节” RichFaces的主页上部分（参见相关主题。）

如果您选择使用RichFaces，我鼓励您深入研究文档中讨论的a4j:组件和处理，以了解如何将这些概念应用于其他RichFaces组件。当我说这是“速度更快”的另一个领域时，我的客户有时会感到沮丧，但是投入的研究时间将为您的开发过程和运行时性能带来很多好处。

RichFaces 3.2及其附加组件计划于2008年3月底发布。不管使用哪种RIA组件，这种激烈的竞争都应有助于提高它们的稳定性和生产率。

翻译自: https://www.ibm.com/developerworks/web/library/j-richfaces/index.html