Flex: ¿Cómo cambiar el tamaño y mover el componente en tiempo de ejecución?

Question

Por favor, cualquiera puede guiarme en cómo hacer esto.

Tengo un panel y una caja, El panel es mi panel de componentes (dentro del panel de componentes es, por ejemplo, imagen, TextArea, Video) y Box es mi caja objetivo para la creación de mi componente. El usuario puede seleccionar un componente que desee crear (creación dinámica) y arrástrelo al cuadro de destino (arrastre y suelte el evento). Luego, después de crear el componente el usuario puede arrastrar el componente que ha creado y colocarlo en cualquier lugar del objetivo Box y también el usuario puede cambiar el tamaño del componente que creó (redimensionar en tiempo de ejecución).

Tengo este código para arrastrar y soltar y parece que este código solo funciona en la imagen

//-----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>;

¿Cómo mover, por lo tanto, un componente sin imagen como TxtArea? ¿Cómo cambiar el tamaño del componente dentro del cuadro de destino? (Esto es como GUI de flex al crear componente) Gracias ..

Answer 1

revisa Tiradores de objetos de Rogue-Development.com Lo he usado con bastante buen éxito para mover / redimensionar componentes.

Answer 2

Pruebe también la biblioteca de Pantaste , que es mucho más sofisticada que Mangos de objetos.

Answer 3

Ir a http://sourceforge.net/projects/tcycomponents/
y descarga el paquete y la demo si quieres.

¡Utilice el componente TcyReziser para mover o redimensionar fácilmente como lo hace Delphi 2009!

Saludos, Mauricio