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，发展这么快，消化起来还真不容易啊

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/82392/viewspace-202024/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/82392/viewspace-202024/