The following component extends the Panel class, adds a functionality so that it can resizable.

The Component ResizablePabel overrides the createChildren() method to add a button at the bottom – right corner of the panel using rawChildren property, so that user can resize the panel using the mouse. Using the various MouseEvent and listeners, component resizes the height and width of the panel.

Here is the sample code to use it:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:com="*" xmlns:flexScript="flexScript.*">
    <flexScript:ResizablePanel title="Resize Me !!" x="73"
    y="110" width="258" height="213"/>
</mx:Application>

Here is the component source code:

package flexScript
{
    import flash.events.MouseEvent;

    import mx.containers.Panel;
    import mx.controls.Button;

    public class ResizablePanel extends Panel
    {
        private var resizer:Button = new Button();

        public function ResizablePanel()
        {
            super();
            resizer.addEventListener(MouseEvent.MOUSE_DOWN, resizeDown);
        }
        override protected function createChildren():void{
            resizer.height=10;
            resizer.width = 10;
            super.createChildren();
            rawChildren.addChild(resizer);
        }
        override protected function updateDisplayList(w:Number, h:Number):void{
            super.updateDisplayList(w,h);
            resizer.y = h - resizer.height;
            resizer.x = w - resizer.width;
        }
        private function resizeDown(e:MouseEvent):void{
            stage.addEventListener(MouseEvent.MOUSE_MOVE, scalePanel);
            stage.addEventListener(MouseEvent.MOUSE_UP, stopScale);
        }
        private function scalePanel(e:MouseEvent):void{
            if((stage.mouseX - x)>50)
                width = (stage.mouseX-x);
            if((stage.mouseY-y)>50)
                height = (stage.mouseY-y);   
        }
        private function stopScale(e:MouseEvent):void{
            stage.removeEventListener(MouseEvent.MOUSE_MOVE, scalePanel);
            stage.removeEventListener(MouseEvent.MOUSE_UP, stopScale);
        }
    }
}

The component can be extended to add more functionalities.

---

Possibly related posts: (automatically generated)

• Super Panel