Dynamically populate Tree control with XMLListCollection

For those who think it a tough thing to bind controls to hierarchical data (like me) I am posting my source code to dynamically populate hierarchical data in Tree control using an XMLListCollection object.

First of all, create a Tree object in markup

<mx:Tree height="100%"  labelField="@label" width="175" showRoot="false"  id="treeMenu"  > </mx:Tree>

Next, create a private variable myTreeCollectionof XMLListCollection and set dataProvider property of the Tree to 'myTreeCollection'

[Bindable] public var myTreeCollection:XMLListCollection;

<mx:Tree height="100%" dataProvider="{myTreeCollection}"...

Now, we are ready to add hierarchical to the XMLListCollection object.

import mx.collections.XMLListCollection;
[Bindable]
private var myTreeCollection:XMLListCollection;
private function init():void
{
 if(myTreeCollection == null)
 myTreeCollection = new XMLListCollection();
       
 var xmlString:String = "<Item label='Level-1'>"   
         "<Item label='Level-2'/>" "</Item>";
 var item:XMLList = new XMLList(xmlString);
 myTreeCollection.addItem(item);
}

Note that in markup of Tree, we have set labelField propperty to '@label'. It tells the runtime to bind the tree node with 'label' attribute of corresponding dataprovider XML node. An XML attribute is indicated with "@" prefix.