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") {
            //...
        }
});