`

Flex 构建无按钮提示窗口(自动消失)

    博客分类:
  • FLEX
阅读更多
需求:
在一般用户操作中,需要进行一些提示例如:修改成功,修改完成,删除成功等,一般我们使用Flex自带的Alert.show的方式,但是在应用一些提示反馈的时候,我们可能希望只是提示一下就自动消失掉窗口,而不需要客户多点一次确定去取消窗口,写了一个提示方法,代码如下:
package com.ruixinflex.mapoperation.classes.MsgBox
{
	import flash.display.DisplayObject;
	import flash.events.MouseEvent;
	
	import mx.containers.Panel;
	import mx.controls.Image;
	import mx.core.FlexGlobals;
	import mx.events.FlexMouseEvent;
	import mx.managers.PopUpManager;
    import com.ruixinflex.mapoperation.classes.*;
	
	import spark.components.Label;

public class MsgBox extends Panel
	{
		private var _label:Label;
		private var _context:String;
		private var _image:Image;
		private var _imageType:int;
		
		private var _fadeEffect:FadeEffect;
		
		public static var imageType_warning:int = 1;
		public static var imageType_error:int = 2;
		public static var imageType_right:int = 3;
		
		[Bindable]
		[Embed(source="assets/icoRight.png")]
		public var icoRight:Class
		
		[Bindable]
		[Embed(source="assets/icoError.png")]
		public var icoError:Class
		
		[Bindable]
		[Embed(source="assets/icoWarning.png")]
		public var icoWarning:Class
	
		public function MsgBox(context:String,imageType:int)
		{
			super();
			this.setStyle("headerHeight",0);
			this._context = context;
			this._imageType = imageType;
			this._fadeEffect = new FadeEffect(this);
		}
		
		override protected function createChildren() : void {
			super.createChildren();
			addChild(createLabel());
			addChild(createImage());
		}
		
		public static function show(context:String,imageType:int = 1):void {
			var msgBox:MsgBox = new MsgBox(context,imageType);
            PopUpManager.addPopUp(msgBox,(DisplayObject)(FlexGlobals.topLevelApplication));
			PopUpManager.centerPopUp(msgBox);
			msgBox._fadeEffect.fadeOut(3500);
			
			msgBox.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE,msgBox.removePopUp);
			msgBox.addEventListener(MouseEvent.MOUSE_OVER,msgBox.mouseOver);
			msgBox.addEventListener(MouseEvent.MOUSE_OUT,msgBox.mouseOut);
		}
		
		private function removePopUp(e:FlexMouseEvent):void {
			PopUpManager.removePopUp(this);	
		}
		
		private function mouseOver(e:MouseEvent):void {
			if (this._fadeEffect.isPlaying) {
				this._fadeEffect.fadeIn(0);
			}
		}
		
		private function mouseOut(e:MouseEvent):void {
			_fadeEffect.fadeOut(3500);
		}
		
		override protected function measure():void {
			this._label.width = this._label.measureText(_context).width;
			this._label.height = this._label.measureText(_context).height;
			measuredWidth = this._label.width + 32 + 48;
			measuredHeight = 32 * 2;
		}
		
		override protected function updateDisplayList(param1:Number, param2:Number) : void {
			super.updateDisplayList(unscaledWidth,unscaledHeight);
			this._label.move(48 + (this.width - this._label.width - 48)/2 - 5 ,(this.height - this._label.height)/2);
			this._image.x = 16;
			this._image.y = 16;
		}
		
		private function createImage():Image {
			_image = new Image();
			if (_imageType == MsgBox.imageType_error) {
				_image.source = icoError;
				_label.setStyle("color","red");
			} else if (_imageType == MsgBox.imageType_right) {
				_image.source = icoRight;	
			} else {
				_image.source = icoWarning;		
				_label.setStyle("color","red");
			}
			return _image;
		}
		
		private function createLabel():Label {
			_label = new Label();
			_label.setStyle("fontSize",13);
			_label.text = _context;
			return _label;
		}
	}
}


    MsgBox.show("修改成功",3);

1、提示窗口自动3.5秒窗口消失(淡出)
2、淡出过程中,如鼠标触碰显示(如客户关注提示信息鼠标滑过,自动取消淡出,显示)
3、鼠标离开提示窗口3.5秒窗口消失(淡出)

目前有些参数并没有提取,只是要满足我项目中的使用,有兴趣的朋友可以提取一下。

注意:
1、上述代码需要引用三个图标
2、上述代码使用了我前一篇的淡入淡出窗口类FadeEffect,需要的话,打开我前篇博客。

无图无真相

  • 大小: 8.1 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics