RichList

Document created by resplin Employee on Jun 6, 2015Last modified by alfresco-archivist on Aug 31, 2016
Version 4Show Document
  • View in full screen mode

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.

Outcomes