Obsolete Pages{{Obsolete}}
The official documentation is at: http://docs.alfresco.com
JSF Component
Back to Component Library
The image picker component displays a list of images, of which one can be selected via radio buttons. The list can be configured to display the images in any number of columns. Each item in the list is represented by the listItem tag defined by the ModeList component.
A spacing (between the elements in the list) can be configured as well as the inline style or CSS class for the list
<string>'
rendered='<boolean>'
styleClass='<string>'
style='<string>'
spacing='<int>'
columns='<int>'
value='<string>'
onclick='<string>'
/>
For details of the listItem tag see ModeList.
style - CSS style applied to the outer containing table element.
styleClass - CSS style class applied to the outer containing table element.
spacing - spacing in pixels between items.
columns - the number of columns to display in one row.
onclick - the JavaScript to run when an item in the list is selected.
value - the selected value. Should be set to a value of one of the child ModeListItem components.
An example of a 3 column list with textual labels
<a:imagePickerRadio columns='3' spacing='5' value='#{DummyBean.action}'>
<a:listItem value='checkin' image='/images/icons/CheckIn.gif' label='Checkin' />
<a:listItem value='checkout' image='/images/icons/CheckOut.gif' label='Checkout' />
<a:listItem value='new' image='/images/icons/large_newFile.gif' label='New File' />
</a:imagePickerRadio>
An example of a 1 column list without labels, but with tooltips
<a:imagePickerRadio columns='1' spacing='3' value='#{DummyBean.action}'>
<a:listItem value='checkin' image='/images/icons/CheckIn.gif' tooltip='Checkin' />
<a:listItem value='checkout' image='/images/icons/CheckOut.gif' tooltip='Checkout' />
<a:listItem value='new' image='/images/icons/large_newFile.gif' tooltip='New File' />
</a:imagePickerRadio>
The screenshot below shows the image picker component in use in the new space wizard.