intra-mart 標準 タグライブラリ
タグ tree


階層化データをツリー形式でブラウザ上に表示します。

このツリー表示APIでは、以下の3種類のツリー表示部品を提供します。


フォルダー開閉式(初期表示は全閉)
フォルダー開閉式(初期表示は全開)
フォルダー開閉動作無し

属性 clickHome に対しては、ホーム名をクリックした時に実行したいJavaScript関数を指定してください。 無指定の時は、ホーム名のアンカータグがなくなります。
属性 clickFolder に対しては、フォルダ名をクリックした時に実行したいJavaScript関数を指定してください。 フォルダ名クリック時に引数を伴って実行されます。無指定の時は、フォルダ名のアンカータグがなくなります。
属性 clickItem に対しては、ページ名をクリックした時に実行したいJavaScript関数を指定してください。 ページ名クリック時に引数を伴って実行されます。無指定の時は、ページ名のアンカータグがなくなります。
属性 list には、 jp.co.intra_mart.foundation.page.TreeNodeProviderインターフェースを実装したクラスのインスタンスを指定してください。
属性 list に指定されてインスタンスが、ツリーの原点となる「ホーム」となります。 「ホーム」が持つ子ノードが、ツリーの「フォルダ」、「ページ」となりツリー表示が行われます。
属性 highlight に対しては、選択項目のハイライトカラーを指定してください。無指定の場合はデフォルト色の自動選択となります。(フォルダ開閉式ツリーのみ有効)

属性 type に対しては、ツリーの種類を指定してください。指定できるツリーの種類は下記の通りです。
無指定の時は、フォルダー開閉式(初期表示は全閉)が自動選択になります。
下記に存在しない type が指定されたときは例外が出力されます。
@DYNAMIC_TREE_OPEN_VIEWフォルダー開閉式(初期表示は全開)
@DYNAMIC_TREE_CLOSE_VIEWフォルダー開閉式(初期表示は全閉)
@STATIC_TREE_VIEWフォルダー開閉動作無し

制約
属性 rootName に対しては「ホーム」の表示名称を指定してください。無指定の時は、「ホーム」の表示名称がなくなります。
属性 rootNote に対しては「ホーム」の説明文を指定してください。ポップアップ文字列として表示されます。無指定の時は、「ホーム」のポップアップ文字列がなくなります。

ツリーの各クリックイベントに対応した Client Side の JavaScript 関数は、必ずツリー呼び出しステートメントよりもファイルの上部に定義(記述)してください。


ツリー開閉式ツリー表示ユニットでは、Dynamic-HTML およびスタイルシート(CSS)技術を利用しています。
ツリー表示ユニットを呼び出しているプレゼンテーションページでは、これらの技術を無闇に利用すると二重定義などが発生しツリーのイベントが正常に動作しなくなることがあります。


ツリー表示ユニットで利用している Dynamic-HTML(ツリー開閉式のみ) および CSS (ツリー開閉式のみ) の定義名や Client Side JavaScript 関数(ページ内グローバル)および変数(ページ内グローバル) の名称には tree_ というプレフィックスがついています。
ツリー表示ユニットを呼び出しているプレゼンテーションページでは、Client Side JavaScript の各関数(ページ内グローバル)および各変数(ページ内グローバル)の名称などには、tree_ で開始される名称定義をしないでください。


ツリー表示ユニットでは、Dynamic-HTML(ツリー開閉式のみ) および Client Side JavaScript 技術を利用しています。
これら技術に対応していないブラウザでの利用はしないでください。


開閉式ツリー表示では、Dynamic-HTML 技術を利用して各項目の表示位置を自動的に計算して表示をしています。
ツリー表示呼び出しステートメントを記述してある位置を基準に表示位置を計算しているので、ツリー表示ステートメントはページの最下部に記述するようにしてください。

サンプル:
<%@ page contentType="text/html;charset=Shift_JIS" %>
<%@ page import="jp.co.intra_mart.foundation.page.*" %>
<%@ taglib prefix="imart"
uri="http://www.intra-mart.co.jp/taglib/core/standard" %>
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function onClickHomeFunction(){
window.alert("click home !");
}
function onClickFolderFunction(arg){
window.alert("click folder: " + arg);
}
function onClickPageFunction(arg){
window.alert("click page: " + arg);
}
</SCRIPT>
<TITLE>Sample JSP</TITLE>
</HEAD>
<BODY>

<%
//「ホーム」を作成する
TreeRoot home = new TreeRoot();

//「フォルダ」を作成する
TreeBranch branch1 = new TreeBranch();
//「フォルダ」の表示名を設定する
branch1.setName("フォルダ1");
//「フォルダ」の説明を設定する
branch1.setNote("フォルダ1です");
//「フォルダ」のJavaScriptに渡される引数を設定する
branch1.setArgument("フォルダ1");

TreeBranch branch2 = new TreeBranch();
branch2.setName("フォルダ2");
branch2.setNote("フォルダ2です");
branch2.setArgument("フォルダ2");

//「ページ」を作成する
TreeLeaf leaf1 = new TreeLeaf();
//「ページ」の表示名を設定する
leaf1.setName("ページ1");
//「ページ」の説明を設定する
leaf1.setNote("ページ1です");
//「ページ」のJavaScriptに渡される引数を設定する
leaf1.setArgument("ページ1");

TreeLeaf leaf2 = new TreeLeaf();
leaf2.setName("ページ2");
leaf2.setNote("ページ2です");
leaf2.setArgument("ページ2");

//「ホーム」に「フォルダ」を登録する
home.addChildNode(branch1);
home.addChildNode(branch2);
//「フォルダ」に「ページ」を登録する
branch1.addChildNode(leaf1);
branch1.addChildNode(leaf2);
%>
<!--list属性に home を渡してツリーを表示させる -->
<imart:tree clickHome="onClickHomeFunction"
clickFolder="onClickFolderFunction"
clickItem="onClickPageFunction"
list="<%=home%>"
type="@DYNAMIC_TREE_OPEN_VIEW"
rootName="ホーム"
rootNote="ホームです"/>

</BODY>
</HTML>
プログラムを実行すると画面には下のような実行結果が表示されます。文字指定は「Shift-JIS」で行っています。
「ホーム」のインスタンスを jp.co.intra_mart.foundation.page.TreeRootクラスから作成していますが、このクラスは jp.co.intra_mart.foundation.page.TreeNodeProviderインターフェースの実装クラスです。
「フォルダ」のインスタンスは jp.co.intra_mart.foundation.page.TreeBranchクラスから、「ページ」のインスタンスは jp.co.intra_mart.foundation.page.TreeLeaf クラスからそれぞれ作成されています。

タグ情報
表示名なし
ボディ コンテンツempty

属性一覧
名称必須実行時評価説明
clickHomefalsetruejava.lang.String ホーム名をクリックした時に実行するJavaScript関数名
clickFolderfalsetruejava.lang.String フォルダ名をクリックした時に実行するJavaScript関数名
clickItemfalsetruejava.lang.String ページ名をクリックした時に実行するJavaScript関数名
listtruetruejava.lang.String ツリービュー表示の「ホーム」
(jp.co.intra_mart.foundation.page.TreeNodeProvider)
highlightfalsetruejava.lang.String 選択状態のハイライトカラー
typefalsetruejava.lang.String ツリービュー表示の種類
rootNamefalsetruejava.lang.String ホームの名称
rootNotefalsetruejava.lang.String ホームに関する説明