`

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
分享到:
评论

相关推荐

    flex 窗口拖动与尺寸改变

    这些组件提供了基本的窗口功能,如标题、关闭按钮、拖动以及调整大小的能力。在Flex中,你可以通过MXML或者ActionScript来定义和控制这些属性。 1. **窗口拖动**:在Flex中,`MX:Window`组件默认具有拖动功能。当...

    Flex4 Air 自定义窗口

    Flex4 AIR自定义窗口是一种高级的用户界面设计技术,它允许开发者创建出具有独特特性和交互体验的应用程序。在本文中,我们将深入探讨Flex4和Adobe Integrated Runtime (AIR)如何结合,实现自定义窗口功能,包括窗口...

    flex 模仿WINDOWS窗口

    总之,"Flex模仿WINDOWS窗口"是一个展示Flex 3.0强大UI构建能力的实例,通过使用预定义组件、自定义皮肤和ActionScript编程,可以创建出具有高度互动性和视觉吸引力的用户界面。对于学习Flex和UI设计的开发者来说,...

    flex 窗口托盘和全屏

    在IT行业中,Flex是一种基于ActionScript 3.0和Flash Player或者Adobe AIR运行时环境的开源框架,主要用于构建富互联网应用程序(RIA)。本篇将详细讲解如何在Flex中实现窗口托盘和全屏功能。 首先,让我们关注...

    flex 弹出窗口选择,支持autocomplete功能

    在本文中,我们将深入探讨如何在Flex环境中实现一个具有autocomplete(自动补全)功能的弹出窗口选择器。Flex是一种基于ActionScript的开源框架,用于构建富互联网应用程序(RIA),它允许开发者创建交互性强、用户...

    flex 自动弹出窗口(右下角弹出,右上角弹出)

    在IT行业中,自动弹出窗口是一项常见的用户界面交互设计,用于提供信息提示、通知或确认操作。这种技术常被应用于各种软件、网站和移动应用,以增强用户体验。本篇文章将详细探讨如何实现“自动弹出窗口”,特别是右...

    flex仿qq右边弹出提示消息功能

    在IT行业中,Flex是一种基于ActionScript 3.0和Flash Player的开源框架,主要用于构建富互联网应用程序(RIA)。本项目“flex仿qq右边弹出提示消息功能”旨在模仿QQ聊天软件中的右下角弹出通知功能,为用户提供类似...

    Flex做的按钮3D效果源码

    在这个"Flex做的按钮3D效果源码"中,我们主要关注的是如何在Flex中实现3D效果的按钮。 在Flex中,我们可以利用MXML和ActionScript来创建UI组件,包括按钮。3D效果通常是通过转换(Transform)类和效果(Effect)类...

    Flex 弹出窗口代码

    在Flex编程中,"弹出窗口代码"是一个常见的需求,特别是在设计用户交互界面时,我们经常需要实现点击按钮后打开一个新的窗口或者对话框来展示更多信息或进行特定操作。本篇将详细讲解如何在Flex中创建一个点击按钮后...

    flex窗口最大最小化

    本教程将详细讲解如何使用Flex来实现窗口的拖拽、最大化、最小化以及关闭功能,这些都是构建交互式用户界面的重要元素。 首先,让我们了解Flex的基本概念。Flex布局允许开发者对容器内的子元素进行灵活的排版,通过...

    Flex 弹出窗口的数据传输

    在IT行业中,Flex是一种基于ActionScript和MXML的开源框架,用于构建富互联网应用程序(RIA)。这个场景中,我们关注的是“Flex 弹出窗口的数据传输”,这涉及到Flex中的组件交互以及数据绑定技术。 首先,`...

    flex4 做和QQ一样的窗体 最大化 最小化 关闭 拖动改变大小

    在Flex4中创建类似QQ应用的窗口功能,包括最大化、最小化、关闭以及拖动改变大小,是一项常见的GUI开发任务。这个项目通过一系列MXML文件实现,这些文件包含了界面元素的定义和交互逻辑。让我们详细了解一下如何利用...

    MyEclipse Flex环境配置详解

    本文将详细介绍如何在MyEclipse中配置Flex开发环境,以帮助开发者顺利进行Flex项目的构建和调试。 一、安装MyEclipse 首先,你需要下载并安装MyEclipse。MyEclipse是一款商业的Java EE集成开发环境,它扩展了...

    C#+Flex 在线聊天

    《C#+Flex构建在线聊天应用详解》 在线聊天系统已经成为现代通信的重要组成部分,它使得人们可以实时交流,不受地域限制。本实例将深入探讨如何利用C#作为服务端语言,结合Flex作为客户端UI开发工具,构建一个简单...

    flex数据交互_方式

    例如,当用户点击一个按钮时,可以触发一个事件,然后通过事件处理函数来执行特定的操作,如打开一个新的窗口、提交表单数据或更新UI元素的状态。 ### 网络通信 Flex框架还提供了一套强大的网络通信工具,使得Flex...

    在MFC嵌入Flex并且相互通信

    这个过程涉及到多个步骤,包括创建Flex项目、构建MFC应用程序、集成Flex控件以及实现两者间的通信。 首先,我们需要了解MFC。MFC是微软提供的一套面向对象的类库,基于Windows API,用于简化Windows应用程序的开发...

    flex中文帮助.rar

    8. **事件处理**:Flex应用中的事件处理是通过事件监听器实现的,允许程序对用户的交互做出响应,如点击按钮、关闭窗口等。 9. **图形和动画**:Flex提供了强大的图形绘制和动画功能,可以创建复杂的矢量图形和动态...

    flex项目发布到Tomcat成功

    继续在项目属性窗口中,选择 “Flex Build Path” -> “Libraries”,点击 “Add Library” 按钮添加所需的 Flex SDK 和其他依赖库。 4. **部署项目到 Tomcat** 在 MyEclipse 中配置好 Tomcat 服务器后,右键...

    flex css设计器

    4. **控件库支持**:Flex CSS设计器支持大部分Flex提供的内置控件,如按钮、面板、列表等,允许用户针对每个控件独立设置样式。 5. **代码生成**:完成设计后,工具会自动生成相应的CSS代码,可以直接复制到Flex...

Global site tag (gtag.js) - Google Analytics