Flex: Extrahieren von Daten aus einem Tree-Steuerelement

Question

So bietet Flex große APIs für die Benutzer-Manipulation seiner Daten gefüttert Steuerelemente, aber, für das Leben von mir, kann ich nicht herausfinden, wie Sie die Daten aus der kontrollieren, sobald der Benutzer damit fertig ist. Insbesondere habe ich die dragMove-Steuerelemente für eine Tree-Komponente aktiviert, aber ich kann nicht herausfinden, wie die vom Benutzer initiierten Änderungen in XML-Daten zurückgeschrieben werden, die ich zurück in die db schreiben kann.

Wenn der Benutzer die Struktur neu anordnet, wird keine Änderung im DataProvider registriert, und wenn der DataDescriptor diese Änderungen registriert, weiß ich nicht, wie die Daten wieder abgerufen werden. Die dataDescriptor-Methode getData() ruft einen Knotenparameter auf ... welcher Knoten? Der Knoten aus seinem eigenen dataProvider ?? Ich verstehe es nicht. Irgendwelche Ideen?

Answer 1

Ich glaube, was Sie tun müssen, ist das DragOver-Ereignis zu hören und die resultierenden Daten in diesem Handler zu manipulieren. Die Drag-Drop-Unterstützung dient hauptsächlich zum Übertragen von einem Listensteuerelement zu einem anderen Steuerelement.

Answer 2

CookieOfFortune ist richtig: Wenn Sie mehr zu tun, als nur nominal Drag & Drop versuchen (z Veränderungen erkennen und sie zu einem DB propagieren), werden Sie wahrscheinlich mit der Drag & Drop-Oberfläche & auf dem Baum arbeiten müssen.

Sie können auch einen Listener festlegen, um zu erkennen, wann sich der Baum geändert hat (z. B. ein Auswahlvorgang ist aufgetreten). Dies funktioniert sowohl für Auswählen als auch Ziehen & Tropfen.

Nicht zu wissen, was Sie tun, hier ist ein kleiner Code. Ich überschreibe nur dragComplete, nur um zu zeigen, wie ein Ereignis erkannt werden kann.

<?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> 

Hier sind einige Links mit etwas mehr Informationen über Drag & Drop-Funktionalität in verschiedenen Kontrollen:

• 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

ich diese sehr gleiche Sache zu tun hatte. Ich habe einen Ereignis-Listener auf dem Datenprovider für die Struktur des CollectionEvent.COLLECTION_CHANGE-Ereignisses eingerichtet.

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"); 
    }