2.12.弹出窗口的显示和位置

2.12.1. 问题
我想要在使用弹出窗口时给用户显示附加信息。
2.12.2. 解决办法
通过用户交互,使用PopUpManager 来创建TitleWindow 组件实例
2.12.3. 讨论
Flex 框架包含了一个PopUpManager 类,它包含了若干静态方法来管理穿件,放置,移除Flex应用程序的顶级窗口。如下代码所示:
+展开
-XML
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">

<mx:Canvas horizontalCenter="0verticalCenter="0">
<mx:LinkButton label="Topx="100y="10"
click="showDetail(event)"/>

<mx:LinkButton label="Leftx="10y="100"
click="showDetail(event)"/>

<mx:LinkButton label="Bottomx="100y="200"
click="showDetail(event)"/>

<mx:LinkButton label="Rightx="200y="100"
click="showDetail(event)"/>

<mx:Canvas width="100height="100x="125y="40"
backgroundColor="#ff0000rotation="45">

</mx:Canvas>
</mx:Canvas>
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
private const POPUP_OFFSET:int = 10;
private function showDetail(evt:MouseEvent):void {
// create the popup
var popup:CustomPopUp =
CustomPopUp(PopUpManager.createPopUp(this,
CustomPopUp,false));
popup.message = "This is the detail for " +
evt.target.label;
// position the popup
var pt:Point = new Point(0, 0);
pt = evt.target.localToGlobal(pt);
popup.x = pt.x + POPUP_OFFSET;
popup.y = pt.y + evt.target.height + POPUP_OFFSET;
}


]]>
</mx:Script>
</mx:Application>


在这个例子中,一系列的LinkButton 控件被创建并被绝对定位放置在Canvas 中。当用户点击了一个LinkButton,一个弹出窗口会显示用来为用户显示详细信息。LinkButton 控件的click 事件被连接到showDetail 方法上。showDetail 方法使用了PopUpManager 的createPopUp方法来创建了一个自定义组件CustomPopUp 的实例。然后弹出窗口的message 属性被赋值成需要被显示给用户的值。最后,弹出窗口被相对定位到发起初始请求的LinkButton。

LinkButton 左上角的(LinkButton 的坐标内,x=0,y=0),会被localToGlobal 方法从组件内部坐标空间装换到全局坐标空间。这个转换方法在所有的显示元件和他们的子类都可用。

CustomPopUp 类代码如下所示:
+展开
-XML
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
width="300height="50"
styleName="customPopUp"
showCloseButton="true"
close="handleClose(event)">

<mx:Style>
.customPopUp {
header-height:2;
padding-left:5;
padding-right:5;
padding-top:5;
padding-bottom:5;
border-color:#000000;
border-alpha:.5;
border-thickness-left:5;
border-thickness-right:5;
border-thickness-bottom:5;
border-thickness-top:5;
background-color:#666666;
color:#ffffff;
}

</mx:Style>
<mx:Text width="100%height="100%text="{message}"/>
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.events.CloseEvent;
[Bindable]
public var message:String;
private function handleClose(evt:CloseEvent):void {
PopUpManager.removePopUp(this);
}


]]>
</mx:Script>
</mx:TitleWindow>


CustomPopUp 类继承于TitleWindow 类,并且添加了一个Text 控件用来显示信息。当通过PopUpManager 的removePopUp 方法来关闭弹出窗口时,TitleWindow 的close 事件被指向到handleClose 方法。上面的代码还包含了自定义CustomPopUp 显示的CSS 风格。

加支付宝好友偷能量挖...


评论(0)网络
阅读(86)喜欢(0)flash/flex/fcs/AIR