navigator - ナビゲータ

コンテンツを階層で編成するノードを組み込みます。

カテゴリ

拡張ライブラリ

構文

<xe:navigator attributes>content</xe:navigator>

表 1. 必須プロパティ
プロパティ	説明
id	デフォルトは `navigator1`、`navigator2` などです。
treeNodes	ナビゲータに使用するノードを指定します。
expandable	項目階層の省略表示と展開ができるかどうかを指定します。デフォルトは true です。
expandEffect	必要に応じて、省略表示と展開のワイプ効果を指定します。
expandLevel	展開のレベルを指定します。0 は最上位のノードです。
keepState	要求間で展開状態を維持するかどうかを指定します。
onItemClick	ユーザーが選択した値を `context.getSubmittedValue()` を使用して取得するには、このイベントを使用します。

表 2. すべてのプロパティ
カテゴリ	プロパティ
accessibility	ariaLabel
basics	binding、expandable、expandEffect、expandLevel、id、keepState、loaded、rendered、rendererType、treeNodes
events	onItemClick
styling	disableTheme、style、styleClass、themeId

例

以下のナビゲータコントロールには、0 レベルのノードが 3 つあり、それぞれに 1 レベルのノードが 3 つあります。リーフノードをクリックすると、送信されたリーフノードの値が計算結果フィールドに表示されます。

<xp:label value="Submitted value: " id="label1"></xp:label>
<xp:text escape="true" id="computedField1"
	value="#{requestScope.svalue}" style="font-weight:bold">
</xp:text>
<xe:navigator id="navigator1">
	<xe:this.treeNodes>
		<xe:basicContainerNode label="Container one">
			<xe:this.children>
				<xe:basicLeafNode
					submitValue="Container one, choice one" label="Choice one">
				</xe:basicLeafNode>
				<xe:basicLeafNode
					submitValue="Container one, choice two" label="Choice two">
				</xe:basicLeafNode>
				<xe:basicLeafNode
					submitValue="Container one, choice three" label="Choice three">
				</xe:basicLeafNode>
			</xe:this.children>
		</xe:basicContainerNode>
		<xe:basicContainerNode label="Container two">
			<xe:this.children>
				<xe:basicLeafNode
					submitValue="Container two, choice one" label="Choice one">
				</xe:basicLeafNode>
				<xe:basicLeafNode
					submitValue="Container two, choice two" label="Choice two">
				</xe:basicLeafNode>
				<xe:basicLeafNode
					submitValue="Container two, choice three" label="Choice three">
				</xe:basicLeafNode>
			</xe:this.children>
		</xe:basicContainerNode>
		<xe:basicContainerNode label="Container three">
			<xe:this.children>
				<xe:basicLeafNode
					submitValue="Container three, choice one" label="Choice one">
				</xe:basicLeafNode>
				<xe:basicLeafNode
					submitValue="Container three, choice two" label="Choice two">
				</xe:basicLeafNode>
				<xe:basicLeafNode
					submitValue="Container 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:navigator>