Question

I am new to mobile development with Flex, and there is one basic piece of information with which I cannot find an answer.

My main application extends the <s:TabbedViewNavigatorApplication> class. With other application classes, such as <s:ViewNavigatorApplication>, I can do the following to transition between <s:View> components:

private function nextView(e:MouseEvent):void {
    navigator.pushView(package.component);
}

However, the <s:TabbedViewNavigatorApplication> does not automatically instantiate navigator as do the other base classes.

Could someone please provide a simple example of how to push and pop views from a <s:TabbedViewNavigatorApplication> ?

Answer 1

A TabbedViewNavigatorApplication contains one ViewNavigator per tab, like so:

<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark">

<s:navigators>
    <s:ViewNavigator label="News" firstView="views.NewsView"/>
    <s:ViewNavigator label="Friends" firstView="views.FriendsView"/>
    <s:ViewNavigator label="Events" firstView="views.EventsView"/>
</s:navigators>

Each ViewNavigator maintains its own navigation stack. The ViewNavigator methods pushView() and popView() act on the currently selected ViewNavigator. These methods add/remove from the selected tab’s stack, not the TabbedViewNavigatorApplication.

Similarly, the back button navigates within the stack of a single tab. It doesn’t select another tab.

You can navigate between ViewNavigators(i.e. between tabs) by setting the TabbedViewNavigator.selectedIndex property to the index of the desired ViewNavigator, where 0 is the first section(first tab), 1 is the second, etc. For example:

TabbedViewNavigator.selectedIndex = 2

selects the third tab (and third ViewNavigator stack).

You can read more about TabbedViewNavigatorApplication on the Adobe Help pages.