Aug 07 2004

Flex MXML Sample 4: Binding XML documents where nodes contain attributes and inner text

Published by at 9:09 under Wayback Archive

When pointing your mx:Model source to an XML file, Flex turns this XML into an object at runtime. The way you structure your XML defines how to approach the object equivalent of the XML node values. Especially when you have XML nodes that contain both attributes and inner text you might have some difficulties binding the inner text to a UI object.

On an internal mailing list Matt Chotin posted a very easy solution to solve that problem. I’ll share it with you in this post and explain it a bit.

XML node attributes become properties of the object and if your node does not have attributes, it’s innerText becomes the value and the node itself a property of it’s parent. This makes binding XML very easy in Flex.

Now if you are mixing both node attributes and inner text, there is no object property that represents the inner text. The only properties are the attribute names, the inner text is ‘hidden’. This means that when you bind this XML data into f.e. a DataGrid, the only columns created in the grid are the ones after the node attributes. Your inner text still is not displayed in the grid.

The solution to this is to specifically defined the columns for your grid – see below – and use a labelFunction instead of a columnName for the column that should represent the inner text. Then let the labelFunction return the item passed in and you’ll get the inner text of the node back.

Very simple, but this info can save you a lot of time if you were not yet aware of it 🙂

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.macromedia.com/2003/mxml“>
 <mx:Script>
  <![CDATA[
   function myLabelFunction(item):String {   
    return item;
   } 
  ]]>
 </mx:Script>

 <mx:Model id=”xmlpacket”>
  <root>
   <myelement attributeA=”A1″ attributeB=”B1″>My text 1</myelement>
   <myelement attributeA=”A2″ attributeB=”B2″>My text 2</myelement>
  </root>
 </mx:Model>
 
 <mx:DataGrid id=”dg” dataProvider=”{xmlpacket.root.myelement}”>
   <mx:columns>
  <mx:Array>
   <mx:DataGridColumn columnName=”attributeA” headerText=”Attribute A” />
   <mx:DataGridColumn columnName=”attributeB” headerText=”Attribute B” />
   <mx:DataGridColumn labelFunction=”myLabelFunction” headerText=”Text” />
    </mx:Array>
  </mx:columns>
 </mx:DataGrid>
</mx:Application>

One response so far

One Response to “Flex MXML Sample 4: Binding XML documents where nodes contain attributes and inner text”

  1. h says:
    17 August 2004 at 9:01

    thx

    function Queue()
    {
    var items = new Array();
    var first = 0;
    var count = 0;
    this.Count = function()
    {
    return count
    };

    this.Peek = function(last)
    {
    var result = null;
    if(count > 0)
    {
    if(null != last && true == last)
    {
    result = items[first + (count – 1)]
    }
    else
    {
    result = items[first]
    }
    }

    return result
    };

    this.Enqueue = function(x)
    {
    items[first + count] = x;
    count++;
    return x
    };

    this.Dequeue = function()
    {
    var result = null;
    if(count > 0)
    {
    result = items[first];
    delete items[first];
    first++;
    count–
    }

    return result
    }
    }