HtmlDataDefinitionList rich:dataDefinitionList

Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.DataDefinitionList
component-class | org.richfaces.component.html.HtmlDataDefinitionList
component-family | org.richfaces.DataDefinitionList
renderer-type | org.richfaces.DataDefinitionListRenderer
tag-class | org.richfaces.taglib.DataDefinitionListTag

## Creating the Component with a Page Tag

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>
    ...

## Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlDataDefinitionList;
    ...
    HtmlDataDefinitionList myList = new HtmlDataDefinitionList();
    ...

## Details of Usage

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:

Component usage

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. "ajaxKeys" attribute allows to define row keys that are updated after an Ajax request.

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.

## Look-and-Feel Customization

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:

- Redefine the corresponding skin parameters

- Add to your style sheets style classes used by a <rich:dataDefinitionList> component

## Definition of Custom Style Classes

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

Style classes

Classes names that define a list appearance

Class name | Description
--- | ---
rich-deflist | Defines styles for an html <dl> element
rich-definition | Defines styles for an html <dd> element
rich-definition-term | Defines styles for an html <dt> element

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 and define necessary properties in them.

To change styles of particular <rich:dataDefinitionList> components, define your own style classes in the corresponding <rich:dataDefinitionList> attributes.

## Relevant Resources Links

Here you can see the example of <rich:dataDefinitionList> usage and sources for the given example.