概要

XPages Extension Library「Accordion」の利用方法について記述する。

 

「Accordion」とは

「Accordion」を使うと、アコーディオンメニューと呼ばれる、コンテンツ内を開閉するメニューを実装することが出来る。

 

「Dojo Accordion Container」及び「Dojo Accordion Pane」との違い

「Accordion」と同様に、Extension LibraryのDojo Layoutには、「Dojo Accordion Container」と「Dojo Accordion Pane」というコントロールが存在する。

それぞれの違いは下記の通り。

コントロール名	違い
Dojo Accordion Container	アコーディオンメニューの本体。単体で動作する事は出来ない。コンテンツはDojo Accordion Paneを使って設定する。
Dojo Accordion Pane	アコーディオンメニューのコンテンツ部分。単体で動作する事は出来ない。これに他のコントロールを埋め込むことで、多彩なアコーディオンメニューを実現出来る。
Accordion	単体でアコーディオンメニューが実現できる。 アコーディオンメニューのコンテンツは決められたものしか設定できない。

 

実現方法

1.「Accordion」の配置

コントロールビューの[Extension Library]にある「Accordion」をドラッグ＆ドロップする。

後述するAccordionのプロパティ一覧に従って、プロパティを設定する。

 

2.「treeNode」の設定

アコーディオンメニューのコンテンツとなるtreeNodeを設定する（通常は、basicContainerを設定するのが簡単でよい）。

Accordionコントロールのプロパティビューで、「すべてのプロパティ」タブを表示する。

treeNodesの箇所にある[+]をクリックして、子ノードを選択する。

後述する各treeNodeのプロパティ一覧に従って、プロパティを設定する（treeNodeは、表示させたいコンテンツの数だけ追加する必要がある）。

この子ノードは、アコーディオンメニューのタイトル部分を表すもので、コンテンツ自体ではない。

コンテンツを設定するには、treeNodeのプロパティにあるchildrenプロパティにtreeNodeを設定する必要がある（treeNodeの種類によっては、このchildrenプロパティが存在しないものもある）。

XPageを保存する。

ブラウザで動作確認をする。

 

Accordionのプロパティ一覧

カテゴリ	プロパティ	説明
イベント	onItemClick
スタイル	disableTheme
	style	Accordionのスタイル
	styleClass	Accordionのスタイルを設定したCSSクラス
	themeId
基本	binding
	id	コントロール識別用のID
	loaded
	rendered
	rendereType
	treeNodes	アコーディオンメニューとして表示するコンテンツを設定する。設定できるコンテンツは、basicContainerNode、basicLeafNode、beanTreeNode、dominoViewEntriesTreeNode、dominoViewListTreeNode、loginTreeNode、pageTreeNode、repeatTreeNode、separatorTreeNode、userTreeNodeの10種類が存在する。 各コンテンツの詳細は、後述する。

 

treeNodesに設定できる子Nodeのプロパティ一覧

basicContainerNode

カテゴリ	プロパティ	説明
	children	アコーディオンメニューとして表示するコンテンツを設定する。設定できるコンテンツは、basicContainerNode、 basicLeafNode、beanTreeNode、dominoViewEntriesTreeNode、 dominoViewListTreeNode、loginTreeNode、pageTreeNode、repeatTreeNode、 separatorTreeNode、userTreeNodeの10種類が存在する。
	enabled	コンテンツの有効/無効を決める。falseにした場合、コンテンツのhrefが無効となり、クリックできなくなる。childrenとして設定した場合に有効になる。
	href	コンテンツをクリックした際の移動先のURLを設定する。childrenとして設定した場合に有効になる。
	image	コンテンツの左側にイメージを指定したイメージを配置できる。childrenとして設定した場合に有効になる。
	imageAlt	イメージ（imageに設定したもの）が表示できなかった場合に表示する文字列を設定できる。childrenとして設定した場合に有効になる。
	imageHeight	イメージの高さを設定できる。childrenとして設定した場合に有効になる。
	imageWidth	イメージの幅を設定できる。childrenとして設定した場合に有効になる。
	label	アコーディオンメニューのタイトル、もしくはコンテンツのラベルを設定する。
	loaded
	onClick	コンテンツをクリックしたときのイベントをクライアントサイドのJavaScriptとして記述する。
	rendered
	role
	selected	ページが開いた時にメニューが開いた状態にするかどうかを選択できる。trueにするとメニューが開いた状態になる。複数のメニューでtrueを設定すると、trueになっている一番上のメニューが有効になる。
	submitValue
	transparent
スタイル	style
	styleClass

basicLeafNode

カテゴリ	プロパティ	説明
	enabled	コンテンツの有効/無効を決める。falseにした場合、コンテンツのhrefが無効となり、クリックできなくなる。childrenとして設定した場合に有効になる。
	href	コンテンツをクリックした際の移動先のURLを設定する。childrenとして設定した場合に有効になる。
	image	コンテンツの左側にイメージを指定したイメージを配置できる。childrenとして設定した場合に有効になる。
	imageAlt	イメージ（imageに設定したもの）が表示できなかった場合に表示する文字列を設定できる。childrenとして設定した場合に有効になる。
	imageHeight	イメージの高さを設定できる。childrenとして設定した場合に有効になる。
	imageWidth	イメージの幅を設定できる。childrenとして設定した場合に有効になる。
	label	アコーディオンメニューのタイトル、もしくはコンテンツのラベルを設定する。
	loaded
	onClick	コンテンツをクリックしたときのイベントをクライアントサイドのJavaScriptとして記述する。
	rendered
	role
	selected	ページが開いた時にメニューが開いた状態にするかどうかを選択できる。trueにするとメニューが開いた状態になる。複数のメニューでtrueを設定すると、trueになっている一番上のメニューが有効になる。
	style
	styleClass
	submitValue
	title

beanTreeNode

カテゴリ	プロパティ	説明
	loaded
	nodeBean

dominoViewEntriesTreeNode

 

dominoViewListTreeNode

 

loginTreeNode

 

pageTreeNode

 

repeatTreeNode

 

separatorTreeNode

 

userTreeNode

 

 

調査環境

Lotus Domino Designer 8.5.3 Upgrade Pack1
Internet Explorer 8
Mozilla Firefox 15.0.1