changing selectedIndex from AS file

I have a simple button function that changes the selectedIndex on a view stack without using the menu bar component. I call the function from the click property on the button and pass an int as the index I want to jump to. When I had the code on the application MXML file everything worked fine. After moving my actionscript to a separate file, I get access of undefined property errors:

protected function changeView(index:int):void
{
    myViewStack.selec开发者_如何转开发tedIndex = index;

}

How do I get the .as file to recognize the myViewStack component? Do I need to reference Main.MXML somewhere in the .as file? Thanks.

Here is the rest of my code:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:comps ="components.*"
           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="1100" minHeight="1000" width="100%" height="100%" pageTitle="List Giant v2.3">

<mx:ViewStack id="lgViewStack" width="100%" height="100%" verticalCenter="0" horizontalCenter="0" selectedIndex="0">

<s:NavigatorContent label="HOME" width="100%" height="100%" id="homeView">
  <s:VGroup width="100%" height="100%" verticalCenter="0" horizontalCenter="0" gap="0" id="homeMainVG">
    <comps:TopNav>
    </comps:TopNav>

    <s:HGroup width="100%" height="90%" gap="0">
      <comps:LeftNav>
      </comps:LeftNav>

      <comps:HomeContent>
      </comps:HomeContent>

      <comps:RightNav>
      </comps:RightNav>
    </s:HGroup>
  </s:VGroup>
</s:NavigatorContent>
</mx:ViewStack>
</s:Application>

I will show you the components HomeContent.mxml as it has all the issues that the other pages have but its the smallest file:

<?xml version="1.0" encoding="utf-8"?>

<fx:Script source="../actions/ButtonHandlers.as"/>

<s:layout>
    <s:BasicLayout/>
</s:layout>
<s:Panel width="30%" height="200" left="10" top="0" dropShadowVisible="false" chromeColor="#FFFFFF" borderVisible="true">
    <s:Button label="Go" horizontalCenter="0" verticalCenter="0" width="50%" click="changeView(6,lgViewStack);"/>
    <s:Label y="10" text="My Admin" horizontalCenter="0" fontWeight="bold" fontSize="24"/>
    <s:Label y="102.95" text="Click here to update your account information and settings." height="44" width="174" textAlign="center" horizontalCenter="-1" fontSize="10"/>
</s:Panel>
<s:Panel width="30%" height="200" horizontalCenter="0" top="0" dropShadowVisible="false" chromeColor="#FFFFFF" borderVisible="true">
    <s:Button label="Go" horizontalCenter="0" verticalCenter="0" width="50%" click="changeView(2,lgViewStack);"/>
    <s:Label y="10" text="My Counts" horizontalCenter="0" fontWeight="bold" fontSize="24"/>
    <s:Label y="113.95" text="Click here to see you list counts." textAlign="center" verticalAlign="middle" horizontalCenter="0"/>
</s:Panel>
<s:Panel width="30%" height="200" right="10" top="0" dropShadowVisible="false" chromeColor="#FFFFFF" borderVisible="true">
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    <s:Button label="Go" horizontalCenter="0" verticalCenter="0" width="50%" click="changeView(4,lgViewStack);"/>
    <s:Label y="18" text="My Orders" horizontalCenter="0" fontSize="24" fontWeight="bold"/>
    <s:Label y="117" text="Click here to see your lsit orders." textAlign="center" verticalAlign="middle" horizontalCenter="0"/>
</s:Panel>
<s:Panel width="96%" height="75%" horizontalCenter="0" bottom="50" dropShadowVisible="false">
    <s:Label text="List Giant Community News" left="10" top="10" fontWeight="bold" fontSize="20"/>
    <s:SkinnableDataContainer width="100%" height="100%" left="0" top="35"/>
    <mx:HRule horizontalCenter="0" top="225" width="90%"/>
    <mx:HRule horizontalCenter="0" top="450" width="90%"/>
    <s:Label x="32" y="46" text="LG World"/>
    <s:Label x="32" y="233" text="Promotions"/>
    <s:Label x="32" y="458" text="Resources"/>
</s:Panel>

And finally the .as files with the function in question:

import mx.containers.ViewStack;

protected function changeView(index:int, myViewStack:ViewStack):void
{
myViewStack.selectedIndex = index;

}

---

Did you move your AtionScript to an include file? Or a new class? How is this new file included in your application MXML file? I suspect your issue is a matter of scope. I'm going to continue writing under the assumption you created a new class. So, you have something like this:

Main Application
|-- Class w/ changeView Function
|-- ViewStack

In such an architecture; the Main Application can call methods, or set properties on the changeView class, or on the ViewStack. The changeView class or ViewStack can 'speak' to the main application by dispatching an event. However, the changeView class cannot talk to the ViewStack in any way; and the ViewStack can't talk to the changeView class.

The reason, in this architecture, that the changeView class gets an "undefined property" error is because the changeView class does not have a variable named myViewStack. It knows nothing about the instance variables/children of it's parent nor it's children.

You have a few options:

Have the changeView class dispatch an event, which the main application will listen to and then change the selectedIndex on the ViewStack. This sounds overkill; and almost defeats the purpose of the 'encapsulation' of this functionality in the first place.

You could pass the viewStack variable into the changeView class either as an argument or set it as an instance variable and change it that way. Like this:

protected function changeView(index:int, myViewStack:ViewStack):void
{
    myViewStack.selectedIndex = index;

}

This would work, although I'm not sure if it is what you had in mind.

---

When you took the ActionScript out of the mxml class you took it out of scope. In the funciton where you have this code

myViewStack.selectedIndex = index;

You are trying to reference myViewStack inside the class file which does not exist.

myViewStack.selectedIndex = index;

is the same thing as saying

this.myViewStack.selectedIndex = index;

this refers to the class the method is in.

In the class that has the changeView method in it you need to create a public var called myViewStack. Then right after you instantiate the class in the mxml you need to assign myViewStack

var myClass:MyClassWithchangeView = new MyClassWithchangeView ( );
myClass.myViewStack = viewStackSource;