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 ...
随机推荐
- python 游戏(记忆拼图Memory_Puzzle)
1. 游戏功能和流程图 实现功能:翻开两个一样的牌子就显示,全部翻开游戏结束,设置5种图形,7种颜色,游戏开始提示随机8个牌子 游戏流程图 2. 游戏配置 配置游戏目录 配置游戏(game_conf. ...
- 华为笔试——C++平安果dp算法
题目:平安果 题目介绍:给出一个m*n的格子,每个格子里有一定数量的平安果,现在要求从左上角顶点(1,1)出发,每次走一格并拿走那一格的所有平安果,且只能向下或向右前进,最终到达右下角顶点(m,n), ...
- Windows7下Java运行时环境搭建
第一步:下载JDK 地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html,(由于Sun于2009年被oracle收 ...
- npm模块之http-proxy-middleware使用教程(译)
单线程node.js代理中间件,用于连接,快速和浏览器同步 Node.js代理简单. 轻松配置代理中间件连接,快速,浏览器同步等. 由流行的Nodejitsu http代理提供. TL;DR 代理/ ...
- PAT甲题题解-1111. Online Map (30)-PAT甲级真题(模板题,两次Dijkstra,同时记下最短路径)
题意:给了图,以及s和t,让你求s到t花费的最短路程.最短时间,以及输出对应的路径. 对于最短路程,如果路程一样,输出时间最少的. 对于最短时间,如果时间一样,输出节点数最少的. 如果最短路程 ...
- 每日scrum(4)
今天是冲刺第4天,大家都忙着找大二的学弟学妹来点评来支持我们的软件. 遇到的问题主要是如何劝说学弟学妹选择我们的软件然后继续往下做. 任务看板: 燃尽图:
- C#使用结构体,输入5个人的学号,姓名,分数,按照成绩高低排列打印出来
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 重温jsp①
Jsp就是一个servlet servlet的缺点 不适合设置html响应体,需要response.Getwriter.print(); 优点:动态资源,可以编程. Jsp:在原有的html中加入了J ...
- Window环境下RabbitMQ 添加用户、设置角色和权限
基本上新增用户.角色和权限的方法都一样,大概如下: REM 添加一个帐号 密码 rabbitmqctl.bat add_user zhangfujun zhangfujun123 REM 添加角色 r ...
- Alpha 冲刺八
团队成员 051601135 岳冠宇 051604103 陈思孝 031602629 刘意晗 031602248 郑智文 031602234 王淇 会议照片 项目燃尽图 项目进展 完善各自部分 项目描 ...