つれずれなるままの開発日記(最近はFlexばかり..)

Archive for 2009/6/2

mx:Treeを使ってアイテムごとに違うアイコンを表示させるようにしたい。

この場合にいろいろな方法があるみたいだが、やっぱり一番いいのは iconFunctionを使う方法だろう。
どうやら、iconFieldというプロパティにデータの変数（属性）名を指定すればそれでもiconは変更できるみたいであるが、
クラス名を書かなければいけない。

なので、私がお勧めなのは、iconFunctionとCSSを使ってアイコンを指定する方法だ。

まずは下記のようにTreeオブジェクトを配置する。

<mx:Tree id="tree" labelField="@label" showRoot="true" width="200"
     height="200"
     iconFunction="{showIcon}"
     styleName="treeIcons">
  <mx:XMLListCollection id="Folder">
    <mx:XMLList>
    <folder label="Grp1">
    <folder label="Grp1-1" icon="red"/>
    <folder label="Grp1-2" >
    <folder label="Grp1-2-1" >
  <folder label="Grp1-2-1-1" icon="blue" />
  </folder>
  <folder label="Grp1-2-2" >
  <folder label="Grp1-2-1-1" icon="green" />
  <folder label="Grp1-2-1-2" icon="green" />
  </folder>
  </folder>
  <folder label="Grp1-3" >
  <folder label="Grp1-3-1" icon="blue" />
  </folder>
  <folder label="Grp1-4" icon="red"/>
  </folder>
  </mx:XMLList>
  </mx:XMLListCollection>
</mx:Tree>

ここでのポイントは3つだ。

iconFunction="{showIcon}"

という部分と、

styleName="treeIcons"

という部分だ。
あとはもうひとつは、XML内で定義しているiconという属性だ。

では、これら３つをつなぐiconFunctionを実装していこう。
その前に、treeIconsでは、下記のようにスタイルを定義している。

もちろん、画像もそれぞれ用意してほしい。

さて、showIconメソッドであるが、

private function showIcon(item:Object):Class{
var x:XML = item as XML;
if(x){
var iconStyle:String = x.@icon;
if(x.children().length()> 0){
//  folderの場合にはデフォルトのアイコンを使用する
return tree.getStyle(tree.isItemOpen(item)? "folderOpenIcon":"folderClosedIcon");
}
else if(iconStyle){
var clz:Class = tree.getStyle(iconStyle);
if(clz){
return clz;
}
}
}
return icon;
}

となる。
x.@iconでXMLのicon属性から値を取得し、その名前のスタイルを取得して、
画像クラスを返している。

また、フォルダはもともとの画像を表示するようにした。
itemRendererなどですべてを書き換えてしまう方法もあるが、アイコンだけならばこのようにできる。
また、CSSとしたことでプログラムとは別のswfに含めることができるのでメンテナンス性や、デザインの自由度も上げることができると思う。

出来上がったものはこんな感じになる。