4 Replies Latest reply on Dec 14, 2012 12:50 AM by Supreet R

    Construct mx:tree using xml dataprovider

    Supreet R

      Dear All,

           How to construct the tree structure using following xml as dataprovider to mx:tree ?

           The xml is as follows,

       

      <fx:XML id="employees">

           <employees>

               <employee ssn="123-123-1234">

                   <name first="John" last="Doe"/>

                   <address>

                       <street>11 Main St.</street>

                       <city>San Francisco</city>

                       <state>CA</state>

                       <zip>98765</zip>

                   </address>

               </employee>

               <employee ssn="789-789-7890">

                   <name first="Mary" last="Roe"/>

                   <address>

                       <street>99 Broad St.</street>

                       <city>Newton</city>

                       <state>MA</state>

                       <zip>01234</zip>

                   </address>

               </employee>

           </employees>

      </fx:XML>

        • 1. Re: Construct mx:tree using xml dataprovider
          Lee Burrows Level 4

          you need to pass an xmlist (rather than xml) to the tree.

           

          from my distant memory, something like this should work:

           

          tree.dataProvider = new XMLList(employees.toString());

          tree.labelField = "@ssn";

          • 2. Re: Construct mx:tree using xml dataprovider
            Supreet R Level 1

            Thank you for the reply.

             

            My code is as follows,

            <?xml version="1.0" encoding="utf-8"?>

            <s:WindowedApplication 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:Declarations>   

                    <fx:XML id="employees">

                        <employees>

                            <employee ssn="123-123-1234">

                                <name first="John" last="Doe"/>

                                <address>

                                    <street>11 Main St.</street>

                                    <city>San Francisco</city>

                                    <state>CA</state>

                                    <zip>98765</zip>

                                </address>

                            </employee>

                            <employee ssn="789-789-7890">

                                <name first="Mary" last="Roe"/>

                                <address>

                                    <street>99 Broad St.</street>

                                    <city>Newton</city>

                                    <state>MA</state>

                                    <zip>01234</zip>

                                </address>

                            </employee>

                        </employees>

                    </fx:XML>       

                </fx:Declarations>

               

                <fx:Script>

                    <![CDATA[

                        import mx.collections.IList;

                        import mx.events.FlexEvent;

                                   

                        protected function tree_initializeHandler(event:FlexEvent):void

                        {

                            tree.dataProvider = new XMLList(employees);

                            tree.labelFunction = getTreeLabel;

                        }

                       

                        private function getTreeLabel(item:XML):String

                        {

                            var lbl:String;

                            switch(item.localName())

                            {

                                case "employee":

                                {

                                    lbl = item.@ssn;

                                    break;

                                }

                                case "name":

                                {

                                    lbl = item.@first+" "+item.@last;

                                    break;

                                }

                                case "address":

                                {

                                    lbl = item.name();

                                    break;

                                }

                                case "street":

                                case "city":

                                case "state":

                                case "zip":

                                {

                                    lbl = item.text();

                                    break;

                                }

                               

                                default:

                                {

                                    lbl = item.name();

                                    break;

                                }

                            }

                            return lbl;

                        }

                    ]]>

                </fx:Script>

               

                <mx:Tree id="tree" width="300" height="100%"

                         initialize="tree_initializeHandler(event)" />

             

            </s:WindowedApplication>

             

            The output of the above code is

                           TreeGetByTag_2012-12-13_10-40-28.png

            The address of the employee is not being displayed properly, How to display it ?

            Is this the right way to implement tree labelFunction ?

            • 3. Re: Construct mx:tree using xml dataprovider
              Kanchan Ladwani Level 2

              Hi Supreet,

               

              I see above XML is not correct to display what you want to display

              Beacuse <street>11 Main St.</street> considered as parent node.

               

              as per my understanding from above code ,You want first street should be displayed, and in leaf node street name should be there(child item).

               

              you can modify your existing code as,

              1.XML

              <employee ssn="123-123-1234">

                                 

                                  <name first="John" last="Doe"/>

                                 

                                  <address>

                                     

                                      <street str= "street">

                                         

                                          <streetname street="11 Main St."/>

                                      </street>   

                                     

                                      <city>San Francisco</city>

                                     

                                      <state>CA</state>

                                     

                                      <zip>98765</zip>

                                     

                                  </address>

                                 

                              </employee>

              2.getTreeLabel method

              case "address":

                                     

                                  {

                                     

                                      lbl = item.name();

                                     

                                      break;

                                     

                                  }

                                     

                                  case "street":

                                  {

                                      lbl = item.@str;

                                      break;

                                  }

                                  case "streetname":

                                  {

                                      lbl = item.@street;

                                      break;

                                  }

                                     

                                  case "city":

               

              Thanks,

              Kanchan Ladwani | kladwani@infocepts.com

              • 4. Re: Construct mx:tree using xml dataprovider
                Supreet R Level 1

                Thank you for the reply.

                 

                Supreet R