RichFaces 简介（4）

look_w

准备好了现在，我们可以开始使用 RichFaces 组件。从 Panel Bar 和        Panel Bar Items（参见 ）开始。您可能不经常使用这些组件，但是它们都很容易使用，并且为        RichFaces 语法提供了第一个良好的用例。
这里的思想是，Panel Bar 是 Panel Bar Items 的一个容器。每个 Panel         Bar Item 有一个标签，并且可以包含任何其他组件。Panel Bar Items 位于另一个 Panel Bar Items 之上；当单击条目栏时，将显示实际的内容。每次只显示一个条目的内容。在这个应用程序中，如 所示，我们将使用文本。注意，所有组件都有一个 rich:前缀，以引用 中包括的名称空间项。
清单 6. RichFaces Panel Bar 组件

1 2 3 4 5 6 7 8 9 10 11

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

在哪里？在 JSF 1.2 中，可以在 faces-config.xml 中定义基于属性的资源包，所以不再需要在每个页面上使用          <f:loadBundle>。该定义类似于用于 managed bean 的条目，但是特定于资源包。例如：
<resource-bundle>
   <base-name>dWRFDemo1</base-name>
   <var>dWRFD1</var>
</resource-bundle>


基本的 <rich:panelBarItem />元素只需要一个标签，它是通过一个 EL 表达式从资源包中提取到这里的。
演示 Panel Bar Items 的实际内容只是一个        <hutputText />元素，它同样也具有来自资源包的文本。为提高可读性，我使用一个 font样式元素，同时这也表明了 RichFaces 支持 CSS 的灵活性。
注意，对于生成的 JavaScript，不需要程序员的任何参与。只需简单几步，就可以创建一个好看的、多面板的、可单击的组件。这正是 RichFaces 的一个强大之处。即使是像这样简单的组件，也可以有 active/inactive 样式、事件等。
确定日期Calendar 组件（如 所示）您应该比较熟悉；日期选择也许是 JavaScript 对 Web 页面最早的增强之一。RichFaces Calendar 有超过 80 个可用属性，但是，正如 所示，您通常只用到其中很少一部分：
清单 7. RichFaces Calendar 组件

1 2 3 4 5 6

<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属性是使用来自一个 managed bean 的方法装载的，这个 bean 的定义如 所示：
清单 8. 用于 dWRFD1Handler                的 managed bean 定义

1 2 3 4 5

<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。如果您只想显示 Calendar，那么将        popup属性设置为 false。        显然，还有很多其他属性可以设置，但是对于基本的 Calendar 功能只需做这么多。
多种方法List Shuttle 组件（参见 ）是从一个初始组中选择项目并对选定的项目排序的理想组件。 表明，它比您想象的更容易使用：
清单 9. RichFaces List Shuttle 组件

1 2 3 4 5 6 7 8

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

示例代码中实际的 XHTML 标记包括更多属性，以覆盖某些默认的标签，但是通常情况下只需        sourceValue、targetValue、        var和 column属性。
sourceValue和        targetValue值是包含任何类型的对象的        java.util.List类。和演示代码一样，大多数情况下您将使用包含        String的列表。并不是初始化 sourceValue，而是显示与示例 List Shuttle 相关的所有 Java 代码。
清单 10. 相关的 dWRFD1HandlerList Shuttle 代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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类列表，因此只有一个列。用户做出选择之后，在提交时处理程序会收到排好序的目标列表，其中包含用户的选择。