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; } } }