dougrdotnet

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>