Flex AIR自定义Mobile的弹出框组件

做Flex Mobile开发的人应该知道，Flex为手机应用并没有提供弹出框组件，需要自定义。

通过查找文档、资料，我做出一个效果还算不错的弹出框组件，可以适用于手机设备上，不多讲，直接贴源码，相信对Flex了解的人都可以一看就懂。

首先，需要MXML定义弹出框组件：

<s:SkinnablePopUpContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
						   xmlns:s="library://ns.adobe.com/flex/spark"
						   xmlns:itemrenderer="com.adobe.mobilecrud.view.itemrenderer.*"
						   width="{screenX * 0.75}" height="{screenY * 0.25}" backgroundAlpha="0"
						   creationComplete="CenterPopUp()"
						   preinitialize="screen_initializeHandler(event)">
	
	<fx:Script>
		<![CDATA[
			import mx.core.FlexGlobals;
			import mx.events.FlexEvent;
			
			[Bindable]
			public var title:String = "";
			[Bindable]
			public var message:String = "";
			
			[Bindable]
			private var screenX:Number;
			[Bindable]
			private var screenY:Number;
			
			// 使应用程序居中
			private function CenterPopUp():void{
				this.x = FlexGlobals.topLevelApplication.width / 2 - this.width / 2;
				this.y = FlexGlobals.topLevelApplication.height / 2 - this.height / 2;
				
			}
			// 初始化窗口大小
			protected function screen_initializeHandler(event:FlexEvent):void
			{				
				screenX = Capabilities.screenResolutionX;
				trace("screenX:"+screenX);
				screenY = Capabilities.screenResolutionY;
			}
			
		]]>
	</fx:Script>
	
	<s:Rect width="100%" height="100%" radiusX="10" radiusY="10">
		<s:stroke>
			<s:SolidColorStroke color="#C2C6C3" weight="1"/>
		</s:stroke>
		<s:fill>
			<s:SolidColor alpha="1.0" color="white"/>
		</s:fill>
	</s:Rect>
	
	<s:VGroup width="100%" height="100%" gap="0" paddingTop="1">
		<s:Group width="100%" height="50">
			<s:Rect width="100%" height="100%" radiusX="10" radiusY="10">
				<s:fill>
					<s:LinearGradient rotation="90">
						<s:entries>
							<s:GradientEntry color="#f9f8f6" ratio="0.00"/>
							<s:GradientEntry color="#e3dfd7" ratio="0.60"/>
							<s:GradientEntry color="#f7f6f2" ratio="1.00"/>
						</s:entries>
					</s:LinearGradient>
				</s:fill>
			</s:Rect>
			<s:HGroup width="100%" height="100%" verticalAlign="middle">
				<s:Image source="@Embed('assets/alert/w1.png')"/>
				<s:Label color="#EE9F29" fontSize="30" fontWeight="bold" text="{title}"/>
			</s:HGroup>
		</s:Group>
		
		<s:Line width="100%">
			<s:stroke>
				<s:LinearGradientStroke caps="round" weight="1">
					<s:entries>
						<s:GradientEntry color="#c2bfad" ratio="0.5"/>
					</s:entries>
				</s:LinearGradientStroke>
			</s:stroke>
		</s:Line>
		
		<s:VGroup width="100%" height="50%" horizontalAlign="center" verticalAlign="middle">
			<s:Label width="92%" height="100%" color="#5a5a5a" fontSize="25" lineBreak="toFit"
					 maxDisplayedLines="2" text="{message}" textAlign="center"
					 verticalAlign="middle"/>
		</s:VGroup>
		
		<s:HGroup width="100%" color="#5a5a5a" fontSize="18" horizontalAlign="center">
			<s:VGroup width="50%" horizontalAlign="center">
				<s:Button id="btnOk" width="100" height="40" label="确 定" chromeColor="#e3dfd7"/>
			</s:VGroup>
			
			<s:VGroup width="50%" horizontalAlign="center">
				<s:Button id="btnCancel" width="100" height="40" label="取 消" chromeColor="#e3dfd7"/>
			</s:VGroup>
			
		</s:HGroup>
	</s:VGroup>
</s:SkinnablePopUpContainer>

组件定义成功后，我们可以写一个as文件，拿它来调用mxml文件：

package alert
{
	import flash.display.DisplayObjectContainer;
	import flash.events.MouseEvent;
	
	import mx.core.FlexGlobals;
	
	import spark.components.View;
	import spark.events.PopUpEvent;
	
	public class Confirm
	{
		private static var confirm:Confirm = null;
		
		private var confirmView:AlertConfirmView = new AlertConfirmView();
		
		private var closeHandler:Function = null;
		
		public static function getInstance():Confirm{
			if(confirm == null){
				confirm = new Confirm();
			}
			
			return confirm;
		}
		
		public function show(owner:DisplayObjectContainer,text:String = '',title:String = '', closeHandler:Function = null):void{
			confirmView.title = title;
			confirmView.message = text;
			
			confirmView.open(owner,true);
	
			if(closeHandler != null){   
				this.closeHandler = closeHandler;
				//confirmView.addEventListener(PopUpEvent.CLOSE,closeHandler);
			}else{
				
			}
			
			confirmView.btnOk.addEventListener(MouseEvent.CLICK,btnClose_clickHandler);
			confirmView.btnCancel.addEventListener(MouseEvent.CLICK,btnClose_clickHandler);
		}
		
		// 处理按钮监听事件
		protected function btnClose_clickHandler(event:MouseEvent):void
		{
			confirmView.btnOk.removeEventListener(MouseEvent.CLICK,btnClose_clickHandler);
			confirmView.btnCancel.removeEventListener(MouseEvent.CLICK,btnClose_clickHandler);
			
			trace(event.currentTarget.id);
			
			if(event.currentTarget.id == 'btnOk'){
				confirmView.addEventListener(PopUpEvent.CLOSE,closeHandler);
				trace("YES");
			}else{
				trace("NO");
			}
			
			confirmView.close();
		}
		// 取消PopUp监听
		public function cancelMonitor():void{
			confirmView.removeEventListener(PopUpEvent.CLOSE,closeHandler);
		}
		
	}
}

其实，内容很简单，关于这方面的资料网上也是有一些的，但尽善尽美的东西却很少，我写的这个也算不得很完美，不过已经很实用了。

源代码下载地址： http://download.csdn.net/detail/zuiwuyuan/8020273