How to add dynamic objects to bindable ArrayCollection in Flex? - actionscript-3

Question

I have an ArrayCollection that serves as dataprovider for a TabBar.
Each item added must have two properties: a label and a description.
I define these items dynamically as follows:
[Bindable] //required to serve as data provider
private var mybar:ArrayCollection;
public function init() {
mybar = new ArrayCollection();
mybar.addItem({label: "Test1", description: "long test test"});
}
<s:TabBar dataProvider="{mybar}">
<s:ItemRenderer>
<s:ButtonBarButton label="{data.label}" /> //description might also be used here, but omitted
</s:ItemRenderer>
</s:TabBar>
Problem: as the properties "label" and "description" are not set [Bindable], there is the following error log:
warning: unable to bind to property 'label' on class 'Object' (class is not an IEventDispatcher)
warning: unable to bind to property 'description' on class 'Object' (class is not an IEventDispatcher)
How could I prevent this?
The warning disappears if I use ObjectProxy:
mybar.addItem(new ObjectProxy( {label: "Test1", description: "long test test"}));
But is that correct?

Answer 1

The way to get rid of the warning would be using an custom class with Bindable properties.
[Bindable]
public class BarData
{
public var label:String;
public var description:String;
public function BarData(label:String, description:String)
{
this.label = label;
this.description = description;
}
}
and to do this to initialize it
public function init():void {
mybar = new ArrayCollection();
mybar.addItem(new BarData("Test1", "some description"));
mybar.addItem(new BarData("Test2", "some description"));
}
another way as described above wrap it in an ObjectProxy:
public function init():void {
mybar = new ArrayCollection();
mybar.addItem(new ObjectProxy({label:"Test1", description:"some description"}));
mybar.addItem(new ObjectProxy({label:"Test2", description:"some description"}));
}
I'm curious which SDK you're using because in my FlashBuilder, with SDK 4.7, the way you define your TabBar is leading to disappointing results. I have to do this to get it working:
<s:TabBar dataProvider="{mybar}">
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:ButtonBarButton label="{data.label}" />
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:TabBar>
still more easy is defining it this way:
<s:TabBar dataProvider="{mybar}" />
the item renderer is not really adding extra functionality here so you could just do it this way.
Hope this helps.