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>

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