Yahoo! UI Library: TreeViewの基本（その２）

Ajax Javascript YUI Tree

先の例では、HTMLのbody内にかかれたリストから、TreeViewを構成したが、これと同じことが、JSON形式で書かれたものでできる。

以下が、YUI TreeViewのトップページに書かれている例だが、はなはだしく見にくい。
こんなに括弧がならんでいるのをみると、大学時代にやらされたLISPを思い出してしまう。
そういえば、PHPのPEARにあるHTML_MENUもこういった形式からメニュー（TreeView）を生成する。

[ 
       	{type:"text", label:"List 0", children: [
               	 {type:"text", label:"List 0-0", children: [
               	               "item 0-0-0",
               	               "item 0-0-1"
               	  ]},
               	  {type:"text", label:"item 0-1", children: [
               	       {type:"text", label:"Google", href:"http://www.google.jp", 
                  	       target:"_new", title:"google", children: [
               	                          "item 0-1-0",
               	                          "item 0-1-1"
               	        ]}
               	  ]}
       ]}
]

YUIのページには、先の例と同じ結果が得られると書かれているのだが、括弧をあわせていて、違うTreeができるのに気がついた。

以下が、上の形式から作成されるTree（閉じた状態）である。

これを展開したのが以下の図である。

以下に、Javascriptを含むHTML全文を示す。
違う、Treeではあるが、同じ手続きでTreeViewをrenderingできることがわかる（TreeViewのインスタンス生成時の第２引数に、このJSONデータを指定する部分が違うだけである）。
また、この例では、

    tree.subscribe("expand", function(node) {
    　　alert("[index: "+node.index + ", label: " + node.label + 
	　　　"] was expanded");
    });

の部分で、treeの各ノードのexapndイベントで、ノードの連番（index）とラベル（label）をalert表示するようにしてある。
これらのノードプロパティーは、TreeView生成時に自動的にnodeオブジェクトに生成される。
expandイベントは、ノードの展開時、テキスト（それが、末端（つまりleaf）であっても）クリック時に発火する。

<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">
//alert("init");
//モジュールパターンで実装する。
YAHOO.namespace("EGP");

YAHOO.EGP.BasicTree = function() {
	var tree;
	// Tree NOdeをオブジェクトリテラルの階層で表現
	var treeNodes= [ 
        	{type:"text", label:"List 0", children: [
                	 {type:"text", label:"List 0-0", children: [
                	               "item 0-0-0",
                	               "item 0-0-1"
                	  ]},
                	  {type:"text", label:"item 0-1", children: [
                	       {type:"text", label:"Google", href:"http://www.google.jp", 
                    	       target:"_new", title:"google", children: [
                	                          "item 0-1-0",
                	                          "item 0-1-1"
                	        ]}
                	  ]}
            ]}
        ];
    
    var buildTextNodeTree = function() {
	
    //treeのインスタンス化
    tree = new YAHOO.widget.TreeView("treeDiv1",treeNodes);
    tree.subscribe("expand", function(node) {
    　　alert("[index: "+node.index + ", label: " + node.label + 
	　　　"] was expanded");
    });

	//treeの描画
        tree.draw();
    };
	
    return{
    	init: function() {
	    	//alert("start");
        	buildTextNodeTree();
    	}
    };
    
}();

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

<!-- class=" yui-skin-sam"の指定が必要 -->
<BODY class=" yui-skin-sam">
<div id="container">
<p>
階層化されたオブジェクト定義から生成されるTreeです。
</p>
<div id="treeDiv1">
</div>
</div>
</BODY>
</HTML>