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>

Open in new window

sctccommAsked:
Who is Participating?
 
Gary BenadeCommented:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    width="100%" height="100%"
    xmlns:navi="*">
    <mx:Script>
    	<![CDATA[
    		private function handleClick( e:Event):void
    		{
    			trace( 'mainNavToggleBar selIdx:', e.currentTarget.mainNavToggleBar.selectedIndex);
    			trace( 'mainSectLabel:', e.currentTarget.mainSectLabel);
    		}
    	]]>
    </mx:Script>
 
    <!-- NAVIGATION BAR -->
    <mx:HBox x="0" y="0" width="100%">
        <navi:navigation id="navigator" ITEMCLICKED="handleClick(event)"/>
    </mx:HBox>
 
    <!-- SPACE -->
    <mx:Spacer width="100%" height="10"/>
    
    <!-- MAIN PAGE -->
    <mx:ViewStack id="mainPageStack" width="100%" height="100%">
        
        <!-- Home Section -->
 
    </mx:ViewStack>
</mx:Application>
 
//navigation.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:ApplicationControlBar xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="100%">
	<mx:Metadata>
		[Event(name="ITEMCLICKED")]	
	</mx:Metadata>
    <mx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;
            
            public var mainSectID:int = 0;
            public var mainSectLabel:String;
            
            public static const ITEMCLICKED:String = "ITEMCLICKED"; 
            
            // Event handler function to print a message
            // describing the selected Button control.        
            private function mainNaviHandler(event:ItemClickEvent):void 
            {
                mainSectID = event.index;
                mainSectLabel = event.label;
                dispatchEvent( new Event( navigation.ITEMCLICKED));
            }
        ]]>
    </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 -->
            <mx:Canvas label="Home"/>
            
            <!-- Test Section -->
            <mx:Canvas label="Test"/>
 
        </mx:ViewStack>
    </mx:VBox>
 
</mx:ApplicationControlBar>

Open in new window

0
 
Joel_SiskoCommented:
Hobbit72,

I was wondering if you could give me some direction on my question on Flex below:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Flex/Q_23888682.html

Thanks,

Joel
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.