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という属性だ。

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

.treeIcons{
blue:Embed(source="assets/blue.png");
green:Embed(source="assets/green.png");
red:Embed(source="assets/red.png");
}

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

さて、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に含めることができるのでメンテナンス性や、デザインの自由度も上げることができると思う。

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

This movie requires Flash Player 9

お仕事のご依頼・相談を承ります
この記事に関連するお仕事のご依頼やご相談をお待ちしております。 詳しくは、こちら

Leave a Reply

お仕事のご依頼・相談
この記事に関連するお仕事のご依頼やご相談をお待ちしております。 詳しくは、こちら
ソフトウェア&ライブラリ




ライブラリ
airxmail(en)
AIR版メール送受信ライブラリ
airxzip
AIR版ZIP圧縮・解凍ライブラリ
執筆書籍
本、雑誌等

WEB記事:CodeZine
執筆記事はこちら
カレンダー
2009年6月
« 5月   7月 »
1234567
891011121314
15161718192021
22232425262728
2930  

カスタム検索
RSS
Add to Google < !–adsense–>
アーカイブ
カテゴリ
にほんブログ村 IT技術ブログへ