Flash Builder -> Tree -> itemRenderer の変更

Posted by muchag | ActionScript 3.0,Flash Builder 4 | 2010-08-02 (月) 22:16:53

Tree コンポーネントの各ノードの外観や昨日を変更するには
Tree コンポーネントの itemRenderer プロパティを用いる。

itemRenderer

itemRenderer は、Tree コンポーネントの全体ではなく
ノード1つ分、つまり1行分を設定するようなシステムである。

この、ノード1つ分を決めてやることで、各ノードにその設定が反映され
独自の Tree コンポーネントが出来上がる。
 

itemRenderer の作成
MXML で作成する手法


MXML エディタに上記のように打ち込むと、itemRenderer の作成サポートが表示される。
 
これを選択すると左のようなダイアログが表示される。

パッケージ は、参照からフォルダを辿ってもよいし、
自ら入力すればフォルダが存在しない場合はフォルダを自動生成してくれる。

終了 をクリックすれば、以下のような MXML ファイルが自動生成される。

プロジェクトフォルダ/src/hoge/moge/testRenderer.mxml

[mxml]


















[/mxml]

これを見るとデフォルトの itemRenderer が分かる。

ステート

normal、hovered(マウスオーバー時)、selected(クリック時) の3つのステートがある。
 

itemEditor

itemRenderer に搭載される各コンポーネントのことを itemEditor という。

Tree コンポーネントの itemEditor は5つ(?)。
getChildAt(0):インデント用の Rect
getChildAt(1):disclosureIcon 用の Group
getChildAt(2):disclosureIcon 用の BitmapImage
getChildAt(3):icon 用の BitmapImage
getChildAt(4):Label
上記5つのうち、3 の icon 用の BitmapImage 以外は、確かめていないので怪しい。

いずれにせよ、ここに CheckBox なり RadioButton なり配置すれば、表示することができる。

データバインディング
また、バインドされているデータのところを見ると {treeListData.indent} のようになっている。

ここから見て、indent, icon, label は予め設定してあるようでこのまま使えるようだ。
Tree コンポーネントの iconField プロパティや lableField プロパティに XML データの属性を設定した結果、そのまま使えた。

しかしそれ以外の属性データを使いたい場合は
{treeListData.@hoge} ではなく {data.@hoge} としてやることで読み込んでくれた。

課題
ただ、残念ながら icon は上手くいかなかった。
固定アイコンは問題なかったのだが、@icon 属性に表示したい icon へのパスをセットし
source=”{treeListData.disclosureIcon}”

source=”@Embed source='{treeListData.disclosureIcon}'”
こんな風にしてみても反映されなかった。
 

AS で作成する手法

アシアルブログ:【Flex3】「Flex3の、こんなときどうするの??」
ここの6番。 6. ツリーに文字列以外のものを表示したい
これを参考にさせていただいた。
[mxml]



).node; ]]>

[/mxml]

TreeItemRenderer クラスを継承したクラスを新たに作成する。

Actionscript 3.0 on Flex 4

  1. package components
  2. {
  3.     import mx.binding.utils.BindingUtils;
  4.     import mx.controls.CheckBox;
  5.     import mx.controls.treeClasses.TreeItemRenderer;
  6.     import mx.controls.treeClasses.TreeListData;
  7.  
  8.     public class Hoge extends TreeItemRenderer
  9.     {
  10.         [Bindable]
  11.         public var checkBox:CheckBox;
  12.  
  13.         public function Hoge()
  14.         {
  15.             super();
  16.         }
  17.  
  18.         override public function set data(value:Object):void {
  19.             super.data = value;
  20.         }
  21.  
  22.         override protected function createChildren():void{
  23.             super.createChildren();
  24.  
  25.             checkBox = new CheckBox();
  26.             checkBox.setStyle("verticalAlign","middle");
  27.             BindingUtils.bindSetter(setSelected, checkBox, 'selected');
  28.             this.addChild(checkBox);
  29.         }
  30.  
  31.         override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {    
  32.             var treeListData:TreeListData = TreeListData(super.listData);
  33.  
  34.             super.updateDisplayList(unscaledWidth,unscaledHeight);
  35.  
  36.             if(super.data)
  37.             {
  38.                 if (data.@selected.toString() == 'true')
  39.                 {
  40.                     checkBox.selected = true;
  41.                 }
  42.                 else
  43.                 {
  44.                     checkBox.selected = false;
  45.                 }
  46.  
  47.                 checkBox.x = super.label.x;
  48.                 checkBox.y = ( unscaledHeight - checkBox.height ) /2;
  49.                 label.x = checkBox.x + checkBox.width + 20;
  50.             }
  51.         }
  52.  
  53.         private function setSelected(selected:Boolean):void
  54.         {
  55.             if (data)
  56.             {
  57.                 data.@selected = selected.toString();
  58.             }
  59.         }
  60.     }
  61. }

別途、こんな例も見つけた。
FXUG:Re: Treeのアイコンを動的に変更したい

Actionscript 3.0 on Flex 4

  1. import flash.display.DisplayObject;
  2.    
  3.     import mx.collections.*;
  4.     import mx.controls.Image;
  5.     import mx.controls.treeClasses.*;
  6.  
  7.     public class TreeItemRendererEx extends TreeItemRenderer {
  8.         private var img:Image = new Image();
  9.  
  10.         public function TreeItemRendererEx() {
  11.             super();
  12.             this.addChild(this.img as DisplayObject);
  13.         }
  14.  
  15.         override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
  16.             super.updateDisplayList(unscaledWidth, unscaledHeight);
  17.  
  18.             if(data!=null) {
  19.                 this.label.x += 5;
  20.                 this.img.x = this.getChildAt(3).x;
  21.                 this.img.y = this.getChildAt(3).y - 5;
  22.                 this.img.width = 24;
  23.                 this.img.height = 24;
  24.  
  25.                 this.img.source = data.iconPath;
  26.  
  27.                 this.getChildAt(3).visible = false;
  28.             }
  29.         }
  30.     }

この方法だと、上記 MXML による itemRenderer の実装時に問題となった
全ノード異なるアイコンを表示する という作業も上手くいった。

しかしこちらの方法だと Label を二段にする という作業は上手くできなかった。

ActionScript 3.0,Flash Builder 4 | 2010-08-02 (月) 22:16:53 |

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

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment