Flex에서 로딩 컴포넌트 작성하기

22153 단어 몸을 풀다
Flex 인터페이스가 초기화되면 때때로 표준 진행률 표시줄이 표시되지 않고 인터페이스가 오랜 시간 동안 공백 상태를 처리합니다! 진행률 표시줄을 사용자 지정해 보겠습니다.
이 진행률 표시줄은 Application API의
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)+"\r
"
+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)+"\r
"
+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("初始化, 请稍后...");
}
 

좋은 웹페이지 즐겨찾기