Flex中TitleWindow自定义CloseButton问题

0
分享 2013-07-31
今天捉虫子,为了让项目中基于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>

再新建基于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);
}

文章来源:http://www.cnblogs.com/esrichina/archive/2012/08/31/2665286.html

0 个评论

要回复文章请先登录注册