?
Solved

Passing Information between Main and Component

Posted on 2008-11-06
2
Medium Priority
?
1,004 Views
Last Modified: 2012-05-05
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

0
Comment
Question by:sctccomm
2 Comments
 
LVL 19

Accepted Solution

by:
Gary Benade earned 2000 total points
ID: 22911095

<?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
 
LVL 12

Expert Comment

by:Joel_Sisko
ID: 22923687
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

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month14 days, 21 hours left to enroll

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question