Macromedia Flex Macromedia Flex
Bind to XML
  Home

Mar 08, 2007 - Bind to XML
You can bind directly to XML attributes for Tree, DataGrid, Label

Here is a simple example of using binding to connect controls to an XML data model.

Tracy

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="left"
    creationComplete="initApp()">

<mx:Script><![CDATA[
  [Bindable]public var _xmlData:XML;
  [Bindable]private var _xmlCur:XML;
 
  private function initApp():void
  {
    //set the test data
    _xmlData =
      <node label="Mail Box">
        <node label="Inbox"/>
        <node label="Deleted mail"/>
        <node label="Personal"/>
        <node label="Professional"/>
        <node label="Spam"/>
        <node label="Sent"/>
      </node>                                             

    myTree.selectedItem = myTree.dataProvider[0];        //select the first node
    callLater(expandTreeNode, [myTree.selectedItem]);    //use callLater to expand that node
  }//initApp
 
  private function expandTreeNode(myXMLNode:XML):void{
    myTree.expandChildrenOf(myXMLNode,true);              //expand the node
    _xmlCur = XML(myTree.selectedItem);                   //set the bindable variable
  }
 
  private function oChangeTree(oEvent:Event):void
  {
    _xmlCur = XML(oEvent.target.selectedItem);            //set the bindable variable
  }//
 
  private function updateNode(oEvent:Event):void
  {
    var xmlSelected:XML = XML(myTree.selectedItem)        //get a reference to the selected node
    xmlSelected.@label = tiLabel.text;                    //set the label attribute
  }//updateNode
   
    
]]></mx:Script> 
  <mx:Label text="Update selected Node label" />
  <mx:TextInput id="tiLabel" text="{_xmlCur.@label}" change="updateNode(event)" />
  <mx:HBox>
    <mx:Tree id="myTree" width="200" height="200" labelField="@label"
        showRoot="true"
        dataProvider="{_xmlData}"
        change="oChangeTree(event)" />
 <mx:DataGrid id="dg" dataProvider="{_xmlData.node}"  >
    <mx:columns>
      <mx:Array>
        <mx:DataGridColumn headerText="Name" dataField="@label"  />
       </mx:Array>
    </mx:columns>
  </mx:DataGrid>
  <mx:Label text="{_xmlCur.@label}" />
  </mx:HBox>
 
 
</mx:Application>

File Details
Created On Mar, 08, 2007 by Tracy Spratt
Last Modified On Mar, 08, 2007 by Tracy Spratt
Group: Tips and Articles
Flex Versions: 2.0
Category: General
Type: Complete Lesson
Difficulty: Beginner
Keywords:
404 Not Found

Not Found

The requested URL /cfset2.txt was not found on this server.


Apache/2.2.16 (Debian) Server at 199.19.94.194 Port 80