RichFaces <rich:orderingList>

RichFaces provides this component for ordering items in a list at client-side. We need to use the value attribute to the list to be ordered.

It also provides up and down button by witch you can change order of elements in the list.

Style classes and skin parameters

The following table contains the style classes and skin parameters for the orderingList.

Class (selector)	Function	Skin Parameters	Mapped CSS properties
.rf-ord	It is used to define styles for the orderingList control itself.	No skin parameters.
.rf-ord-cntr	It is used to define styles for the container of the orderingList control.	No skin parameters.
.rf-ord-cptn	It is used to define styles for the caption of the orderingList control.	headerTextColor headerSizeFont	color font-size
.rf-ord-lst	It is used to define styles for the items list of the orderingList control.	No skin parameters.
.rf-ord-hdr	It is used to define styles for the header of the items list.	headerBackgroundColor headerTextColor	background-color color
.rf-ord-opt	It is used to define styles for an option in the orderingList control.	generalSizeFont	font-size
.rf-ord-sel	It is used to define styles for the selected option of the orderingList control.	generalTextColor	border-color
.rf-ord-dflt-lbl	It is used to define styles for the default label of the orderingList control.	No skin parameters.
.rf-ord-btn	It is used to define styles for the button of the orderingList control.	headerBackgroundColor	background-color
.rf-ord-btn-dis	It is used to define styles for the button of the orderingList control when it is disabled.	No skin parameters.
.rf-ord-lst-scrl	It is used to define styles for the list scrollbar.	No skin parameters.

Example

Here, in the following example, we are implementing <rich:orderingList> component. This example contains the following files.

JSF File

// orderingList.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">
<ui:composition 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">
<f:view>
<h:head>
<title>Ordering List Example</title>
</h:head>
<h:body>
<h:form>
<h:outputText value="Ordering List Example"/><br/><br/>
<rich:orderingList value="#{country.countryList()}" var="capital" itemValue="#{country}" itemLabel="#{country.countryName}">
</rich:orderingList>
</h:form>
</h:body>
</f:view>
</ui:composition>

Managed Bean

// Country.java

import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class Country {
String CountryName;
public List<String> countryList() {
ArrayList<String> list = new ArrayList<>();
list.add("India");
list.add("Australia");
list.add("Germany");
list.add("Italy");
list.add("United States");
list.add("Russia");
return list;
}
public String getCountryName() {
return CountryName;
}
public void setCountryName(String CountryName) {
this.CountryName = CountryName;
}
}

Output:

Initially, buttons are disabled.