3 Replies Latest reply on Jun 3, 2009 3:45 PM by Jeremy Savoy

    Flex 4 tree component - how to populate using an array?

    Jeremy Savoy

      It's unclear how to populate a tree control using an array as the dataprovider like you could in Flex 3.

       

      Here is a Flex 3 example. Even when I replace the mx:Object tags with fx:Object tags things don't work ... there seems to be no mx:children tag ...

       

      http://blog.flexexamples.com/2007/12/03/using-an-array-as-a-data-provider-in-a-flex-tree-c ontrol/

       

      Please advise.

        • 1. Re: Flex 4 tree component - how to populate using an array?
          CoreyRLucier Adobe Employee

          Haven't actually tried, but property tags need to match namespace of its parent, did you try fx:children ?  children is just a dynamic property on Object right?

           

          Regards,

           

          Corey

          1 person found this helpful
          • 2. Re: Flex 4 tree component - how to populate using an array?
            Peter deHaan Level 4

            This should do it:

             

            <?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/halo">

             

                <fx:Script>
                    <![CDATA[
                        private function tree_labelFunc(item:Object):String {
                            var suffix:String = "";
                            if (tree.dataDescriptor.hasChildren(item)) {
                                suffix = " (" + item.children.length + ")";
                            }
                            return item.name.toUpperCase() + suffix;
                        }
                    ]]>
                </fx:Script>

             

                <fx:Declarations>
                    <fx:Array id="arr">
                        <fx:Object name="One">
                            <fx:children>
                                <fx:Array>
                                    <fx:Object name="Two" />
                                    <fx:Object name="Three" />
                                    <fx:Object name="Four">
                                        <fx:children>
                                            <fx:Array>
                                                <fx:Object name="Five" />
                                                <fx:Object name="Six" />
                                            </fx:Array>
                                        </fx:children>
                                    </fx:Object>
                                    <fx:Object name="Seven">
                                        <fx:children>
                                            <fx:Array>
                                                <fx:Object name="Eight" />
                                            </fx:Array>
                                        </fx:children>
                                    </fx:Object>
                                    <fx:Object name="Nine" />
                                </fx:Array>
                            </fx:children>
                        </fx:Object>
                    </fx:Array>
                </fx:Declarations>

             

                <mx:Tree id="tree"
                        dataProvider="{arr}"
                        labelFunction="tree_labelFunc"
                        width="200"
                        horizontalCenter="0"
                        verticalCenter="0" />

             

            </s:Application>

             

             

            Peter

             

            Update: I also posted the updated Spark example at http://blog.flexexamples.com/2007/12/03/using-an-array-as-a-data-provider-in-a-flex-tree-c ontrol/.

            • 3. Re: Flex 4 tree component - how to populate using an array?
              Jeremy Savoy Level 1

              Worked like a charm -- thank you !!

               

              Overall I notice that apps compile much faster and they load faster and are more responsive since I've started playing with FB4 -- thank you Adobe !