Flex中TitleWindow自定义CloseButton问题
今天捉虫子，为了让项目中基于TitleWindow的所有组件都使用自定义的CloseButton，我给TitleWindow添加了一个Button并设置皮肤
本想应该ok了，没想到所有基于该TitleWindow的组件并没有改变。于是做了一个测试（与项目中思路相同）：
新建基于TitleWindow的组件MyTitleWindow.mxml
<?xml version="1.0" encoding="utf-8"?> <s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" windowMoving="titleWin_windowMovingHandler(event)"> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <fx:Script> <![CDATA[ import mx.events.FlexEvent; import mx.managers.PopUpManager; import spark.events.TitleWindowBoundsEvent; protected function titleWin_windowMovingHandler(evt:TitleWindowBoundsEvent):void { if (evt.afterBounds.left < 100 - evt.afterBounds.width) evt.afterBounds.left = 100 - evt.afterBounds.width; else if (evt.afterBounds.left > systemManager.stage.stageWidth-100) evt.afterBounds.left = systemManager.stage.stageWidth - 100; if (evt.afterBounds.top < 0) evt.afterBounds.top = 0; else if (evt.afterBounds.top > systemManager.stage.stageHeight-30) evt.afterBounds.top = systemManager.stage.stageHeight - 30; } private function closeclick(evt:MouseEvent):void { PopUpManager.removePopUp(this); } ]]> </fx:Script> <s:Button id="closebtn" right="3" top="-25" width="20" height="20" click="closeclick(event)" skinClass="skins.win_closebtn_skin"/> </s:TitleWindow>
skin
<?xml version="1.0" encoding="utf-8"?> <s:Skin name="TitleWindowCloseButtonSkin" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009" xmlns:mx="library://ns.adobe.com/flex/mx" alpha.disabled="0.5" > <s:states> <s:State name="up" /> <s:State name="over"/> <s:State name="down" /> <s:State name="disabled" /> </s:states> <fx:Metadata> <![CDATA[ [HostComponent("spark.components.Button")] ]]> </fx:Metadata> <fx:Script fb:purpose="styling"> <![CDATA[ override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void { super.updateDisplayList(unscaledWidth, unscaledHeight); } ]]> </fx:Script> <mx:Image source="skins/w_close.png" width="20" height="20" /> </s:Skin>
再新建基于MyTitleWindow的组件UserInfoWindow.mxml
<?xml version="1.0" encoding="utf-8"?> <btw:MyTitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:btw="skins.*" width="360" height="420" title="测试信息"> <fx:Script> <![CDATA[ import mx.events.FlexEvent; import mx.managers.PopUpManager; ]]> </fx:Script> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <s:HGroup width="100%"/> <s:Button left="test"/> </btw:MyTitleWindow>
新建一个测试程序skinTest.mxml
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Script> <![CDATA[ import mx.managers.PopUpManager; import skins.UserInfoWindow; protected function closebtn(event:MouseEvent):void { // TODO Auto-generated method stub var win:UserInfoWindow=PopUpManager.createPopUp(this,UserInfoWindow,true) as UserInfoWindow; PopUpManager.centerPopUp(win); } ]]> </fx:Script> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <s:Button label="test" click="closebtn(event)"/> </s:Application>
发现如果不给UserInfoWindow添加其他组件的情况下自定义CloseButton没有问题
但是如果添加其他元素，自定义的CloseButton就不会被创建，原因尚不清楚！？
解决方法：
新建一个自定义组件ImageButton.mxml
<?xml version="1.0" encoding="utf-8"?> <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()"> <fx:Script> <![CDATA[ private function init():void { icon.addEventListener(MouseEvent.ROLL_OVER, iconMouseEventHandler); icon.addEventListener(MouseEvent.ROLL_OUT, iconMouseEventHandler); icon.addEventListener(MouseEvent.MOUSE_DOWN, iconMouseEventHandler); icon.addEventListener(MouseEvent.MOUSE_UP, iconMouseEventHandler); function iconMouseEventHandler(event:MouseEvent):void { button.dispatchEvent(new MouseEvent(event.type)); } } public function set imageSource(value:String):void { icon.source=value; } private function loadCompleteHandler():void { button.width=icon.contentWidth; button.height=icon.contentHeight; } ]]> </fx:Script> <s:Button id="button" width="100%" height="100%"/> <mx:Image id="icon" width="100%" height="100%" complete="loadCompleteHandler()"/> </s:Group>
在MyTitleWindow组件的初始化时，添加按钮，这样问题就解决了。
以上未必是解决该问题的最好方法，但是提供一种思路供大家参考，通过在TitleWindow初始化时添加相应组件，可以构建我们所需的自定义组件
initialize="init(event)" private function closeclick(evt:MouseEvent):void { PopUpManager.removePopUp(this); } protected function init(event:FlexEvent):void { // TODO Auto-generated method stub var closebtn:ImageButton=new ImageButton(); closebtn.right=4; closebtn.top=-26; closebtn.height=20; closebtn.width=20; closebtn.imageSource="skins/w_close_red.png"; closebtn.addEventListener(MouseEvent.CLICK,closeclick); this.addElement(closebtn); }