2009年10月26日月曜日

Flex/AdobeAIRのComboBoxの表示をアイコン付きにする




こんな感じの、アイコン付きのコンボボックスをAdobeAIRで作りたかったんですが、デフォルトのコンポーネントではできないみたい。
ItemRendererを使えばリスト内は好きなようにレイアウトできるけど、コンボボックスの選択表示はテキストだけになっちゃうし。

ということで、これも作成してみました。
view.IconComboBox.as

package view {
import flash.display.DisplayObject;

import mx.controls.ComboBox;
import mx.controls.List;
import mx.core.ClassFactory;

public class IconComboBox extends ComboBox {
private var internalDropdownFactory:ClassFactory = new ClassFactory(List);
private var displayIconObject:Object;

public function IconComboBox():void{
super();
internalDropdownFactory.properties = { iconField : "icon"};
dropdownFactory = internalDropdownFactory;
}

private var _iconField:String="icon";
[Bindable]
public function set iconField(value:String):void {
_iconField = value;
internalDropdownFactory.properties = {iconField : value};
}

public function get iconField():String{
return _iconField;
}

override public function set selectedIndex(value:int):void {
super.selectedIndex = value;
if (value!=-1){
showIcon();
}
}

private function showIcon():void {
var displayIcon:Class = itemToIcon(dataProvider[selectedIndex]);
if (getChildByName("displayIconObject")) {
removeChild(getChildByName("displayIconObject"));
}

if (!displayIcon) {
textInput.x = 0;
return;
}

displayIconObject = new displayIcon;
displayIconObject.name = "displayIconObject";
addChild(DisplayObject(displayIconObject));

DisplayObject(displayIconObject).x = getStyle("cornerRadius");
DisplayObject(displayIconObject).y = (height-DisplayObject(displayIconObject).height) / 2;
textInput.x = DisplayObject(displayIconObject).width + getStyle("cornerRadius");
}

override public function set measuredWidth(value:Number):void {
if (displayIconObject != null) {
super.measuredWidth = value + (DisplayObject(displayIconObject).width + getStyle("cornerRadius"));
} else {
super.measuredWidth = value;
}
}

public function itemToIcon(data:Object):Class {
return data[iconField];
}
}
}


このクラスをMXMLで指定するのはこんな感じ。
<mx:Window xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:view="view.*">
<view:IconComboBox dataProvider="{myDataProvider}" iconField="image" labelField="name" />
</mx:Window>

iconFieldにはイメージのプロパティ名、labelFieldにはテキストのプロパティ名を指定します。

これぐらいのもの、デフォルトであってもよいんでないかしら?
...いや、実は既にあったらどうしよう..
• • •