Flex data binding object converted to ArrayCollection

Question

I have a somewhat complex parent/child hierarchy object that I need to display in a tree format that dynamically updates. To pass it into the tree as a dataprovider I convert the top level parent into an Array and then into an ArrayCollection. The problem there is if anything changes in the hierarchy the tree isn't dynamically updated unless I regenerate the dataprovider.

EDIT: I didn't have much code shown so I just tried to include the skeleton version of how everything is being used below, the tree works fine and even when I remove/add nodes the changes are evident but the vertical scroll bar isn't updated(doesn't resize) and if I scroll the tree will get out of whack and may display whitespace at the bottom of the tree where the item was just removed.

I tried just a plain bindable ArrayCollection test object with multiple levels and it updates properly so I think my tree is fine it's just how I'm trying to bind the dataprovider that I'm having the issues.

AS3 Class 1 - Object that can have plenty of child objects of itself by calling insertCustomObject()

public function CustomObject() {

}
public function insertCustomObject(customObject : CustomObject) : void {
    customObject.parent = this;
}

AS3 Class 2 - contains a single CustomObject that will have a plenty of children which is what I want displayed as the tree.

public class CustomContainer {
    private var _root : CustomObject;

    public function rootAsCollection() : ArrayCollection {
        return new ArrayCollection(new Array(_root));
    }
}

MXML Component 1 - Contains the custom tree component and passed it customObjects to be used as the dataprovider

[Bindable]
private var customContainer : CustomContainer;

<component:TreeCustom id="treeCustom" width="100%" customObjects="{customContainer.rootAsCollection()}"/>

MXML Component 2 - The tree itself, takes in the customObjects parameter from MXML Component 1 to set it's dataprovider.

[Bindable]
private var _customObjects : ArrayCollection;

public function set customObjects(objects : ArrayCollection) : void {
    _customObjects = objects;
}

<mx:Tree id="customTree" dataProvider="{_customObjects}" />

Have you tried using HierarchicalData instead of an ArrayCollection? Without knowing more about what your data structure looks like, that's the best suggestion I have for now. — Jason Towne

Maxim Kachurovskiy Maxim Kachurovskiy · Accepted Answer · 2011-06-24T08:41:45

You should use ArrayCollection instead of array when you are providing list of child items in tree. Array does not dispatch change events when element is added or removed and Tree can not update accordingly.

Here is an example of class that can be user to compose data hierarchy:

public class Person extends EventDispatched
{

    public function Person(name:String, children:ArrayCollection)
    {
        super();

        this.name = name;
        this.children = children;
    }

    [Bindable]
    public var name:String;

    [Bindable]
    public var children:ArrayCollection;

}

Flex data binding object converted to ArrayCollection

1 Answers