2 Replies Latest reply on Jun 12, 2007 8:15 AM by d:n:k

    Change viewstack that is within a component

    d:n:k
      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?
        • 1. Change viewstack that is within a component
          parallaxed Level 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.
          • 2. Re: Change viewstack that is within a component
            d:n:k Level 1
            I tried that, and had issues still targeting it. I will try to figure out one of your suggestions, but i am pretty much just starting out with flex...
            =-)