flexlib4 实现tab案例

<?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/document.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>