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

      

轉載于:https://www.cnblogs.com/esrichina/archive/2012/08/31/2665286.html