How to add dynamic objects to bindable ArrayCollection in Flex?

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?

What's "ButtoBarButton"? Besides all you need to set your tabs on a spark tababr is the dataprovider. Avoid bindable as much as possible as it produce lag when overused. For simple data like this you only need to override skins and renderers. — BotMaster
– BotMaster, Commented Jun 3, 2015 at 14:05
I ment to write ButtonBarButton which is part of spark.components. — membersound
– membersound, Commented Jun 3, 2015 at 14:10
I don't think that's the way you create a tabbar to start with. Are you sure this compiles? — BotMaster
– BotMaster, Commented Jun 3, 2015 at 14:16
Absolutely (it's a legacy application that I have to maintain) — membersound
– membersound, Commented Jun 3, 2015 at 14:18
If I wrap each item in an ObjectProxy the warning disappears, but I don't know if that's the right way... — membersound
– membersound, Commented Jun 3, 2015 at 14:19

Brian · Accepted Answer · 2015-06-04 16:16:46Z

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.

Collectives™ on Stack Overflow

How to add dynamic objects to bindable ArrayCollection in Flex?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related