JBoss.orgCommunity Documentation
The component for unordered lists rendering that allows choosing data from a model and obtains built-in support of Ajax updates.
A completely skinned list and child elements
Possibility to update a limited set of rows with Ajax
Possibility to receive values dynamically from a model
Table 6.72. rich : dataList attributes
Table 6.73. Component identification parameters
Name | Value |
---|---|
component-type | org.richfaces.DataList |
component-class | org.richfaces.component.html.HtmlDataList |
component-family | org.richfaces.DataList |
renderer-type | org.richfaces.DataListRenderer |
tag-class | org.richfaces.taglib.DataListTag |
To create the simplest variant of dataList on a page, use the following syntax:
Example:
...
<rich:dataList var="car" value="#{dataTableScrollerBean.allCars}" >
<h:outputText value="#{car.model}"/>
</rich:dataList>
...
Example:
import org.richfaces.component.html.HtmlDataList;
...
HtmlDataList myList = new HtmlDataList();
...
The <rich:dataList> component allows to generate a list from a model.
The component has the "type" attribute, which corresponds to the "type" parameter for the <UL> HTML element and defines a marker type. Possible values for "type" attribute are: "disc", "circle", "square".
Here is an example:
...
<h:form>
<rich:dataList var="car" value="#{dataTableScrollerBean.allCars}" rows="5" type="disc" 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:dataList>
</h:form>
...
This is a result:
In the example the "rows" attribute limits number of output elements of the list.
"first" attribute defines first element for output. "title" are used for popup title. See picture below:
The component was created basing on the <a4j:repeat> component and as a result it could be partially updated with Ajax. "ajaxKeys" attribute allows to define row keys that are updated after an Ajax request.
Here is an example:
Example:
...
<rich:dataList value="#{dataTableScrollerBean.allCars}" var="car" ajaxKeys="#{listBean.list}"
binding="#{listBean.dataList}" id="list" rows="5" type="disc">
...
</rich:dataList>
...
<a4j:commandButton action="#{listBean.action}" reRender="list" value="Submit"/>
...
In the example "reRender" attribute contains value of "id" attribute for <rich:dataList> component. As a result the component is updated after an Ajax request.
For skinnability implementation, the components use a style class redefinition method. Default style classes are mapped on skin parameters.
There are two ways to redefine the appearance of all <rich:dataList> components at once:
Redefine the corresponding skin parameters
Add to your style sheets style classes used by a <rich:dataList> component
On the screenshot there are classes names that define styles for component elements.
Table 6.74. Classes names that define a list appearance
Class name | Description |
---|---|
rich-datalist | Defines styles for an html <ul> element |
rich-list-item | Defines styles for an html <li> element |
In order to redefine styles for all <rich:dataList> components on a page using CSS, it's enough to create classes with the same names (possible classes could be found in the tables above) and define necessary properties in them.
Example:
...
.rich-list-item{
font-style:italic;
}
...
This is a result:
In the example the font style for list item text was changed.
Also it's possible to change styles of particular <rich:dataList> component. In this case you should create own style classes and use them in corresponding <rich:dataList> styleClass attributes. An example is placed below:
Example:
...
.myClass{
background-color:#ffead9;
}
...
The "styleClass" attribute for <rich:dataList> is defined as it's shown in the example below:
Example:
<rich:dataList ... styleClass="myClass"/>
This is a result:
As it could be seen on the picture above, background color for <rich:dataList> was changed.
On the component LiveDemo page you can see the example of <rich:dataList> usage and sources for the given example.