12 Replies Latest reply on Jun 3, 2009 8:15 AM by Rajesh Subbiah

    Dynamically Loading xml in tree  control

    Rajesh Subbiah Level 1

      Hi I am new to flex i need to load the following xml into tree

       

      <?xml  version="1.0" encoding="utf-8" ?>
      - <catalog>
      - <product>
      <name>laptop3</name>
      <price>"1256"</price>
      <qty>"45"</qty>
      </product>
      - <product>
      <name>"CAR"</name>
      <price>"45000"</price>
      <qty>"7"</qty>
      </product>
      - <product>
      <name>"Laptop2"</name>
      <price>"450011"</price>
      <qty>"7022888"</qty>
      </product>
      - <product>
      <name>"Laptop"</name>
      <price>"45000"</price>
      <qty>"70"</qty>
      </product>
      - <product>
      <name>"Laptop2"</name>
      <price>"45000"</price>
      <qty>"7022"</qty>
      </product>
      - <product>
      <name>"Laptop2"</name>
      <price>"45000"</price>
      <qty>"7022888"</qty>
      </product>
      </catalog>

      I am unable to load the exact xml structure ...
      Please help me

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
         
          <mx:HTTPService id="srv" url="http://localhost:8080/SampleWebApp/test.jsp"/>
          <mx:DataGrid dataProvider="{srv.lastResult.catalog.product}" width="100%" height="100%"/>
          <mx:Tree labelField="@val" width="201" height="100%" showRoot="true"
          showInAutomationHierarchy="true" id="machineTree" dataProvider="{srv.lastResult.catalog.product}"></mx:Tree> 
          <mx:Button label="Get Data" click="srv.send()"/>
         
      </mx:Application>

       

      I am able to load into data grid , but not in tree help me

        • 1. Re: Dynamically Loading xml in tree  control
          kolban1

          Rajesh,

          Have a look at the following page from the Flex documentation:

           

          http://livedocs.adobe.com/flex/3/html/dpcontrols_8.html#397087

           

          It contains a number of examples of using XML content as the based for what is displayed in the tree.  I am going to suspect that the biggest problem you will face is what should the label be for the tree node or lead?

           

          When you see a tree in Flex, each node and leaf in the tree has "label".  This is the text to the right of the icon.  By default, the value of this text is retrieved from the XML element from an attribute called "label".  Looking at your XML fragment, your data does not have a 'label" attribute.  You can resolve this by providing a function  that is a "labelFunction".   This function will be passed the XML element who's label is desired and the function then returns a string for that label.  It would then be up to you to code that function.

           

          Go to the URL listed above and search for "treeLabel" for an example.

           

          Hope this helps.

           

          Neil

          • 2. Re: Dynamically Loading xml in tree  control
            Rajesh Subbiah Level 1

            Neil

             

                   I saw your link .

                   I want to load the xml from HttpService in Tree Format.

                   The problem i am facing is loading the child nodes in the tree.

                   Can please help me debug this thing

            • 3. Re: Dynamically Loading xml in tree  control
              _Natasha_ Level 4

              Hi,

              If you always get xml from your service it's better to set

              <mx:HTTPService id="srv" resultFormat="e4x" url="http://localhost:8080/SampleWebApp/test.jsp"/> 

               

              In your tree you try to show attribute with name val but there is no such attribute in your data.

              <mx:Tree labelField="@val" width="201" height="100%" showRoot="true"
                  showInAutomationHierarchy="true" id="machineTree" dataProvider="{srv.lastResult.catalog.product}"></mx:Tree>

              Try to set name

              <mx:Tree labelField="name" width="201" height="100%" showRoot="true"
                  showInAutomationHierarchy="true" id="machineTree" dataProvider="{srv.lastResult.catalog.product}"></mx:Tree>

               

              Also you should understand that elements name, price and qty are child nodes for product and will be shown as a child nodes. If you don't want to fix it, you can change them form child nodes to attributes and in tree set labelField="@name" to see name of the product as a label.

              Also you can set labelFunction to get labels for the tree. For example,

              myLabelFunction(item:Object):String
              {
                   // choose one
                   return XML(item).text().toXMLString(); // to see all text in nodes
                   return XML(item).localName().toString(); // to see nodes names }

              1 person found this helpful
              • 4. Re: Dynamically Loading xml in tree  control
                Rajesh Subbiah Level 1

                Hi

                My XML is fixed i cannot alter it.

                I modified my code and still i am not getting exact solution

                wat is wrong?

                And when i used resultFormat="E4X" i am noting getting vaues in data grid also .

                Can you help me please ?

                 

                 

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

                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
                <mx:Script>
                    <![CDATA[
                    import mx.collections.XMLListCollection;
                    public function treeLabel(item:Object):String
                            {

                 

                               return XML(item).text().toXMLString()
                            }

                    ]]>
                </mx:Script>
                <mx:HTTPService id="srv"  url="http://localhost:8080/SampleWebApp/test.jsp"/>

                 

                  <mx:DataGrid  dataProvider="{srv.lastResult.catalog.product}" width="100%" height="100%"/>

                      
                <mx:Tree labelFunction="treeLabel" width="201" height="100%" showRoot="true"
                    showInAutomationHierarchy="true" id="machineTree" dataProvider="{srv.lastResult.catalog.product}">
                   
                   
                </mx:Tree>  

                <mx:Button label="Get Data" click="srv.send()"/>
                   
                </mx:Application>

                • 5. Re: Dynamically Loading xml in tree  control
                  _Natasha_ Level 4

                  Hi,

                  1. simple function - just

                  return "node"; // to see all nodes

                  2. check data binding

                  <mx:HTTPService id="srv"  url="http://localhost:8080/SampleWebApp/test.jsp" result="machineTree.dataProvider = machineTree.dataProvider"/>

                  3. Do you see your tree? DataGrid has 100% width and 100% height. Just check.

                  • 6. Re: Dynamically Loading xml in tree  control
                    Rajesh Subbiah Level 1

                    Hi

                    Still i am unable to get it

                    Can you say How to Explore a complex XML file into tree  ?

                    I have to convert a complex xml into tree

                    can you provide a example

                    • 7. Re: Dynamically Loading xml in tree  control
                      _Natasha_ Level 4

                      The same as you have but with embeded XML.

                       

                      <mx:XML id="tstData">

                      <catalog>

                      <product>

                      <name>laptop3</name>

                      <price>"1256"</price>

                      <qty>"45"</qty>

                      </product>

                      <product>

                      <name>"CAR"</name>

                      <price>"45000"</price>

                      <qty>"7"</qty>

                      </product>

                      <product>

                      <name>"Laptop2"</name>

                      <price>"450011"</price>

                      <qty>"7022888"</qty>

                      </product>

                      <product>

                      <name>"Laptop"</name>

                      <price>"45000"</price>

                      <qty>"70"</qty>

                      </product>

                      <product>

                      <name>"Laptop2"</name>

                      <price>"45000"</price>

                      <qty>"7022"</qty>

                      </product>

                      <product>

                      <name>"Laptop2"</name>

                      <price>"45000"</price>

                      <qty>"7022888"</qty>

                      </product>

                      </catalog>

                      </mx:XML>

                       

                      <mx:Tree labelFunction="treeLabel" width="201" height="100%" showRoot="true"

                       

                          showInAutomationHierarchy="true" id="machineTree" dataProvider="{tstData.product}">

                       

                       

                       

                      But it doesn't matter.

                       

                      try to debug. Add this

                                     [Bindable]

                                  private var treeData:XMLListCollection;

                                  public function onResult(event:ResultEvent):void

                                  {

                                  treeData = new XMLListCollection(XML(event.result).product); // debug here to see what you get and what is a type for this data

                                  }

                                <mx:HTTPService id="srv"  url="http://localhost:8080/SampleWebApp/test.jsp" result="onResult(event)"/>

                      And treeData as a dataSource for Tree.

                      • 8. Re: Dynamically Loading xml in tree  control
                        Rajesh Subbiah Level 1

                        Hi

                        I have tried your suggestion

                        With embedded XML i am able to get the tree structure but in the Http service i am not getting it

                        In the tree control i am getting 6 nodes without any labels

                        • 9. Re: Dynamically Loading xml in tree  control
                          _Natasha_ Level 4

                          What type of data have you received on result handler of HTTPService?

                          • 10. Re: Dynamically Loading xml in tree  control
                            Rajesh Subbiah Level 1

                            I am getting an XML and i am storing it in a XML variable only ...

                            Another thing when i use E4X format i am not getting any thing.

                            • 11. Re: Dynamically Loading xml in tree  control
                              Rajesh Subbiah Level 1

                              I got the complex XML Structure in Tree Control

                              In Http Service i used the resultFormat has "xml" .

                              Thanks