Yahoo! UI Library: TreeView

http://developer.yahoo.net/yui/treeview/index.html

Yahoo! UI Library: TreeView

The TreeView component is a UI Control that can be used to create a variety of hierarchical dynamic tree structures.

TreeViewコンポーネントは、さまざまな形の樹形表示を階層的・動的に作り出せるUIコントローラです。

Getting Started

コンポーネント間の依存関係に注意してください。

<!-- Namespace source file --> 
<script src = "http://yourwebsite.com/util/YAHOO.js" ></script>

<!-- TreeView source file --> 
<script src = "http://yourwebsite.com/util/treeview.js" ></script> 

TreeViewコンポーネントYAHOO.widget.Tree.で定義されます。ツリーのノードはベースクラスであるYAHOO.widget.Nodeや、様々なサブクラスから定義されます。

Creating the Tree

Create a tree by instantiating TreeView with the id of the element in which you want to draw the tree:

var tree;
function treeInit() {
	tree = new YAHOO.widget.TreeView("treeDiv1");
}

Once the tree object has been created you can then add nodes to the tree. The HTML code for the tree is not inserted into the host element until you call the draw method.

var tree;
function treeInit() {
	tree = new YAHOO.widget.TreeView("treeDiv1");
	// add nodes here
	tree.draw();
}


植林! じゃなくて、ツリーを作る


要素IDを使って、樹形表示のインスタンスを作り出します。

var tree;
function treeInit() {
	tree = new YAHOO.widget.TreeView("treeDiv1");
}

オブジェクトを作った後に、ツリーにノードを加えていきます。draw()メソッドを使うまで、ツリー用のHTMLコードをホスト・エレメント(つまり一番上のノード?)に挿入する必要はありません。

var tree;
function treeInit() {
	tree = new YAHOO.widget.TreeView("treeDiv1"); //host elem?
	// ここでノードを加える
	tree.draw();
}

Adding Nodes

When the tree is created, it automatically creates a root node. The constructor for a new node takes the parent node as an argument, so you can get a reference to the root node to build the first level of the tree:

var tree;
function treeInit() {
	tree = new YAHOO.widget.TreeView("treeDiv1");
	var root = tree.getRoot();
	var tmpNode = new YAHOO.widget.TextNode("mylabel", root, false);

	tree.draw();
}

This example appends a text node to the root of the tree with "mylabel" as the label. The last parameter is a boolean that indicates whether or not the node should be expanded when the HTML for the tree is generated.

The new node you created (tmpNode) can be used as the parent for other nodes.

var tree;
function treeInit() {
   tree = new YAHOO.widget.TreeView("treeDiv1");
   var root = tree.getRoot();
   var tmpNode = new YAHOO.widget.TextNode("mylabel1", root, false);
   var tmpNode2 = new YAHOO.widget.TextNode("mylabel1-1", tmpNode, false);

   tree.draw();

   //root>>tmpnode(mylable1)>>tmpnode2(mylable1-1)
}

See the examples below in Using TreeView or the API Documentation for more details.


ノードの追加



ツリーがつくられると、自動的にルート・ノードが作られます。新しいノードを作るコンストラクタは親ノードを引数とします。なので、深度1のノード・ツリーを作るとルート・ノードのリファレンスを取得できます。

var tree;
function treeInit() {
	tree = new YAHOO.widget.TreeView("treeDiv1");
	var root = tree.getRoot();
	var tmpNode = new YAHOO.widget.TextNode("mylabel", root, false);

	tree.draw();
}

このサンプルでは、ルート・ノードにテキストノードと"mylabel"をラベル(見出し?)として加えています。最後のパラメーターはHTMLツリーが生成された時、ノードを展開するかどうかを示すブーリアン変数です。

新しく作ったtmpNodeは、他のノードの親ノードとすることが出来ます。

