Skinning / Extending Panel

Question

Hi,
I'm looking to skin or extend the panel so that I can have
things such as a close button in the title bar, and so that the
panel's resizeable. What's the best way to do this? If I extend the
panel, how do I go about this? since my components are in
<mx:panel/> 's
Thanks :)

Answer 1

Hello:
You need to override the createChildren method to do this.
This is just an example but is similar to the method I use. If you
are adding many components then you would want to break out each
components configurations into their own methods or your
createChildren() method will get quite long. Or even better create
a custombutton class in advance that extends the Button Class and
use it.
Example:
private var panelTB:UIComponent;
private var myCloseButton:Button = new Button();
override protected function createChildren():void {
super.createChildren();
//make yourself a reference to the titlebar
this.panelTB = super.titleBar;
//Your components go here, Example:
this.myCloseButton.width = 25;
this.myCloseButton.height = 25;
this.myCloseButton.styleName = "myCloseButtonStyle";
//Add your objects (a button in this case to the referenced
titlebar
this.panelTB.addChild(this.myCloseButton);
this.positionTBChildren();
The positionTBChildren method would then set the X,Y of the
button based on your desired location and needs.
Hope that helps.
-Joe