Skip to content
August 28, 2008 / Shrikant Patil

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.

Advertisements

33 Comments

Leave a Comment
  1. Stephen Stulov / Sep 29 2008 4:05 pm

    If you will decide to make your minimizable window also draggable (to drag it by grabbing title bar), and if you will implement drag by title bar mouse events – you will be able to drag the window by grabbing minimize button 🙂

    I’d push the button to rawChildren…

    Though your variant is more convinient from styling/skinning point of view …

  2. Vibhu / Oct 16 2008 4:47 am

    When I’m trying to run it on flexbuilder it gives an error saying that the attribute name should not start with a “”. What should I do??

  3. Shrikant Patil / Oct 16 2008 1:56 pm

    HI,
    i hope you are getting that error because of some misplace of class from the package. OK, try to create a folder with the name ‘flexScript’ in ‘src’ folder and put the ‘MinMaxPanel.as’ file in that and copy the code of the application as it is and put it in main application MXML page and run the application. Let me know if you still get the same error.

  4. coulix / Oct 18 2008 7:40 pm

    Its all working well except when i place the panel inside a VDividedBox, i need to move the Vertical handle before the resizing can take effect.
    Any idea on how to overcome this problem ?
    Thanks

  5. Shrikant Patil / Oct 20 2008 6:38 am

    Hi,
    I think you have asked to resize the VDivideBox on minimizing and maxmizing the minmaxPanel. you need to work with VDivideBox and its method to achieve the solution. here i am going to give you a link from blog.flexexamples.com which has lots of solutions related to the flex components. please look at the blow link. hope it will helps you.

    http://blog.flexexamples.com/2007/10/09/programmatically-resizing-a-flex-hdividedbox-container/

  6. marker / Oct 24 2008 9:21 am

    Vibhu October 16, 2008 at 4:47 am

    just replace those characters with proper ‘ or ” 🙂

    that should fix your error 🙂

  7. saif / Dec 15 2008 1:30 pm

    hi
    i would like to create a component where i have 4 collapsible panels place in 2×2 manner , the panel i click on should maximize and the rest 3 should become small in height and just display the title bar .

  8. Andrea / Feb 18 2009 1:14 pm

    Hi, really useful example and works without any problem.
    I’ve made some changes to it, to trigger the click event on the entire title tab and change its stile when the panel is maximized.
    There a couple things more I would like to do but I’m not sure how to do it:
    – add a little arrow image (without using the icon attribute) or other element before the titlebat text. I tried using addChildAt but regardless of the index I specify the elemtnt always appears after the text.
    – find a a way to dynamically get the panel size. In my app I start with the panel minimized and what I need is that the minimized height is euqal to the panel header heigth(titletab I suppose) and the maximized heigth is equal to the heigth the panel will have if no heigth is specified.
    Some idea on how to do it?

  9. kunal / Mar 6 2009 9:25 am

    I am trying to execute this application. But i am getting an error.

    Could not resolve flexScript:MinMaxPanel to a component implementation.

    So please help me to execute this application.

    Thanks
    kunal

    • Shrikant Patil / Mar 6 2009 5:53 pm

      Hi Kunal,
      you need to create a folder named as “flexScript” into your main project folder and put MinMaxPanel class file inside of that folder. Make sure that your application define a namespace for that component in Application tag like . I think it will work fine.

  10. Shawny / Mar 30 2009 6:33 pm

    Very clean. thank you.

  11. Vikas / Aug 17 2009 4:08 pm

    Can anybody show me how to make the MInMaxPanel work whenc placed in th VDividedBox?

  12. Arun / Oct 27 2009 8:11 am

    If double clicked on minmaxbutton , then the panel doesn’t minimize or maximize to actual size . Any solution for this ??

    • Shrikant Patil / Oct 27 2009 10:09 am

      currently the control is configured to listen for single click. It needs to configure for double click if you need so.

      • Arun / Oct 28 2009 1:19 pm

        Instead of using previousHeight to set the height of panel can i use constant heights, like 30 for minimized panel and actual size for normal panel.May be by using two constant values this problem can be solved.

  13. Jochen Szostek / Nov 19 2009 12:31 pm

    Would be nice if you could create same example using spark components.

    Tried it myself but could find how to put something in the titlebar yet.

    Excellent work with the site!

    Greets,

    Jochen

    • Shrikant Patil / Nov 19 2009 1:02 pm

      I am going to do the same in few days later.

  14. migue / Mar 18 2010 1:43 am

    Awesome tip !!! great code thanks!!!

  15. Akis Apostoliadis / Jun 17 2010 7:47 am

    Hi,
    Is there a way I can put an image instead of the classic button, in the place of minimize button?

  16. laokinsham / Aug 19 2010 2:12 pm

    Thank u,
    your explanation was very important to finish a work.

  17. Spandana / Aug 19 2010 5:02 pm

    On click of panel the below part is getting xepanded n collapsed. Can some1 pls help me how do i change it in such a way that it get gets collapsed n minimised on the small icon tat i added from CSS.

  18. Luis Ibáñez / Sep 29 2010 9:02 am

    When I minimize the window the buttón and the title dissapears…

  19. sudheer / Nov 26 2010 5:57 am

    how can i drag the minimised window ( like how we drag tabs in google chrome)…any help will be appreciated 🙂

    Thanks

  20. ntaka / Dec 14 2010 9:39 am

    Awesome tip !!! great code thanks!!!

    http://www.ntaka.co.za,http://www.shinbow.com

  21. Prashant / Feb 22 2011 5:24 am

    Hi,
    Tried all ways but still i get the same error.. Could not resolve flexScript:MinMaxPanel to a component implementation.

    Even tried the suggestions u gave to Kunal.But it doent work.Plzz help

  22. Prashant / Feb 22 2011 6:29 am

    Hi,
    Solved the problem..it was a package error. Now am tryin to place some components in the panel but it doesnt seem to take any other components. Can u plz tel me how i can add components in the panel which disapper wen i minimize and reapperan wen maximized

  23. wiredguy / Mar 1 2011 2:52 am

    Great component and very useful, too!

    I would like to know how to make it so that the MinMaxPanel is minimized initially. How does one do it programatically?

  24. praveen / Aug 11 2011 12:30 pm

    i need to create the panel which should be minimized by default . how to do this

  25. kavitha / Nov 24 2011 10:40 am

    hi,

    How to minimize the panel to the bottom of the screen… can any one please send the sample code?

    the given code is minimize the window to the top of the screen….

  26. kavitha / Nov 24 2011 10:48 am

    while click the minimize button in the titlebar, window should appear at bottom of screen…

  27. kavitha / Nov 28 2011 9:49 am

    Hi All,

    I have done the coding for minimize (bottom of screen), maximize, close , restore and dragging in flex 3..

    If any one needs let me know.. i will paste the code…

  28. Alexandar / Feb 11 2012 4:58 am

    when i clicking the button the panel got minimized but button got disappeared.

Trackbacks

  1. Flex Components « Pat IT Dude Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: