Flex 3 Le glisser-déposer en arbre est lent

Question

J'ai une autre question glisser-déposer. J'utilise DnD sur un composant Tree et ça marche bien, quand j'ai jusqu'à 50-80 éléments dans l'arbre. Cependant, quand j'ai 100-300 éléments, la simple opération de glisser-déposer mange subitement toute la capacité de mon processeur et l'application se fige jusqu'à 1 minute.

Je suppose que cela se produit car Flex tente de redessiner le proxy dragImage et, par conséquent, doit redessiner tous les 300 nœuds. Y at-il un moyen de désactiver le dragImage? Une simple flèche avec un petit rectangle suffira à mes fins.

Est-ce que quelqu'un d'autre a rencontré ce problème de performance avec le composant Flex Tree?

Merci.

Answer 1

J'ai travaillé avec le glisser-déposer avec plusieurs composants basés sur la liste dans Flex, mais je n'ai pas rencontré de problèmes de surcharge de la CPU ou de gel de l'application. Je suggère d'exécuter un profil dans Flex Builder pour voir ce qui utilise tout ce processeur et/ou la mémoire, et travailler pour résoudre ce problème. En ce qui concerne le glisser-déposer, je me suis toujours orienté vers la création de mes propres fonctionnalités de glisser-déposer, afin que je puisse faire ce que je veux avec les données et créer ma propre image proxy. Voilà comment je commence la glisser dans un composant Tree:

override protected function mouseDownHandler(event:MouseEvent):void 
{ 
    var eventPoint:Point = new Point(event.localX, event.localY); 

    var eventPointGlobal:Point = super.localToGlobal(eventPoint); 

    mouseDownPoint = super.globalToLocal(eventPointGlobal); 

    super.mouseDownHandler(event); 
} 

// MouseMove Handler for manually initiating Drag functionality 
override protected function mouseMoveHandler(event:MouseEvent):void 
{ 
    super.mouseMoveHandler(event); 

    if (!event.buttonDown || DragManager.isDragging) 
     return; 

    /* Create a point relative to this component from the mouse 
     cursor location. */ 
    var eventPoint:Point = new Point(event.stageX, event.stageY); 

    var dragPoint:Point = super.globalToLocal(eventPoint); 

    if (!mouseDownPoint) 
     return; 

    if (Math.abs(mouseDownPoint.x - dragPoint.x) <= 4 
      || Math.abs(mouseDownPoint.y - dragPoint.y) <= 4) 
     return; 

    if (!event.target is UITextField) 
     return; 

    if (selectedItems.length == 0) 
     return; 

    var dragSource:DragSource = new DragSource(); 

    var dragProxy:DragProxyContainer = new DragProxyContainer(); // This is my custom Drag Proxy Image that I reuse throughout my application (see below) 

    dragProxy.setLabelText([selectedItem]); 

    // Initiate the Drag Event 
    DragManager.doDrag(this, dragSource, event, dragProxy, 
     -dragPoint.x+event.localX, -dragPoint.y+event.localY, 0.8); 
} 


package view 
{ 
    import mx.containers.VBox; 
    import mx.core.UITextField; 

    [Bindable] 
    public class DragProxyContainer extends VBox 
    { 
     private var textField:UITextField = new UITextField(); 

     public function DragProxyContainer() 
     { 
      super(); 

      minWidth = 150; 

      addChild(textField); 
     } 

     public function setLabelText(items:Array, labelField:String = "label"):void 
     { 
      var labelText:String; 

      var numItems:int = items.length; 

      if (numItems > 1) 
      { 
       labelText = numItems.toString() + " items"; 
      } 
      else 
      { 
       var firstItem:Object = items[0]; 

       labelText = firstItem[labelField]; 
      } 

      textField.text = labelText; 
     } 
    } 
} 

Answer 2

j'ai solution trouvée pour le problème, voir http://compile4fun.wordpress.com/2010/10/29/optimization-drag-and-drop/son en russe, mais vous pouvez utiliser Google Translate.