做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