10 Replies Latest reply on Oct 27, 2010 3:54 PM by travr

    Tree component in Flex 4

    travr Level 1

      Are there any known issues with the <mx:Tree component in Flex 4?

       

      We have upgraded from Flex 3 builder to Flex 4 builder. Everything works except any where we have used a tree component the data is no longer showing. Has there been a change in how to populate the Tree component? We populate the tree by setting the dataProvider with an ArrayCollection.

        • 1. Re: Tree component in Flex 4
          Peter deHaan Level 4

          @travr,

           

          I'm not aware of any big known issues in mx:Tree between Flex 3.x and Flex 4.x. What problems are you seeing, and can you reproduce the issue with a simple test case (if so, please post the simple test case here and we can take a look).

           

          This works in Flex 3.5:

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
          
              <mx:ApplicationControlBar dock="true">
                  <mx:Button id="sdkVer" initialize="sdkVer.label = mx_internal::VERSION;" click="System.setClipboard(sdkVer.label);" />
              </mx:ApplicationControlBar>
          
              <mx:Tree id="tr" labelField="name" width="200" x="20" y="20">
                  <mx:dataProvider>
                      <mx:ArrayCollection>
                          <mx:Object name="1. One">
                              <mx:children>
                                  <mx:Object name="1.1 One" />
                                  <mx:Object name="1.2 Two" />
                              </mx:children>
                          </mx:Object>
                          <mx:Object name="2. Two">
                              <mx:children>
                                  <mx:Object name="2.1 One" />
                              </mx:children>
                          </mx:Object>
                      </mx:ArrayCollection>
                  </mx:dataProvider>
              </mx:Tree>
          
          </mx:Application>
          

           

           

          And this seems to work in Flex 4.5/Hero beta:

           

          <?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">
              <s:controlBarContent>
                  <s:Button id="sdkVer" initialize="sdkVer.label = mx_internal::VERSION;" click="System.setClipboard(sdkVer.label);" />
              </s:controlBarContent>
          
              <mx:Tree id="tr" labelField="name" width="200" x="20" y="20">
                  <mx:dataProvider>
                      <s:ArrayCollection>
                          <fx:Object name="1. One">
                              <fx:children>
                                  <fx:Object name="1.1 One" />
                                  <fx:Object name="1.2 Two" />
                              </fx:children>
                          </fx:Object>
                          <fx:Object name="2. Two">
                              <fx:children>
                                  <fx:Object name="2.1 One" />
                              </fx:children>
                          </fx:Object>
                      </s:ArrayCollection>
                  </mx:dataProvider>
              </mx:Tree>
          
          </s:Application>
          
          Peter

          • 2. Re: Tree component in Flex 4
            Devtron Level 3

            I bind my Tree controls to custom XML, which is parsed out from an ArrayCollection.

             

            I have checkboxes in my Tree control, and custom user selection & node expansion through mouse single-clicking.

             

            I bind my Tree controls to a XMLList object, which is produced from data in an ArrayCollection object.

             

            I do not know anything about FLEX 3, as I've only started out in 4.

             

            What does your tree MXML look like?

            • 3. Re: Tree component in Flex 4
              travr Level 1

              We are not using XML.

               

              We are using an ArrayCollection of custom AS objects. Here is the documentation in Flex 3 using objects in hierarchical components (flex 3 documentation here)

               

               

              Objects

              can be any set of nested Objects or Object subclasses (including Arrays or ArrayCollection objects) that have a structure where the children of a node are in a children field.

               

               

              Our custom objects follow the convention above. This works effortlessly in Flex 3. In flex 4 it does not appear to work.

               

              I will make sample app to demonstrate and post soon, working out an issue with elcipse at the moment

              • 4. Re: Tree component in Flex 4
                Devtron Level 3

                Yeah, I am not suggesting to use XML. I am simply stating that I use FLEX 4, Tree Controls and XML and it works fine!

                 

                Here is my function that loops through an ArrayCollection and produces my tree Data Provider (getTreePremiseXML function not provided here):

                 

                            private function buildTreeStructure(treeAC:ArrayCollection):XMLList {
                               
                                var XMLStr:String = "<accounts>\n";
                               
                                for each(var XMLNodeObj:Object in treeAC) {
                                   
                                    //check to see if Account already exists, if not write it
                                    if (XMLStr.search("AccountOID=\"" +  XMLNodeObj.AccountOID  ) == -1 ) {
                                        XMLStr += "<account label=\"" +  XMLNodeObj.AccountName + "\" AccountID=\"" +  XMLNodeObj.AccountID + "\" checked=\"0\"> \n"
                                       
                                        //get premises/locations
                                        XMLStr += getTreePremiseXML(XMLNodeObj.AccountOID ,treeAC);
                                        XMLStr += "</account> \n"
                                       
                                    }
                                   
                                }
                               
                                XMLStr += "</accounts>"
                                return new XMLList(XMLStr);
                               
                            }

                 

                 

                The XML gets bound to the Tree control, which makes use of checkboxes...

                treeControl--accountexplorer.png

                 

                I dont know if that can help you any, but Tree controls and XMLLists work great in FLEX 4. This was one of the easier things I have found to accomplish in my 3 months of working in FLEX 4.

                 

                I hope this can help somebody, somewhere, someday.

                • 5. Re: Tree component in Flex 4
                  travr Level 1

                  maybe I should be more specific with my question. Is what I want to know is if populating the Tree component via Objects as documented in Flex 3 is still supported in Flex 4.

                  • 6. Re: Tree component in Flex 4
                    Devtron Level 3

                    Peter just showed you that you can still use Objects in MXML for FLEX 4.5.

                     

                    What other objects are you talking about?

                    • 7. Re: Tree component in Flex 4
                      travr Level 1

                      We are creating the objects in actionscript, not MXML.

                      • 8. Re: Tree component in Flex 4
                        Devtron Level 3

                        ^ Cool. What do those look like? Do you have some code we can look at?

                        • 9. Re: Tree component in Flex 4
                          Peter deHaan Level 4

                          This works for me:

                           

                          <?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">
                          
                              <fx:Script>
                                  <![CDATA[
                                      import mx.collections.ArrayCollection;
                          
                                      protected function button1_clickHandler(evt:MouseEvent):void {
                                          var obj1:Object = {name:"1. One", children:[{name:"1.1 One"}, {name:"1.2 Two"}]};
                                          var obj2:Object = {name:"2. Two", children:[{name:"2.1 One"}]};
                                          var ac:ArrayCollection = new ArrayCollection([obj1, obj2]);
                                          tr.dataProvider = ac;
                                      }
                                  ]]>
                              </fx:Script>
                          
                              <s:controlBarContent>
                                  <s:Button label="set data provider" click="button1_clickHandler(event);" />
                                  <s:Button id="sdkVer" initialize="sdkVer.label = mx_internal::VERSION;" click="System.setClipboard(sdkVer.label);" />
                              </s:controlBarContent>
                          
                              <mx:Tree id="tr" labelField="name" width="200" x="20" y="20" />
                          
                          </s:Application>
                          
                          

                           

                          Peter

                          1 person found this helpful
                          • 10. Re: Tree component in Flex 4
                            travr Level 1

                            Peter thanks for the example. I came to the same conclusion and found the issue is not the Tree but a binding problem in Flex4. I have created a small sample but will post in new thread since the original question has been answered.

                             

                            Thanks