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

Ajax Javascript YUI Tree

2009/3/19 ; サンプルコードをFF3以外（Chrome1、Safari3）で動かすとエラーになるため、修正。

                                        • -

次は、「Yahoo! UI Library: TreeViewの基本（その１）」で使った以下のDOMをHTTPサーバーに配置し、Connection Managerを使ってXHR(XMLHttpRequest)で非同期に取得し、TreeViewを構築・表示してみる。

<ul>
	<li>List 0
		<ul>
			<li>List 0-0
				<ul>
					<li>item 0-0-0</li>
					<li>item 0-0-1</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>item 0-1
		<ul>
			<li><a target="_new" href="http://www.google.co.jp"
　　　　　　　　　　　　　　　　　　　　　　　　　 title="google">Google</a>
				<ul>
					<li>item 0-1-0</li>
					<li>item 0-1-1</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

このDOMファイルは、リモートサーバーではなく、「（下に示す）HTMLファイルをレスポンスするサーバー」のドキュメントディレクトリ配下に、data/ajax_menu1.txtとして配置した（エンコーディングはUTF-8）。

初期画面は以下である。

この画面中にある「Treeの取得」をクリックすると、ajax_menu1.txtを非同期に取得して、そのCallBack関数にてTreeViewを構成する。以下は取得直後の画面。TreeViewの挙動は「Yahoo! UI Library: TreeViewの基本（その１）」の例と同様である。

また、YUIのTreeViewには、逐次的にデータを取得するDynamic Loadingの機能があるが、この例では、Connection Managerをつかい、XHRで一気に取得する。

以下に、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: 350px;
	height: auto;
	border:1px dashed #999999;
}
#treeDiv1 {
	background: #fff; 
	padding:1em;
}

/*擬似リンク*/
.lnk {
	color: blue;
	text-decoration: underline;
	cursor: pointer;
    visibility: visible;
}

</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" src="scripts/yui/connection/connection-min.js" >
</script> 

<script type="text/javascript">
//alert("init");

var Event = YAHOO.util.Event,
	Get    = YAHOO.util.Get,
	Dom    = YAHOO.util.Dom,
	tree;

//module patternではうまくかけなかった。（スコープの問題？？）
	ajaxHandlers =　{
		
		// 受信成功時の処理
		responseSuccess:function(oj){
			//alert("success");
                // FF3以外でparseエラーが出るため修正（2009/3/19）
         	var menu = oj.responseText;
         	//var menu = eval(oj.responseText);
			//alert(menu);
         	if(menu) {
				Dom.get('treeDiv1').innerHTML = menu;
         	} else {
				alert("メニューが取得できませんでした。");
         	}
         	
 	     	YAHOO.util.Event.onAvailable('treeDiv1',
				function(){
 	     			//Treeのインスタンス化:
 		       	 	tree = new YAHOO.widget.TreeView('treeDiv1');
 	     	     	tree.draw();
 	     		}
 	     	);
		},

		// 受信失敗時の処理
		responseFailure:function(oj){
			alert("failure");
			alert("メニューが取得できませんでした（２）。");
		},

		// テキストを読み込む
		startRequest :function(url){
 	        YAHOO.util.Connect.asyncRequest('GET', url, 
					ajaxCallback, null);
		} 		
	};

	// コールバック成功/失敗時の振り分け
	ajaxCallback =
	{
		success:ajaxHandlers.responseSuccess,
		failure:ajaxHandlers.responseFailure,
		// cache: falseのしないと、HttpServerがajax_test2.xml
		// の内容をcacheしてしまう。
		cache: false,
		scope: ajaxHandlers
	};

	// 擬似リンクの処理
	// ハンドラを定義
	lnkHandlers =
	{
		click:function(){
			ajaxHandlers.startRequest('data/ajax_menu1.txt')
		}
	}
	//擬似リンクにイベントを仕掛ける。lnk1がAvailableになってからだよ。
	YAHOO.util.Event.onAvailable('lnk1',
		function() {
			YAHOO.util.Event.on('lnk1','click',
					lnkHandlers.click);
		}
	);

</script>
</HEAD>

<!-- class=" yui-skin-sam"の指定が必要 -->
<BODY class=" yui-skin-sam">
<div id="container">
<p>
<h4>ノードリスト（HTML）を受信してTreeを作成します</h4>
</p>
<div id='lnk1' class="lnk">Treeの取得</div>
<div id="treeDiv1"></div>
</div>
</BODY>
</HTML>