YUI TreeView搞明白了

 我是從 http://thomas.pietrzykowski.de/blog/?p=1這裡開始的

當然剛看這篇文章，我是不懂的

那我就先去了解了一下 yahoo網站YUI的地方看了看TreeView的開始部分，再將 上邊 那篇文章的catalyst做的一個demo down下來，部署到本地機器上。

然後一步一步看他的程式碼及每個函式實現，就明白了，至此 TreeView算是搞定了

上邊Thomas主要實現了 在 Javascript. 中呼叫server 端的 perl物件的程式碼。

其中Thomas透過一個Ajax的模組中的 dispatcher模組，來 實現對其他應用物件(比如 Tree.pm) 方法(比如populateSimpleTree，populateAdvancedTree，getProductInfo)的呼叫。

這些方法的呼叫返回的都是JS原始碼，例如下邊：
[debug] JS Response:

var $_ = { "Company HIJ": { 6: { label: "Product 2", onClickFunction: "clickedAdvancedTreeNode" }, 5: { label: "Product 1", onClickFunction: "clickedAdvancedTreeNode" } }, "Company DEF": { 4: { label: "Product 2", onClickFunction: "clickedAdvancedTreeNode" }, 3: { children: { 1: { label: "Product 1 - Version 1", onClickFunction: "alert('inline js is possible...but not suggested..')" } }, label: "Product 1", onClickFunction: "clickedAdvancedTreeNode" } }, "Company ABC": { 1: { label: "Product 1", onClickFunction: "clickedAdvancedTreeNode" }, 2: { label: "Product 2", onClickFunction: "clickedAdvancedTreeNode" } } };
updateTree(tree2, $_)

首先是一個JSON的資料結構，再是 一個 函式 是前邊 httprequest 傳入的對JSON的處理函式，在 客戶端的回撥函式callback的eval中執行。

客戶端的Ajax客戶端的callback回撥函式如下：

    var callBack = {
        success: function (obj) {
            XX_perl_request_finished(request_id);
            eval(obj.responseText);
        },
        failure : function (obj) {
            alert('Communication error');
        }

而客戶端的Ajax用的是YUI的 Content Manager物件來實現的，如下程式碼：
var transaction = YAHOO.util.Connect.asyncRequest('GET', XX_perl_ajax_dispatcher_url + '?' + queryString, callBack, null);

Content Manager 是Ajax請求的一個封裝，細節基本都遮蔽了。

updateTree是對樹節點的遞迴處理，及畫圖的功能，大體也都是掉用 YUI TreeView物件的功能。

OK了，搞明白這一部分，再規劃一下如何佈局，就可以 mysql 效能資料 展示 出來了。

還看到一個 YUI 中的 Data::Table可以對JSON生成表格。
還有一個YUI的Charts都快可以 代替 OFC，我FT，太強了。

今天晚上看這個，腦力挺受挑戰的。有3，4年沒接觸過web app，發展這麼快，消化起來還真不容易啊