ViewStacks, Trees, and Changing currentView

Question

I've created a tree that correctly changes my viewstack
without any problem. I now need to be able to change the viewstack
from events within the individual views in the viewstack. While I
can change the currentView variable, it doesnt seem to carry over
to the viewstack like it does with the tree. I've made a simple
program to illustrate my problem.
Main application:
quote:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application pageTitle="ViewStack Test of DOOM"
xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%" height="100%" backgroundSize="100%"
viewSourceURL="srcview/index.html" xmlns:views="views.*"
xmlns:navigator="navigators.*">
<mx:Script source="/as/navigation.as" />
<mx:HBox width="100%" height="100%">
<mx:Canvas width="180" height="100%" id="box1">
<mx:ViewStack left="5" top="20" bottom="30" right="5"
id="navStack">
<navigator:treeNav id="treeNav" change="currentView =
treeNav.currentView;" />
</mx:ViewStack>
</mx:Canvas>
<mx:ViewStack width="700" height="100%" id="myViewstack"
selectedIndex="{currentView}">
<views:MainView name="Main Page" />
<views:AView name="A Info" />
<views:BView name="B Info" />
<views:CView name="C Info" />
</mx:ViewStack>
</mx:HBox>
</mx:Application>
treeNav.mxml
quote:
<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%" height="100%" >
<mx:Tree id="myTreeNav" height="100%" width="100%"
selectedIndex="0" labelField="@label"
dataProvider="{treeNavData}" change="treeChanged(event)"
/>
<mx:XMLList id="treeNavData">
<node label="Main Page" data="0" />
<node label="Information" data="-1">
<node label="Info A" data="1" />
<node label="Info B" data="2" />
<node label="Info C" data="3" />
</node>
</mx:XMLList>
<mx:Script source="../as/navigation.as" />
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
[Bindable]
public var selectedNode:XML;
public function treeChanged(event:Event):void {
selectedNode=Tree(event.target).selectedItem as XML;
currentView = selectedNode.@data;
if (currentView != -1) {
this.dispatchEvent( new Event("change") );
]]>
</mx:Script>
<mx:Metadata>
[Event("change")]
</mx:Metadata>
</mx:Box>
MainView.mxml (one of the views of the viewstack)
quote:
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox width="100%" height="100%" xmlns:mx="
http://www.adobe.com/2006/mxml"
name="A Info">
<mx:Script source="../as/navigation.as" />
<mx:Button label="Goto A" click="viewChange(1)"/>
<mx:Button label="Goto B" click="viewChange(2)"/>
<mx:Button label="Goto C" click="viewChange(3)"/>
</mx:HBox>
navigation.as
quote:
[Bindable]
public var currentView:Number;
public function viewChange(view:Number):void {
currentView = view;
While the viewChange function is called, it doesn't seem to
effect the currentView that is held in my main application and
therefore the view never changes. My guess is I'm missing some
aspect of variable scope here.

Answer 1

You have several copies of the currentView variable. One in
MainApplication, one in treeNav and one in MainView.mxml.
Where ever navigation.as is included we get one copy of
currentView.
For the same reason you have been forced to do currentView =
treeNav.currentView in the app.
Hence the scenario is not working.
To get it working create a ActionScript class file say
ViewHolder and add a static public currentView property there. Mark
it Bindable and use it everywhere. (Remove currentView declaration
from navigation.as)
public class ViewHolder
[Bindable]
static public var currentView:int;
<mx:ViewStack width="700" height="100%" id="myViewstack"
selectedIndex="{ViewHolder.currentView}">
public function viewChange(view:int):void {
ViewHolder.currentView = view;
public function treeChanged(event:Event):void {
selectedNode=Tree(event.target).selectedItem as XML;
ViewHolder.currentView = selectedNode.@data;
(You can remove the change event from the treeNav too and its
handling in MainApplication.)