RichFaces <rich:list>

This component is used to render a list of items. We can create numerically ordered list, an un-ordered, bullet-point list etc. It uses a data model for managing the list items which can be updated dynamically.

Style classes and skin parameters

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

Class	Function	Skin Parameters	Mapped CSS properties
.rf-ulst-itm	It is used to define styles for an item in an unordered list.	generalTextColor generalFamilyFont	color font-family
.rf-olst-itm	It is used to define styles for an item in an unordered list.	generalTextColor generalFamilyFont	color font-family
.rf-dlst-trm	It is used to define styles for the term of an item in a definition list.	generalTextColor generalFamilyFont	color font-family
.rf-dlst-dfn	It is used to define styles for the definition of an item in a definition list.	generalTextColor generalFamilyFont generalSizeFont	color font-family font-size

Example

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

JSF File

// rich-list.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>Rich List </title>
</h:head>
<h:body>
<h:form>
<h:form>
<rich:list var="student" value="#{studentRecord.records}" type="definitions" rows="5" title="Cars">
<f:facet name="term">
<h:outputText value="#{student.id}" styleClass="label"></h:outputText>
</f:facet>
<h:outputText value="Name:" styleClass="label"></h:outputText>
<h:outputText value="#{student.name}" /><br/>
<h:outputText value="Email:" styleClass="label"></h:outputText>
<h:outputText value="#{student.email}" /><br/>
<h:outputText value="Contact:" styleClass="label"></h:outputText>
<h:outputText value="#{student.contactNumber}" /><br/>
</rich:list>
</h:form>
</h:form>
</h:body>
</f:view>
</ui:composition>

Managed Bean

// StudentRecord.java

import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class StudentRecord {
String id;
String name;
String email;
String contactNumber;
List<StudentRecord> records;
public StudentRecord(){}
public StudentRecord(String id, String name, String email, String contactNumber) {
this.id = id;
this.name = name;
this.email = email;
this.contactNumber = contactNumber;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getContactNumber() {
return contactNumber;
}
public void setContactNumber(String contactNumber) {
this.contactNumber = contactNumber;
}
public List<StudentRecord> getRecords() {
records = new ArrayList<>();
records.add(new StudentRecord("101", "Raju", "raju@abc.com", "52534252"));
records.add(new StudentRecord("102", "Rama", "rama@abc.com", "52235252"));
records.add(new StudentRecord("103", "John", "john@abc.com", "52456252"));
records.add(new StudentRecord("104", "Peter", "peter@abc.com", "55625252"));
return records;
}
public void setRecords(List<StudentRecord> records) {
this.records = records;
}
public int getNumberOfRecords(){
return this.records.size();
} 
}

Output: