Extending Flex Panel With ActionScript
Posted by dougr | Posted in ActionScript, Components, Flex | Posted on 13-06-2008 | 18,226 views
Tags: ActionScript, Components, Extend Panel, Flex, linkedin
9
On a current project I had the need to incorporate a button into a Panel title bar which would allow users to launch a new intake form. I also needed to use this panel in four different places. First option was to create a Panel component and absolutely position a button by placing the Panel container within a Canvas container. I really don’t like absolute positioning and before this was considered I had already begun researching extending Panel over on Doug McCune’s Blog. However, related to the problem which I was trying to solve, his really cool example was just a point in the right direction for me. Ultimately, Simeon, reminded me that I had a perfect example available in my Adobe Flex 2 Training from the Source book. So here is how to extend the Panel class and add custom properties to suit your needs, in this case the addition of a button placed in title bar.
package com.douglasReynolds.views.components
{
import flash.events.Event;
import mx.containers.Panel;
import mx.controls.Alert;
import mx.controls.Button;
public class NewFormPanel extends Panel
{
//declare button var
private var newFormButton:Button;
private function doCreateForm(event:Event):void{
//create an event - just an Alert for testing here
Alert.show("Button Clicked");
}
//override the createChildren method with the properties I need
protected override function createChildren():void{
super.createChildren();
//instantiate new button and assign properties
newFormButton = new Button();
newFormButton.label = "New";
//add event listener for click event and call method
newFormButton.addEventListener("click", doCreateForm);
newFormButton.visible = true;
//add the button to rawChildren
rawChildren.addChild(newFormButton);
}
//update the display and get panel size - dynamic since the form can be resized
protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth, unscaledHeight);
//gap between label and edges of button
var margin:int = 4;
//set the button size + margin
newFormButton.setActualSize(50 + margin, 16 + margin);
//define vars which determine distance from right and top of Panel
var pixelsRight:int = 10;
var pixelsTop:int = 4;
//define var to width of button
var buttonWidth:int = newFormButton.width;
//set x and y properties to be used for positioning of button
var x:Number = unscaledWidth - buttonWidth - pixelsRight;
var y:Number = pixelsTop;
//position the button in the panel
newFormButton.move(x, y);
}
//constructor
public function NewFormPanel()
{
super();
}
}
}
Then, all we have to do is use our NewFormPanel in MXML instead of Panel:
<components:NewFormPanel xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" xmlns:components="com.douglasReynolds.views.components.*">
//note the addition of components namespace to NewFormPanel properties
//all of your normal stuff that you want to put in a panel
</components:NewFormPanel> 
Loading ...
Hi Doug, very interesting read. I don’t have any experience with flex myself. What resource do you suggest for a noob wanting to learn?
Robert, the first place to go is http://livedocs.adobe.com/flex/3/html/ and peruse through the documentation. Once you download and install FlexBuilder 3 then you can work through the included sample projects and Adobe will send you more code examples during your trial. Jeffry Houser just posted about setting up a flex project on The Flex Show site: http://tinyurl.com/3l4ge2. Definitely check out your local user’s group scene http://flex.org/community/ There are a ton of resources out there and if you like to have a book in your hands there are plenty for the taking.
Hi Doug…
I liked your code, helped me learn a lot but for some reason when i try to put an item inside the Panel it goes to x=y=0 no matter what…
Best
Cool little example. Thanks
Not bad at all. Good time saver before all other customization is done. Thnx, buddy.
Thanks for the great post. I have a related question. I am trying to set the size of the Panel Title text. I am trying to do that using the titleStyleName and some how set the fontsize in there. But I can not get to the titleStyleName in my custom component which extends panel. I am trying to change the text when updateDisplayList() over ride.
I would appreciate any direction on this.
Hi Doug,
used your code to extend the panel with a text area (i want to display a certain revision number in the panel) but when the focus is on the text area component, the – blue – outline is a few pixels off. Don’t know if this happend to the button as well ?
@Shawn, sorry I missed your question and haven’t replied until now…
I would just use CSS to manage the title style. For example:
NewFormPanel {
titleStyleName: “mypanelTitle”;
}
.mypanelTitle {
fontSize: 18;
}
@Guido, I didn’t experience any issue with the focus highlight when using button. If you are simply wanting to display in this case, maybe a text component or label component might be more appropriate??
@Guido, I did see the focus (blue outline) go off a few pixels when working with the same code and switching focus using tab key. Not sure why this happens