Add a component to the Panel titleBar

The Application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical" xmlns:creativesource="it.creativesource.*"
    viewSourceURL="srcview/index.html" width="550" height="225">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
           
            private function handle(e:Event):void{
                Alert.show('Hello from the titleBar Button!!');
            }
        ]]>
    </mx:Script>

    <creativesource:CustomPanel width="300" height="170"
        titleBtnClick="{handle(event)}" />
   
   

</mx:Application>

The CustomPanel

package it.creativesource
{
	import flash.events.MouseEvent;
	
	import mx.containers.Panel;
	import mx.controls.Button;
	
	[Event(name="titleBtnClick", type="flash.events.MouseEvent")]
  
	public class CustomPanel extends Panel
	{
	
		private var _titleBtn:Button=new Button();
		
		
		public function CustomPanel(){
			super();
		}
		
		// this method is called during the initialize phase 
		// and is used to create the interface
		override protected function createChildren() : void{
		
			super.createChildren();
			
			_titleBtn.visible=false
			_titleBtn.height=22;
			_titleBtn.width=22;
			_titleBtn.addEventListener(MouseEvent.CLICK,handleTitleBtnClick)
			
			titleBar.addChild(_titleBtn);
			
		}
		
		// this method is used every time there is a change in the DisplayList
		// to move and reorganize the interface
		override protected function updateDisplayList (unscaledWidth:Number, unscaledHeight:Number):void{
			
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			
			var y:int = 4;
			var x:int = this.width - _titleBtn.width - 12;
			_titleBtn.move(x, y);
			
			
		}
		
		
		
		private function handleTitleBtnClick(e:MouseEvent):void{
			var event:CustomMouseEvent=new CustomMouseEvent('titleBtnClick',e);
			dispatchEvent(event);
		
		}
	}
}

The CustomMouseEvent:

package it.creativesource
{
	import flash.events.Event;
	import flash.events.MouseEvent;

	public class CustomMouseEvent extends MouseEvent
	{
		//this is the constructor method, its function is to change the name of the MouseEvent;
		public function CustomMouseEvent(type:String,e:MouseEvent)
		{
			super(type, e.bubbles, e.cancelable,e.localX,e.localY,e.relatedObject,e.ctrlKey,e.altKey,e.shiftKey,e.buttonDown,e.delta);
			
		}
		override public function clone():Event{
			return super.clone();
		}
		
	}
}

For an Italian version of this entry please visit flex-developers.org