Flex仿Ext的遮罩工具类

最新推荐文章于 2024-01-07 12:31:07 发布

最新推荐文章于 2024-01-07 12:31:07 发布 · 160 阅读

文章标签：

#EXT #Flash #Flex #Cache

前端开发专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个用于Flex应用程序的遮罩工具类实现，该工具类可以为UI组件添加半透明遮罩，并支持显示加载提示文本。遮罩的实现考虑了不同容器类型的特性，如Panel的标题栏高度。

package util {
	import flash.text.TextFieldAutoSize;
	import flash.utils.Dictionary;
	import flash.utils.getQualifiedClassName;
	
	import mx.binding.utils.BindingUtils;
	import mx.containers.Panel;
	import mx.core.UIComponent;
	import mx.core.UITextField;
	import mx.core.mx_internal;
	use namespace mx_internal;

	/**
	 * 遮罩工具类。
	 * 非Flex里面的mask概念，而是仿Ext的一层半透明控件
	 * @author simon.fish
	 */
	public class MaskUtil {
		
		/**
		 * 存储已经建立遮罩的容器。
		 * 主要是去掉遮罩使用
		 * @default 
		 */
		private static const cache:Dictionary = new Dictionary(true);
		/**
		 * 
		 */
		public function MaskUtil() {
			//TODO: implement function
		}
		
		
		/**
		 * 建立遮罩
		 * @param container
		 * @return 
		 */
		public static  function mask(container:UIComponent,text:String=null):Boolean{
			//先从缓存里面取遮罩 IUITextField(createInFontContext(UITextField))
			var mask:UIComponent = cache[container] as UIComponent;
			//如果取不出来，还未建立过遮罩
			if(mask == null){
				mask = new UIComponent();
				mask.tabEnabled = false;
				mask.alpha = 0.4;
				//Alert的背景色
				//mask.graphics.beginFill(14540252,100);
				mask.graphics.beginFill(0xADA2A2);
				//对于像Panel这样有title的特殊处理，以处理错位
				if(container is Panel){
					//得到标题栏高度，getHeaderHeightProxy为mx_internal.已经getHeaderHeightProxy需要3.2以上
					var hh:Number = Panel(container).getHeaderHeightProxy()+1;
					//left border
					var lb:Number = container.getStyle("borderThicknessLeft");
					mask.graphics.drawRect(0-lb, 0-hh, container.width, container.height);
				}else{
					mask.graphics.drawRect(0, 0, container.width, container.height);
				}
				
				//加文字
				if(text != null ){
					var textField:UITextField = createTextField(container);
					textField.text = text;// "  Loading...  ";
					mask.addChild(textField);
				}
				container.addChild(mask);
				cache[container] = mask;
			}else{
				//如果已经建立过遮罩，直接设成可见
				mask.visible = true;
			}
			return true;
		}
		
		/**
		 * 建立加载的遮罩
		 * @param container
		 * @return 
		 */
		public static  function loadMask(container:UIComponent):Boolean{
			return mask(container," Loading... ");
		}
		
		/**
		 * 取消遮罩
		 * @param container
		 * @return 
		 */
		public static  function unmask(container:UIComponent):void{
			//先从缓存里面取遮罩
			var mask:UIComponent = cache[container] as UIComponent;
			//只处理建立过遮罩
			if(mask != null){
				//如果已经建立过遮罩，直接设成不可见
				mask.visible = false;
			}
		}

		/**
		 * 创建中间的文字。
		 * @param container
		 * @return
		 *
		 */
		private static function createTextField(container:UIComponent):UITextField {
			var className:String = getQualifiedClassName(UITextField);
			var text = container.moduleFactory.create(className) as UITextField;
			text.tabEnabled = false;
			
			text.alpha = 0.4;
			text.background = true;
			text.borderColor = 0x31A5EA;
			text.border = true;//BindingUtils.bindProperty(
			text.thickness = 1;
			text.selectable = true;
			text.autoSize = TextFieldAutoSize.CENTER;
			//text.backgroundColor = 0x06A0ED;
			BindingUtils.bindProperty(text,"x",container,{
				name:"width",
				getter: function(host) { return (host.width-text.width)/2; } 
			});//(container.width - text.width) / 2);
			BindingUtils.bindProperty(text,"y",container,{
				name:"height",
				getter: function(host) { return (host.height-text.height)/2; } 
			});
			//BindingUtils.bindProperty(text,"y",container,(container.height - text.height) / 2);
//			text.x = (container.width - text.width) / 2;
//			text.y = (container.height - text.height) / 2;
			return text;
		}

	}
}

仿Ext风格的遮罩工具类。