Flex Minimize Maximize Panel Component

This component extends the Panel class, adds a  button at the title bar of the panel so that when that button clicked, the panel get minimized / maximized depending on its current state.

The MinMaxPanel component class, overrides the createChildren() method of the Panel class so that it can add a button at the title bar of the panel and registers a listener for that button. The listeners of the button get changed as the panel get minimized or maximized.

Here is the sample of how to use:

<?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:MinMaxPanel title="MinMaxPanel"
    height="300" width="250"/>
</mx:Application>

Here is the component class source file;

package flexScript
{
    import flash.events.MouseEvent;

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

    public class MinMaxPanel extends Panel
    {
        private var minMaxBtn:Button = new Button();
        private var effResize:Resize = new Resize();
        private var previousHeight:int = 30;

        public function MinMaxPanel()
        {
            super();
            minMaxBtn.addEventListener(MouseEvent.CLICK, minimisePanel);
        }

        override protected function createChildren():void{
            super.createChildren();
            super.titleBar.addChild(minMaxBtn);
        }

        private function minimisePanel(e:MouseEvent):void{
            effResize.stop();
            minMaxBtn.removeEventListener(MouseEvent.CLICK, minimisePanel);
            minMaxBtn.addEventListener(MouseEvent.CLICK, maxmisePanel);
            effResize.heightFrom = height;
            effResize.heightTo = previousHeight;
            previousHeight = height;
            effResize.play([this]);
        }

        private function maxmisePanel(e:MouseEvent):void{
            effResize.stop();
            minMaxBtn.removeEventListener(MouseEvent.CLICK, maxmisePanel);
            minMaxBtn.addEventListener(MouseEvent.CLICK, minimisePanel);
            effResize.heightFrom = height;
            effResize.heightTo = previousHeight;
            previousHeight = height;
            effResize.play([this]);
        }

        override protected function updateDisplayList(w:Number, h:Number):void{
            super.updateDisplayList(w,h);
            minMaxBtn.x = super.titleBar.width - 30;
            minMaxBtn.y = 5;
            minMaxBtn.width = 20;
            minMaxBtn.height = 20;
        }

    }
}

You can extend the above component to add more functionalities.

About this entry

You’re currently reading “Flex Minimize Maximize Panel Component,” an entry on Flex Script

Published:
August 28, 2008 / 6:27 am
Category:
Components, Flex
Tags:
, ,