3 Replies Latest reply on Aug 20, 2007 6:48 PM by ntsiii

    problem loading xml data to tree control

    vtxr1300 Level 1
      I have an xml document that looks like this.

      <trainingtopics>
      <topic name="Getting Started">
      <topic name="Netiquette - Four Pillars" />
      <topic name="Who Works What?" />
      <topic name="The Benefits of a Core Group (How to Build)" />
      <topic name="Regional and Virtual Core Groups" />
      <topic name="How to create Your Profile" />
      <topic name="Coding System" />
      <topic name="Best Practices" />
      </topic>
      <topic name="How Tos">
      <topic name="Partner Posting" />
      <topic name="Adding an RDS" />
      <topic name="Adding a JDS" />
      <topic name="Signature File Generator" />
      <topic name="Active Update Reminders" />
      </topic>
      <topic name="Web Site">
      <topic name="Web Site Settings" />
      <topic name="Notification of Nomination from Web Site" />
      </topic>
      </trainingtopics>

      I'm trying to load it into a tree control but when it loads, I just get 3 [object Object] items in the tree. Here's my mxml. I've tried following some tutorials but I'm not sure what I'm doing wrong. Can anyone help? Thanks.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" width="650" height="525" creationComplete="hsTOC.send()">
      <mx:Panel width="100%" height="100%" layout="absolute" x="0" y="0">
      <mx:TabNavigator x="0" y="0" width="100%" height="100%">
      <mx:Canvas label="Table of Contents" width="100%" height="100%">
      <mx:HDividedBox id="hdbContents" width="100%" height="100%">
      <mx:Canvas id="cTOC" width="100%" height="100%">
      <mx:Tree x="0" y="0" width="100%" height="100%"
      dataProvider="{hsTOC.lastResult.trainingtopics.topic}"
      labelField="@name" showRoot="false" id="trTopics"></mx:Tree>
      </mx:Canvas>
      <mx:Canvas id="cDesc" width="100%" height="100%">
      <mx:Label x="10" y="10" id="lblTitle"/>
      <mx:Label x="10" y="36" width="289" height="406" id="lblDescription" alpha="1.0"/>

      </mx:Canvas>
      </mx:HDividedBox>
      </mx:Canvas>
      <mx:Canvas label="Video" width="100%" height="100%">
      <mx:VideoDisplay x="10" y="10" width="600" height="400"/>
      <mx:Button x="559" y="418" label="Play"/>
      </mx:Canvas>
      </mx:TabNavigator>
      </mx:Panel>
      <mx:HTTPService id="hsTOC" url="data/topics.xml"></mx:HTTPService>
      </mx:Application>
        • 1. Re: problem loading xml data to tree control
          ntsiii Level 3
          lastResult is already at the root node, any you are specifying showRoot="false" so try this:
          ... dataProvider="{hsTOC.lastResult}"

          My next suggestion is to never bind to lastResult. It is difficult to debug. Instead, bind to an instance variable, use a result handler function, and in that function, set the value of the instance variable. Some code snippets below. They deal with a DataGrid, but the basic pattern is the same for Tree.

          Tracy

          Sample code using HTTPService, e4x, handler function to populate a list item.
          Also shows usage of AsyncToken.

          The DataGrid tag:
          <mx:DataGrid id="dg" dataProvider="{_xlcMyListData}" .../>


          The HTTPService tag:
          <mx:HTTPService id="service" resultFormat="e4x" result="onResult(event)" fault="..../>

          Script block declaration:
          import mx.rpc.Events.ResultEvent;
          [Bindable]private var _xlcMyListData:XMLListCollection;

          Invoke send:
          var oRequest:Object = new Object();
          oRequest.Arg1 = "value1";
          var callToken:AsyncToken = service.send(oRequest);
          token.callId = "myQuery1";

          Result Handler function:
          private function onResult(oEvent:ResultEvent):void {
          var xmlResult:XML = XML(event.result); //converts result Object to XML. can also use "as" operator
          var xlMyListData:XMLList = xmlResult.myListData; //depends on xml format, is row data
          _xlcMyListData = new XMLListCollection(xlMyListData); //wrap the XMLList in a collection
          trace(_xlcMyListData.toXMLString()); //so you can see exactly how to specify dataField or build labelFunction
          var callToken:AsyncToken = oEvent.token;
          var sCallId = callToken.callId; //"myQuery1"
          switch(sCallId) {
          case "myQuery1":
          doQuery2();
          break;
          ...
          }
          }//onResult
          • 2. Re: problem loading xml data to tree control
            vtxr1300 Level 1
            Thanks for the reply. I’m very new to flex so I’m a bit confused on what your code is doing and I was hoping you could answer a couple of questions.

            var oRequest:Object = new Object();
            oRequest.Arg1 = "value1";
            var callToken:AsyncToken = service.send(oRequest);
            token.callId = "myQuery1";

            What is Arg1 for the oRequest object? And what is the myQuery1?
            When I try to run the application, it gives me the error “ Access of undefined property…” Pointing to both oRequest.Arg1 and token.callId. I looked up the AsyncToken class and I couldn’t find a property called callId, so I’m not sure what that is.

            In trying to debug my original code I would place some breakpoints and found that the tree did in fact have the correct xml but for some reason it wasn’t displaying it but instead just giving me the 3 [object Object] nodes in the tree. I was able to get it to work when I pulled the xml into the mxml application as shown below. But I have to be able to read from a file so I can’t include the xml in the mxml document and I’m not sure what else to do to make it work. I appreciate any assistance you could offer. Thanks.


            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
            layout="absolute" width="650" height="525"
            creationComplete="hsTOC.send();">

            <mx:XMLListCollection id="xlcTopics" source="{xlTopics}"/>
            <mx:XMLList id="xlTopics">

            <trainingtopics>
            <topic name="Getting Started">
            <topic name="Netiquette - Four Pillars" />
            <topic name="Who Works What?" />
            <topic name="The Benefits of a Core Group (How to Build)" />
            <topic name="Regional and Virtual Core Groups" />
            <topic name="How to create Your Profile" />
            <topic name="Coding System" />
            <topic name="Best Practices" />
            </topic>
            <topic name="How Tos">
            <topic name="Partner Posting" />
            <topic name="Adding an RDS" />
            <topic name="Adding a JDS" />
            <topic name="Signature File Generator" />
            <topic name="Active Update Reminders" />
            </topic>
            <topic name="Web Site">
            <topic name="Web Site Settings" />
            <topic name="Notification of Nomination from Web Site" />
            </topic>
            </trainingtopics>



            </mx:XMLList>
            <mx:Script>
            <![CDATA[
            import mx.binding.utils.ChangeWatcher;
            import mx.rpc.events.ResultEvent;
            import mx.collections.ArrayCollection;

            [Bindable]
            private var aTopics:ArrayCollection;


            private function LoadArray(event:ResultEvent):void{
            aTopics = event.result.trainingtopics.topic;
            }

            private function LoadTopicInfo(event:Event):void{
            lblTitle.text = event.currentTarget.selectedItem.@topicname;
            }
            ]]>
            </mx:Script>

            <mx:Panel width="100%" height="100%" layout="absolute" x="0" y="0">
            <mx:TabNavigator x="0" y="0" width="100%" height="100%">
            <mx:Canvas label="Table of Contents" width="100%" height="100%">
            <mx:HDividedBox id="hdbContents" width="100%" height="100%">
            <mx:Canvas id="cTOC" width="100%" height="100%">
            <mx:Tree x="0" y="0" width="100%" height="100%" dataProvider="{xlcTopics}"
            labelField="@topicname" showRoot="false" id="trTopics" change="LoadTopicInfo(event)"></mx:Tree>
            </mx:Canvas>

            <mx:Canvas id="cDesc" width="100%" height="100%">
            <mx:Label x="10" y="10" id="lblTitle"/>
            <mx:Label x="10" y="36" width="289" height="406" id="lblDescription" />

            </mx:Canvas>
            </mx:HDividedBox>
            </mx:Canvas>
            <mx:Canvas label="Video" width="100%" height="100%">
            <mx:VideoDisplay x="10" y="10" width="600" height="400"/>
            <mx:Button x="559" y="418" label="Play"/>
            </mx:Canvas>
            </mx:TabNavigator>
            </mx:Panel>

            <mx:HTTPService id="hsTOC"
            url="data/topics.xml"
            result="LoadArray(event)" />
            </mx:Application>

            • 3. Re: problem loading xml data to tree control
              ntsiii Level 3
              Those properties are just made up for the example. Both the request object and the AsyncToken are dynamic objects, so you can add whatever properties to them you wish at run time.

              In the case of the Request object, the server would receive a name=value pair from the Flex app: arg1=value1.

              In case of the AsyncToken, I crate the property callid, and assign it a string that identifies the data call, like "Query1". So, in the result handler, I can know which data call the current result belongs to and can act accordingly.

              I don't know why you would get errors, I don't. I typically run with strict type checking turned off, maybe that has something to do with it.

              If your display works with hard-coded data, then you are almost there. Debug to see what is the difference between the hard coded data and the data brought in by the HTTPService call.

              You are not using e4x. That means yo are using "object" You do not want that. Change the resultFormat, do away with ArrayCollection, use only XML, XMLList, and XMLListCollection. use trace(xml.toXMLString()) to see what you have.

              Tracy