在任何BS项目中,消息提示框都是非常常见的功能组件,flex在AIR的渲染下,消息提示框也是做得非常漂亮美观。
Flex的消息提示框由mx.controls.Alert类负责创建,通常通过调用静态方法show(即可实现提示框的创建):
1. public static
2. //消息提示内容
3. null, //标题
4. //按钮组合
5. null, //Alert 控件的父对象
6. null, //指定 click 事件的侦听器
7. null, //指定对话框中消息文本左侧的图标
8. //使用一个标志参数的合法值指定默认按钮。当用户按下回车时,此按钮就被选中,其默认值是 Alert.OK.
9. )
public static show (
text:String, //消息提示内容
title:String=null, //标题
flags:uint=mx.controls.Alert.OK, //按钮组合
parent:Sprite=null, //Alert 控件的父对象
clickListener:Function=null, //指定 click 事件的侦听器
iconClass:Class=null, //指定对话框中消息文本左侧的图标
defaultButton:uint=mx.controls.Alert.OK //使用一个标志参数的合法值指定默认按钮。当用户按下回车时,此按钮就被选中,其默认值是 Alert.OK.
)
show方法内所有参数都是非必选的。
参数flags表示弹出框下面生成几种按钮,alert类提供了四个按钮:是、否、确定和取消,由四个整数抽象表示:
1. Alert.OK 4
2. Alert.NO 2
3. Alert.YES 1
4. Alert.CANCEL 8
Alert.OK 4
Alert.NO 2
Alert.YES 1
Alert.CANCEL 8
具体使用方法详见后面的代码。
参数clickListener可实现点击按钮事件监听,也就是说可以通过监听来判断用户点击的是哪个按钮,从而根据不同选择实现不同操作。
下面来看一个实例:在界面上有三个按钮,每点击一个按钮弹出一个提示框。这个功能非常简单,只需要给每个button绑定click事件即可:
1. <fx:Script>
2. <![CDATA[
3. import mx.controls.Alert;
4. import mx.events.CloseEvent;
5.
6.
7. protected function button1_clickHandler(event:MouseEvent):void
8. {
9. var myAlert:Alert = Alert.show("显示对话框...","提示");
10. myAlert.height = 200; //高度
11. myAlert.width = 200; //宽度
12. }
13.
14. protected function button2_clickHandler(event:MouseEvent):void
15. {
16. Alert.show("你确定此操作吗?","提示",Alert.OK|Alert.CANCEL|Alert.YES|Alert.NO,this,handler);
17. }
18.
19. protected function button3_clickHandler(event:MouseEvent):void
20. {
21. Alert.yesLabel = "哟系yes";
22. Alert.noLabel = "呀灭no";
23. Alert.cancelLabel = "哦cancel";
24. var myAlert:Alert = Alert.show("选择操作...","提示",1|2,this,handler);
25. }
26.
27. private function handler(e:CloseEvent):void{
28. //显示事件选择的值
29. Alert.show(e.detail.toString());
30. }
31.
32. ]]>
33. </fx:Script>
34.
35. <fx:Declarations>
36. <!-- 将非可视元素(例如服务、值对象)放在此处 -->
37. </fx:Declarations>
38. <s:Button label="按钮1" click="button1_clickHandler(event)"/>
39. <s:Button label="按钮2" click="button2_clickHandler(event)"/>
40. <s:Button label="按钮3" click="button3_clickHandler(event)"/>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
protected function button1_clickHandler(event:MouseEvent):void
{
var myAlert:Alert = Alert.show("显示对话框...","提示");
myAlert.height = 200; //高度
myAlert.width = 200; //宽度
}
protected function button2_clickHandler(event:MouseEvent):void
{
Alert.show("你确定此操作吗?","提示",Alert.OK|Alert.CANCEL|Alert.YES|Alert.NO,this,handler);
}
protected function button3_clickHandler(event:MouseEvent):void
{
Alert.yesLabel = "哟系yes";
Alert.noLabel = "呀灭no";
Alert.cancelLabel = "哦cancel";
var myAlert:Alert = Alert.show("选择操作...","提示",1|2,this,handler);
}
private function handler(e:CloseEvent):void{
//显示事件选择的值
Alert.show(e.detail.toString());
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<s:Button label="按钮1" click="button1_clickHandler(event)"/>
<s:Button label="按钮2" click="button2_clickHandler(event)"/>
<s:Button label="按钮3" click="button3_clickHandler(event)"/>
需要注意的是Alert.yesLabel、Alert.noLabel、Alert.cancelLabel等等set方法是全局的,如果相应属性值改变,则其它Alert对象也会跟着改变。
最后看下运行效果: