⁠12.8. <rich:list>

The <rich:list> component renders a list of items. The list can be an numerically ordered list, an un-ordered bullet-point list, or a data definition list. The component uses a data model for managing the list items, which can be updated dynamically.

⁠12.8.1. Basic usage

The var attribute names a variable for iterating through the items in the data model. The items to iterate through are determined with the value attribute by using EL (Expression Language).

⁠12.8.2. Type of list

By default, the list is displayed as an un-ordered bullet-point list. The type attribute is used to specify different list types:
unordered
The default presentation. The list is presented as a series of bullet-points, similar to the <ul> HTML element.
⁠
Unordered list

Figure 12.10. Unordered list

ordered
The list is presented as a numbered series of items, similar to the <ol> HTML element.
⁠
Ordered list

Figure 12.11. Ordered list

definitions
The list is presented as a series of data definitions. Part of the data model, specified as the term, is listed prominently. The other associated data is listed after each term.
⁠
Data definition list

Figure 12.12. Data definition list

The term is marked using the term facet. The facet is required for all definition lists. Use of the facet is shown in Example 12.13, “Data definition list”.
⁠

Example 12.13. Data definition list

​<h:form>
​    <rich:list var="car" value="#{dataTableScrollerBean.allCars}" type="definitions" rows="5" title="Cars">
​        <f:facet name="term">
​            <h:outputText value="#{car.make} #{car.model}"></h:outputText>
​        </f:facet>
​        <h:outputText value="Price:" styleClass="label"></h:outputText>
​        <h:outputText value="#{car.price}" /><br/>
​        <h:outputText value="Mileage:" styleClass="label"></h:outputText>
​        <h:outputText value="#{car.mileage}" /><br/>
​    </rich:list>
​</h:form>

⁠12.8.3. Bullet and numeration appearance

The appearance of bullet points for unordered lists or numeration for ordered lists can be customized through CSS, using the list-style-type property.

⁠12.8.4. Customizing the list

The first attribute specifies which item in the data model to start from, and the rows attribute specifies the number of items to list. The title attribute is used for a floating tool-tip. Example 12.14, “<rich:list> example” shows a simple example using the <rich:list> component.
⁠

Example 12.14. <rich:list> example

​<h:form>
​    <rich:list var="car" value="#{dataTableScrollerBean.allCars}" rows="5" type="unordered" title="Car Store">
​        <h:outputText value="#{car.make} #{car.model}"/><br/>
​        <h:outputText value="Price:" styleClass="label"></h:outputText>
​        <h:outputText value="#{car.price} "/><br/>
​        <h:outputText value="Mileage:" styleClass="label"></h:outputText>
​        <h:outputText value="#{car.mileage} "/><br/>
​    </rich:list>
​</h:form>
⁠
<rich:list> example

Figure 12.13. <rich:list> example

⁠12.8.5. Reference data

  • component-type: org.richfaces.List
  • component-class: org.richfaces.component.UIList
  • component-family: org.richfaces.List
  • renderer-type: org.richfaces.ListRenderer
  • handler-class: org.richfaces.taglib.ListHandler

⁠12.8.6. Style classes and skin parameters

⁠

Table 12.5. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties
.rf-ulst-itm
This class defines styles for an item in an unordered list.
generalTextColor
color
generalFamilyFont
font-family
generalSizeFont
font-size
.rf-olst-itm
This class defines styles for an item in an unordered list.
generalTextColor
color
generalFamilyFont
font-family
generalSizeFont
font-size
.rf-dlst-trm
This class defines styles for the term of an item in a definition list.
generalTextColor
color
generalFamilyFont
font-family
generalSizeFont
font-size
.rf-dlst-dfn
This class defines styles for the definition of an item in a definition list.
generalTextColor
color
generalFamilyFont
font-family
generalSizeFont
font-size