In Relation To

Back to home

RichFaces 3.1.3 released

Posted by    |      

Updated - added in <rich:orderingList /> and specify the locale for the calendar

The RichFaces team have released RichFaces 3.1.3.GA. This is the first release since 3.1.0 back in September to include any new components (both 3.1.1 and 3.1.2 were bug fix releases) so I wanted to highlight the key improvements for you.

Time Picker

What's really great about the RichFaces timepicker is that it is integrated into the calendar control - you can easily choose to provide a graphical control for the date, the time or the date /and/ the time This is really easy to use - just bind the calendar control to the model as usual 
<rich:calendar value="#{flight.departureDate}"
               locale="#{locale}"
               datePattern="dd/M/yy hh:mm" />
As you can see, it's also fully internationalisable!

Controlling one component from another

<rich:componentControl /> allows you to fire an action on another component when a javascript event occurs on your current component. This is very powerful, and perhaps hard to understand until you need it, so lets look at a very simple example. Here we have a modal panel (a bit like a css/div based popup), which we want to launch from somewhere in our page: 

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

Rather than having to call some JS function, we can just attach a component controller to the link, and tell it what operation to call on what component.

<rich:componentControl /> can do a lot more than this - take a look at the online demo for ideas.

Shuttle list

As I've come to expect from the RichFaces guys, a really slick looking control, it's also simple to use: 
<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>
Notice how we've embedded other rich components to layout the lists!

Orderable list

Another similar component is the orderable list. Here's how you use it: 
<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>

Context sensitive menu

RichFaces already has components for rendering a menu bar, and 3.1.3 adds a right-click menu. 
<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>
Here we've attached the context menu to the parent <s:div /> component, so any right click on it causes the menu to show.

There's also

  • Big improvements to Portal support (we are just finishing off support for Seam and RichFaces in a portlet)
  • A system for customising how styles are loaded (one big lump, or on demand)
  • Over 180 bug fixes (see the release notes)

Congratulations to the RichFaces team!

Back to top