Create a MXML Component based on Canvas & this component code will be

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;
width=”100%”
height=”100%”
cornerRadius=”0″
borderStyle=”solid”
borderColor=”#7F2C01″
borderThickness=”0″
alpha=”1.0″
creationComplete=”this.init()”
remove=”RemoveCurrent()”
xmlns:ns1=”GameClient.FJ.UI.Component.*”>
<mx:Style source=”Style/Style.css” />
<mx:Canvas id=”cvsTop1″ top=”25″ bottom=”0″ left=”0″ right=”0″ backgroundColor=”#FFFFFF” borderColor=”#842801″ borderStyle=”solid” cornerRadius=”9″ alpha=”0.59″>
<mx:Canvas left=”0″ right=”0″ top=”10″ bottom=”10″ id=”cvsMiddle”>
</mx:Canvas>
</mx:Canvas>

<mx:Script>
<![CDATA[
import GameClient.Business.Interfaces.IUser;
import mx.controls.Alert;
private var _difX:Number;
private var _difY:Number;
private var _title:String = “”;

public function set Title(title:String):void
{
this._title = title;
}

public function init():void
{
lblTitle.text = _title;
cvsHeader.addEventListener(MouseEvent.MOUSE_DOWN,dragStart);
this.parent.parent.addEventListener(Event.RESIZE,resize);
}

private function RemoveCurrent():void
{
stage.removeEventListener(Event.RESIZE,resize);
}

private function dragStart(event:MouseEvent):void
{
_difX = this.parent.x – event.stageX;
_difY = this.parent.y – event.stageY;
this.parent.parent.addEventListener(MouseEvent.MOUSE_UP,dragEnd);
this.parent.parent.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
}

private function mouseMove(event:MouseEvent):void
{
SetPosition(event);
}

private function dragEnd(event:MouseEvent):void
{
SetPosition(event);
this.parent.parent.removeEventListener(MouseEvent.MOUSE_UP,dragEnd);
this.parent.parent.removeEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
}

private function SetPosition(event:MouseEvent):void
{
var nextX:Number = event.stageX+_difX;
var nextY:Number = event.stageY+_difY;
if(nextX<0)
nextX = 0;
if(nextY<0)
nextY = 0;
if(this.parent.parent.width<nextX+this.parent.width)
nextX = this.parent.parent.width – this.parent.width;
if(this.parent.parent.height<nextY+this.parent.height)
nextY = this.parent.parent.height – this.parent.height;
this.parent.x = nextX;
this.parent.y = nextY;
}

private function resize(e:Event):void
{
var nextX:Number = this.parent.x;
var nextY:Number = this.parent.y;
if(nextX<0)
nextX = 0;
if(nextY<0)
nextY = 0;
if(this.parent.parent.width<nextX+this.parent.width)
nextX = this.parent.parent.width – this.parent.width;
if(this.parent.parent.height<nextY+this.parent.height)
nextY = this.parent.parent.height – this.parent.height;
this.parent.x = nextX;
this.parent.y = nextY;
}
]]>
</mx:Script>

<mx:Canvas cornerRadius=”9″ borderStyle=”solid”
borderThickness=”1″ horizontalScrollPolicy=”off” verticalScrollPolicy=”off”
left=”0″ right=”0″ top=”0″ height=”35″ borderColor=”#842801″>

<ns1:GradientCanvas
cornerRadius=”9″ borderStyle=”solid”
borderThickness=”0″ horizontalScrollPolicy=”off” verticalScrollPolicy=”off”
left=”0″ right=”0″ top=”0″ height=”28″
styleName=”header”>
<mx:Label text=”Label” id=”lblTitle” x=”15″ y=”7″ width=”{parent.width – 40}”/>
</ns1:GradientCanvas>
</mx:Canvas>

<mx:Canvas height=”13″ borderColor=”#842801″ backgroundColor=”#842801″ borderStyle=”solid” borderThickness=”0″ left=”0″ right=”0″ top=”22″>
</mx:Canvas>

<mx:Canvas id=”cvsHeader” left=”0″ right=”0″ top=”0″ height=”40″>
</mx:Canvas>

</mx:Canvas>

Advertisements