Flex: Comment redimensionner et déplacer un composant au runtime?

Question

S'il vous plaît, n'importe qui peut me guider pour faire ce genre de choses.

J'ai un panneau et une boîte, le panneau est le panneau de mes composants (à l'intérieur du panneau des composants, par exemple, image, TextArea, Video) et Box est ma cible Box pour la création de mes composants. L'utilisateur peut sélectionner un composant qu'il souhaite créer (création dynamique) et faites-le glisser vers la zone cible (événement de glisser-déposer). Puis après avoir créé le composant l'utilisateur peut faire glisser le composant qu'il a créé et le placer n'importe où sur la cible Box et l'utilisateur peuvent redimensionner le composant qu'il a créé (redimensionnement à l'exécution).

j'ai ce code pour glisser-déposer et il semble que ce code ne fonctionne que sur l'image

//-----action script-----//
        private function dragIt(event:MouseEvent, value: String, objParent: String, objName: String):void 
        {           
            var dragInitiator:Image = event.currentTarget as Image;    
            var dragSource:DragSource = new DragSource();

            dragSource.addData(value,'value');
            dragSource.addData(objParent, 'parent');
            dragSource.addData(objName, 'objname'); 

            var dragProxy:Image = new Image();
            dragProxy.source = event.currentTarget.source;


            DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
        }


        private function dragEnterHandler(event:DragEvent):void 
        {
            var dropTarget:Box=event.currentTarget as Box;
            dropTarget.setStyle("borderThickness", 5);
            DragManager.acceptDragDrop(dropTarget);
        }

        private function dragExitHandler(event:DragEvent):void
        {
            var dropTarget:Box=event.currentTarget as Box;                
            revertBoxBorder();                
        }     

        private function revertBoxBorder():void
        {
            targetBox.setStyle("borderThickness", 1);                
        }

        private function dragDropHandler(event:DragEvent):void 
        {
            var value:String = event.dragSource.dataForFormat('value') as String;
            var objParent:String = event.dragSource.dataForFormat('parent') as String;
            if(value == "mp3")
            {
             //do something     
            }
            else if (value == "image")
            {
                if (objParent == "panel")
                {
                    var imgView: Image = new Image;                 
                    imgView.x = event.stageX;
                    imgView.y = event.stageY;

                    addChild(imgView);
                    imgView.name = String(getChildByName(imgView.name).parent.numChildren-1);     
                    imgView.addEventListener(MouseEvent.MOUSE_MOVE,  function(e:MouseEvent):void 
                    {
                    dragIt(e, value, 'box', Image(e.target).name);
                });
                    imgView.source = ImgInsert;
                }
                else
                {
                    var objName:String = event.dragSource.dataForFormat('objname') as String;
                    getChildByName(objName).parent.getChildAt(int(objName)).x = event.stageX;
                    getChildByName(objName).parent.getChildAt(int(objName)).y = event.stageY;
                }

            }
            else if (value == "textarea")
            {
                //do something                  
            }

        }

//-----mxml code------//
<mx:Panel x="0" y="37" width="91" height="417" layout="absolute" title="Component" borderColor="#8DA5AB" color="#345860" borderStyle="outset">
    <mx:Image x="7" y="43" width="21" height="18" source="{TxtAreaInsert}" mouseMove="dragIt(event,'textarea','panel','')"/>
    <mx:Image x="36" y="43" width="21" height="18" source="{ImgInsert}" mouseMove="dragIt(event,'image','panel','')"/>
    <mx:Image x="36" y="80" width="21" height="18" source="{Mp3Insert}" mouseMove="dragIt(event,'mp3','panel','')"/>
    <mx:Image x="7" y="80" width="21" height="18" source="{VdoInsert}" mouseMove="dragIt(event,'video','panel','')"/>
</mx:Panel>
<mx:Box id="targetBox" y="37" width="589" height="417" borderColor="#8CC2E8" backgroundColor="#D5DBEE"
    dragExit="dragExitHandler(event)" dragEnter="dragEnterHandler(event)" dragDrop="dragDropHandler(event)" left="99">
</mx:Box>;

Comment déplacer un composant non-image comme TxtArea? Comment redimensionner le composant dans la boîte cible? (Cela ressemble à l'interface graphique de flex lors de la création du composant) Merci ..

Answer 1

consultez les les descripteurs d'objet de Rogue-Development.com que j'ai utilisés avec cela assez bon succès pour déplacer / redimensionner des composants.

Answer 2

Essayez également la bibliothèque Pantaste qui est beaucoup plus sophistiquée que Poignées d'objet.

Answer 3

Consultez http://sourceforge.net/projects/tcycomponents/
et téléchargez le package et la démo si vous le souhaitez.

Utilisez le composant TcyReziser pour déplacer / redimensionner facilement, comme le fait Delphi 2009!

Cordialement, Mauricio