multiImage - Multi-image Output

Displays one icon from a collection depending on a selection value.

Category

Extension Library

Syntax

<xe:multiImage attributes>content</xe:multiImage>
Table 1. Essential properties
Property Description
id Defaults to multiImage1, multiImage2, and so on.
icons Specifies a collection where each element is of type xe:iconEntry. Specify selectedValue to give the icon a name for selection purposes. Specify url to identify the graphics file for the icon.
value Specifies the icon to display by matching a selectedValue property from the collection of icons.
ismap Specifies whether the icon is used as a server-side image map. The image must be inclosed in an element with an href attribute. Defaults to false.
longdesc Provides a URI with a detailed description of the image.
url Specifies the path to the image resource. This property is an alias for value.
usemap Specifies the name of a client-side image map.
Table 2. All properties
Category Properties
accessibility alt, role, title
basics attrs, binding, dir, icons, id, ismap, lang, loaded, longdesc, rendered, rendererType, url, usemap, value
events onBlur, onClick, onClose, onDblClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp
format height, width
styling disableTheme, style, styleClass, themeId

Usage

The value property can be the value of another control where the user makes a choice. Use getComponent('controlid').value to get that value.

Examples

This multi-image control displays one of three images depending on the selection made in a combo box.
<xe:multiImage id="multiImage1"
	value="#{javascript:return getComponent('djComboBox1').value}">
	<xe:this.icons>
		<xe:iconEntry url="/binary.gif" alt="binary"
			selectedValue="binary">
		</xe:iconEntry>
		<xe:iconEntry url="/folder.gif" alt="folder"
			selectedValue="folder">
		</xe:iconEntry>
		<xe:iconEntry url="/link.gif" alt="link"
			selectedValue="link">
		</xe:iconEntry>
	</xe:this.icons>
</xe:multiImage>
<xe:djComboBox id="djComboBox1" defaultValue="binary">
	<xp:selectItem itemLabel="binary"></xp:selectItem>
	<xp:selectItem itemLabel="folder"></xp:selectItem>
	<xp:selectItem itemLabel="link"></xp:selectItem>
	<xp:eventHandler event="onChange" submit="true"
		refreshMode="complete">
	</xp:eventHandler>
</xe:djComboBox>