[AIR Mobile] Mobile中的Alert对话框的实现

转载：http://bbs.9ria.com/thread-96498-1-1.html

我们都知道在在Flex开发Mobile app的时候,Alert组件已经没有了.实现弹出对话框也没有了.对话框的实现只有靠我们自己了:

我们可以自己新建一个Alert组件,叫:MobileAlert,继承自SkinnablePopUpContainer 类,代码如下:

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <s:SkinnablePopUpContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
   
3.                                                    xmlns:s="library://ns.adobe.com/flex/spark" width="400" backgroundColor="0x999999">
   
4.         <s:layout>
   
5.                 <s:VerticalLayout gap="20" paddingBottom="10" paddingLeft="30" paddingRight="30" paddingTop="30" horizontalAlign="center"/>
   
6.         </s:layout>
   
7.         <fx:Declarations>
   
8.                 <!-- Place non-visual elements (e.g., services, value objects) here -->
   
9.         </fx:Declarations>
   
10.         <fx:Script>
    
11.                 <![CDATA[
    
12.                         [Bindable]
    
13.                         public var message:String;
    
14.                         private function clickHandler(commit:Boolean):void {
    
15.                                 super.close(commit);                                
    
16.                         }
    
17.                         
    
18.                 ]]>
    
19.         </fx:Script>
    
20.         <s:Label text="{message}" width="100%" textAlign="center"/>
    
21.         <s:HGroup width="100%">
    
22.                 <s:Button label="Yes" width="50%" click="clickHandler(true)"/>
    
23.                 <s:Button label="No" width="50%" click="clickHandler(false)"/>
    
24.         </s:HGroup>
    
25. </s:SkinnablePopUpContainer>

复制代码

那么我们只需要调用就可以了:下面是调用的Example:

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
   
3.                                                                   xmlns:s="library://ns.adobe.com/flex/spark">
   
4.         
   
5.         <fx:Script>
   
6.                 <![CDATA[
   
7.                         import com.coolexp.view.MobileAlert;
   
8.                         
   
9.                         import spark.events.PopUpEvent;
   
10.                         private var a:MobileAlert;
    
11.                         protected function button1_clickHandler(event:MouseEvent):void
    
12.                         {
    
13.                                 // TODO Auto-generated method stub
    
14.                                 a = new MobileAlert();
    
15.                                 a.message = "Exit App?";
    
16.                                 a.addEventListener(PopUpEvent.CLOSE, onAlertClose, false, 0, true);
    
17.                                 a.width = this.stage.width - 40;
    
18.                                 a.x = 20;
    
19.                                 a.open(this, true);
    
20.                                 a.y = (this.stage.height  - a.height) / 2;
    
21.                         }
    
22.                         private function onAlertClose(e:PopUpEvent):void {
    
23.                                 trace(e.commit);
    
24.                                 a = null;
    
25.                                 
    
26.                         }
    
27.                 ]]>
    
28.         </fx:Script>
    
29.         
    
30.         <fx:Declarations>
    
31.                 <!-- Place non-visual elements (e.g., services, value objects) here -->
    
32.         </fx:Declarations>
    
33.         <s:ViewNavigator label="Tab1" width="100%" height="100%" title="Tab1" >
    
34.                 <s:navigationContent>
    
35.                         <s:Button label="back" skinClass="spark.skins.mobile.BeveledBackButtonSkin" click="button1_clickHandler(event)">
    
36.                         </s:Button>
    
37.                 </s:navigationContent>
    
38.         </s:ViewNavigator>
    
39. 
    
40.         <s:ViewNavigator label="Tab2" width="100%" height="100%" title="Tab2">
    
41.                 
    
42.         </s:ViewNavigator>
    
43. </s:TabbedViewNavigatorApplication>

复制代码