Flex: extract data from a Tree control

Question

So Flex provides great APIs for user-manipulation of its data-fed controls, but, for the life of me, I can't figure out how to get the data back out of the control once the user is done playing with it. Specifically, I've enabled the dragMove controls on a Tree component, but I can't figure out how to get the user-initiated changes back into XML data that I can write back to the db.

When the user reorders the Tree, no change is registered in the dataProvider, and if the dataDescriptor is registering these changes, I don't know how to get the data back out. The dataDescriptor method getData() calls for a node parameter....which node? The node from its own dataProvider?? I don't get it. Any ideas?

Answer 1

I believe what you have to do is listen to the dragOver event and manipulate the resulting data in that handler. Drag drops support is mainly for transferring from one list control to another control.

Answer 2

CookieOfFortune is correct: if you are trying to do more than just nominal drag&drop (e.g. detect changes and propagate them to a DB), you'll probably need to work with the drag & drop interface on the tree.

You can also set a listener to detect when the tree has changed (e.g. a select has occurred). This works for both selects and drag & drops.

Not knowing what you're doing, here's a little code. I only overrode dragComplete just to show how an event can be detected.

<?xml version='1.0'?>
<mx:Application xmlns:mx='http://www.adobe.com/2006/mxml' backgroundGradientColors='[0xFFFFFF,0xAAAAAA]'>

    <mx:Script>
     <![CDATA[
        import mx.events.DragEvent;
        import mx.controls.Alert;

        [Bindable]
        private var treeData:XML =
            <root>
                <node label="foo">
                    <node label="bar" />
                </node>
                <node label="baz">
                    <node label="buzz">
                        <node label="foobar" />
                    </node>
                </node>
            </root>;

        private function detectChange(event:Event):void {
            Alert.show("change detected!");
        }
        private function detectDragComplete(event:DragEvent):void {
            Alert.show("drag completed!");
        }

     ]]>
    </mx:Script>

  <mx:Tree id="tree" labelField="@label" 
           dataProvider="{treeData.node}" width="200"
           dragEnabled="true"
           dropEnabled="true"
           dragMoveEnabled="true"
           dragComplete="detectDragComplete(event)"
           change="detectChange(event)" />
</mx:Application>

Here are some links with some more information regarding drag&drop functionality in various controls:

• http://livedocs.adobe.com/flex/3/html/help.html?content=dragdrop_7.html
• http://livedocs.adobe.com/flex/3/html/help.html?content=dragdrop_1.html

Answer 3

I had to do this very same thing. I set up an event listener on the dataProvider for the tree on the CollectionEvent.COLLECTION_CHANGE event.

public function init():void{

  //watch the tree dataProvider changes.
  BindingUtils.bindSetter(setUpDataChangeListner,_tree,["dataProvider"]);
 }

 public function setUpDataChangeListner(value:XMLListCollection):void{
        //set up the event listener for the dataProvider as long as it is not null
  if(value)
   value.addEventListener(CollectionEvent.COLLECTION_CHANGE,onTreeChanged,false,0,true);
 }

 public function onTreeChanged(event:CollectionEvent):void{
  trace("fun");
 }