Flex: How to resize and move component in runtime?

Please, anyone can guide me how to do this stuff.

I have a pannel and a box, The pannel is my component pannel(inside component pannel is eg. image, TextArea, Video) and Box is my target Box for my component creation. The user can select a component he/she want to create (dynamic creation) and drag it to target Box(drag and drop event). Then after creating the component the user can drag the component that he/she created and place anywhere on target Box and also the user can resize the component that he/she created(runtime resize).

i have this code for drag and drop and it seems this code works only on 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>;

How to move thus non image component like TxtArea? How to resize the component inside target box? (This is like GUI of flex when creating component) Thank you..

Answers


check out Rogue-Development.com's Object Handles I've used this with pretty good success for moving / resizing components.


Also try out the Pantaste library which is a lot more sophisticated than Object Handles.


Goto http://sourceforge.net/projects/tcycomponents/ and download package and demo if you want.

Use TcyReziser component for easy moving/resizing like Delphi 2009 does!

Regards, Mauricio


Need Your Help

Javascript validation of special characters in textbox and textarea

javascript regex

I need to add validation to textbox and textarea to validate them against the following rules upon submit (ampersand and apostrophes are allowed). //,./,/.,/*,*.,~,\\

Use Arduino GSM/GPRS shield to send data to my web service

web-services arduino sensor gsm gprs

I know how to make calls and send SMSes using a GSM/GPRS shield for Arduino Uno. But I have a web service at the location http://mydomain.com/rest/receiveSensorData, and I want to send sensor data to