CODEWITHSUNDEEP
actionscript-3apache-flex
membersound
membersound

Reputation: 86747

How to add dynamic objects to bindable ArrayCollection in Flex?

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?

Upvotes: 0

Views: 680

Answers (1)

Olivier de Jonge
Olivier de Jonge

Reputation: 1504

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.

Upvotes: 2

Related Questions