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("初始化, 请稍后...");
}
Flex 编写 loading 组件的更多相关文章
- Angular23 loading组件、路由配置、子路由配置、路由懒加载配置
1 需求 由于Angular是单页面的应用,所以在进行数据刷新是进行的局部刷新:在进行数据刷新时从浏览器发出请求到后台响应数据是有时间延迟的,所以在这段时间就需要进行遮罩处理来提示用户系统正在请求数据 ...
- vue2.0 仿手机新闻站(五)全局的 loading 组件
1.组件结构 index.js const LoadingComponent = require('./Loading.vue') const loading = { install: functio ...
- ReactJS实践(一)—— FrozenUI React化之Loading组件
在前面我们通过四篇文章入门了React的大部分主要API,现在则开始进入实践环节. 实践系列的开篇打算拿我司的FrozenUI来试验,将其部分UI组件进行React化,作为第一篇实践文章,将以较简单的 ...
- flex的Accordion组件头部文本居中显示
flex的Accordion组件头部文本默认是居左的,可以通过设置headerStyleName属性使之居中,另外还可以设置字体的样式等 <?xml version="1.0" ...
- iOS应用日志:开始编写日志组件与异常日志
应用日志(一):开始编写日志组件 对于那些做后端开发的工程师来说,看 LOG解Bug应该是理所当然的事,但我接触到的移动应用开发的工程师里面,很多人并没有这个意识,查Bug时总是一遍一遍的试图重现,试 ...
- Vue 封装的loading组件
<template> <div class="loadEffect"> <span></span> <span>< ...
- vux 使用 loading 组件
1)声明引入Loading import { Loading } from 'vux' 2)在模版底部添加 组件(需要添加到 template>div 标签里) <template> ...
- 【转载】用纯粹的C++编写COM组件
原文:http://blog.csdn.net/ghj1976/article/details/3441 下载本文代码 本文提供一个完全用C++实现的进程内(DLL)COM服务器,不要ATL或MFC提 ...
- React Native封装Toast与加载Loading组件
React Native开发封装Toast与加载Loading组件 在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Nati ...
随机推荐
- HDU排序水题
1040水题; These days, I am thinking about a question, how can I get a problem as easy as A+B? It is fa ...
- k8s网络之calico学习
一.知识准备 1.calico主要通过ipip协议与bgp协议来实现通信.前者通过ipip隧道作为通信基础,后者则是纯三层的路由交换 2.bgp协议主要由两种方式:BGP Speaker 全互联模式( ...
- 在windows10上搭建caffe
caffe环境的搭建一直是让我最头疼的,最近在Windows10上成功搭建了caffe,在此对搭建过程进行记录. 安装主要是按照caffe github上的安装说明进行的,caffe的github主页 ...
- imagick用法!
https://coderwall.com/p/9hj97w sudo apt-get install imagemagick sudo apt-get install php5-imagick su ...
- PAT 1001. A+B Format 解题
GitHub PDF 1001. A+B Format (20) Calculate a + b and output the sum in standard format -- that is, t ...
- 第二个spring冲刺总结
讨论成员:罗凯旋.罗林杰.吴伟锋.黎文衷 第二阶段总体是做到了四则运算的demo,,包括APP进入动画,以及界面的基本效果设计,还有能进行综合计算(选择题,可以 自动生成简单,容易,困难 三种难度 ...
- Android 7.0+相机、相册、裁剪适配问题
Android 7.0+相机.相册.裁剪适配问题 在manifest中: <provider android:name="android.support.v4.content.File ...
- Centos7 安装netcat
1.下载 下载地址:https://sourceforge.net/projects/netcat/files/netcat/0.7.1/ 下载的是netcat-0.7.1.tar.gz版本 2.安装 ...
- Oracle 标准版 企业版 个人版的区别 转帖
转帖来源: https://blog.csdn.net/flg_inwind/article/details/2628133 同事方总:http://www.oracle.com/us/corpora ...
- linux 修改终端颜色
要想修改终端的颜色,可以使用修改PS1环境变量的方式,也可以通过命令setterm来进行设置. 一.PS1 转自:修改linux终端命令行颜色 1.PS1 要修改linux终端命令行颜色,我们需要用到 ...