richfaces rich:calendar 在rich:modalPanel中不能正常弹出 - Ajax4JSF - JSF - ITeye群组
& 我在使用richfaces时，使用列表窗体显示列表数据，点击的时间弹出相应详细内容的窗体，现在弹出窗体可以正常出现，但是rich:calendar不能正常的弹出相应的窗体，列表页面的代码如下：
这是调用弹出窗体的代码，想问一下这是不是Richfaces的组件的原因？还是代码上有错，希望各位高手给出指点！多谢！！！！
&rich:modalPanel id="gredit" width="660" height="350"&
&f:facet name="header"&
&h:outputText value="#{msgs['gr_grxx']}" /&
&/f:facet&
&f:facet name="controls"&
&h:panelGroup&
&h:graphicImage value="/images/modal/close.png"
style="cursor:pointer" id="hidelink" /&
&rich:componentControl for="gredit" attachTo="hidelink"
operation="hide" event="onclick" /&
&/h:panelGroup&
&/f:facet&
&&&&&& &a4j:form id="aform11" name="aform11"&
&h:panelGrid columns="6" &
&h:outputLabel value="#{msgs['grda_xm']}" /&
&h:inputText value="#{grdaBean.grda.xm}" /&
&h:outputLabel value="#{msgs['grda_xb']}" /&
&h:outputLabel value="#{msgs['grda_csrq']}" /&
&&& &rich:calendar id="c1" name="c1" popup="true" value="#{grdaBean.grda.dcsrq}"/&
&/h:panelGrid&
&&&&&&&&&&
&/a4j:form&
&/rich:modalPanel&
&a4j:commandButton value="#{msgs['common_view']}"& reRender="aform11"
action="#{grdaBean.editClick}" oncomplete="javascript:Richfaces.showModalPanel('gredit');"&
&& &a4j:actionparam name="grdatoedit" value="#{grda.empi}" assignTo="#{grdaBean.empi}" /&
&& &a4j:actionparam name="grdatojkzy" value="#{grda.empi}" assignTo="#{jkzyBean.qempi}" /&
&/a4j:commandButton&
你用的版本是？我记得老版本确实有这个问题。。。1.5版本左右就没这个问题了。
我用的是最新的版本啊！
richfaces我用的都是3.2.1GA版本的，在Jboss上面都是最新的啦
你把&rich:calendar id="c1" name="c1" popup="true" value="#{grdaBean.grda.dcsrq}"/&
标签外面的所有东西都去掉， 真个页面只用一个标签 ， 看看效果怎么样 。
我以前遇到过 ， calendar 的弹出窗口不出现的情况。
相关资源推荐使用带有 JSF 2 的 RichFaces
JavaServer Faces (JSF) 2 于 2009 年推出，包含了对许多领域进行的主要变更和补充，其中包括系统事件、资源以及 Facelets 与 Ajax 处理标准化（参阅 ）。虽然这种演变受到了普遍的欢迎，但是其主要副作用是，如果继续使用的话，几乎所有为 JSF 1.2 编写的富组件框架（包括 RichFaces 版本 3.x 及更低版本）都不再具有可靠性。针对这一点，RichFaces 团队开始为版本 4 进行大范围的重新编写。在本文中，您将看到一些组件名发生了变化；删除了另一些组件，并添加了一些新组件。在我 2008 年撰写的一篇文章 "" 中，我展示了 RichFaces 版本 3.1 中的若干个组件，并讲解了 RichFaces 和 JavaServer Faces (JSF) 1.2 的设置要求。本文是后续文章，即可为刚刚接触 RichFaces 的开发人员提供指南，又可为从早期版本迁移到版本 4.x 提供协助。我已提供了带有演示代码的 WAR 文件（参见 ）。如果您刚刚接触 RichFaces，并想要与 JSF 2 配套使用，那么只需阅读本文（虽然您可能要查看
资料）。如果您已经使用过版本 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 组件Pick List：一个选择和排序组件。Pick List 替代版本 4 中的 List Shuttle，可以在可用的和所选区域之间移动项目，并将项目在所选区域内进行上下移动。图 2 显示了一个示例：
图 2. RichFaces Pick List 组件AutoComplete：替代版本 4 中的 Suggestion Box 输入组件，提供可点击的建议，以填充或完成一个条目。图 3 显示了一个示例：
图 3. RichFaces AutoComplete 组件Tab Panel：创建标签页的输出组件。图 4 显示了一个示例：
图 4. RichFaces Tab Panel 组件Accordion：替代版本 4 中的 Panel Bar 输入组件。样例项目使用 Accordion 作为指南。图 5 显示了一个示例：
图 5. RichFaces Accordion 组件Collapsible Panel：替代版本 4 的 Simple Toggle Panel 组件。样例项目使用 Collapsible Panels 获得结果。图 6 显示了一个示例：
图 6. 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 输入页面
在输入后，点击 Submit 按钮。该应用程序非常简单，因此无法执行编辑。因为对 Calendar 组件禁用了手动输入，因此甚至不能输入一个无效的日期。按下 Submit 按钮会显示结果页面，如图 8 所示：
图 8. dwRichFaces4Demo1 结果页面
在结果页面，点击 Result 选项卡，然后点击相应的 Collapsible Panel 项，查看输入值。点击 Edit 按钮返回输入页面。
中的 Submit 按钮的背景颜色和
中的 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.jarFacelets
包括在 JSF 2 JAR 中RichFaces
richfaces-components-api-ver.jarrichfaces-components-ui-ver.jarrichfaces-core-api-ver.jarrichfaces-core-impl-ver.jar其他所需的依赖性：
cssparser-ver.jarguava-ver.jarsac-ver.jar
在我的项目以及
了解下载站点）所使用的版本包括：
javax.faces.jar — mojarra-2.1.4Facelets
包含在 javax.faces.jar 中RichFaces
richfaces-components-api-4.1.0.-CR1.jarrichfaces-components-ui-4.1.0.-CR1.jarrichfaces-core-api-4.1.0.-CR1.jarrichfaces-core-impl-4.1.0.-CR1.jar其他所需的依赖性：
cssparser-0.9.5.jarguava-10.0.1.jarsac-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_HANDLERS、filter 或 filter-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& 包括两个上下文参数：&param-name&org.richfaces.skin&/param-name& 定义应用程序的配色方案（皮肤）。RichFaces 有多个内置皮肤。classic 皮肤是浅蓝色。如果省略了该元素，则默认为浅灰色。
&param-name&org.richfaces.enableControlSkinning&/param-name& 值对 RichFaces 和（出乎意料的是）标准 JSF 组件的外观有影响。如果其值为 true，标准控件都涂色。例如，这正是图
中的 Submit 和 Edit 按钮的颜色与 RichFaces 主题的颜色相同的原因。如果省略该元素，则默认值为 true。
中条目的好消息是，它们几乎与所有应用程序的条目和基本样板代码相同。如果您愿意接受默认设置，不在乎显式，您可以连同它们一起省略。
在每个应用程序中您还将看到另一个条目：应用 XHTML 页面中的 RichFaces 命名空间。清单 4 是对
的修改，其中包括 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 项（参见 ）。这些项取代了 RichFaces 4 之前的版本中的 Panel Bar 和 Panel Bar 项。您可能不经常使用它们，但是它们易于使用并提供了 RichFaces 句法的一个很好的首个用例。
此处的观点是 Accordion 是 Accordion 项的容器。每个 Accordion 项都有一个头，同时可以容纳任何其他组件。Accordion 项彼此堆叠；当点击该项的栏时会显示实际内容。一次只显示一个项的内容。在这种情况下，正如清单 5 所示，我只使用文本。请注意所有组件都有一个 rich: 前缀，它表示
中所包含的命名空间条目。在演示中，Accordion 是包含在标准 JSF PanelGrid 中：清单 5. RichFaces Accordion 组件&rich:accordion style="width: 256" styleClass="floatLeft"&
&rich:accordionItem header="#{dwRF4D1.calComp} #{dwRF4D1.info}"&
&h:outputText value="#{dwRF4D1.calCompText}" style="font:" /&
&/rich:accordionItem&
&rich:accordionItem header="#{dwRF4D1.plComp} #{dwRF4D1.info}"&
&h:outputText value="#{dwRF4D1.plCompText}" style="font:" /&
&/rich:accordionItem&
&rich:accordionItem header="#{dwRF4D1.acComp} #{dwRF4D1.info}"&
&h:outputText value="#{dwRF4D1.acCompText}" style="font:" /&
&/rich:accordionItem&
&/rich:accordion&基本的 &rich:accordionItem /& 元素只需要一个头，使用 EL 表达式将头从资源包拖到此处。 演示 Accordion 项的实际内容只是一个 &h:outputText /& 元素，也是取自资源包的文本。我使用 font 样式元素保持一致的可读性，同时也表明 RichFaces 实现了 CSS 灵活性。 请注意所生成的 JavaScript 不需要程序员参与。只需几个步骤，您便可以创建一个外形美观、多面板、可点击的组件。这是 RichFaces 的最大优势之一。甚至如此简单的一个组件也能支持 Ajax（通过 switchType 属性）、激活/非激活样式、事件等。让我们制作一个日期
Calendar 组件（参见 ）应该比较常见；日期选择可能是最早对网页进行 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-dd。value 和 timeZone 属性使用来自管理 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.Date。getTimeZone() 方法只返回 java.util.TimeZone.getDefault()；是否适合生产取决于您的应用程序的需求。
如果您还想允许用户输入日期值，请将 enableManualInput 属性设置为 true。如果您只想显示日历，则将 popup 属性设置为 false。显然有许多设置可用，然而，这些都是您的基本日历功能所需的全部。
如果您从以前的 RichFaces 版本进行迁移，为演示代码中的功能建立 Calendar 组件的操作几乎与版本 4 完全相同。
用带有 orderable 属性的 Pick List 组件替代版本 4 中的 List Shuttle（参见
和 ）是原始组的选择和排序项的理想选择。清单 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 代码与 "" 中所使用的代码几乎保持不变。清单 9. 相关的 dwRF4D1Handler Pick List 代码private List&String& lOrderBySource = new ArrayList&String&(),
lOrderByTarget = new ArrayList&String&();
public List getOrderBySource()
return lOrderByS
public List getOrderByTarget()
return lOrderByT
public void setOrderBySource( List&String& orderBySource )
lOrderBySource = orderByS
public void setOrderByTarget( List&String& orderByTarget )
lOrderByTarget = orderByT
用户选择之后，在提交时，您的处理程序会接收包含该选择的列表。
当面告诉我
如果您经常查看论坛和邮件列表，您迟早会发现一个问题，询问如何处理将数千或数百万的条目下载到一个下拉列表上。AutoComplete 组件（参见 ）替代了 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 的简单性。所需的最少属性为 mode、value 和 autocompleteMethod：
mode 通常是 ajax，每次击键均会调用 Ajax 请求（很棒并且基本上是自动的）。其他值分别为 Cached Ajax、Client 和 Lazy 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 组件（参见 ）易于使用，尽管在迁移操作中需要注意某些变更。典型的 RichFaces 属性都可用，然而，主要使用的是 switchType。其默认值为 server。对于常量信息，您可能经常需要 client；ajax 选项也可用。正如清单 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 的组件。它包含一个栏和一个内容显示，它可以是任何组件（参见 ）。使用 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 值，还可以使用 client 和 server 值。expanded 属性决定是否在第一条显示中显示内容。在演示中，我将多个 Collapsible Panel 放在了 JSF &h:panelGrid /& 中，将其放在一个选项卡中，该选项卡放在选项卡面板中。
RichFaces 提供大量 JSF 组件，用于构建 RIA 和支持 Ajax 的应用程序。本文只演示了其中少数组件，但您应该了解在 RichFaces 下的工作方式，并看到可用于多数应用程序的多个组件。在推出了版本 4 后，Richfaces 现在能够与 JSF 2 兼容，并提供了您所欣赏的简单性和效率。RichFaces 项目页面提供套件中所有可用组件的在线演示、文档和其他参考资料（参阅 ）。
如果您选择使用 RichFaces，那么我鼓励您深入研究 a4j: 组件和文档中讨论的处理，从而了解如何将概念应用到其他 RichFaces 组件。您在研究中所花费时间可在开发流程和运行时性能方面得到回报。
下载资源 (j-richfaces4.zip | 8.9MB): Java 源代码包含在 WAR 文件中。有关使用 WAR 文件的指南，请参阅下载中包含的 readme.txt 文件。相关主题：RichFaces 网站提供信息、文档、在线演示和下载的链接。：寻找 JSF 参考实现的开发人员参考资料。
""（Joe Sam Shirah，developerWorks，2008 年 3 月）该作者以前的文章涵盖了 RichFaces 3.x 和 JSF 1.2。：Andy Schwartz 博客中提到的此条目虽然有点过时，但仍然是关于 JSF 2 功能的有用参考资料。：RichFaces 论坛中的该线程包含关于配套使用 RichFaces 4 和 IBM WebSphere 的信息。：Ajax4jsf 现在是 RichFaces 的组成部分，最初是作为一个独立的项目。：下载 RichFaces。：下载 Mojarra 2.x 或其他 JSF 参考实现。
""（Juan Camilo Prada，，2011 年）：本文讨论了依赖性和下载 cssparser.jar、sac.jar 和 guava.jar 的位置。：寻找 Tomcat servlet 容器的信息和下载地点。
：寻找 GlassFish 应用服务器的信息和下载地点。
：这里有数百篇关于 Java 编程各个方面的文章。
：下载与您的应用程序最终将运行的生产运行时环境完全相同的免费的 WebSphere 产品。
以最适合您的方式 ：下载产品试用版，在线试用产品，在云环境下试用产品，或者在
中花费几小时来学习如何高效实现面向服务的架构。
添加或订阅评论，请先或。
有新评论时提醒我
static.content.url=http://www.ibm.com/developerworks/js/artrating/SITE_ID=10Zone=Java technology, Open sourceArticleID=794792ArticleTitle=使用带有 JSF 2 的 RichFacespublish-date=