首页 > 代码库 > Flex 编写 loading 组件
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)+"\r\n"+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\n"+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("初始化, 请稍后...");}
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。