Flex4 mx | Tree - changing the order of things when I fold and expand an element

Question

Using Flex 4.1, I'm trying to create a Tree item with a custom ItemRenderer (MXTreeItemRenderer). my problem is that whenever I fold and expand the root element, the order of the elements changes .. it is strange, as if the XML was not formatted properly.

any ideas?

my Main.mxml file:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

<!-- Launch your application by right clicking within this class and select Debug As > FDT SWF Application -->

<fx:Declarations>
 <fx:XML id="moshe">
 <notifications>
     <root label="a" state="root_item">
      <node state="item" label="moshe"/>
      <node state="item" label="moshe"/>
     </root>
   <root label="b" state="root_item"/>
   <root label="c" state="root_item"/>
   <root label="d" state="root_item"/>
   <root label="e" state="root_item"/>
  </notifications>
    </fx:XML>
</fx:Declarations>  
<mx:Tree dataProvider="{moshe}"  width="500" itemRenderer="TheRenderer" labelField="@label" showRoot="false" folderClosedIcon="{null}" defaultLeafIcon="{null}"
     folderOpenIcon="{null}" />
</s:Application>

and my element renderer:

<?xml version="1.0" encoding="utf-8"?>
<s:MXTreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/mx">

<s:states>
    <s:State name="normal" basedOn="{data.@state}"/>
    <s:State name="hovered" basedOn="{data.@state}"/>
    <s:State name="selected" basedOn="{data.@state}"/>
    <s:State name="root_item"/>            
    <s:State name="item" />
</s:states>

<fx:Script>
    <![CDATA[
        import com.flexer.Debug;
        import mx.controls.Alert;

     override public function set data(value:Object):void {
        super.data = value;
        if(treeListData.hasChildren)
        {

            setStyle("color", 0xff0000);
            setStyle("fontWeight", 'bold');
        }
        else
        {
            setStyle("color", 0x000000);
            setStyle("fontWeight", 'normal');
        }  
    }

 // Override the updateDisplayList() method 
    // to set the text for each tree node.      
    override protected function updateDisplayList(unscaledWidth:Number, 
        unscaledHeight:Number):void {

        super.updateDisplayList(unscaledWidth, unscaledHeight);
        if(super.data)
        {
            if(treeListData.hasChildren)
            {
                var tmp:XMLList = 
                    new XMLList(treeListData.item);
                var myStr:int = tmp[0].children().length();
                this.labelField.text= super.data.@label + " (" + myStr.toString() + ")";
            }
        }

    }


    ]]>
</fx:Script>

<s:HGroup left="0" right="0" top="0" bottom="0" verticalAlign="middle" includeIn="root_item">
    <s:Rect id="indentationSpacer" width="{treeListData.indent}" percentHeight="100" alpha="0">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" />
        </s:fill>
    </s:Rect>
    <s:Group id="disclosureGroup">
        <s:BitmapImage source="{treeListData.disclosureIcon}" visible="{treeListData.hasChildren}" />
    </s:Group>
    <s:BitmapImage source="{treeListData.icon}" />
    <s:Label id="labelField" text="{treeListData.label}" paddingTop="2"/>
</s:HGroup> 

<s:HGroup includeIn="item">
    <s:Label text="{treeListData.label}"/>
 </s:HGroup>


</s:MXTreeItemRenderer>

Answer 1

thanks to the commentary of David Goshodze I was able to solve the problem.

this is my new XML:

<notifications>
 <root label="a">
  <item label="moshe"/>
  <item label="moshe2"/>
 </root>
 <root label="b" />
 <root label="c" />
 <root label="d" />
<root label="e" />
</notifications>

and this is my new renderer:

<?xml version="1.0" encoding="utf-8"?>
<s:MXTreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/mx">

<s:states>
    <s:State name="normal"/>
    <s:State name="hovered"/>
    <s:State name="selected"/>
</s:states>

<fx:Script>
    <![CDATA[
        import com.flexer.Debug;
        import mx.controls.Alert;

     override public function set data(value:Object):void {
        super.data = value;
        if (super.data) {
            if(treeListData.hasChildren)
            {

                setStyle("color", 0xff0000);
                setStyle("fontWeight", 'bold');
            }
            else
            {
                setStyle("color", 0x000000);
                setStyle("fontWeight", 'normal');
            }  

        } 
    }


override protected function createChildren():void

{

super.createChildren();



}       
// Override the updateDisplayList() method 
    // to set the text for each tree node.      
    override protected function updateDisplayList(unscaledWidth:Number, 
        unscaledHeight:Number):void {
        super.updateDisplayList(unscaledWidth, unscaledHeight);
        if(super.data)
        {
            var val:XML = super.data as XML;
             if (val.name() == 'root') {
                this.rootItemGroup.visible=true;
                this.itemGroup.visible=false;
                var tmp:XMLList = 
                    new XMLList(treeListData.item);
                var myStr:int = tmp[0].children().length();
                this.labelField.text= super.data.@label + " (" + myStr.toString() + ")";
            } else {
                this.rootItemGroup.visible=false;
                this.itemGroup.visible=true;
            }
        }

    }


    ]]>
</fx:Script>

<s:HGroup id="rootItemGroup" visible="false" left="0" right="0" top="0" bottom="0" verticalAlign="middle">
    <s:Rect id="indentationSpacer" width="{treeListData.indent}" percentHeight="100" alpha="0">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" />
        </s:fill>
    </s:Rect>
    <s:Group id="disclosureGroup">
        <s:BitmapImage source="{treeListData.disclosureIcon}" visible="{treeListData.hasChildren}" />
    </s:Group>
    <s:BitmapImage source="{treeListData.icon}" />
    <s:Label id="labelField" text="{treeListData.label}" paddingTop="2"/>
</s:HGroup> 

<s:HGroup id="itemGroup" visible="false">
    <s:Label text="item ->"/>
    <s:Label text="{treeListData.label}"/>
 </s:HGroup>


</s:MXTreeItemRenderer>

, node, .hasChildren, . name XML, . ! .