Flex에서 로딩 컴포넌트 작성하기
22153 단어 몸을 풀다
이 진행률 표시줄은 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.aspackage 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.aspackage 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("初始化, 请稍后...");
}