dropDownButton - DropDown Button

Defines nodes that organize content as a dropdown button.

Category

Extension Library

Syntax

<xe:dropDownButton attributes>content</xe:dropDownButton>
Table 1. Essential properties
Property Description
id Defaults to dropDownButton1, dropDownButton2, and so on.
treeNodes Specifies nodes for the dropdown button
onItemClick Use this event to get the value that the user selects with context.getSubmittedValue().
Table 2. All properties
Category Properties
basics binding, id, loaded, rendered, rendererType, treeNodes
events onItemClick
styling disableTheme, style, styleClass, themeId

Usage

This control is not tested against the latest accessibility standards. The recommended accessible path is the Combo Box control.

Examples

This dropdown menu control has three container nodes, each of which has three leaf nodes. Each container node represents one button; each leaf node represents a choice on the button dropdown menu. Clicking a leaf node displays its submitted value in a computed field.
<xp:label value="Submitted value: " id="label1"></xp:label>
<xp:text escape="true" id="computedField1"
	value="#{requestScope.svalue}" style="font-weight:bold">
</xp:text>
<xp:panel
	style="height:118.0px;width:349.0px;border-style:ridge;border-width:thin;border-color:rgb(0,128,255)">
	<xe:dropDownButton id="dropDownButton1">
		<xe:this.treeNodes>
			<xe:basicContainerNode label="Button one">
				<xe:this.children>
					<xe:basicLeafNode
						submitValue="Button one, choice one" label="Choice one">
					</xe:basicLeafNode>
					<xe:basicLeafNode
						submitValue="Button one, choice two" label="Choice two">
					</xe:basicLeafNode>
					<xe:basicLeafNode
						submitValue="Button one, choice three" label="Choice three">
					</xe:basicLeafNode>
				</xe:this.children>
			</xe:basicContainerNode>
			<xe:basicContainerNode label="Button two">
				<xe:this.children>
					<xe:basicLeafNode
						submitValue="Button two, choice one" label="Choice one">
					</xe:basicLeafNode>
					<xe:basicLeafNode
						submitValue="Button two, choice two" label="Choice two">
					</xe:basicLeafNode>
					<xe:basicLeafNode
						submitValue="Button two, choice three" label="Choice three">
					</xe:basicLeafNode>
				</xe:this.children>
			</xe:basicContainerNode>
			<xe:basicContainerNode label="Button three">
				<xe:this.children>
					<xe:basicLeafNode
						submitValue="Button three, choice one" label="Choice one">
					</xe:basicLeafNode>
					<xe:basicLeafNode
						submitValue="Button three, choice two" label="Choice two">
					</xe:basicLeafNode>
					<xe:basicLeafNode
						submitValue="Button three, choice three" label="Choice three">
					</xe:basicLeafNode>
				</xe:this.children>
			</xe:basicContainerNode>
		</xe:this.treeNodes>
		<xp:eventHandler event="onItemClick" submit="true"
			refreshMode="partial" refreshId="computedField1">
			<xe:this.action>
				<![CDATA[#{javascript:requestScope.svalue = context.getSubmittedValue()}]]>
			</xe:this.action>
		</xp:eventHandler>
	</xe:dropDownButton>
</xp:panel>