Change viewstack that is within a component

Question

Hi there. I have an app with the main nav (just buttons) in
my main app file. I then have a custom component containing a
viewstack. For some reason I can not change the viewstack from the
main buttons.
main.mxml (simplified for this)
quote:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
xmlns:comp="assets.components.*"
layout="absolute"
horizontalScrollPolicy="off"
creationComplete="onInit()">
<mx:Style>
Application {
backgroundColor: #4e7ee2;
backgroundGradientColors: #4e7ee2, #3554a6;
themeColor: #3554a6;
color: #3554a6;
</mx:Style>
<mx:Script source="index.as"/>
<mx:Image
source="@Embed('assets/pix/silouetteExport.png')" id="bg"
alpha="0.30" bottom="0"/>
<comp:MyLogo id="theLogo" top="200" right="-450"
visible="false"/>
<mx:VBox id="theMenu" top="205" right="-450"
visible="false">
<mx:Spacer width="100%" height="20"/>
<mx:Button x="513" y="227" id="News" label="Latest News"
width="125" click="handleSection()"/>
<mx:Button x="513" y="257" id="Company" label="Company"
width="125" click="handleSection()"/>
<mx:Button x="513" y="287" id="Production"
label="Production" width="125"/>
<mx:Button x="513" y="317" id="Development"
label="Development" width="125"/>
<mx:Button x="513" y="347" id="Done" label="What We've
Done" width="125"/>
<mx:Button x="513" y="377" id="Services" label="Services"
width="125"/>
<mx:Button x="513" y="407" id="Contact" label="Contact"
width="125"/>
</mx:VBox>
<comp:siteView id="sections" top="50" bottom="50"/>
</mx:Application>
Then in my included main.as (there will be more code later):
quote:
// ActionScript file
import mx.effects.easing.Bounce;
import mx.managers.CursorManager;
//on creation complete function
private function onInit():void {
currentState='LogoIn';
private function handleSection():void {
currentState='SectionIn';
sections.mySections.selectedChild=LatestNews;
Then in the component it is simply:
quote:
<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="
http://www.adobe.com/2006/mxml">
<mx:ViewStack id="mySections" width="500" height="668"
borderStyle="solid" borderThickness="20" borderColor="#ffffff"
backgroundColor="#e6e6e6">
<mx:Canvas label="LatestNews" width="100%" height="100%"
id="LatestNews">
<mx:Label text="Latest News"/>
</mx:Canvas>
<mx:Canvas label="Company" width="100%" height="100%"
id="Company">
<mx:Label text="Company"/>
</mx:Canvas>
</mx:ViewStack>
</mx:Box>
So the error I am getting is:
quote:
1120: Access of undefined property LatestNews.
I suspect it has to do with the component not being
initialized or something like that.... Any idea?

Answer 1

Each component declaration creates a new scope. With your
"LatestNews" component (i.e. the canvas) being declared in
siteView.mxml, your container component (mx:Application), can't see
it.
Try:
sections.mySections.selectedChild = sections.LatestNews
That seems a little convoluted to me, though... there are
better ways to do it. You could write some AS into siteView.mxml
and have a public interface. Equally you could to move the
declaration of the ViewStack components to the mx:Application
scope, or use a singleton model, or a combination of events/event
listeners etc.