Obsolete Pages{{Obsolete}}
The official documentation is at: http://docs.alfresco.com
JSF Component
Back to Component Library
RichList
General Description
The RichList component is capable of rendering a list of java bean objects in multiple rendering modes. A List of objects is bound to the component through the value attribute and components within the list can bind to specific fields (columns) through getter methods for each bean object within the list. The component provides mechanism to page and sort data through additional components (see below).
Tag details
<string>'
rendered='<boolean>'
styleClass='<string>'
style='<string>'
rowStyleClass='<string>'
altRowStyleClass='<string>'
width='<string>'
viewMode='details|icons|list' MANDATORY
pageSize='<integer>'
value='<object-binding>' MANDATORY
var='<string>' MANDATORY
initialSortColumn='<string>'
initialSortDescending='<boolean>'
/>
Custom tag attributes
rowStyleClass - CSS class applied to each row
altRowStyleClass - CSS class applied to alternate rows if set
width - table width attribute
viewMode - well known name of a view mode renderer, currently: details, icons or list. This defines how the list is rendered, the list can be specified in the page with a variety of columns, controls and icons etc. but this value will decide which of them are used as appropriate to render the list in a specific style. Additional renders can be supplied that implement the IRichListRenderer interface. TODO: allow these values to be configured rather than hardcoded.
pageSize - if set, this activates paging and sets the page size. Note that a paging control must still be added to the footer area of the RichList tag for paging controls to be visible.
value - bound to a list of bean objects to supply the column values e.g. value='#{bean.myList}' See Column control below for more info.
var - name of a variable to be made available for binding purposes on each row. E.g. if var='r' then components within the list can bind to row and column values thus: value='#{r.field}'
initialSortColumn - optionally sort the specified column by default
initialSortDescending - optionally sort the specified initial column descending if true or ascending if false
Example
<a:richList viewMode='details' pageSize='5' styleClass='datatable' style='border:thin'
rowStyleClass='recordSetRow' altRowStyleClass='recordSetRowAlt' width='100%'
value='#{TestList.rows}' var='r' initialSortColumn='name' initialSortDescending='true'>
<a:column primary='true' width='200'>
<f:facet name='header'>
<a:sortLink label='Name' value='name' mode='case-insensitive' styleClass='header'/>
</f:facet>
<f:facet name='large-icon'>
<h:graphicImage tooltip='#{r.name}' width='38' height='38' url='/icons/folder_large.png' />
</f:facet>
<a:actionLink value='#{r.name}' actionListener='#{TestList.clickNameLink}'>
<f:param name='name' value='#{r.name}' />
</a:actionLink>
</a:column>
<a:column>
<f:facet name='header'>
<a:sortLink label='Created Date' value='created' styleClass='header'/>
</f:facet>
<h:outputText value='#{r.created}'>
<f:convertDateTime dateStyle='short' />
</h:outputText>
</a:column>
<a:dataPager/>
</a:richList>
Note that the tag layout might seem quite complex at first but it is simply a well formed hiearchy of other JSF components, once each component (in particular column) is understood it is quick and easy to create lists of various types and display styles.
Screenshots
Details view example, including sorting and paging controls, clickable action links, value formatting and alternate row styles.
RichList_details.gif
Icons view example, including large icons and clickable action links.
RichList_icons.gif
List view example, including small icons and clickable action links.
RichList_list.gif
Note that all the screenshots above are from the same list definition with the viewMode attribute modified for each definition. The same definition can be used for each and the viewMode changed programatically to change the renderer at runtime.
