ImagePicker

cancel
Showing results for 
Search instead for 
Did you mean: 

ImagePicker

Intermediate
0 0 379

Obsolete Pages{{Obsolete}}

The official documentation is at: http://docs.alfresco.com



JSF Component
Back to Component Library


ImagePicker


General Description


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


Tag Details


<string>'
rendered='<boolean>'
styleClass='<string>'
style='<string>'
spacing='<int>'
columns='<int>'
value='<string>'
onclick='<string>'
/>

For details of the listItem tag see ModeList.


Custom tag attributes


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.


Example


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>

Screenshots


The screenshot below shows the image picker component in use in the new space wizard.

Imagepicker.gif