listShuttle component allows to select items using two lists with move controls and reorder items in result list.

List Shuttle could contain several columns in list representation. And it also has strong keyboard support out of the box.

ListShuttle example

Customize simple application toolbar using List Shuttle. In this example you may select items and their order within the toolBar.
After you move some items between lists or reorder them in "Currently Active" list - you'll see the changes on the toolbar

Create Folder

Create Doc

Find

Available Items		Currently Active Items
Open Save Save All Delete	Copy all Copy all Copy Copy Remove Remove Remove All Remove All	Create Folder Create Doc Find	First First Up Up Down Down Last Last

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:c="http://java.sun.com/jstl/core">

    <style>
.pic {
    margin-bottom: -4px;
    margin-right: 2px;
}
</style>
    <h:form>
        <rich:toolBar id="toolBar" itemSeparator="line" height="28px">
            <c:forEach items="#{toolBar.items}" var="item">
                <h:panelGroup>
                    <h:graphicImage value="#{item.iconURI}" styleClass="pic" />
                    <h:outputLink value="#" style="color:#{a4jSkin.generalTextColor}; text-decoration:none;" >
                        <h:outputText value="#{item.label}" />
                    </h:outputLink>
                </h:panelGroup>
            </c:forEach>
        </rich:toolBar>
        <rich:spacer height="20" />

        <rich:listShuttle sourceValue="#{toolBar.freeItems}"
            targetValue="#{toolBar.items}" var="items" listsHeight="150"
            sourceListWidth="130" targetListWidth="130" sourceCaptionLabel="Available Items"
            targetCaptionLabel="Currently Active Items"
            converter="listShuttleconverter"> 
            <rich:column width="18"> 
                <h:graphicImage value="#{items.iconURI}"></h:graphicImage>
            </rich:column>
            <rich:column>
                <h:outputText value="#{items.label}"></h:outputText>
            </rich:column>
            <a4j:support event="onlistchanged" reRender="toolBar" />
            <a4j:support event="onorderchanged" reRender="toolBar" />
        </rich:listShuttle>
    </h:form>
</ui:composition>

<<Hide Source

Content definition for this component - analogous to any Iteration component. So, all you need is define collection in List Shuttle sourceValue attribute and iterate the collection in nested columns through var attribute.

Result items will be stored under the collection defined in targetValue attribute.

In order to set initially selected rows or to process submitted selection - use sourceSelection and targetSelection attributes.