switchFacet - Switch

Displays alternate panels depending on key values.

Category

Extension Library

Syntax

<xe:switchFacet attributes>content</xe:switchFacet>
Table 1. Essential properties
Property Description
id Defaults to switchFacet1, switchFacet2, and so on.
selectedFacet Specifies the key of the display panel.
defaultFacet Specifies the key of the display panel if no display panel matches selectedFacet.
Table 2. All properties
Category Properties
basics binding, defaultFacet,id, loaded, rendered, rendererType, selectedFacet
styling disableTheme, themeId

Usage

Define each alternative display as a panel that is content to the Switch control. Specify the key property for each panel. Use the selectedFacet and defaultFacet properties of the Switch control to determine which panel to display.

Examples

This tooltip dialog contains text that is displayed for a button when the button activates the dialog. The tooltip dialog displays alert boxes for the show and hide events.
What do you want to buy?>
<xp:comboBox id="comboBox1">
	<xp:selectItem itemLabel="Select an item..." itemValue=""></xp:selectItem>
	<xp:selectItem itemLabel="A Car" itemValue="car"></xp:selectItem>
	<xp:selectItem itemLabel="A Motorbike" itemValue="moto"></xp:selectItem>
	<xp:selectItem itemLabel="A Moped" itemValue="moped"></xp:selectItem>
	<xp:selectItem itemLabel="I don't know!" itemValue="dunno"></xp:selectItem>
	<xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="panel1">	</xp:eventHandler>
</xp:comboBox><xp:br></xp:br>
<xp:panel id="panel1">
	<xe:switchFacet id="switchFacet1" defaultFacet="else">
		<xe:this.selectedFacet>
			<![CDATA[#{javascript:return getComponent("comboBox1").getValue()}]]>
		</xe:this.selectedFacet>
		<xp:this.facets>
			<xp:panel xp:key="car">What about a Ford?></xp:panel>
			<xp:panel xp:key="moto">Hum, a nice <u>Harley</u> or a Japanese sports one?></xp:panel>
			<xp:panel xp:key="moped">Do you prefer <u>Peugeot</u> or <u>Piaggio</u>?</xp:panel>
			<xp:panel xp:key="else">
				<xp:label id="label1">
					<xp:this.value>
						<![CDATA[#{javascript:var v = getComponent("comboBox1").getValue();
if(v) {
	return "Please select another option"
} else {
	return ""
}}]]>
					</xp:this.value>
				</xp:label>
			</xp:panel>
		</xp:this.facets>
	</xe:switchFacet>
</xp:panel>