Flex里Alert控件详解

http://www.flexrain.cn/flex/flex-alert.html

 

Flex里的Alert控件使用也很简单,不过我们也要了解常用的应用情况,它位于mx.controls.Alert,主要是show()方法,参数形式show(text, title, flags, parent, closeHandler, iconClass, defaultButtonFlag)
flags参数有些特别之处,就是我们可以用Alert.YES|Alert.No或者1|2|4来定义弹出框的按钮组合:
Yes按钮可以表示为:Alert.YES、 0×0001或者 1
No按钮可以表示为:Alert.No、0×0002 或者 2
OK按钮可以表示为:Alert.OK、0×0004 或者 4
Cancel按钮可以表示为:Alert.Cancel、0×0008 或者 8

closeHandler参数是当弹出窗关闭时回调的函数
iconClass参数是嵌入图标
defaultButtonFlag参数是默认的焦点按钮

Alert类还有其他一些常用的属性如:定义弹出按钮的高宽buttonWidth buttonHeight。定义四种按钮的标签名:yesLabel noLabel okLabel cancelLabel这些都能顾名思义到作用之处。

代码:

1. <?xml version="1.0" encoding="utf-8"?> 
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.         layout="vertical" verticalAlign="middle"
4.         preloader="com.preload.PreLoad" 
5.         backgroundColor="0x414141">
6.     <!--上面preload属性与下面外部CSS可以删除它-->
7.     <mx:Style source="yfskin/yflexskin.css"/>
8.     <mx:Style> 
9.         Panel {
10.             drop-shadow-enabled: true;
11.         }
12.     </mx:Style> 
13.     <mx:Script> 
14.         <![CDATA[
15.             import mx.controls.Alert;
16.             import flash.events.Event;
17.             import mx.events.CloseEvent;
18.            
19.             private var _alert:Alert; 
20.            
21.             private function showAlert():void
22.             {
23.                 var text:String = "加油吧!Flex很好学的!"; //定义弹出框内容
24.                 var title:String = "你好"; //定义弹出框标题
25.                 _alert = Alert.show(text, title, Alert.YES | Alert.NO);
26.             }
27.            
28.             private function showAlert2(event:Event):void
29.             {
30.                 var text:String = "注意点选按钮后,看Lable标签的返回显示";
31.                 var title:String = "请选择";
32.                 var defaultbtn:uint = 0x0002; //默认焦点按钮
33.                 _alert = Alert.show(text, title, 1|2|4|8, this, closeFun, null, defaultbtn);
34.             }
35.             //关闭弹出框回调函数
36.             private function closeFun(event:CloseEvent):void
37.             {
38.                 //trace (event.detail);
39.                 switch (event.detail)
40.                 {
41.                     //1对应Yes按钮 2对应No按钮 4对应OK 8对应Canel
42.                     case 1: 
43.                     status.text = "Yes";
44.                     break;
45.                     case 2:
46.                     status.text = "No";
47.                     break;
48.                     case 4:
49.                     status.text = "OK";
50.                     break;
51.                     case 8:
52.                     status.text = "Cancel";
53.                     break;
54.                     default:
55.                     break;
56.                 }
57.             }
58.            
59.             private function SetAlertBtn():void
60.             {
61.                 //宽度一定义就影响到其他铵钮宽度
62.                 Alert.buttonWidth = 80;
63.                 Alert.buttonHeight = 22; //默认高度
64.                 //更改各按钮标签名
65.                 Alert.yesLabel = "是";
66.                 Alert.noLabel = "不";
67.                 Alert.okLabel = "好";
68.                 Alert.cancelLabel = "取消";
69.                 status.text = "已经更改各按钮标签名了!";
70.             }
71.            
72.             private function defaultAlertBtn():void
73.             {
74.                 //恢复按钮标签名
75.                 Alert.yesLabel = "Yes";
76.                 Alert.noLabel = "No";
77.                 Alert.okLabel = "OK";
78.                 Alert.cancelLabel = "Cancel";
79.                 status.text = "现在各按钮标签名恢复了!";
80.             }
81.            
82.         ]]> 
83.     </mx:Script> 
84.    
85.     <mx:Label id="status" color="blue" /> 
86.     <mx:HBox> 
87.         <mx:Button label="Alert1" click="showAlert();" /> 
88.         <mx:Button label="Alert2" click="showAlert2(event);" /> 
89.         <mx:Button label="SetAlertBtn" click="SetAlertBtn();" /> 
90.         <mx:Button label="defaultAlertBtn" click="defaultAlertBtn();" /> 
91.     </mx:HBox> 
92. </mx:Application>