JBoss.orgCommunity Documentation
The component for definition lists rendering that allows choosing data from a model and obtains built-in support of Ajax updates.
Completely skinned table rows and child elements
Possibility to update a limited set of rows with Ajax
Possibility to receive values dynamically from a model
Table 6.64. rich : dataDefinitionList attributes
Table 6.65. 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 |
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:
Redefine the corresponding skin parameters
Add to your style sheets style classes used by a <rich:dataDefinitionList> component
On the screenshot there are classes names that define styles for component elements.
Table 6.66. 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 (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.