4 Replies Latest reply on Sep 29, 2006 2:56 PM by ntsiii

    xml data binding question from a Flex 2 newbie

    Michael Regert
      I just attended the Flashforward Conference in Austin, and am starting to get hooked on Adobe Flex 2. I am a software developer, but am unfamiliar with ActionScript 3. I have a question about data binding. I understand the basics of how to get it to work, but am running into a problem with how to populate a tree component using data read in from an external XML file. Basically I want the tree to be populated by the name attribute of the <Object> tag in my XML which is in the format of nested objects:

      <Object name="xxx1">
      <Property name="yy11" value="zz11"/>
      <Property name="yy12" value="zz12"/>
      <Property name="yy13" value="zz13"/>
      </Object>
      <Object name="xxx2">
      <Property name="yy21" value="zz21"/>
      <Property name="yy22" value="zz22"/>
      <Object name="xxx3">
      <Property name="yy31" value="zz31"/>
      <Property name="yy32" value="zz32"/>
      <Property name="yy33" value="zz33"/>
      <Object name="xxx4">
      <Property name="yy41" value="zz41"/>
      <Property name="yy42" value="zz42"/>
      <Property name="yy43" value="zz43"/>
      <Property name="yy44" value="zz44"/>
      </Object>
      </Object>
      </Object>

      In addition, I'd like to display a grid which displays the properties associated with the object selected in the tree such that the propery name is the column header, and the values are displayed in the grid. Notice that the number of properties can vary per object, so I'd need the grid to be dynamic. I'm sure it's possible, but am a bit stumped.

      Here's my entire code so far, but I'm populating the tree and grid using sample data rather than the actual input data from the file:

      <!-- CODE STARTS HERE -->
      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
      <mx:Canvas width="100%" height="100%">
      <mx:HDividedBox bottom="0" top="0" left="0" right="0" >
      <mx:VBox id="treeArea" height="100%" minWidth="200">
      <mx:Canvas label="Tree View" width="100%" height="100%">
      <mx:Tree width="100%" height="100%" dataProvider="{treeData}" labelField="@label"></mx:Tree>
      </mx:Canvas>
      </mx:VBox>
      <mx:VBox id="dataArea" height="100%">
      <mx:Canvas label="Properties" width="100%" height="100%" backgroundColor="#ffffff">
      <mx:Text text="The Grid below is for demo purposes only. I have a small bug with populating the real grid" />
      <mx:DataGrid id="dg" rowCount="5" dataProvider="{employees}" left="10" right="10" top="40" bottom="0">
      <mx:columns>
      <mx:DataGridColumn dataField="name" headerText="Name"/>
      <mx:DataGridColumn dataField="phone" headerText="Phone"/>
      <mx:DataGridColumn dataField="email" headerText="Email"/>
      </mx:columns>
      </mx:DataGrid>
      </mx:Canvas>
      </mx:VBox>
      </mx:HDividedBox>
      </mx:Canvas>

      <mx:Script>
      <![CDATA[
      [Bindable]
      public var selectedNode:Object;

      // Event handler for the Tree control change event.
      public function treeChanged(event:Event):void {
      selectedNode=Tree(event.target).selectedItem;
      }
      ]]>
      </mx:Script>

      <mx:HTTPService id="inputXMLFile" url="data/xmlfile.xml" />
      <!-- Data comes in in the format of:
      <Object name="xxx1">
      <Property name="yy11" value="zz11"/>
      <Property name="yy12" value="zz12"/>
      <Property name="yy13" value="zz13"/>
      </Object>
      <Object name="xxx2">
      <Property name="yy21" value="zz21"/>
      <Property name="yy22" value="zz22"/>
      <Property name="yy23" value="zz23"/>
      <Object name="xxx3">
      <Property name="yy31" value="zz31"/>
      <Property name="yy32" value="zz32"/>
      <Property name="yy33" value="zz33"/>
      <Object name="xxx4">
      <Property name="yy41" value="zz41"/>
      <Property name="yy42" value="zz42"/>
      <Property name="yy43" value="zz43"/>
      </Object>
      </Object>
      </Object>
      -->

      <!-- This is all just dummy data to get the UI to work for now -->
      <mx:XMLList id="treeData">
      <node label="Mail Box">
      <node label="Inbox">
      <node label="Marketing"/>
      <node label="Product Management"/>
      <node label="Personal"/>
      </node>
      <node label="Outbox">
      <node label="Professional"/>
      <node label="Personal"/>
      </node>
      <node label="Spam"/>
      <node label="Sent"/>
      </node>
      </mx:XMLList>

      <mx:XMLList id="employees">
      <employee>
      <name>Christina Coenraets</name>
      <phone>555-219-2270</phone>
      <email>ccoenraets@fictitious.com</email>
      <active>true</active>
      </employee>
      <employee>
      <name>Joanne Wall</name>
      <phone>555-219-2012</phone>
      <email>jwall@fictitious.com</email>
      <active>true</active>
      </employee>
      <employee>
      <name>Maurice Smith</name>
      <phone>555-219-2012</phone>
      <email>maurice@fictitious.com</email>
      <active>false</active>
      </employee>
      <employee>
      <name>Mary Jones</name>
      <phone>555-219-2000</phone>
      <email>mjones@fictitious.com</email>
      <active>true</active>
      </employee>
      </mx:XMLList>

      </mx:Application>
        • 1. Re: xml data binding question from a Flex 2 newbie
          ntsiii Level 3
          Whay are you using a different formatted xml for the dummy than the real data. Using internal data for testing is a fine technique, but i needs to be the same format as the real data. Otherwise how will you know when you get the code right?

          I have an example that uses HTTPService to get an xml file from the server, uses a tree to display/edit the nodes, a dynamic dataGrid for displaying/editing the attributes, and HTTPService to send it back to the server. The backend is JSP, so to run that you'd need a J2EE web server like Tomcat, but the tree and property explorer might be useful.

          Semd me an email and I will send it to you directly.

          Tracy
          • 2. Re: xml data binding question from a Flex 2 newbie
            Michael Regert Level 1
            The reason I used a different data format was because that was all I could get working. Basically I'd like to know how to populate a tree using data in the format of:

            <Object name="xxx1">
            <Object name="xxx2">
            <Object name="xxx3">
            <Object name="xxx4"/>
            </Object>
            </Object>

            I would expect a tree to look like:
            - xxx1
            - xxx2
            -xxx3
            - xxx4

            What I don't understand is, does the Tree control key off of the keyword "node"? How do I tell it that my objects are nodes?
            • 3. Re: xml data binding question from a Flex 2 newbie
              Michael Regert Level 1
              The reason I used a different data format was because that was all I could get working. Basically I'd like to know how to populate a tree using data in the format of:

              <Object name="xxx1">
              <Object name="xxx2">
              <Object name="xxx3">
              <Object name="xxx4"/>
              </Object>
              </Object>

              I would expect a tree to look like:
              - xxx1
              - xxx2
              -xxx3
              - xxx4

              What I don't understand is, does the Tree control key off of the keyword "node"? How do I tell it that my objects are nodes?
              • 4. Re: xml data binding question from a Flex 2 newbie
                ntsiii Level 3
                By default the tree looks at each node object for a first-level property “label”. If you want to use some other property, specyify it in the tree’s labelField. If the string you want for the label is not a top-level property(first level of children for xml) , you need to use a labelFunction. labelFunction gets a reference to the dataProvider item/object/node that is currently being rendered. In it you can get at nested properties.

                I would be careful using the word Object. That is a classname and might cause problems.

                Tracy