var tree;
function treeInit() {
   tree = new YAHOO.widget.TreeView("treeDiv1");
   var root = tree.getRoot();
   var tmpNode = new YAHOO.widget.TextNode("mylabel1", root, false);
   var tmpNode2 = new YAHOO.widget.TextNode("mylabel1-1", tmpNode, false);

   tree.draw();
   
   //この時点で階層関係は以下のようになっている
   //root>>tmpnode(mylable1)>>tmpnode2(mylable1-1)
}

詳細はAPIドキュメントやサンプルを参照してください
http://developer.yahoo.net/yui/treeview/docs/index.html

Using TreeView

This section describes several common uses and customizations of TreeView, with examples.

  1. Setting Up your Style Definitions
  2. Keeping Custom Properties in Node References
  3. Changing the Behavior for the Label of a Text Node
  4. Responding to Events
  5. Loading Your Data Dynamically


ツリー・ビューを使う


このセクションではツリー・ビューの一般的な使用法、サンプルについて載せています。

  1. お好みのスタイルを設定する
  2. ノード・リファレンスにカスタムプロパティを保持する
  3. テキストノードのラベルの振る舞いを変える
  4. イベントに応答する
  5. データを動的ロードする

Setting Up your Style Definitions

The TreeView component makes use of several CSS classes to style the tree. You can either use the CSS provided in the download source, or you can create your own. If you do, the following CSS classes are used:

Icon styles

  • tvtn: First or middle sibling, no children
  • tvtm: First or middle sibling, collapsible
  • tvtmh: First or middle sibling, collapsible, hover state
  • tvtp: First or middle sibling, expandable
  • tvtph: First or middle sibling, expandable, hover state
  • tvln: Last sibling, no children
  • tvlm: Last sibling, collapsible
  • tvlmh: Last sibling, collapsible, hover state
  • tvlp: Last sibling, expandable
  • tvlph: Last sibling, expandable, hover state
  • tloading: Loading dynamic data indicator

Depth spacer styles

  • tvdepthcell: Node's ancestor at the current depth has a next sibling
  • tvblankdepthcell: Node's ancestor at the current depth does not have a next sibling

Container styles

  • tvitem: The node's container element
  • tvchildren: The container around each node's collection of children

Text styles

  • tvlabel[link,visited,hover]: The style of the text label/href when using TextNode


1.お好みのスタイルを設定する


TreeViewコンポーネントは、ツリーをスタイルに複数のCSSスタイルを適用しています。Yahoo!で提供しているCSSをダウンロードしても、自ら作っても構いません。自分で作るのならば、CSSクラスは以下のようになります。

アイコンのスタイル

  • tvtn: 最初、もしくは中間のsiblingノード。childノードを持たない
  • tvtm: 最初、もしくは中間のsiblingノード。折りたたみ可能な状態
  • tvtmh: 最初、もしくは中間のsiblingノード。折りたたみ可能な状態&マウスホバーの状態。
  • tvtp: 最初、もしくは中間のsiblingノード。拡張可能な状態。
  • tvtph:最初、もしくは中間のsiblingノード。拡張可能な状態&マウスホバーの状態。
  • tvln: 最後のsiblingノード。childノードを持たない
  • tvlm: 最後のsiblingノード。折りたたみ可能な状態。
  • tvlmh:最後のsiblingノード。折りたたみ可能な状態&マウスホバーの状態
  • tvlp: 最後のsiblingノード。拡張可能な状態。
  • tvlph:最後のsiblingノード。拡張可能な状態&マウスホバーの状態
  • tloadiing:動的ロードを示すスタイル
*最初、中間、最後、拡張可能、折りたたみ可能と書きましたが・・・

----first sibiling node 最初 , no child
  |
  |--middle sibling node [+] 中間 拡張可能状態
  |--middle sibiling node[+] 中間
  |
  |--middle sibiling node[-] 中間 折りたたみ可能状態
  |   |
  |   |____first child(sibiling)node[+] 最初
  |
  |_last sibiling node[+]  最後 拡張可能状態
  
