Flex 编写 loading 组件

Flex 界面初始化有时那个标准的进度条无法显示，界面长时间会处理空白的状态！我们来自定义一个进度条，

这个进度条加载在 Application 应用程序界面的 <s:Application 标签的 preinitialize 属性上:

preinitialize="preInit(event, '')"

它就可以比 Flex 自执行的正常显示。

1.组件ZtipWindow.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" 
         addedEffect="{fadeIn}" removedEffect="{fadeOut}" >
    
    <fx:Script>
        <![CDATA[
            import events.ZTipEvent;
            
            import mx.managers.PopUpManager;
            
            public var position:Point;
            
            [Bindable]
            public var icon:Object;
            
            [Bindable]
            public var message:String;
            
            [Bindable]
            public var close:Object;
            
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                if (position)
                {
                    x = position.x - unscaledWidth / 2;
                    y = position.y - unscaledHeight / 2;
                }
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
            
            protected function cleTip_clickHandler(event:MouseEvent):void
            {
                this.dispatchEvent(new ZTipEvent(ZTipEvent.CLOSE));
            }
            
            public function hideClose():void {
                cleTip.visible = false;
                cleTip.height = 0;
                iconOn.top = 12;
                lblOn.top = 10;
                
//                if (Number(iconOn.bottom) < 15)
//                    iconOn.bottom = 15;
            }
            
            public function showClose():void {
                cleTip.visible = true;
                cleTip.height = 18;
                iconOn.top = 25;
                lblOn.top = 32;
                
//                if (Number(iconOn.bottom) < 15)
//                    iconOn.bottom = 15;
            }
            
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <s:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="1000"  />
        <s:Fade id="fadeOut" alphaFrom="1" alphaTo="0" duration="2500"  />
    </fx:Declarations>
    
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    
    <s:BitmapImage left="0" right="0" top="0" bottom="0" source="@Embed(source='assets/skins/alert/tip_bgz.png', scaleGridLeft='5', scaleGridRight='11', scaleGridTop='6', scaleGridBottom='48')" />
    
    <s:BitmapImage left="10" top="25" source="{icon}" id="iconOn" />
    
    <s:Button top="10" right="10" icon="{close}" click="cleTip_clickHandler(event)" id="cleTip" width="18" height="18" />
    
    <s:Label left="45" right="10" top="32" bottom="20" text="{message}" id="lblOn" verticalAlign="middle" />
</s:Group>

2.事件ZTipEvent.as

package events
{
    import flash.events.Event;

    public class ZTipEvent extends Event
    {
        public static const CLOSE:String = "close";
        public    var detail:int ;
        public function ZTipEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false, detail:int = -1)
        {
            super(type, bubbles, cancelable);
            this.detail = detail;
        }
    }
}

3.主程序类Zloading.as

package command
{
    import flash.events.MouseEvent;
    import flash.geom.Point;
    import flash.utils.setTimeout;
    
    import components.ZtipWindow;
    import events.ZTipEvent;
    
    import mx.controls.Alert;
    import mx.core.FlexGlobals;
    import mx.events.CloseEvent;
    import mx.managers.PopUpManager;
    
    import spark.components.Application;

    public class Zloading
    {
        [Embed('assets/skins/alert/tip_loading.png')]
        private static var ICON_LOADING:Class;
        
        [Embed(source="assets/skins/icon/icon_delete.png")]
        private static var ICON_CLOSE:Class;
        
        private static var tip:ZtipWindow = null;
        private static var mtip:ZtipWindow = null;
        private static var isloading:Boolean = false;
        public function Zloading()
        {
            
        }
        
        public static function showTip(message:String, flag:Boolean=true):void {
            
            if (isloading && tip && flag) {
                PopUpManager.removePopUp(tip);
            }
            
            isloading = true;
            var showX:Number = Application(FlexGlobals.topLevelApplication).width / 2;
            var showY:Number = Application(FlexGlobals.topLevelApplication).height / 1.5;
            var pos:Point = new Point(showX, showY);
            var app:Application = FlexGlobals.topLevelApplication as Application;
            
            if (flag || (flag == false && tip == null)) {
                tip = new ZtipWindow();
            }
            
            if(message.length>80)
            {
                tip.message= message.substr(0,130)+"
"+message.substr(130,message.length-1)
            }
            else
            {
                tip.message = message;
            }
            
            tip.icon  = ICON_LOADING;
            tip.close = ICON_CLOSE;
            tip.hideClose();
            
            PopUpManager.addPopUp(tip, app);
            PopUpManager.centerPopUp(tip);
            
            tip.addEventListener(MouseEvent.MOUSE_DOWN, function():void{
                if (!tip)
                    return;
                tip.dispatchEvent(new CloseEvent(CloseEvent.CLOSE));
            });
        }
        
        public static function timeTip(message:String, pos:Point = null, delay:int = 3000):void {
            
            if (mtip != null) {
                PopUpManager.removePopUp(mtip);
            }
            
            if(!pos)
            {
                var showX:Number = Application(FlexGlobals.topLevelApplication).width / 2;
                var showY:Number = Application(FlexGlobals.topLevelApplication).height / 1.5;
                pos = new Point(showX, showY);
            }
            
            var app:Application = FlexGlobals.topLevelApplication as Application;
            
            mtip = new ZtipWindow();
            if(message.length>80)
            {
                mtip.message= message.substr(0,130)+"
"+message.substr(130,message.length-1)
            }
            else
            {
                mtip.message = message;
            }
            
            mtip.icon  = ICON_LOADING;
            mtip.position = pos;
            mtip.close = ICON_CLOSE;
            mtip.hideClose();
            
            PopUpManager.addPopUp(mtip, app);
            PopUpManager.centerPopUp(mtip);
            
            mtip.addEventListener(MouseEvent.MOUSE_DOWN, function():void{
                if (!mtip)
                    return;
                mtip.dispatchEvent(new CloseEvent(CloseEvent.CLOSE));
            });
            
            setTimeout(function():void {
                PopUpManager.removePopUp(mtip);
            }, delay);
        }
        
        public static function close(result:String = '数据操作中, 请稍后...', delay:int = 3000):void
        {
            if (tip != null) {
                if (delay != 0) {
                    setTimeout(function():void {
                        tip.message = result;
                        PopUpManager.removePopUp(tip);
                        isloading = false;
                    }, delay);
                } else {
                    tip.message = result;
                    tip.showClose();
                    tip.addEventListener(ZTipEvent.CLOSE, function():void {
                        PopUpManager.removePopUp(tip);
                        isloading = false;
                    });
                }
            }
        }
    }
}

4.调用方法

<s:Application
...
preinitialize="preInit(event, '')"

private function preInit(event:Event, msg:String):void
{
    Zloading.showTip("初始化, 请稍后...");
}