Flash Builder 4 -> Tree

Posted by muchag | ActionScript 3.0,Flash Builder 4 |
初回投稿:2010-07-18 (日) 3:58:04 | 最終更新:2010-07-25 (日) 2:23:43

<Tree>
mx.controls
Flex 3 開発ガイド / ユーザーインターフェイス / データ駆動型コントロールの使用 : Tree コントロール

 

dataProvider

Tree コンポーネントは、XMLListCollection 及び ArrayCollection の2種類のデータソースを選択できるようだ。

いずれかを dataProvider プロパティにセットすることで簡単に Tree メニューを実現できる。
 

XMLListCollection

せっかくなので [XML サービスを設定] を利用しようとしたけど、うまくできなかった。。。
Flash Builder 4 -> XML との連携

そこで
gihyo.jp:プログラマのためのFlash遊び方 第8回 Flexで本格Webアプリケーションを作ってみよう
こちらを参考にして、既存の XML ファイルを読み込んでみた。

  1. private function init():void {
  2.     var req:URLRequest = new URLRequest( "example.xml?time=" + new Date().getTime() );
  3.    
  4.     var loader:URLLoader = new URLLoader();
  5.     loader.load(req);
  6.     loader.addEventListener("complete", function(event:Event):void {
  7.         myTree.dataProvider = new XMLListCollection( new XMLList (XML(loader.data) ) );
  8.     });
  9. }

無事に動いた。

アッサリすぎて・・・ポカーン。

外部ファイル読み込み時のキャッシュのクリア
 

PHP サービスの利用

上記手法だと一旦 XML ファイルを保存しないといけないのでセキュリティ上あまりよろしくないと思い、
せっかく繋げた PHP サービスを利用することを考えた。

  1. var myXML:XML = new XML(event.result);
  2. myTree.dataProvider = new XMLListCollection( new XMLList(myXML) );

PHP 側から XML ファイルの中身を文字列で送り、AS で XML へ変換。

これまた楽チン♪
 

ArrayCollection

やり方がよくわからない。

結論
よほどの事がない限り、データは XML で作り XMLListCollection を dataProvider に登録しよう!

dataProvider 関連の記事を検索すると、XML でのデータ構築方法ばかりがヒットします。
実際は、Object&Array でも階層データを構築出来るのに、何故この情報が少ないのか疑問でした。

で、頑張ってみたわけですが、調べて納得(笑)。
一部理解が微妙な部分があるのもありますが(ぉ)、
面倒が嫌なら XML でササッとコーディングした方が、手間も少ないようです。

<引用元>
左脳Script:flex3 における Tree での dataProvider の扱い方

こちらの方の忠告に従って、当面考えないことにした。
 

itemClick

Tree メニューのクリックイベントは、itemClick イベントである。

XMLListCollection を dataProvider に指定しているときの例。
[mxml][/mxml]

  1. import mx.events.ListEvent;
  2.  
  3. protected function myTree_itemClickHandler(event:ListEvent):void
  4. {
  5.     var item:Object = event.itemRenderer.data; // itemClick イベントから当該ノードの情報を受け取る
  6.     var id = item.@id; // 属性値の受け取り方
  7.     var hoge = item.hoge; // 子ノードの受け取り方
  8. }

 

labelField

各ノードの表示ラベルの設定は labelField プロパティ。

  1. <unit name="SMAP" num="5">
  2.     <member name="中居正広" />
  3.     <member name="木村拓哉" />
  4.     <member name="稲垣吾郎" />
  5.     <member name="草彅剛" />
  6.     <member name="香取慎吾" />
  7. </unit>
[mxml]
[/mxml]  

showRoot

ルートノードを表示したくない場合は showRoot プロパティ。
[mxml][/mxml]

Posted by muchag | ActionScript 3.0,Flash Builder 4 |
初回投稿:2010-07-18 (日) 3:58:04 | 最終更新:2010-07-25 (日) 2:23:43

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment