RichFaces 3.1.3版本发布

更新 - 添加了<rich:orderingList />并指定日历的区域设置

RichFaces团队发布了RichFaces 3.1.3.GA。这是自9月3.1.0版本以来首次包含任何新组件的发布（3.1.1和3.1.2都是错误修复版本），因此我想向您突出显示关键改进。

时间选择器

RichFaces时间选择器真正出色的地方在于它与日历控件集成 - 您可以轻松选择提供日期、时间或日期/和/时间图形控件。这非常容易使用 - 只需像往常一样将日历控件绑定到模型即可

<rich:calendar value="#{flight.departureDate}"
               locale="#{locale}"
               datePattern="dd/M/yy hh:mm" />

正如您所看到的，它也完全支持国际化！

从另一个组件控制一个组件

<rich:componentControl />允许您在当前组件上发生javascript事件时在另一个组件上触发一个动作。这非常强大，也许直到您需要它才难以理解，让我们看看一个非常简单的例子。这里有一个模态面板（有点像基于css/div的弹出窗口），我们希望从页面的某个位置启动它

<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函数，只需将一个组件控制器附加到链接，并告诉它要对哪个组件执行什么操作。

<rich:componentControl />可以做得更多 - 请查看在线演示以获取灵感。

穿梭列表

如同RichFaces团队所期望的那样，一个看起来非常漂亮且易于使用的控件

<rich:listShuttle sourceValue="#{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>

请注意，我们如何在布局列表中嵌入其他rich组件！

可排序列表

另一个类似的组件是可排序列表。以下是使用方法：

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

上下文相关菜单

RichFaces 已经有用于渲染菜单栏的组件，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 />组件，因此对该组件的任何右键点击都会显示菜单。