Re: [flexcoders] Re: Tree control in Flex 2 Beta 1

Hari Kolasani Mon, 06 Feb 2006 19:14:04 -0800

I think , the Flex 2.0 Tree related classes have been changed quite a bit with the introduction of Hierarchical Data Providers and stuff.

Here is some sample .mxml/as code that worked for me. Hope this will help.

- Hari

*********************************************************************
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml" backgroundColor="#FFFFFF" creationComplete="initList()">
    <mx:Script>
        <![CDATA[
        import mx.collections.XMLListCollection;

        var origXML:XML;

        public function initList()
        {
            myTree.rootVisible = false;

           //TODO: Get this XML from a data service
            var origXMLString:String = "<MyRoot>            " +
                                            "<node1 label=\"supernode1\" someProp=\"sdsdf \" isBranch=\"true\"/>" +
                                            "<node2 label=\"supernode2\" someProp=\"sdsdf \" isBranch=\"true\"/>" +
                                            "<node3 label=\"supernode3\" someProp=\"sdsdf \" isBranch=\"true\"/>" +
                                        "</MyRoot>";

            origXML = new XML(origXMLString);
            myTree.dataProvider = origXML;
        }
        public function open(event:Object)
        {
            var selectedNode:Object =event.node;

            var myXMLList:XMLList = new XMLList(selectedNode);

           //TODO: Get this XML from a data service based on the selected node.
            var newXMLString:String = "<childnode1 label=\"childnode1\" someProp=\"sdsdf \" isBranch=\"true\" />" +
                                      "<childnode2 label=\"childnode2\" someProp=\"sdsdf \" isBranch=\"false\" />" +
                                    "<childnode3 label=\"childnode3\" someProp=\"sdsdf \" isBranch=\"true\" />" ;

            var myNewXMLList:XMLList = new XMLList(newXMLString);

            selectedNode.setChildren(myNewXMLList);

            myText1.text = selectedNode.toXMLString();
            myText2.text = myTree.dataProvider.source[0];
            myTree.dataProvider = origXML;
        }

        public function close(event:Object)
        {
            var selectedNode:Object = event.node;

            var myXMLList:XMLList = new XMLList(selectedNode);

            removeAllDecendants(myXMLList);

            myText1.text = selectedNode.toXMLString();
            myText2.text = myTree.dataProvider.source[0];
            myTree.dataProvider = origXML;
        }

        public function removeAllDecendants(xmlList:XMLList)
        {
            var myDescendantXMLList:XMLList = xmlList.descendants();
            var myDecendentXMLListCollection:XMLListCollection = new XMLListCollection(myDescendantXMLList);
            myDecendentXMLListCollection.removeAll();
        }

     ]]>
    </mx:Script>

    
    <mx:XML id="myxml">
    </mx:XML>

    <mx:HDividedBox width="100%" height="100%">

        
        <mx:Box>
            <mx:Tree id="myTree" width="600" height="600" labelField="@label" defaultLeafIcon="@Embed('images/folder.gif')" nodeOpen="open(event)" nodeClose="close(event)"/>
        </mx:Box>

        <mx:VBox>
            
            <mx:Box>
                 <mx:TextArea width="600" height="300" id="myText1" />
            </mx:Box>
             <mx:Box>
                 <mx:TextArea width="600" height="300" id="myText2" />
            </mx:Box>
        </mx:VBox>
    </mx:HDividedBox>
</mx:Application>
*********************************************************************

Jason Y. Kwong wrote:

I'm really at a lost as to how we're supposed to work with the hierarchical data that's used with the Tree component. The XML approach seems to be the most supported at the moment, so consider this simple XML:

   var rootNode: XML =
   <node label="Root">
<node label="Child1"/>
<node label="Child2"/>
   </node>

The dataProvider for the Tree then becomes an XMLListCollection. It displays fine. But now what's the expected way to modify the data so that the Tree updates? From the docs, I read:

"You can use the ICollectionView interface with list-based or hierarchical data. The following sections describe the basic ICollectionView operations using a list-based collection, but can also apply to similar operations on a hierarchical collection."

How is ICollectionView used with hierarchical data? Michael Montagna gave a hint in the quoted code at the bottom, but it seems like XMLListCollection is no more hierarchy-aware than ArrayCollection. If I use a cursor with the above example, I find that the collection has just one item--the root node. I can add siblings to the root node via the cursor, but that's not very useful. How do I get to the children via the collection/cursor?

So then I tried modifying the XML objects directly. I tried doing this:

   [EMAIL PROTECTED] = "Hello";

And to my surprise, the Tree updated! So I thought this was the answer. Well, sort of. With the root node open in the Tree, I tried this:

   rootNode.appendChild(<node label="Child3"/>);

The Tree does update itself with a new row, but it shows up empty (I can select it, though). If I collapse and expand the root, Child3 shows up ok. Now, if I try this:

   rootNode.node[1].appendChild(<node label="Child3"/>);

The Flash Player crashes, taking the browser with it. Looks like converting a leaf to a branch while it's being displayed is a no-no. Works ok if the root node is collapsed.

Anyway, it looks like the Tree does get alerted for changes made directly to the XML. Is this an expected/acceptable way of doing things? And it just happens to be really buggy right now? Or are we supposed to go through the collection? If so, how?

Suggestions?

On 2/1/06, Michael Montagna <[EMAIL PROTECTED]> wrote:
Here's a wordy example to add a leaf node:

public function addTree() {
                var collection:ICollectionView = ICollectionView(myTree.dataProvider);
                var cursor:IViewCursor = collection.getCursor ();
                cursor.seek(CursorBookmark.CURRENT, 2);
                cursor.insert({label:"added item"});
                cursor.release();
}

-- Flexcoders Mailing List FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com

SPONSORED LINKS

`Web site design development`	`Computer software development`	`Software design and development`
`Macromedia flex`	`Software development best practice`

YAHOO! GROUPS LINKS

Visit your group "flexcoders" on the web.
To unsubscribe from this group, send an email to: [EMAIL PROTECTED]
Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service.

Re: [flexcoders] Re: Tree control in Flex 2 Beta 1

Reply via email to