Accessing a tab navigator from child element - actionscript-3

Question

In my main application mxml I am using a tab navigator,I can access that tab navigator anywhere in the application by following code..
mx.core.FlexGlobals.topLevelApplication.menuOption.selectedIndex=0;
Now my problem is I ihave used a toggle button bar in transactionUI which is a child element of tab navigator ,How can i access that element like above mentioned code??
My main mxml tab navigator ::
<mx:TabNavigator left="10" top="20" bottom="10" right="10" id="menuOption" >
<ui1:homeUI label="Home" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:transactionUI label="Transaction" width="100%" height="100%" backgroundColor="#373737" />
<ui1:calanderUI label="Employee service" width="100%" height="100%" horizontalCenter="0" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:ManagementUI label="Management" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:reportUI label="Reports" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
<ui1:admin label="Admin" width="100%" height="100%" backgroundColor="#373737" chromeColor="#181818" contentBackgroundColor="#181818" color="#FDFDFD" />
</mx:TabNavigator>
My toggle bar inside transactionUI ::
<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"
xmlns:ui="com.colan.*" xmlns:ui1="com.colan.ui.*"
backgroundColor="#373737" chromeColor="#181818"
contentBackgroundColor="#181818" color="#FDFDFD">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.*;
import mx.core.*;
]]>
</fx:Script>
<mx:VBox horizontalAlign="center" verticalAlign="middle" width="100%" height="100%">
<mx:HBox horizontalAlign="center" verticalAlign="middle" width="100%" height="15%" >
<mx:ToggleButtonBar id="toggleButtonBar"
dataProvider="{viewStack}"
selectedButtonTextStyleName="mySelectedButtonTextStyleName"
/>
</mx:HBox>
<mx:HBox horizontalAlign="center" verticalAlign="middle" width="100%" height="85%" >
<mx:ViewStack id="viewStack"
visible="{toggleButtonBar.selectedIndex > -1}" width="100%" height="100%" >
<ui1:transaction label="Transaction"/>
<ui1:addClient label="Add Client"/>
<ui1:invoice label="Make invoice"/>
<ui1:workCatalogue label="Work catalogue"/>
<ui1:productCataloge label="Products Categories"/>
<ui1:suppliers label="Offers"/>
<ui1:calendarPlanUI label="Calendar"/>
</mx:ViewStack>
</mx:HBox>
</mx:VBox>
Please advice me...

Answer 1

FlexGlobals.topLevelApplication is meant to access the public variables/functions in your main application screen from any of its child screens.
For example..
If "transactionUI" NavigatorContent's ToggleButtonBar "calendarPlanUI" is for migrating to the main application "calanderUI" NavigatorContent.
Then you can straight away mention it then and there like
<ui1:calendarPlanUI label="Calendar" click="mx.core.FlexGlobals.topLevelApplication.menuOption.selectedIndex = '2'"/>
But if by any chance you are trying for toggleButtonBar like this
mx.core.FlexGlobals.topLevelApplication.toggleButtonBar.selectedIndex = 1;
then I would like to mention that the main application's variables/functions/components can only be accessed using "topLevelApplication". Without creating an instance to transactionUI, you won't be able to use toggleButtonBar in other child screens/main app too.