Flex: Remember the tab index and name on the PopUpButton of the SuperTabNavigator

Question

As we all know SuperTabNavigator is an open source component from the flexLib which gives an advantage over Flex Tab Navigator that we can close the tabs from the close button on each tab with the use of SuperTabNavigator. Additinaly there is a button to the right of the tab navigator which shows a list of all tabs which are open at one time and we can select any tab from that button which is a PopupButton. Now what happens is when we close a tab, it disappears from the PopupButton drop down list as well. But in my case I want the drop down to remember the closed tabs even so that when I click on that closed tab it opens again in the tab navigator. I am relatively new with Flex and ActionScipt and would really appreciate any help from all you experienced coders out there, a tutorial or just a hint. I promise I will document it well on the web for my fellow flex coders. :)

Thanks in advance.

Jeremy · Answer 1 · 2012-02-27T08:54:48.713

Ok I've not used the super tab navigator before, but I had a stab at setting up a project that kept track of any closed tabs, and gives the user the option to re-open them later if they want.

I couldn't figure out how to make the little drop down menu remember closed tabs without influencing the actual tabs visible. So as a work around, here is a small simple application using the Flex SDK 3.6, I hope you find it useful, it should run as is...

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600" xmlns:ns="http://code.google.com/p/flexlib/">
    <mx:VBox>
        <ns:SuperTabNavigator id="navigator"
                              width="500"
                              height="500"
                              tabClose="recordClosedTab(event)"
                              creationComplete="init()">
            <mx:Canvas label="one"/>
            <mx:Canvas label="two"/>
            <mx:Canvas label="three"/>
        </ns:SuperTabNavigator>
        <mx:HBox>
            <mx:Label text="Closed tabs:"/>
            <mx:ComboBox id="closedTabsMenu"
                         close="closedTabsMenuCloseHandler(event)"/>
        </mx:HBox>
    </mx:VBox>

    <mx:Script>
        <![CDATA[
            import flexlib.events.SuperTabEvent;

            import mx.collections.ArrayCollection;
            import mx.containers.Canvas;
            import mx.events.DropdownEvent;

            private var _closedTabs:ArrayCollection = new ArrayCollection();

            /**
             * Records which display object has been removed from the SupreTabNavigator.
             * Updates closed tabs menu data provider.
             * 
             * @param SuperTabEvent.TAB_CLOSE dispatched from SuperTabNavigator when a tab close button is clicked.
             * */
            private function recordClosedTab(event:SuperTabEvent):void{
                _closedTabs.addItem(navigator.getChildAt(event.tabIndex) as DisplayObject);
                closedTabsMenu.dataProvider = _closedTabs;
            }

            /**
             * Handles the close event dispatched from combo box on close.
             * Checks if the SuperTabNavigator contains the item currently selected in combo box.
             * If not then adds that object if it is a DisplayObject
             * Then removes that item from combo box.
             * 
             * @param DropdownEvent.CLOSE dispatched from the ComboBox on close
             * */
            private function closedTabsMenuCloseHandler(event:DropdownEvent):void{
                var tabs:ArrayCollection = new ArrayCollection(navigator.getChildren());
                if (!tabs.contains(closedTabsMenu.selectedItem)){
                    if (closedTabsMenu.selectedItem is DisplayObject){
                        navigator.addChild(closedTabsMenu.selectedItem as DisplayObject);
                        _closedTabs.removeItemAt(_closedTabs.getItemIndex(closedTabsMenu.selectedItem));
                    }
                }
            }

        ]]>
    </mx:Script>
</mx:Application>

Flex: Remember the tab index and name on the PopUpButton of the SuperTabNavigator

1 Answers1