多分こういうことだなんだろうと解釈してます。

Depth spacer styles

tvdepthcell: 現在の階層で、次のsibilingノードを持つancestorノード
tvblankdepthcell: 現在の階層で、次のsibilingを持たないancestorノード

コンテナスタイル

  • tvitem: ノードのコンテナ要素
  • tvchildren: コンテナに付随するchildノード群


テキストスタイル

  • tvlabel[link , visited , hover]: テキストノードを使った時に、ラベル/href に適用されるスタイル

2.Keeping Custom Properties in Node References

The TreeView component also accepts objects for this first parameter. This provides an opportunity for keeping arbitrary data associated with the node. If you do this, the component looks for a property called "label" that will be used for the label of the node. A reference to this object is stored in the node in a variable called "data". This feature can be useful when handling events passed to you by the TreeView component as demonstrated later in this doc.


2.カスタムオブジェクトをノードリファレンスで保持する


TreeViewコンポーネントには、一つ目のパラメータとしてオブジェクトも渡せます。どんなデータでもノードと結びつけて保持して置けるということになります。オブジェクトを渡すとコンポーネントはオブジェクトの中から"label"プロパティを探すようになります。"label"プロパティはノードのラベルになります(*ここの訳、少し自信ないです)。この
オブジェクトへのリファレンスは、ノードの中の"data"変数に保持されます。この特徴は、TreeViewコンポーネントからハンドリング・イベントが渡される時に役に立つでしょう。江このドキュメントの後半でデモンストレーションします。

var tree;
function treeInit() {
   tree = new YAHOO.widget.TreeView("treeDiv1");
   var root = tree.getRoot();
   var myobj = { label: "mylabel1", id:"myid1" };
   var tmpNode = new YAHOO.widget.TextNode(myobj, root, false);

   tree.draw();
}

3.Changing the Behavior for the Label of a Text Node
By default, clicking the text label of a node will expand/collapse it. You can change this behavior to a URL by using a custom object to instantiate your node and providing an href property:

var tree;
function treeInit() {
   tree = new YAHOO.widget.TreeView("treeDiv1");
   var root = tree.getRoot();
   var myobj = { label: "mylabel1", href:"http://www.yahoo.com" };
   var tmpNode = new YAHOO.widget.TextNode(myobj, root, false);

   tree.draw();
}

The HTML for the TreeView component will include a link (<a href="...">) with the contents of the href property.

3.テキストノードのラベルの動きを変える


初期設定では、ノードのテキスト・ラベルをクリックすると、ツリーが展開したり閉じたりします。ノードをインスタンス化してhrefプロパティを与えたカスタム・オブジェクトを使って、この動きをURLに変えることが出来ます。
(*樹形的に展開するURLってことかな?)

var tree;
function treeInit() {
   tree = new YAHOO.widget.TreeView("treeDiv1");
   var root = tree.getRoot();
   var myobj = { label: "mylabel1", href:"http://www.yahoo.com" };
   var tmpNode = new YAHOO.widget.TextNode(myobj, root, false);

   tree.draw();
}

これで、TreeViewコンポーネントが、hrefプロパティの中身でリンク<a href="..."> を作ります。

4.Responding to Events

The TreeView component supports event callbacks for when a node is expanded or collapsed. The callback function gets a reference to the node that was expanded/collapsed, and that callback can be used to dynamically alter the presentation of the node.

var tree;
function treeInit() {
   tree = new YAHOO.widget.TreeView("treeDiv1");
   var root = tree.getRoot();

   var myobj = { label: "mylabel1", id:"myid1" } ;
   var tmpNode = new YAHOO.widget.TextNode(myobj, root, false);

   myobj = { label: "mylabel2", id:"myid2" } ;
   var tmpNode2 = new YAHOO.widget.TextNode(myobj, tmpNode, false);

   myobj = { label: "mylabel3", id:"myid3" } ;
   var tmpNode3 = new YAHOO.widget.TextNode(myobj, tmpNode, false);

   tree.onExpand = function(node) {
      alert(node.data.id + " was expanded");
   }

   tree.onCollapse = function(node) {
      alert(node.data.id + " was collapsed");
   }

   tree.draw();
}


