2.2.3 ViewStack

Ajaxフレームワーク UI部品リファレンス

目次索引

第2章画面部品

> 2.2 コンテナ部品

2.2.3 ViewStack

ViewStackは、切替え対象の画面情報(コンテナ)をグループ化する部品です。画面の同じ位置で表示を切り替える場合に利用します。

記述形式
プロパティ
スタイルプロパティ
イベントリスナ
JavaScript API
補足事項

コンテナには、ViewContainerまたはFragmentContainerを利用できます。各画面の情報(HTMLコンテンツ)は、コンテナの子要素として記述します。

[図: 動作イメージ]

■記述形式

<div rcf:type="ViewStack" ... >
  <div rcf:type="ViewContainer">
    HTML要素
  </div>
  <div rcf:type="FragmentContainer" rcf:src="fragment.jsp">
  </div>
  ...
</div>

子要素は、1個以上記述してください。
子要素には、ViewContainerまたはFragmentContainerを記述します。
子要素にViewContainerおよびFragmentContainer以外のものを記述しても、表示することはできません。

■プロパティ

表の項目の意味は、“表の項目の意味”を参照してください。

名前	データ型	説明	省略	省略値	属性指定	更新	部分更新
selectedIndex	Number	選択されている画面のインデックスを指定します。インデックスは、ViewStack子要素として定義されているコンテナの出現順に、0から1ずつ増分で自動採番されます。存在しないインデックスを指定した場合は、すべてのコンテナが不可視(visibility:hidden; display:none)になります。	可	0	値、バインド	可	不可

部品共通のプロパティも指定できます。詳細は、“画面部品共通プロパティ”を参照してください。

■スタイルプロパティ

パーツ名	プレフィックス	クラス名	使用可能なスタイル
部品全体	なし	rcf-ViewStack	サイズカラーボーダーパディングオーバーフロー

詳細は、“スタイルプロパティ”を参照してください。

■イベントリスナ

名前	説明	イベントオブジェクト
onSelectedIndexChange	選択されている画面のインデックスが変更されたときに呼ばれます。	SelectedIndexChangeEvent

部品共通のイベントリスナもあります。詳細は、“画面部品共通イベントリスナ”を参照してください。

■JavaScript API

■selectNextメソッド

メソッド	selectNext()
戻り値	なし
例外	なし
説明	次の画面に切り替えます。最後の画面の場合は切り替わりません。

■selectPreviousメソッド

メソッド	selectPrevious()
戻り値	なし
例外	なし
説明	前の画面に切り替えます。最初の画面の場合は切り替わりません。

■setSelectedIndexメソッド

メソッド	setSelectedIndex(index)
引数	index [Number]	画面のインデックス
戻り値	なし
例外	なし
説明	指定された番号の画面に切り替えます。指定された番号の画面がない場合は、切り替わりません。

部品共通のJavaScript APIもあります。部品共通のJavaScript APIは、“画面部品共通JavaScript API”を参照してください。

■補足事項

ViewStack部品の内部に表示する内容(タイトル部含む)のサイズが、部品全体のサイズを超える場合、部品の描画が崩れる可能性があります。
表示する内容が収まるように、部品全体のサイズを設定してください。

目次索引