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的开发经验。