tabBarButton - Tab Bar Button

Presents a banner upon which buttons can be placed.

Category

Mobile

Syntax

<xe:tabBarButton attributes>content</xe:tabBarButton>
Table 1. Essential properties
Property Description
id Defaults to tabBarButton1, tabBarButton2, and so on.
onClick Specifies the action when the button is clicked.
Table 2. All properties
Category Properties
accessibility title
basics binding, dir, icon1, icon2, iconPos1, iconPos2, id, label, lang, loaded, rendered, rendererType, selected, selectOne, transition
dojo dojoAttributes, dojoType, tooltip
events onClick
styling disableTheme, style, styleClass, themeId

Examples

This example demonstrates a tab bar with three buttons.
<xe:tabBar id="documentTabBar" barType="segmentedControl">
	<xe:tabBarButton id="tabBarButtonCancel" label="Cancel">
		<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="true" save="false">
			<xp:this.action>
				<xe:moveTo targetPage="viewPage" transitionType="slide" direction="Right to Left"></xe:moveTo>
			</xp:this.action>
		</xp:eventHandler>
	</xe:tabBarButton>
	<xe:tabBarButton id="tabBarButtonEdit" label="Edit" rendered="#{javascript:!document1.isEditable()}">
		<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
			<xp:this.action>
				<xp:changeDocumentMode mode="edit" var="document1"></xp:changeDocumentMode>
			</xp:this.action>
		</xp:eventHandler>
	</xe:tabBarButton>
	<xe:tabBarButton id="tabBarButtonSave" label="Save" rendered="#{javascript:document1.isEditable()}">
		<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
			<xp:this.action>
				<xe:moveTo forceFullRefresh="true" saveDocument="true"
					targetPage="viewPage" transitionType="slide" direction="Left to Right">
				</xe:moveTo>
			</xp:this.action>
		</xp:eventHandler>
	</xe:tabBarButton>
</xe:tabBar>