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.
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 …
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??
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.
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
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/
Vibhu October 16, 2008 at 4:47 am
just replace those characters with proper ‘ or ”
that should fix your error
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 .
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?
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
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.
Very clean. thank you.
Can anybody show me how to make the MInMaxPanel work whenc placed in th VDividedBox?
If double clicked on minmaxbutton , then the panel doesn’t minimize or maximize to actual size . Any solution for this ??
currently the control is configured to listen for single click. It needs to configure for double click if you need so.
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.
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
I am going to do the same in few days later.