動的なプロパティを持つ Object を集めた ArrayCollection Object を TileList に Bind し、itemRenderer で表示レイアウトをカスタマイズしようとすると、Debug の際に console 画面に下記の様なエラーが。
warning: unable to bind to property 'label' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'src' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'label' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'src' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'label' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'src' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'label' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'src' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'label' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'src' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'label' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'src' on class 'Object' (class is not an IEventDispatcher)
■ エラーが生じるサンプルソース
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="source/index.html"
layout="absolute">
<mx:Script>
<![CDATA[
[Bindable]
[Embed(source='asset/image01.jpg')]
private var image01:Class;
[Bindable]
[Embed(source='asset/image02.jpg')]
private var image02:Class;
[Bindable]
[Embed(source='asset/image03.jpg')]
private var image03:Class;
[Bindable]
[Embed(source='asset/image04.jpg')]
private var image04:Class;
[Bindable]
[Embed(source='asset/image05.jpg')]
private var image05:Class;
[Bindable]
[Embed(source='asset/image06.jpg')]
private var image06:Class;]]>
</mx:Script><mx:ArrayCollection id="sampe_ac">
<mx:Object label="image01" src="{image01}" />
<mx:Object label="image02" src="{image02}" />
<mx:Object label="image03" src="{image03}" />
<mx:Object label="image04" src="{image04}" />
<mx:Object label="image05" src="{image05}" />
<mx:Object label="image06" src="{image06}" />
</mx:ArrayCollection><mx:Component id="sample_renderer">
<mx:VBox verticalAlign="middle" horizontalAlign="center">
<mx:Label fontWeight="bold" text="{data.label}" />
<mx:Image source="{data.src}" />
</mx:VBox>
</mx:Component><mx:TileList
columnWidth="150"
rowHeight="150"
columnCount="3"
dataProvider="{sample_arr}"
itemRenderer="{sample_renderer}" /></mx:Application>
ブラウザには表示はされるけど、嫌なエラーなので検索してみると、同様な記事が FXUG にありました。
・記事
なにやら動的なプロパティを持つ Object は明示的に Bindable にしてあげないといけないらしい。なので、明示的に Object のプロパティを Bindable にする AS Class を作成し、Bindable な Array に各 Object を追加して、その Array を先程の ArrayCollection Object の代わりに TileList の dataProvider に Bind することでエラーが出なくなった。
■ Object のプロパティ を Bindable にする AS Class
package
{
public class SetData
{
[Bindable]
public var label:String;
[Bindable]
public var src:Class;public function SetData(label:String, src:Class) {
this.label = label;
this.src = src;
}
}
}
■ 最終的なソース
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="source/index.html"
layout="absolute">
<mx:Script>
<![CDATA[
[Bindable]
[Embed(source='asset/image01.jpg')]
private var image01:Class;
[Bindable]
[Embed(source='asset/image02.jpg')]
private var image02:Class;
[Bindable]
[Embed(source='asset/image03.jpg')]
private var image03:Class;
[Bindable]
[Embed(source='asset/image04.jpg')]
private var image04:Class;
[Bindable]
[Embed(source='asset/image05.jpg')]
private var image05:Class;
[Bindable]
[Embed(source='asset/image06.jpg')]
private var image06:Class;[Bindable]
private var sample_arr:Array = [
new SetData("image01", image01),
new SetData("image02", image02),
new SetData("image03", image03),
new SetData("image04", image04),
new SetData("image05", image05),
new SetData("image06", image06)
]
]]>
</mx:Script><mx:Component id="sample_renderer">
<mx:VBox verticalAlign="middle" horizontalAlign="center">
<mx:Label fontWeight="bold" text="{data.label}" />
<mx:Image source="{data.src}" />
</mx:VBox>
</mx:Component><mx:TileList
columnWidth="150"
rowHeight="150"
columnCount="3"
dataProvider="{sample_arr}"
itemRenderer="{sample_renderer}" /></mx:Application>
