Question

Suppose, I have a tabbed application. Can I make Popup window to appear in a given tab only? So, if I change a tab, the related popup(-s) hides. So far, I haven’t found any solution for this. So any idea would be greatly appreciated 🙂

Answer 1

You will have to handle different sets of popups by yourself : Flex can only add and remove given popups which will be displayed at the topmost level of your app.

EDIT : Here’s a little sample.

<?xml version="1.0"?>
<!-- containers\navigators\TNSimple.mxml -->
<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    creationComplete="onCreationComplete()"
    >
    <fx:Script>
        <![CDATA[

            import mx.managers.PopUpManager;
            import spark.components.TitleWindow;
            import mx.events.IndexChangedEvent;

            private var popups:Array = [];

            private function onCreationComplete():void
            {
                popups = [[],[],[]];
            }

            private function createPopup():void
            {
                var foo:TitleWindow = new TitleWindow();

                PopUpManager.addPopUp(foo, this);

                PopUpManager.centerPopUp(foo);

                popups[nav.selectedIndex].push(foo);
            }

            private function onTabChange(event:IndexChangedEvent):void
            {
                var i:int;

                var oldArray:Array = popups[event.oldIndex];
                for (i = 0; i < oldArray.length; i++) {
                    PopUpManager.removePopUp(oldArray[i]);
                }

                var newArray:Array = popups[event.newIndex];
                for (i = 0; i < newArray.length; i++) {
                    PopUpManager.addPopUp(newArray[i], this);
                }
            }
        ]]>
    </fx:Script>
    <mx:TabNavigator id="nav" borderStyle="solid" x="50" y="50" change="onTabChange(event)">
        <mx:VBox label="Accounts" 
            width="300" 
            height="150">
            <mx:Button label="pop" click="createPopup()"/>
        </mx:VBox>

        <mx:VBox label="Stocks" 
            width="300" 
            height="150">
            <mx:Button label="pop" click="createPopup()"/>
        </mx:VBox>

        <mx:VBox label="Futures" 
            width="300" 
            height="150">
            <mx:Button label="pop" click="createPopup()"/>
        </mx:VBox>   
    </mx:TabNavigator>
</s:Application>