Passing Information between Main and Component

I am having trouble passing data obtained within one component to the main program and other components.

Currently I am creating an interface with a navigation bar.  The navigation bar is a component, the main section of the page is a ViewStack of various other components.  What I would like to do is when the user clicks a button on the navigation bar, the main program will recognize what button was clicked and control the ViewStack to choose the corresponding main section component.

In other words, I would like the selectedIndex from the navigation bar component to be passed back to the main program, so that it can be used.

I have attached parts of my code.

/** MAIN APPLICATION **/
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    width="100%" height="100%"
    navi="main.component.navigator.*"
    page="main.component.page.*">
 
    <!-- NAVIGATION BAR -->
    <mx:HBox x="0" y="0" width="100%">
        <navi:navigation id="navigator"/>
    </mx:HBox>
 
    <!-- SPACE -->
    <mx:Spacer width="100%" height="10"/>
    
    <!-- MAIN PAGE -->
    <mx:ViewStack id="mainPageStack" width="100%" height="100%">
        
        <!-- Home Section -->
        <page:main_page label="Home"/>
            
        <!-- Test Section -->
        <page:test_page label="Test"/>
 
    </mx:ViewStack>
 
</mx:Application>
 
/** NAVIGATOR COMPONENT **/
<?xml version="1.0" encoding="utf-8"?>
<mx:ApplicationControlBar xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="100%"
    xmlns:navi="main.component.navigator.*">
 
    <mx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;
            
            public var mainSectID:int = 0;
            public var mainSectLabel:String;
            
            // Event handler function to print a message
            // describing the selected Button control.        
            private function mainNaviHandler(event:ItemClickEvent):void 
            {
                mainSectID = event.index;
                mainSectLabel = event.label;
            }
        ]]>
    </mx:Script>
 
    <mx:VBox x="0" y="0" width="100%" verticalGap="0">
        <mx:HBox id="mainNavBar" label="mainNavBar" 
            width="100%" verticalAlign="middle">
 
            <mx:ToggleButtonBar id="mainNavToggleBar" color="#FFFCF7"
                dataProvider="{subNaviStack}" 
                itemClick="mainNaviHandler(event);"/>
        
        </mx:HBox>
        
        <mx:ViewStack id="subNaviStack" width="100%" selectedIndex="0">
        
            <!-- Home Section -->
            <navi:home_navi label="Home"/>
            
            <!-- Test Section -->
            <navi:test_navi label="Test"/>
 
        </mx:ViewStack>
    </mx:VBox>
 
</mx:ApplicationControlBar>

Select allOpen in new window