Flex tabNavigator 的初级应用

 

 

 

<?xml version="1.0" encoding="utf-8"?>   
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"    
				xmlns:flexlib="http://code.google.com/p/flexlib/"  
				creationComplete="init()" fontSize="12">   
	<mx:Script>   
		<![CDATA[   
			import flexlib.controls.tabBarClasses.SuperTab;
			import flexlib.events.SuperTabEvent;
			
			import mx.containers.dividedBoxClasses.BoxDivider;
			import mx.controls.Alert;
			import mx.controls.Button;
			import mx.core.EventPriority;
			import mx.events.FlexEvent;   
			
			private var tabMenu:ContextMenu;   
			private var  close_cur:String="关闭当前页";   
			private var  close_other:String="关闭其他页";   
			private var  close_all:String="关闭所有页";   
			private var closeTabItem:ContextMenuItem;   
			private var closeOthersItem:ContextMenuItem;   
			private var closeAllItem:ContextMenuItem;   
			
			[Embed(source="assets/home.png")]   
			private var home_icon:Class;   
			[Embed(source="assets/app.png")]   
			private var app_icon:Class;   
			
			
			
			private function init():void{   
				this.initCompents();   
				this.addTabNavigator();   
				//延后执行   
				callLater(addTabMenu);   
				this.addGuiListeners();                
			}   
			
			//初始化某些组件   
			private function initCompents():void{   
				tabMenu = new ContextMenu();   
				closeTabItem = new ContextMenuItem(close_cur);   
				closeOthersItem = new ContextMenuItem(close_other);   
				closeAllItem = new ContextMenuItem(close_all);   
				tabMenu.hideBuiltInItems();   
				tabMenu.customItems.push(closeTabItem);   
				tabMenu.customItems.push(closeOthersItem);   
				tabMenu.customItems.push(closeAllItem);   
				
				//处理中间分隔条   
				var bdriver:BoxDivider=this.hdbox.getDividerAt(0);   
				bdriver.doubleClickEnabled=true;   
				bdriver.addEventListener(MouseEvent.DOUBLE_CLICK, maxsizeHandler);   
				
			}   
			//添加几个tab页   
			private function addTabNavigator():void{   
				for(var i:uint=0;i<5;i++ ){   
					var vbox:VBox=new VBox();   
					vbox.label="Tab"+i;   
					if(i==0){   
						vbox.label="首页";   
						vbox.icon=home_icon;   
					}else  
						vbox.icon=app_icon;   
					tabs.addChild(vbox);   
				}   
			}   
			//给tab页添加菜单   
			private function addTabMenu():void{   
				//设置首页不可关闭   
				this.tabs.setClosePolicyForTab(0,SuperTab.CLOSE_NEVER);   
				for(var i:uint=0;i<tabs.getChildren().length;i++){   
					var tabBtn:Button=tabs.getTabAt(i);   
					//添加双击tab页事件监听   
					tabBtn.addEventListener(MouseEvent.DOUBLE_CLICK,maxsizeHandler);   
					tabBtn.contextMenu=tabMenu;                    
				}   
			}   
			
			private function addGuiListeners():void{   
				closeTabItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,tabRightMenuHandler);   
				closeOthersItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,tabRightMenuHandler);   
				closeAllItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,tabRightMenuHandler);   
				tabMenu.addEventListener(ContextMenuEvent.MENU_SELECT,tabMenuHandler);   
				this.tabs.addEventListener(SuperTabEvent.TAB_CLOSE,closeSuperTabHandler);   
				
			}   
			//取消双击tab页事件的监听   
			private function closeSuperTabHandler(ev:SuperTabEvent):void{   
				var tabIdx:Number = ev.tabIndex;   
				var tabBtn:Button=tabs.getTabAt(tabIdx);   
				tabBtn.removeEventListener(MouseEvent.DOUBLE_CLICK,maxsizeHandler);   
			}   
			//最大化   
			private function maxsizeHandler(ev:Event):void{   
				if(this.leftBox.percentWidth==0){   
					this.leftBox.percentWidth=20;   
					this.rightBox.percentWidth=80;   
				}else{   
					this.leftBox.percentWidth=0;   
					this.rightBox.percentWidth=100;   
				}   
			}   
			//处理tab右键关闭事件   
			private function tabRightMenuHandler(ev:ContextMenuEvent):void{   
				var cap:String = (ev.target as ContextMenuItem).caption;   
				var home:* = this.tabs.getChildAt(0);   
				var idx:int;   
				switch(cap){   
					case close_cur:   
						idx = this.tabs.selectedIndex;   
						if(idx >= 0)   
							this.tabs.removeChildAt(idx);   
						break;   
					case close_other:   
						var selected:* = this.tabs.selectedChild;   
						for each(var cnt:* in this.tabs.getChildren()){   
						if(cnt != selected && cnt != home){   
							this.tabs.removeChild(cnt);   
						}   
					}   
						break;   
					case close_all:   
						//                      this.tabs.removeAllChildren();   
						for each(var tab:* in this.tabs.getChildren()){   
						if(tab != home)   
							this.tabs.removeChild(tab);   
					}   
						break;   
				}   
			}   
			
			private function tabMenuHandler(ev:ContextMenuEvent):void{   
				var tag:DisplayObject=ev.mouseTarget as DisplayObject;   
				var idx:uint=this.tabs.selectedIndex;   
				if(tag){  
					//下面这句非常犀利，发送一个单击事件
					tag.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
					closeTabItem.visible = true;   
					closeOthersItem.visible = true;   
					closeAllItem.visible = true;   
					if(idx==0)   
						closeTabItem.enabled = false;   
					else  
						closeTabItem.enabled = true;   
					
					if(this.tabs.numChildren==1 || (this.tabs.numChildren==2 && idx>0))   
						closeOthersItem.enabled = false;   
					else  
						closeOthersItem.enabled = true;   
					
					if(this.tabs.numChildren==1 && idx==0)   
						closeAllItem.enabled = false;   
					else  
						closeAllItem.enabled = true;   
					
					return;   
				}   
				closeTabItem.visible = false;   
				closeOthersItem.visible = false;   
				closeAllItem.visible = false;   
			}   
		]]>   
	</mx:Script>   
	<mx:VBox width="100%" height="100%">   
		<mx:Spacer height="20" />   
		<mx:HDividedBox id="hdbox" width="100%" height="80%" liveDragging="true">   
			<mx:VBox id="leftBox" width="20%" height="100%">   
				<mx:Tree width="100%" height="100%"/>   
			</mx:VBox>   
			<mx:VBox id="rightBox" width="80%" height="100%">   
				<flexlib:SuperTabNavigator id="tabs" width="100%" height="100%" creationPolicy="all" paddingTop="1">   
				</flexlib:SuperTabNavigator>   
			</mx:VBox>   
		</mx:HDividedBox>   
	</mx:VBox>   
</mx:Application>