Populate Tree using data from ArrayCollection

Question

Let's say I had an ArrayCollection like this:

        public var ac:ArrayCollection= new ArrayCollection([
            {item:"dog", group:"Animals"},
            {item:"orange", group:"Fruits"}, 
            {item:"cat", group:"Animals"},
            {item:"apple", group:"Fruits"}
            ]);

How would I create a Tree component in Flex 3 that uses the groups as nodes, with the appropriate items listed under each node?

Solution 1

You can use the labelField property of the Tree to dictate which property you want to be the label for each node.

In your example, this would give you a single-level Tree:

<mx:Tree id="tree" dataProvider="{ac}" labelField="item" />

These links should help you out:

• Array as a Data Provider in a Tree
• Filter a Tree with an ArrayCollection

---

Edit: the ArrayCollection you created contains objects, each of which match groups with items. If you want to use a Tree, you need to think hierarchically, from top to bottom.

The top-most objects will be your "groups", comprised of objects representing the "items." In your ArrayCollection, each index will need to be an Object which, in turn, contains any nested children. Please note: each object must have their nested children specified in a property named "children."

For example:

{name: "Animals", children: new ArrayCollection([ {name: "Dog"}, {name: "Cat"} ])}

This `Object is thus structured hierarchically:

Object: Animals
|
|-- children
     |
     Dog
     |
     Cat

From here, the Dog and Cat objects could also have a children property, pointing to yet another ArrayCollection. Does this make sense?

Note how each object contains the same identifier. In this case, I used "name" for the label which will be displayed in the Tree. You can also use the labelFunction property to define a function which returns a String and thus can determine what the label for a given node is at run-time.

I took your ArrayCollection and bundled it into a simple application which displays it as a Tree.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        [Bindable] public var ac:ArrayCollection= new ArrayCollection([
             { name: "Animals", children: new ArrayCollection([ {name: "dog"},    {name: "cat"}])},
             { name: "Fruits",  children: new ArrayCollection([ {name: "orange"}, {name: "apple"} ])}]);

    ]]>
</mx:Script>
<mx:Tree dataProvider="{ac}" labelField="name" />

Solution 2

You can create a hierarchical ArrayCollection with children node in it from a flat ArrayCollection.

Here is a link on Adobes cookbooks.

Solution 3

I have used this way and works for me: a link!

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="windowedapplication1_creationCompleteHandler(event)" xmlns:local="*"
width="318" height="400">
<s:layout>
    <s:VerticalLayout/>
</s:layout>
<fx:Script>
    <![CDATA[
        import mx.events.CollectionEvent;
        import mx.events.FlexEvent;

        protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
        {
            refreshTree();    
        }

        private function refreshTree():void{
            gc.refresh();
            myTree.dataProvider = gc.getRoot();
        }

    ]]>
</fx:Script>
<fx:Declarations>

    <s:ArrayCollection id="arcData">
            <local:TestItem year="2009" month="Jan" label="Jan Report 1"/>
            <local:TestItem year="2009" month="Jan" label="Jan Report 2"/>
            <local:TestItem year="2009" month="July" label="July Report 1"/>
            <local:TestItem year="2009" month="July" label="July Report 2"/>
            <local:TestItem year="2010" month="Feb" label="Feb Report 1"/>
            <local:TestItem year="2010" month="Feb" label="Feb Report 2"/>
            <local:TestItem year="2010" month="Dec" label="Dec Report 1"/>
            <local:TestItem year="2010" month="Dec" label="Dec Report 2"/>
    </s:ArrayCollection>

    <mx:GroupingCollection2 id="gc" source="{arcData}">
        <mx:grouping>
            <mx:Grouping>
                <mx:fields>
                    <mx:GroupingField name="year"/>
                    <mx:GroupingField name="month"/>    
                </mx:fields>
            </mx:Grouping>
        </mx:grouping>
    </mx:GroupingCollection2>
</fx:Declarations>

<mx:Tree id="myTree" dataProvider="{gc.getRoot()}" labelField="GroupLabel" width="100%" height="100%">

</mx:Tree>

</s:Application>

Comments

[jtorrance]

I tried that but that only lists the items. I tried setting labelField="group" but that only listed the groups (didn't make them into clickable nodes with the items as children). I will check out the links you posted.

[bedwyr]

One thing to keep in mind, you don't have a nested object structure (i.e. objects embedded w/in objects). As a result, your "tree" will look flat because it only has a single level. The examples I posted show how to nest objects w/in objects so you get the hierarchical view.

[jtorrance]

Do they really show how to generate a hierarchical structure from flat/grouped data? The first link just seems to (artificially) add "children" nodes to the array, while the second starts off by constructing a hierarchically structured ArrayCollection. Am I missing something?