MDIWindow最小化到任务栏

MDIWindow本身的最小化到任务栏的功能用着很不方便，因此自己丰衣足食重写了最小化事件。先截个图让大家看看效果，项目组没有美工MM，因此界面比较丑请大家见谅。

 

 

 

思路如下：

          1.在MDICanvas的下面添加一个HorizontalList

          2.给MDICanvas的中添加MDIManagerEvent.WINDOW_MINIMIZE和MDIManagerEvent.WINDOW_CLOSE事件。

             WINDOW_MINIMIZE：最小化时屏蔽MDIwindow自身的最小化事件。

             WINDOW_CLOSE：点击窗口关闭按钮时，从HorizontalList中移除该窗口。

          3.MDICanvas中添加MDIwindow时向HorizontalList中添加数据

 

最小化和最小化按钮事件的代码如下：

 

/**
			 * 点击窗口的最小化按钮 最小化到任务栏
			 * 
			 */
			private function windowMinimizeHandler(event:MDIManagerEvent):void
			{
				if(event is MDIManagerEvent)
				{
					var mgrEvent:MDIManagerEvent=event as MDIManagerEvent;
					mgrEvent.window.visible=false;
					event.stopPropagation();
				}
			}
			/**
			 * 关闭窗口事件
			 * 
			 */
			private function windowCloseHandler(event:MDIManagerEvent):void{
				if(event is MDIManagerEvent)
				{
					var mgrEvent:MDIManagerEvent=event as MDIManagerEvent;
					for(var index:int;index<tbl.ac.length;index++){
						var item:TaskBarItem=tbl.ac.getItemAt(index) as TaskBarItem;
						if(mgrEvent.window==item.window){
							tbl.ac.removeItemAt(tbl.ac.getItemIndex(item));
						}
					}
					event.stopPropagation();
				}
			}

 

HorizontalList组件的代码如下：

 

<?xml version="1.0" encoding="utf-8"?>
<mx:HorizontalList xmlns:mx="http://www.adobe.com/2006/mxml"   dataProvider="{ac}" backgroundColor="#22668B" width="100%" height="35" borderStyle="outset" borderThickness="5">
	<mx:Script>
		<![CDATA[
			import flexmdi.events.MDIWindowEvent;
			import mx.collections.ArrayCollection;
			[Bindable]
			public var ac:ArrayCollection=new ArrayCollection();
			
			public function itemClick(obj:Object):void{
				var item:TaskBarItem=obj as TaskBarItem;
				if(item.window.visible){
					item.window.visible = false;
					item.window.dispatchEvent(new MDIWindowEvent(MDIWindowEvent.MINIMIZE,item.window));
				}else{
					item.window.visible = true;
					item.window.dispatchEvent(new MDIWindowEvent(MDIWindowEvent.MAXIMIZE,item.window));
					//把窗口置为顶层
					item.window.windowManager.bringToFront(item.window);
					//显示窗口上的最小化 最大化 正常按钮 记住一定要加这句 因为默认是隐藏的，只有鼠标点击顶部时才显示出来
					item.window.showControls=true;
				}
			}
			public function closeWindow(obj:Object):void{
				var item:TaskBarItem=obj as TaskBarItem;
				item.window.visible = false;
				item.window.dispatchEvent(new MDIWindowEvent(MDIWindowEvent.CLOSE,item.window));
			}
		]]>
	</mx:Script>
	<mx:itemRenderer>
		<mx:Component>
			<mx:HBox height="30" width="120" paddingRight="5" backgroundColor="#ADD6FB"  click="changeStyle('inset')" mouseOver="changeStyle('outset')"  
				borderStyle="outset"  verticalScrollPolicy="off"  horizontalScrollPolicy="off">
			    <mx:Script>
				<![CDATA[
					import mx.states.SetStyle;
					import mx.controls.Alert;
					private function changeStyle(borderStyle:String):void{
						this.setStyle("borderStyle",borderStyle);
					}
					
				]]>
				</mx:Script>
				<mx:HBox  height="30" width="80" click="outerDocument.itemClick(data)" paddingTop="0" paddingLeft="0">
					<mx:Image source="{data.icon}" includeInLayout="{data.icon==null?false:true}"/>
					<mx:Label text="{data.title}"/>
				</mx:HBox>
				<mx:HBox  height="30" width="20"  paddingTop="0" paddingLeft="0">
					<mx:Image source="img/ResizableTitleWindow/close.png"  alpha="0.2" toolTip="关闭该窗口" 
						 mouseOver="delImg.alpha=1" mouseOut="delImg.alpha=0.2"
						 id="delImg" click="outerDocument.closeWindow(data)" />
				</mx:HBox>
			</mx:HBox>
		</mx:Component>
	</mx:itemRenderer>
</mx:HorizontalList>

 

         

 

以上给出了实现最小化到任务栏的大部分代码，希望能和大家一起交流Flex的开发经验。