首页 > 代码库 > Flex 自定义 Zlert 组件!

Flex 自定义 Zlert 组件!

说明:

原生的 Alert.show 参数,要显示的按钮你只能 Alert.OK | Alert.Cancel 这样;

自定义 Zlert 参数跟原生的 差不多,按钮写法是这样写的: {"btnId":"确定", "btnId2":"其他按钮名称"}

ZlertWindow.mxml: com/components

<?xml version="1.0" encoding="utf-8"?><mx:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"          xmlns:s="library://ns.adobe.com/flex/spark"          xmlns:mx="library://ns.adobe.com/flex/mx"          creationComplete="init(event)"         width="300" creationPolicy="all">    <fx:Declarations>        <!-- 将非可视元素(例如服务、值对象)放在此处 -->        <s:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="1000"  />        <s:Fade id="fadeOut" alphaFrom="1" alphaTo="0" duration="2500"  />    </fx:Declarations>        <fx:Script>        <![CDATA[            import com.events.ZlertedEvent;                        import mx.events.FlexEvent;                        import spark.components.Button;                        public var succFunc:Function;            public var btnsJson:Object = null;                        public var message:String ;                        [Bindable]            public var zicon:Object;                        private function init(event:FlexEvent):void {                initForm();            }                        public function initForm():void {                var that:Sprite = this;                for (var key:String in btnsJson) {                    var btn:Button = new Button();                    btn.id = key;                    btn.label = btnsJson[key];                    btn.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void {                        var _btn:Button = event.currentTarget as Button;                        if (succFunc) {                            succFunc(_btn.id);                        }                                                var altEvt:ZlertedEvent = new ZlertedEvent(ZlertedEvent.CLOSE);                        that.dispatchEvent(altEvt);                    });                                        AltForm.addElement(btn);                }                                var cancelBtn:Button = new Button();                cancelBtn.id="cclBtn";                cancelBtn.label = "取消";                cancelBtn.addEventListener(MouseEvent.CLICK, function(event:MouseEvent){                    var altEvt:ZlertedEvent = new ZlertedEvent(ZlertedEvent.CLOSE);                    that.dispatchEvent(altEvt);                });                                AltForm.addElement(cancelBtn);            }                    ]]>    </fx:Script>        <s:VGroup width="100%" height="100%">        <s:HGroup width="100%" height="100%" horizontalCenter="0" horizontalAlign="left">            <mx:Grid horizontalCenter="0" width="100%">                <mx:GridRow>                    <mx:GridItem width="40" verticalAlign="middle" horizontalAlign="center">                        <s:Group><s:BitmapImage source="{zicon}" id="iconOn" /></s:Group>                    </mx:GridItem>                    <mx:GridItem paddingTop="8">                        <s:Label text="{message}" verticalAlign="justify" fontSize="14" />                    </mx:GridItem>                </mx:GridRow>            </mx:Grid>        </s:HGroup>                <s:HGroup id="AltForm" width="100%" height="30" horizontalCenter="0" horizontalAlign="center">                    </s:HGroup>    </s:VGroup></mx:TitleWindow>

ZlertedEvent.as: com/events

package com.events{    import flash.events.Event;    public class ZlertedEvent extends Event    {        public static const CLOSE:String = "close";        public function ZlertedEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)        {            super(type, bubbles, cancelable);        }    }}

主组件类Zlert.as

package com.command{    import flash.display.Sprite;    import flash.events.EventPhase;        import com.components.ZlertWindow;    import com.events.ZlertedEvent;        import mx.controls.Alert;    import mx.core.Application;    import mx.core.FlexGlobals;    import mx.events.FlexEvent;    import mx.managers.ISystemManager;    import mx.managers.PopUpManager;    public class Zlert    {        [Embed(‘assets/skins/alert/tip_question.png‘)]        private static var ICON_QUESTION:Class;        private static var parent:Sprite                        public function Zlert()        {            super();        }                public static function show(msg:String, title:String = "确定", sprite:Sprite = null, btnsJson:Object = null, cancelHandler:Function = null) : void {            trace("asdfa");                        var modal:Boolean = true;                        parent = sprite;            if (!parent)            {                var sm:ISystemManager = ISystemManager(FlexGlobals.topLevelApplication.systemManager);                // no types so no dependencies                var mp:Object = sm.getImplementation("mx.managers::IMarshalSystemManager");                if (mp && mp.useSWFBridge())                    parent = Sprite(sm.getSandboxRoot());                else                    parent = Sprite(FlexGlobals.topLevelApplication);            }                        var alt:ZlertWindow = new ZlertWindow();            alt.title = title;            alt.message = msg;            alt.btnsJson = btnsJson;            alt.zicon = ICON_QUESTION;            alt.succFunc = cancelHandler;                        alt.addEventListener(ZlertedEvent.CLOSE, function():void{                PopUpManager.removePopUp(alt);            });                        PopUpManager.addPopUp(alt, parent, modal);            PopUpManager.centerPopUp(alt);        }            }}

使用方法:

Zlert.show("提示消息?","标题", this, {"btnId1":"确定", "btnId2" : "按钮2"}, function(key:String):void {        if (key != "btnId1") {            //...        }});