機能概要
階層化データをツリー形式でブラウザ上に表示します。
このツリー表示APIでは、以下の3種類のツリー表示部品を提供します。
- フォルダー開閉式(初期表示は全閉)
- フォルダー開閉式(初期表示は全開)
- フォルダー開閉動作無し
|
API仕様
この機能は、プレゼンテーションページから利用します。
<IMART type="include"> APIを利用して、プログラムパスを呼び出して表示します。
呼び出すプログラムパスは以下の中から任意に選択できます。
@TREE_VIEW |
標準 |
@DYNAMIC_TREE_OPEN_VIEW |
フォルダー開閉式(初期表示は全開) |
@DYNAMIC_TREE_CLOSE_VIEW |
フォルダー開閉式(初期表示は全閉) |
@STATIC_TREE_VIEW |
フォルダー開閉動作無し |
※) |
標準インストールにおいては、『標準』はデフォルト動作として『フォルダー開閉式(初期表示は全閉)』が選択されています。
|
タグに指定する属性引数には、以下の種類があります。
list |
(必須) |
表示するツリー構造データ |
home_name |
(必須) |
ホームの表示名 |
home_detail |
(必須) |
ホームの説明文 (ポップアップ文字列の表示内容) |
click_home |
(任意) |
ホームイベント時実行関数名 ホームクリック時に実行されます 無指定時はイベント発生なし |
click_folder |
(任意) |
フォルダイベント時実行関数名 フォルダクリック時に引数を伴って実行されます 無指定時はイベント発生時にフォルダの開閉動作 |
click_item |
(任意) |
アイテムイベント時実行関数名 アイテムクリック時に引数を伴って実行されます 無指定時はイベント発生時の処理はなし |
highlight |
(任意) |
選択項目のハイライトカラー 無指定時はデフォルト色を自動選択 (フォルダー開閉式ツリーのみ有効) |
ホーム、フォルダーおよびアイテムのイベントとは、該当項目をマウスでクリックする行為をいいます。
マウスクリックイベントに対する各種開閉動作および選択項目のハイライトに関しては、フォルダー開閉式のツリー表示時が対象となり、フォルダー開閉動作無しのツリー表示時には、イベント処理は行われません。
属性 list にしていするツリーデータは、下記のような構造を持つデータオブジェクト配列を指定します。
list[0] ┬ name // この項目の表示名称
・ ├ detail // この項目の説明
・ ├ argument // この項目がクリックされた時の引数
・ └ next[0] // この項目の下階層項目群
・ ├ name
・ ├ detail
・ ├ argument
・ └ next[0] ・・・
[n] ┬ name
├ detail
├ argument
└ next[0]
|
|
name |
[String] |
項目の表示名称
|
detail |
[String] |
マウスポイント時に表示されるポップアップ文字列
|
argument |
[String] |
マウスクリックイベント発生時に実行される任意の Client Side JavaScript 関数に渡される引数文字列
|
next |
[Array] |
下層のオブジェクト配列。
このプロパティ値を null にした場合アイテムとして扱われます。
また、このプロパティに Array 型のデータを値として与えることで、フォルダとして扱われます(要素を1つも持たない空の配列を値として与えた場合、下層情報を持たないフォルダとして扱われます)。
|
※)配列データを作成する場合、要素番号は 0 から始まる連続したデータとして作成するようにして下さい。
表示アイコン解説
|
・・・ |
ホーム
|
|
・・・ |
フォルダ (閉)
|
|
・・・ |
フォルダ (開)
|
|
・・・ |
アイテム
|
|
・・・ |
全表示
|
|
用語および操作解説
|
ホーム |
( )
|
: |
マウスでホームアイコン() をクリックすると、開かれていたメニュー項目がすべて閉じられます。
ホーム名称をクリックした場合、click_home 属性で指定してある Client Side の JavaScript 関数が実行されます(属性指定を省略した場合には、関数実行は行われません)。
|
|
フォルダ |
( )
|
: |
メニュー項目グループの参照とメニューの開閉を行います。
マウスでフォルダアイコン( または or または or ) をクリックすると、メニュー画面上でフォルダ内の各項目が開閉されます(ツリー開閉式を利用していた場合)。
フォルダ名称をクリックした場合、click_folder 属性で指定してある Client Side の JavaScript 関数が実行されます(属性指定を省略した場合には、関数実行は行われません)。
|
|
アイテム |
( )
|
: |
閲覧ページ、または作業ページを表示します。
ページアイコン()またはアイテム名称をクリックすると、click_item 属性で指定してある Client Side の JavaScript 関数が実行されます(属性指定を省略した場合には、関数実行は行われません)。
|
|
全表示 |
( )
|
: |
すべてのメニュー項目を開きます。
|
プログラミング時の制約事項
引数属性 list には、仕様に準拠したデータを渡して下さい。間違った構造を持つデータを指定した場合、ランタイムエラーが発生する可能性があります。
ツリーの各クリックイベントに対応した Client Side の JavaScript 関数は、必ずツリー呼び出しステートメントよりもファイルの上部に定義(記述)してください。
ツリー開閉式ツリー表示ユニットでは、Dynamic-HTML およびスタイルシート(CSS)技術を利用しています。
ツリー表示ユニットを呼び出しているプレゼンテーションページでは、これらの技術を無闇に利用すると二重定義などが発生しツリーのイベントが正常に動作しなくなることがあります。
ツリー表示ユニットで利用している Dynamic-HTML(ツリー開閉式のみ) および CSS (ツリー開閉式のみ) の定義名や Client Side JavaScript 関数(ページ内グローバル)および変数(ページ内グローバル) の名称には tree_ というプレフィックスがついています。
ツリー表示ユニットを呼び出しているプレゼンテーションページでは、Client Side JavaScript の各関数(ページ内グローバル)および各変数(ページ内グローバル)の名称などには、tree_ で開始される名称定義をしないでください。
ツリー表示ユニットでは、Dynamic-HTML(ツリー開閉式のみ) および Client Side JavaScript 技術を利用しています。
これら技術に対応していないブラウザでの利用はしないでください。
開閉式ツリー表示では、Dynamic-HTML 技術を利用して各項目の表示位置を自動的に計算して表示をしています。
ツリー表示呼び出しステートメントを記述してある位置を基準に表示位置を計算しているので、ツリー表示ステートメントはページの最下部に記述するようにしてください。
プログラム例
Presentation Page |
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function onClickHomeFunction(){
window.alert("click home !");
}
function onClickFolderFunction(arg){
window.alert("click folder: " + arg);
}
function onClickItemFunction(arg){
window.alert("click item: " + arg);
}
</SCRIPT>
</HEAD>
<BODY>
<IMART type="include"
page="@TREE_VIEW"
list=datas
click_home="onClickHomeFunction"
click_folder="onClickFolderFunction"
click_item="onClickItemFunction"
home_name="sample"
home_detail="top"
hightlight="blue">
</IMART>
</BODY>
</HTML>
|
Function Container |
var datas = new Array();
function init(request){
datas[0] = new Object();
datas[0].name = "No.1";
datas[0].detail = "item of No.1";
datas[0].argument = "no1";
datas[0].next = new Array();
datas[0][0] = new Object();
datas[0][0].name = "No.1-1";
datas[0][0].detail = "item of No.1-1";
datas[0][0].argument = "no1-1";
datas[0][0].next = null;
datas[1] = new Object();
datas[1].name = "No.2";
datas[1].detail = "item of No.2";
datas[1].argument = "no2";
datas[1].next = null;
}
|
注意事項
ツリー表示の各ホーム、フォルダおよびアイテムなどの画像ファイルは固定のものが使われます。任意に選択・変更することはできません。
開閉式ツリー表示のマウスイベント処理は、すべてブラウザ上の Client Side JavaScript で制御されていますので、ツリーの表示速度やイベント時の処理速度はクライアントマシンの処理能力に依存します。
ツリーの項目数が多い場合、ツリー表示画面のダウンロードに時間がかかったり、ブラウザ上に表示されるまでに時間がかかることがあります。
また、開閉式ツリー表示において表示項目数が多い時に、マウスクリックに対する反応が鈍くなることがあります。
制約事項
ツリー形式表示を行うためのツリーデータとして渡された情報は、そのまま画面作成に用いられる値として利用されます。
特にツリーデータ内の name プロパティに指定した値は表示系アプリケーション(ブラウザ)の実装に依存します。
また、ツリーデータ内の detail および argument プロパティに指定した値は、Client-Side JavaScript 中で利用されるデータとなりますので、扱える文字に制限がかかる場合があります(制限に関してはブラウザの実装に依存します)。
name データとして使えない文字の一例 |
<
>
&
"
|
argument および detail データとして使えない文字の一例 |
<
>
"
'
\
|
|