Flex Tree Custom Tree View

I have an xml string fetched as a remote object like:

<metadata>  
  <system name="A">  
    <serviceGroup name="SG1">  
      <version id="id1" />  
      <service name="S1"/>  
    </serviceGroup>  
    <serviceGroup name="SG2">  
      <version id="id2" />  
      <serviceGroup name="SG3">  
        <version id="id3" />  
        <service name="S2"/>  
      </serviceGroup>  
    </serviceGroup>  
  </system>  
.
.
.
.
</metada开发者_运维问答ta>

As the xml sample shows, this contains nested servicegroups. I have to display all the services,and the servicegroups. And ignore everything else..eg. the version The services viz. S1 and S2 should be leaf nodes, everything else must be a parent

E.g.

->A

--->SG1

------>S1

---->SG2

------>SG3

--------->S2

.

.

.

I tried all kind of things, like using labelFunctions, labelField properties with Tree but it doesn't help. I always end up with un-labelled leaves.

I think I can do this with a ITreeDataDescriptor but not sure how. I am a flex beginner and the adobe sample didn't help too much ..

I think the above tutorial is far too complex for a beginner. Would really appreciate if someone can point me to something simpler.

Thanks, Sandeep

I think your approach may be holding you back a bit. Is it easier to change the default behavior of a control or change the data you are providing to that control?

It is my opinion that you should first of all change the dataprovider of your tree to the XMLList metadata.system.serviceGroup (you may be doing this already, I can't tell without a code example of what you are already trying). Then you should loop through that list and remove the version nodes.

delete yourXMLList.serviceGroup.version[0];

You can search google for better code examples.

You need to override getChildren function of ITreeDataDescriptor. There you can filter which XML node should be visible:

package  {
import mx.collections.ICollectionView;
import mx.collections.XMLListCollection;
import mx.controls.treeClasses.ITreeDataDescriptor;

public class CustomDataDescriptor extends ITreeDataDescriptor
{
    public function getChildren(node:Object, model:Object = null):ICollectionView
    {
        var list:XMLList = XMLList(node.*);
        var listColl:XMLList = new XMLList(); 

        var listLenght:int = list.length()

        var j:Number = 0; 
        // gether items which should be visible 
        for (var i:int = 0; i < listLenght; i++)
        {

            if (list[i].localName() != "version")
            {
                listColl[j] = list[i];
                j++
            }                
        }

        return new XMLListCollection(listColl);
    }

    public function hasChildren(node:Object, model:Object = null):Boolean
    {            
        return isBranch(node, model);       
    }

    public function isBranch(node:Object, model:Object = null):Boolean
    {            
        var list:XMLList = XMLList(node.Group);

        return list.length() > 0;
    }

    public function getData(node:Object, model:Object = null):Object
    {
        return Object(node);
    }

    public function addChildAt(parent:Object, newChild:Object, index:int, model:Object = null):Boolean
    {
        return false;
    }

    public function removeChildAt(parent:Object, child:Object, index:int, model:Object = null):Boolean
    {
        return false;   
    }
}

}

and assign new dataDiscriptor to a tree:

<mx:Tree id="customTree" dataDescriptor="{new DisplayGroupsTreeDataDescriptor()}"/>