본문 바로가기

Flex/__Flex 3.0

Creating a Custom Panel with a custom 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.*">

<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="500" height="500"
showTitleBtn="true" titleBtnClick="{handle(event)}" />

</mx:Application>

Custom Panel class:
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 var xTitleBtn:int;
private var _showTitleBtn:Boolean=false;

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;

if(_showTitleBtn){
_titleBtn.visible=true
_titleBtn.addEventListener(MouseEvent.CLICK,handleTitleBtnClick)
}

titleBar.addChild(_titleBtn);

}
// this method is used every time there is a change in the componentSize
// 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 = xTitleBtn ? xTitleBtn: this.width - _titleBtn.width - 12;
_titleBtn.move(x, y);

}

//this methods are used to set the visibility of the title Button
public function get showTitleBtn():Boolean{
return _showTitleBtn;
}
public function set showTitleBtn(value:Boolean):void{
_titleBtn.visible=true
_showTitleBtn=value;
}

//this method handle the click over the Button and dispatch a new Event
private function handleTitleBtnClick(e:MouseEvent):void{
var event:CustomMouseEvent=new CustomMouseEvent('titleBtnClick',e);
dispatchEvent(event);

}
}
}
a Generic MouseEvent Class:
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();
}

}
}