4.コールバックよ、イベントに応答せよ!


TreeViewコンポーネントはイベント・コールバックをサポートします。ノードが展開された時、もしくは縮小した時にコールバックが呼び出されます。コールバックは、展開/縮小したノードへのリファレンスを取得するので、コールバックを使えばノード表示をダイナミックに見せることが出来ますね。

   root--tmpnode(mylabel1)----textnode::mylabel2 id:myid2
                         |
                         |____textnode::mylabel3 id:myid3
   
   ・onExpand   --> function(node){ alert(…) } 
   ・onCollapse --> function(node){ alert(…) }
   引数nodeはイベントを呼び出したnodeである  

5.Loading your data dynamically

The TreeView component supports dynamic data loading. To enable this feature, you must provide a callback function that will populate the child nodes for a given node. Dynamic loading can be defined for the entire tree, or for individual nodes. The callback function receives a reference to the node that is being expanded/collapsed, and a callback function that must be executed once you are finished creating the child nodes.

var tree;
function treeInit() {
   tree = new YAHOO.widget.TreeView("treeDiv1");
   tree.setDynamicLoad(loadDataForNode);

   var root = tree.getRoot();

   var myobj = { label: "mylabel1", id:"myid1" } ;
   var tmpNode = new YAHOO.widget.TextNode(myobj, root, false);

   myobj = { label: "mylabel2", id:"myid2" } ;
   var tmpNode2 = new YAHOO.widget.TextNode(myobj, tmpNode, false);

   myobj = { label: "mylabel3", id:"myid3" } ;
   var tmpNode3 = new YAHOO.widget.TextNode(myobj, tmpNode, false);

   tree.draw();
}

 function loadDataForNode(node, onCompleteCallback) {
    var class= node.data.id;
    // -- code to get your data, possibly using Connect --
    var tmpNode = new YAHOO.widget.TextNode(id + "label1", node, false);
    tmpNode = new YAHOO.widget.TextNode(id + "label2", node, false);

    // Be sure to notify the TreeView component when the data load is complete
    onCompleteCallback();
}


5.データを動的にロードする


TreeViewコンポーネントはデーターの動的ローディングをサポートします。この機能を使うには、コールバック関数をセットする必要があります。コールバックはchildノードを渡されたノードに移します。??動的ローディングは、ツリー全体もしくはノードごとに定義されます。コールバック関数は展開/縮小したノードへのリファレンスを受け取ります。コールバック関数はchildノードを作り終えたときに実行されるでしょう。

var tree;
function treeInit() {
   tree = new YAHOO.widget.TreeView("treeDiv1");
   tree.setDynamicLoad(loadDataForNode);

   var root = tree.getRoot();

   var myobj = { label: "mylabel1", id:"myid1" } ;
   var tmpNode = new YAHOO.widget.TextNode(myobj, root, false);

   myobj = { label: "mylabel2", id:"myid2" } ;
   var tmpNode2 = new YAHOO.widget.TextNode(myobj, tmpNode, false);

   myobj = { label: "mylabel3", id:"myid3" } ;
   var tmpNode3 = new YAHOO.widget.TextNode(myobj, tmpNode, false);

   tree.draw();
}

 function loadDataForNode(node, onCompleteCallback) {
    var class= node.data.id;
    // ここにコードを書く。Connectクラス?メソッド?を使ってもいいかも
    var tmpNode = new YAHOO.widget.TextNode(id + "label1", node, false);
    tmpNode = new YAHOO.widget.TextNode(id + "label2", node, false);

    // データの読み込みが完了時に、Treeviewコンポーネントに通知するため、ちゃんとセットすること
    onCompleteCallback();
}