Create new RichFaces Documentation Jira issue
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.
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
| Attribute Name |
Description
|
|---|---|
| ajaxKeys | This attribute defines row keys that are updated after an AJAX request |
| binding | JSF: The attribute takes a value-binding expression for a component property of a backing bean |
| componentState | It defines EL-binding for a component state for saving or redefinition |
| dir | HTML: Direction indication for text that does not inherit directionality. Valid values are "LTR" (left-to-right) and "RTL" (right-to-left) |
| first | A zero-relative row number of the first row to display |
| id | JSF: Every component may have a unique id that is automatically created if omitted |
| lang | HTML: Code describing the language used in the generated markup for this component |
| rendered | JSF: If "false", this component is not rendered |
| rowClasses | JSF: Assigns one or more space-separated CSS class names to the rows of the table. If the CSS class names are comma-separated, each class will be assigned to a particular row in the order they follow in the attribute. If you have less class names than rows, the class will be applied to every n-fold row where n is the order in which the class is listed in the attribute. If there are more class names than rows, the overflow ones are ignored. |
| rowKey | RowKey is a representation of an identifier for a specific data row |
| rowKeyConverter | Converter for a row key object |
| rowKeyVar | The attribute provides access to a row key in a Request scope |
| rows | HTML: A number of rows to display, or zero for all remaining rows in the table |
| stateVar | The attribute provides access to a component state on the client side |
| style | HTML: CSS style rules to be applied to the component |
| styleClass | JSF: Assigns one or more CSS class names to the component. Corresponds to the HTML "class" attribute. |
| title | HTML: Advisory title information about markup elements generated for this component |
| type | HTML: Corresponds to the HTML DL type attribute |
| value | JSF: The current value for this component |
| var | A request-scope attribute via which the data object for the current row will be used when iterating |
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.
