1 Reply Latest reply on Jan 24, 2008 8:38 PM by Sreenivas R

    ViewStacks, Trees, and Changing currentView

    ctaffe
      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.
        • 1. ViewStacks, Trees, and Changing currentView
          Sreenivas R Adobe Employee
          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.)