flex之小功能：用AS3创建带收缩功能的自定义Panel

Flex3权威指南第10课中讲述了如何用AS3创建自定义组件，例如创建一个带收缩功能的自定义Panel。如图：

 

 
 此AS代码就是填加了两个BUTTON，用图标显示了。还自定义了两个事件：restore和maximize。当然，你引用此组件的时候再实现这两个事件。

代码为：

package views
{
	import flash.display.DisplayObject;
	import flash.events.Event;
	
	import mx.containers.Panel;
	import mx.controls.Button;
	
	[Event(name="restore")]
	[Event(name="maximize")]
	
	public class MaxRestorePanel extends Panel
	{
		private var state:int =0;//代表是否被最大化
		private var btStateUp:Button;//可以单击该按钮将Panel最大化
		private var btStateDown:Button;//可以单击该按钮将Panel还原
		
		[Embed("../assets/upArrow.gif")]
		private var buttonUpIcon:Class;
		
		[Embed("../assets/downArrow.gif")]
		private var buttonDownIcon:Class;
		//设置状态，看看派发哪个事件
		private function setState(state:int):void{
			this.state = state;
			if(state == 0){
				this.dispatchEvent(new Event("restore"));
			} else {
				this.dispatchEvent(new Event("maximize"));
			}
		}
		protected override function createChildren():void{//重写Panel中的createChildren
			super.createChildren();
			btStateUp = new Button();
			btStateDown = new Button();
			btStateUp.addEventListener("click",doMaximize);
			btStateDown.addEventListener("click",doRestore);
	                                btStateUp.setStyle("overIcon",buttonUpIcon);
	                                btStateUp.setStyle("downIcon",buttonUpIcon);
	                                btStateUp.setStyle("upIcon",buttonUpIcon);
	                                btStateDown.setStyle("overIcon",buttonDownIcon);
	                                btStateDown.setStyle("downIcon",buttonDownIcon);
	                                btStateDown.setStyle("upIcon",buttonDownIcon);
	                                btStateUp.visible = true;
	                                btStateDown.visible = false;
	                                rawChildren.addChild(btStateUp);
	                                rawChildren.addChild(btStateDown);
		}
		//重写定义小图标的位置和大小
		protected override function updateDisplayList(unscaledWidth:Number, unscaledHeigh:Number):void{
			super.updateDisplayList(unscaledWidth,unscaledHeigh);
			if(unscaledWidth > 0){
				this.visible = true;
			} else {
				this.visible = false;
			}
			var upAsset:DisplayObject = btStateUp.getChildByName("upIcon");
			var downAsset:DisplayObject = btStateDown.getChildByName("upIcon");
			var margin:int = 4;//详细请查看权威指南211页
			btStateUp.setActualSize(upAsset.width+margin,upAsset.height+margin);
			btStateDown.setActualSize(downAsset.width+margin,downAsset.height+margin);
			var pixelsFromTop:int = 5;
			var pixelsFromRight:int = 10;
			var buttonWidth:int = btStateUp.width;
			var x:Number = unscaledWidth - buttonWidth - pixelsFromRight;
			var y:Number = pixelsFromTop;
			btStateDown.move(x,y);
			btStateUp.move(x,y);
		}
		private function doMaximize(event:Event):void{
			setState(1);
			btStateUp.visible = false;
			btStateDown.visible = true;
		}
		private function doRestore(event:Event):void{
			setState(0);
			btStateUp.visible = true;
			btStateDown.visible = false;
		}
	}
}