Switch between Flex Tabbed ViewNavigators

Question

I am working on a Flex TabbedViewNavigatorApplication with three tabs (ViewNavigator elements). I would like to switch from one ViewNavigator to another based upon a user action (via ActionScript code).

I know that switching between Views uses pushView and popView, but I'm working with ViewNavigators, and my searching revealed nothing useful.

I'm trying to switch from Tab2 to Tab1 when an event occurs. In this case, Tab2 contains a list, and when the user makes a selection, I want to jump back to Tab1.

<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark"
                                  creationComplete="onAppReady(event)">
    <s:ViewNavigator label="Tab1" width="100%" height="100%" firstView="views.TabOneView"/>
    <s:ViewNavigator label="Tab2" width="100%" height="100%" firstView="views.TabTwoView"/>
    <s:ViewNavigator label="Tab3" width="100%" height="100%" firstView="views.TabThreeView"/>
</s:TabbedViewNavigatorApplication>

Thanks for your help!

Answer 1

I use the following line of ActionScript to switch from one ViewNavigator to another based on a user action:

TabbedViewNavigator(navigator.parentNavigator).selectedIndex = 1;

It worked like a charm and seems simpler than bubbling events.

Answer 2

This class is strangely undocumented. I have not tried this myself, but from searching online, this is what I found which corroborates with what the rest of the network does.

What you need to do is bubble an event to the TabbedViewNavigatorApplication and from there change the selectedIndex property to whichever tab you need to change to. For example:

<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark"
                                  creationComplete="onCreationComplete()">
    <fx:Script>
        <![CDATA[
            private function onCreationComplete():void
            {
                this.addEventListener('someEvent', someHandler);
            }

            private function someHandler(e:Event):void
            {
                this.selectedIndex = 0; // or whatever index you want. 
            }
        ]]>
    </fx:Script>
    <s:ViewNavigator label="Tab1" width="100%" height="100%" firstView="views.TabOneView"/>
    <s:ViewNavigator label="Tab2" width="100%" height="100%" firstView="views.TabTwoView"/>
    <s:ViewNavigator label="Tab3" width="100%" height="100%" firstView="views.TabThreeView"/>
</s:TabbedViewNavigatorApplication>

You just need to dispatch a bubbling event from within your children. You could event create a custom event that holds data about which tab to switch to.