当前位置: 代码迷 >> Web前端 >> 可以简易治理的弹出组件
  详细解决方案

可以简易治理的弹出组件

热度:89   发布时间:2012-11-14 10:12:19.0
可以简易管理的弹出组件
实现了一个简易的弹出管理器,可以设置是否弹出唯一面板,可以配合其它操作更改面板状态,弹出面板按照一定方式排序
组件代码:
package pizazz.flex4.manager.components.popup{
	import spark.components.TitleWindow;

	public class PopUpItem{
		private var _sign:String = "";
		private var _window:TitleWindow = null;
		private var _state:String = "";
		private var _index:Number = -1;

		public function get sign():String{
			return _sign;
		}

		public function get window():TitleWindow{
			return _window;
		}

		public function set state(value:String):void{
			_state = value;
		}

		public function get state():String{
			return _state;
		}

		public function set index(value:Number):void{
			_index = value;
		}

		public function get index():Number{
			return _index;
		}

		public function PopUpItem(window:TitleWindow, sign:String = ""){
			_window = window;
			_sign = sign;
		}
	}
}

package pizazz.flex4.manager{
	import mx.collections.ArrayCollection;
	import mx.core.UIComponent;
	import mx.events.CollectionEvent;
	import mx.managers.PopUpManager;
	import pizazz.flex4.manager.components.popup.PopUpItem;
	import spark.components.TitleWindow;

	public class PopUp{
		private var _num:int = 0;
		private const _left:uint = 32;
		private const _top:uint = 24;
		protected const _unique:Object = {};;
		protected const _collection:ArrayCollection = new ArrayCollection();
		private static var _popup:PopUp;
		protected static var _lock:Boolean = false;
		protected static var _container:UIComponent;
		/**
		 * 获取弹出数量(建议使用方法PopUp.getInstance().lenght)
		 */ 
		public function get length():int{
			return _collection.length;
		}

		public function PopUp(){
			if(!_lock){
				_collection.addEventListener(CollectionEvent.COLLECTION_CHANGE, 
					arrange);
			}
		}

		protected function exist(sign:String):PopUpItem{
			return _unique.hasOwnProperty(sign) ? 
				_unique[sign] as PopUpItem : null;
		}

		private function arrange(event:CollectionEvent):void{
			var _length:int = event.target.length;
			var _newItem:PopUpItem = event.items[0] as PopUpItem;
			if(_length > _num){
				var _xMove:Number = 0;
				var _yMove:Number = 0;
				var _xInterval:uint = 0;
				var _yInterval:uint = 0;
				for each(var _oldItem:PopUpItem in _collection){
					_xInterval += _left;
					_yInterval += _top;
					if(_xInterval + _left * 4 > _container.width || 
						_yInterval + _top * 4 > _container.height){
						_xMove = _xInterval - _container.width + 
							_left * 16;
						_yMove = _top * 2;
					}else{
						_xMove = _xInterval;
						_yMove = _yInterval;
					}
					if(_xMove > _container.width){
						_xMove = _left;
					}
				}
				_newItem.window.x = _xMove;
				_newItem.window.y = _yMove;
			}
			_num = _length;
		}

		protected function addItem(window:TitleWindow, sign:String = ""):void{
			var _item:PopUpItem = new PopUpItem(window, sign);
			_collection.addItem(_item);
			if(sign != ""){
				_unique[sign] = _item;
			}
		}

		protected function removeItem(window:TitleWindow):void{
			var _item:PopUpItem = getItemIndex(window);
			if(_item){
				_collection.removeItemAt(_item.index);
				if(_item.sign != "" && exist(_item.sign)){
					delete _unique[_item.sign];
				}
			}
		}

		protected function updateState(window:TitleWindow, 
				state:String = ""):void{
			var _item:PopUpItem = getItemIndex(window);
			if(_item){
				_item.state = state;
			}
		}
		/**
		 * 获取PopUp实例
		 * @return PopUp实例
		 */ 
		public static function getInstance():PopUp{
			return _popup;
		}
		/**
		 * 初始化组件(只能实例化一次)
		 * @param container PopUpManager.addPopUp中parent参数
		 */ 
		public static function init(container:UIComponent):void{
			if(!_lock){
				_container = container;
				_popup = new PopUp();
				_lock = true;
			}
		}
		/**
		 * 获取面板包装对象 
		 * @param window 面板
		 * @return 包装对象
		 */
		public function getItemIndex(window:TitleWindow):PopUpItem{
			for(var i:int = 0; i < _collection.length; i ++){
				var _item:PopUpItem = _collection.getItemAt(i) as PopUpItem;
				if(_item.window == window){
					_item.index = i;
					return _item;
				}
			}
			return null;
		}
		/**
		 * 弹出面板
		 * @param window 需要弹出的面板
		 * @param mask 是否为模态窗口
		 * @param sign 面板弹出唯一标志
		 */ 
		public static function openWindow(window:TitleWindow, 
				mask:Boolean = false, sign:String = ""):Boolean {
			var _item:PopUpItem = PopUp.getInstance().exist(sign);
			if(_item && _item.window.isPopUp){
				PopUpManager.bringToFront(_item.window);
				return false;
			}
			PopUpManager.addPopUp(window, _container, mask);
			PopUp.getInstance().addItem(window, sign);
			return true;
		}
		/**
		 * 关闭面板
		 * @param window 需要关闭的面板
		 */ 
		public static function closeWindow(window:TitleWindow):void {
			PopUp.getInstance().removeItem(window);
			if(window.isPopUp){
				PopUpManager.removePopUp(window);
			}
		}
		/**
		 * 面板状态改变
		 * @param window 需要改变状态的面板
		 * @param state 面板状态
		 */
		public static function updateState(window:TitleWindow, 
			state:String = ""):void{
			PopUp.getInstance().updateState(window, state);
		}
	}
}

组件执行:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   minWidth="955" minHeight="600" creationComplete="init()">
	<s:layout>
		<s:HorizontalLayout />
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.CloseEvent;
			import pizazz.flex4.manager.PopUp;
			import pizazz.flex4.manager.components.popup.PopUpItem;
			import spark.components.TitleWindow;

			private var i:int = 0;

			private function init():void{
				PopUp.init(this);
			}

			private function onClickA():void{
				PopUp.openWindow(windowFactory());
			}

			private function onClickB():void{
				PopUp.openWindow(windowFactory(), false, "unique");
			}

			private function onClickC():void{
				Alert.show("Length: " + PopUp.getInstance().length);
			}

			private function windowFactory():TitleWindow{
				const _window:TitleWindow = new TitleWindow();
				_window.width = 320 + i;
				_window.height = 240 + i;
				_window.title = "" + i++;
				_window.addElement(buttonFactory(_window));
				_window.addEventListener(CloseEvent.CLOSE,
					function(event:CloseEvent):void{
						PopUp.closeWindow(_window);
					}
				);
				return _window;
				function buttonFactory(window:TitleWindow):Button{
					const _button:Button = new Button();
					_button.label = "Info";
					_button.addEventListener(MouseEvent.CLICK,
						function(event:MouseEvent):void{
							var _item:PopUpItem = 
							PopUp.getInstance().getItemIndex(window);
							Alert.show("Index: " + _item.index + "\n" + 
								"Sign: " + _item.sign);
						}
					);
					return _button;
				}
			}
		]]>
	</fx:Script>
	<s:Button label="一般面板" width="100" click="onClickA()" />
	<s:Button label="唯一面板" width="100" click="onClickB()" />
	<s:Button label="面板数量" width="100" click="onClickC()" />
</s:Application>

视图:

  相关解决方案