TreeView Control: Default TreeView - tetsuya

YAHOO! User Interface(YUI)に掲載されているExampleから随分と逸脱してしまったので、そろそろそちらに戻ろうと思う。

一番最初のExampleは「Default TreeView」という名前の例である。

YUIのTreeViewは、treeview.js（実際に利用するのはcompressされたtreeview-min.js）だけではなく、CSSやIcon類で構成されている。
デフォルトでlinkしておかなくてはならないのが、treeviewディレクトリのassets/skins/sam下にあるtreeview.css。
ここでいう、Default TreeViewという意味は、この「デフォルトのモジュールで簡単に作成したTreeView」ということであると思われる。

ここまでの「TreeViewの基本」シリーズの例と異なるのは、Treeにノードを追加していくと言う点。
Exampleのトップページを読むと、ノードにはText Node（YAHOO.widget.TextNode）、Menu Node（YAHOO.widget.MenuNode）、HTML Node（YAHOO.widget.HTMLNode）、Date Node（YAHOO.widget.DateNode）の４種類がある。

このExampleで使われているのは、TextNodeである。（TextNodeのAPIドキュメントはこちら）
これをTreeに追加するには、drawする前に、追加したい親ノードを指定して、インスタンス化しさえすればよい。
（追加ができるのだから、削除もできる。treeに対するこういった操作については、TreeVieeのトップページのRemoving Nodesのセクションを参照）

また、この例では、各ノードで（自動的に）定義されるexpand、collapse、labelClickというイベントにハンドラを仕掛けている。各イベントは

expand	展開時、もしくはラベルクリック時に発火する
collapse	Tree、Branchを閉じる際に発火する
labelClick	ラベルをクリックした際に発火する

というものである。
テキストノードでは、インスタンス作成時に、index、labelといったプロパティが作成されるので、下の例では、これをalert()で表示するようにした（サンプルを動かしてみるとOKボタンがやけにうるさい）。

サンプルの初期画面は以下。

これを展開すると、仕掛けたハンドラがうるさく発動する。（下）
イベントの発火タイミングを知るのもサンプリングの目的なので仕方がない。

以下に、Javascriptを含むHTML全文を示す。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>Ajax_Sampling</TITLE>
<style type="text/css">
body {
	margin:0;
	padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="scripts/yui/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="scripts/yui/treeview/assets/skins/sam/treeview.css" />

<style type="text/css" id="defaultstyle">
#container {
	margin: 2px;
	padding: 3px;
	width: 300px;
	height: auto;
	border:1px dashed #999999;
}
#treeDiv1 {
	background: #fff; 
	padding:1em;
}
</style>

<!-- 読み込むjs --> 
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js" ></script> 
<script type="text/javascript" src="scripts/yui/treeview/treeview-min.js" ></script>

<script type="text/javascript">
//モジュールパターンで実装する。
YAHOO.namespace("EGP");

YAHOO.EGP.DefaultTree = function() {
	var tree;

    var buildRandomTextNodeTree = function() {
	
	//treeのインスタンス化
        tree = new YAHOO.widget.TreeView("treeDiv1");

	// Math.floor((Math.random()*4) + 3)
	// [0,1]の乱数×4+3=[0,3.9999]+3=[3,6.9999]
	// [3,6.99999]の切捨て=[3,6]の整数
	// 1から7子の子ノードをrootに追加する。
        for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
            // 子ノードの追加
            // TextNodeの第3引数はAPI Doc上、deprecatedになっているが、
            // この例では指定されている。
            var tmpNode = 
                new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
			// tempNodeに10個の子要素をつける。
            buildLargeBranch(tmpNode);
        }

	// expandイベントは、テキストノードクリック時、ノード展開時に発火する。
	tree.subscribe("expand", function(node) {
       		alert("[index: "+node.index + ", label: " + node.label + 
       	       		"] was expanded");
       });

	// collapseイベントは、ノードを閉じた時に発火する。
       tree.subscribe("collapse", function(node) {
       		alert("[index: "+node.index + ", label: " + node.label + 
                   	"] was collapsed");
       });

	// expandイベントは、テキストノードクリック時に発火する。
       tree.subscribe("labelClick", function(node) {
       		alert("[index: "+node.index + ", label: " + node.label + 
                      "] label was clicked");
       });

        tree.draw();
    };

　　// 引数のノードに10個の子ノードをつける。
    var buildLargeBranch = function (node) {
        if (node.depth < 10) {
            for ( var i = 0; i < 10; i++ ) {
                // TextNodeの第3引数はAPI Doc上、deprecatedになっているが、
                // この例では指定されている。
                new YAHOO.widget.TextNode(node.label + 
                        				"-" + i, node, false);
            }
        }
    };
	
	return{
		//function to initialize the tree:
    	init: function() {
	    	//alert("start");
        	buildRandomTextNodeTree();
    	}
	};
    
}();

//DOMが完全にloadされたら、サンプルを初期化する。
YAHOO.util.Event.onDOMReady(
		 //DomReadyイベントで発火するハンドラ
		YAHOO.EGP.DefaultTree.init,
		//ハンドラに渡すオブジェクト（関数）
		YAHOO.EGP.DefaultTree,
		//ハンドラは、上記のオブジェクトのスコープをもつ。   
		true
);
</script>
</HEAD>

<!-- class=" yui-skin-sam"の指定が必要 -->
<BODY class=" yui-skin-sam">
<div id="container">
<p>
2階層のtreeviewです。親ノードは、乱数で3から7個生成しています。<br/>
ラベルをクリックすると、viewが開閉し、そのイベントでalertがでます。
</p>
	<div id="treeDiv1"></div>
</div>
</BODY>
</HTML>