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

6.6.4.  < rich:dataDefinitionList > available since 3.0.0

The component for definition lists rendering that allows choosing data from a model and obtains built-in support of Ajax updates.


Table 6.64. rich : dataDefinitionList attributes

Attribute Name Description
ajaxKeysThis 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
columnClasses JSF: Assigns one or more space-separated CSS class names to the columns of the table. If the CSS class names are comma-separated, each class will be assigned to a particular column in the order they follow in the attribute. If you have less class names than columns, the class will be applied to every n-fold column where n is the order in which the class is listed in the attribute. If there are more class names than columns, the overflow ones are ignored.
componentStateIt defines EL-binding for a component state for saving or redefinition
dirHTML: Direction indication for text that does not inherit directionality. Valid values are "LTR" (left-to-right) and "RTL" (right-to-left)
firstA 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
langHTML: 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.
rowKeyRowKey is a representation of an identifier for a specific data row
rowKeyConverterConverter for a RowKey object.
rowKeyVarThe attribute provides access to a row key in a Request scope
rowsHTML: A number of rows to display, or zero for all remaining rows in the table
styleHTML: 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.
titleHTML: Advisory title information about markup elements generated for this component
value JSF: The current value for this component
varA request-scope attribute via which the data object for the current row will be used when iterating

Table 6.65. Component identification parameters

NameValue
component-typeorg.richfaces.DataDefinitionList
component-classorg.richfaces.component.html.HtmlDataDefinitionList
component-familyorg.richfaces.DataDefinitionList
renderer-typeorg.richfaces.DataDefinitionListRenderer
tag-classorg.richfaces.taglib.DataDefinitionListTag

To create the simplest variant of dataDefinitionList on a page, use the following syntax:

Example:


...
<rich:dataDefinitionList value="#{bean.capitals}" var="caps">
        <f:facet name="term">Cars</f:facet>
        <h:outputText value="#{car.model}"/>
</rich:dataDefinitionList>
...

Example:

import org.richfaces.component.html.HtmlDataDefinitionList;

...
HtmlDataDefinitionList myList = new HtmlDataDefinitionList();
...

The <rich:dataDefinitionList> component allows to generate an definition list from a model.

The component has the "term" facet, which corresponds to the "type" parameter for the <DT> HTML element.

Here is an example:


...
<h:form>
        <rich:dataDefinitionList var="car" value="#{dataTableScrollerBean.allCars}" rows="5" first="4" 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:dataDefinitionList>
</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.

The component was created basing on the <a4j:repeat> component and as a result it could be partially updated with Ajax. The "ajaxKeys" attribute allows to define row keys that are updated after an Ajax request, you need to pass an array with key (lines) of the list that you want to be updated after the Ajax request is executed.

Here is an example:

Example:


...
<rich:dataDefinitionList value="#{dataTableScrollerBean.allCars}" var="car" ajaxKeys="#{listBean.list}" 
                        binding="#{listBean.dataList}" id="list">
        ...
</rich:dataDefinitionList>
...
<a4j:commandButton action="#{listBean.action}" reRender="list" value="Submit"/>
...

In the example "reRender" attribute contains value of "id" attribute for <rich:dataDefinitionList> 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:dataDefinitionList> components at once:

On the screenshot there are classes names that define styles for component elements.



In order to redefine styles for all <rich:dataDefinitionList> 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-definition-term{
 
font-weight:bold;
}
...

This is a result:


In the example a term font weight was changed.

Also it's possible to change styles of particular <rich:dataDefinitionList> component. In this case you should create own style classes and use them in corresponding <rich:dataDefinitionList> styleClass attributes. An example is placed below:

Example:


...
.myClass{
  
font-style: italic;
}
...

Example:


<rich:dataDefinitionList ... rowClasses="myClass"/>

This is a result:


As it could be seen on the picture above, the font style for rows was changed.

On the component LiveDemo page you can see the example of <rich:dataDefinitionList> usage and sources for the given example.