6 Replies Latest reply on Feb 12, 2010 2:42 PM by DMan1965

    XML for a Tree Control

    DMan1965

      I am trying to create a Tree control for my application that lists account reps as branches with their clients as leaves below them.

       

      I created the xml below from a CGI script, but when the tree renders it the account reps are leaves and the clients don't show up at all. There is evidently something basic I am missing. Can anyone tell me what xml to do what I am shooting for should look like?

       

      <Result>
      <node>
        <label>Bill Smith</label>
        <data>AM|01</data>
          <node>
            <label>125 Company</label>
            <data>COMPID|2177</data>
          </node>
          <node>
            <label>ABC Manufacturing</label>
            <data>COMPID|2167</data>
          </node>
          <node>
            <label>Test Company</label>
            <data>COMPID|2172</data>
          </node>
      </node>
      <node>
        <label>Jane Jones</label>
        <data>AM|01</data>
          <node>
            <label>126 Company</label>
            <data>COMPID|2100</data>
          </node>
          <node>
            <label>XYZ Service Company</label>
            <data>COMPID|2101</data>
          </node>
          <node>
            <label>Test Company 2</label>
            <data>COMPID|2102</data>
          </node>
      </node>
      </Result>

        • 1. Re: XML for a Tree Control
          Flex harUI Adobe Employee

          That should be ok.  Now how did you assign that data to the Tree?

          • 2. Re: XML for a Tree Control
            DMan1965 Level 1

            At this point it is just a test application so the code is pretty small. For retrieving the data, I pretty much copied code from one of the examples. I created an HTTP request since I plan to return results from a CGI interface rather than a web service. My data provider is derived from the lastResult property of the HTTPService "userRequest".

             

            <?xml version="1.0"?>
            <!-- containers\layouts\HDivBoxSimple.mxml -->
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" creationComplete="send_data()">

             

                <mx:Script>
                    <![CDATA[
                        private function send_data():void {
                            userRequest.send();
                        }
                    ]]>
                </mx:Script>

             

             

             

                <mx:TitleWindow width="100%" height="100%" layout="absolute" title="Task Management" fontFamily="Verdana" fontSize="12" backgroundColor="#F0F0F0">
                    <mx:HDividedBox x="0" y="30" width="100%" height="95%" >
                        <mx:Tree width="15%" height="100%" id="treeCompList" dataProvider="{userRequest.lastResult.Result.node}" enabled="true"></mx:Tree>
                        <mx:TileList width="60%" height="100%"></mx:TileList>
                        <mx:DateChooser width="180"/>
                    </mx:HDividedBox>
                    <mx:Canvas x="0" y="-10" width="390" height="35">
                        <mx:Button x="4" y="10" label="Reports"   cornerRadius="0"/>
                        <mx:Button x="80" y="10" label="Due Today"   cornerRadius="0"/>
                        <mx:Button x="174" y="10" label="Past Due"   cornerRadius="0"/>
                        <mx:Button x="258" y="10" label="Events"   cornerRadius="0"/>
                    </mx:Canvas>
                </mx:TitleWindow>

             


                <mx:HTTPService id="userRequest" url="http://192.168.1.20/cgiGroupFlex.exe" useProxy="false" method="POST">
                    <mx:request xmlns="">
                        <FUNCTION>GetAMCompList</FUNCTION>
                        <FORMAT>TREE</FORMAT>
                    </mx:request>
                </mx:HTTPService>

             

            </mx:Application>

            • 3. Re: XML for a Tree Control
              kkc_mca Level 2

              Hi,

               

              Here is the code to load the data and display int Tree control

              In the below example I am loading data from the xml file placed in data folder

              The resultformat property of the xml is e4x so that directly we can access the child nodes-'node' in the parent node-'Result'

               

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
                  initialize="getdata.send()" width="400" height="400" pageTitle="Tree Example"
                  paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0">
                 
                  <mx:Script>
                      <![CDATA[
                          import mx.rpc.events.ResultEvent;
                         
                          [Bindable]private var treedata:XML;
                          private function receiveData(e:ResultEvent):void
                          {
                              treedata=e.result as XML;
                              cursorManager.removeBusyCursor();
                          }
                      ]]>
                  </mx:Script>
                 
                  <mx:HTTPService id="getdata" url="data/treexml.xml" resultFormat="e4x" method="GET" result="receiveData(event)" showBusyCursor="true"/>
                  <mx:Panel width="100%" height="100%" title="Tree Example">
                  <mx:Tree dataProvider="{treedata.node}" width="100%" height="100%"/>
                  </mx:Panel>
              </mx:Application>

               

              I hope this post answers your question or helps. please mark it as such .

              1 person found this helpful
              • 4. Re: XML for a Tree Control
                DMan1965 Level 1

                Thanks for the response. That got me a lot closer to where I want to be I think.

                 

                This is the result that I am getting which I am sure is correct based on the XML, but it isn't what I am wanting.

                 

                I am wanting for Bill Smith and Jane Jones to be displayed as folders and the client names to be displayed only as leaves. Do I need to construct my XML differently to accomplish that? One of the examples I looked at had label and data properties for each element so I had assumed I would include tags for those, a label to be displayed in the tree and a data entry that would be returned when the item was clicked in the tree.

                • 5. Re: XML for a Tree Control
                  Flex harUI Adobe Employee

                  If you can change the xml to look like this:

                   

                   

                  You will get what you want, but you can also create a custom

                  ITreeDataDescriptor to work with the data as you have it.

                  • 6. Re: XML for a Tree Control
                    DMan1965 Level 1

                    I have figured out what the issue was. I had to add a labelFunction to get it working the way I wanted, but it is working now.

                     

                    Thanks for the help.