ImagePicker

[resplin]

Obsolete Pages{{Obsolete}}

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

JSF Component
Back to Component Library

Table of Contents

• 1 ImagePicker
  
  
  
  • 1.1 General Description
  
  
  • 1.2 Tag Details
  
  
  • 1.3 Custom tag attributes
  
  
  • 1.4 Example
  
  
  • 1.5 Screenshots
  
  

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