2 Replies Latest reply on May 22, 2011 11:26 PM by JumpingPeppers

    Complex View navigation

    JumpingPeppers

      Hi Guys

      I've got a setup as follows:


      .........................mainview
      ...................... _____|______
      ...................... |...................|
      ....................view1.............view2
      ......... ________|________
      .........|.............|.............|
      defaultViewS viewS2 viewS3

      So Say I want to change from view2 to view1 all I would have to do is:

      ActionScript Code:
      <s:Button label="Change to default view state"             click="currentState='view1';"/>

      and it would open view1 with the default view (defaultViewS)

      So the question is: How would I specify that instead of view opening to it's default state, how would I open it to it's non-default state(ie viewS2 or viewS3)

      Thanks

        • 1. Re: Complex View navigation
          EvolvedDSM Level 2

          Your example is a bit confusing.

           

          Under View 1 and View 2, do you have a navigation system, like TabNavigator or similar?  If so, here's how to do it:

           

          Give your navigation component a name (for examble, tabNav).  Each tab in your navigation is an index, starting with 0 (tab 1 = index#0, tab 2 = index#1, tabd 3 = index#2, etc)

           

          For your button, you'll want to call the index corresponding to the tab.

           

          <s:Button click="getViewAndTab()"/>

           

          Let's say you want your button to select view1 and the 2nd tab of the navigator (index# 1)

           

          private function getViewAndTab():void{

               currentState = 'view1';

               tabNav.selectedIndex = 1;

          }

           


          This function will make the state view 1 and the selected tab index# 1 (which is the 2nd tab).

           

          Hope this helps.

           

          edit: Here's some code I wrote up quickly which you can copy/paste to understand how it works:

           

          <mx:TabNavigator x="9" y="39" width="200" height="200" id="tbn">
                  <s:NavigatorContent label="Tab 1" width="100%" height="100%">
                  </s:NavigatorContent>
                  <s:NavigatorContent label="Tab 2" width="100%" height="100%">
                  </s:NavigatorContent>
                  <s:NavigatorContent label="Tab 3" width="100%" height="100%">
                  </s:NavigatorContent>
          </mx:TabNavigator>
          <s:Button x="9" y="246" label="Button" click="tbn.selectedIndex=0"/>
          <s:Button x="86" y="246" label="Button" click="tbn.selectedIndex=1"/>
          <s:Button x="163" y="246" label="Button" click="tbn.selectedIndex=2"/>

          • 2. Re: Complex View navigation
            JumpingPeppers Level 1

            Hi

             

            Thanks for your help! but it's not quite what I need. I'm using quite a complex method to navigate about my app and I attempted to simplify it to make it easier to explain.

             

            I'll explain my basic requirement and then I'll post my project compostion so you can see what I'm talking about.

             

            Basically I have a tabbar which contains 6 viewstates. Those 6 viewstates and not simple views but themselves contain multiple views.

             

            So if you click on tab button no 2 it will open tabButtonTwoView. tabButtonTwoView 3 views inside itself, when tabButtonTwoView is opened it opens to the default view. If you navigate away from tabButtonTwoView and return to it then you will see whichever view you were last looking at(it not neccesarily the default view)

             

            So basically what I would like is that say you are on tabButtonOneView and you have a button there, then clicking that button would open tabButtonTwoView and then the view that has been specified, not the view that it opens by default or the view that you had open last.

             

            Ok so that's the basic explanation. now I'll give you a breakdown of my project since it's a little bit more complex than that. I''ve also attached the project for you to have a look at.

             

            you can download it here ( -- code removed -- )

             

            So basically I'm using a MVCS methodology here along with robotlegs.

             

            here's the basic way the nav works.

             

            my main view contains these components:

             

             

             

            <view:HeaderView id="header"

            width="100%"

             

            />

             

             

             

            <view:MainTabBar id="someTabBar" />

             

            <view:ContentView id="content"/>

             

            <view:FooterView id="footer"

            width="100%"

             

            />

             

             

             

             

            Tab Bar controls the main navigation of content using a mediator class:

             

            package za.co.vw.projectname.view

            {

            import mx.collections.ArrayCollection;

            import mx.events.StateChangeEvent;

             

            import org.robotlegs.mvcs.Mediator;

             

            import spark.events.IndexChangeEvent;

             

            import za.co.vw.projectname.event.NavigationEvent;

             

            public class MainTabBarMediator extends Mediator

            {

            public function get view():MainTabBar

            {

            return viewComponent as MainTabBar;

            }

             

            override public function onRegister():void

            {

            eventMap.mapListener(view, IndexChangeEvent.CHANGE, onSelectedIndexChange);

            eventMap.mapListener(eventDispatcher, StateChangeEvent.CURRENT_STATE_CHANGE, onStateChange);

             

            view.dataProvider = new ArrayCollection([{label:'About', name:'about'}, {label:'Apply', name:'apply'}, {label:'Date', name:'date'}, {label:'Watch', name:'watch'}, {label:'GTI', name:'gti'}]);

            }

             

            private function onSelectedIndexChange(event:IndexChangeEvent):void

            {

            if(!view.selectedItem)

            return;

             

            var navTo:String;

            trace(view)

            trace(view.selectedItem)

            trace(view.selectedItem.label)

            switch(view.selectedItem.label)

            {

            case "About":

            navTo = NavigationEvent.ABOUT;

            break;

            case "Apply":

            navTo = NavigationEvent.APPLY;

            break;

            case "Date":

            navTo = NavigationEvent.DATE;

            break;

            case "Watch":

            navTo = NavigationEvent.WATCH;

            break;

            case "GTI":

            navTo = NavigationEvent.GTI;

            break;

            case "Home":

            navTo = NavigationEvent.HOME;

            break;

            }

            dispatch(new NavigationEvent(NavigationEvent.VIEW_CHANGE, navTo));

            }

             

            private function onStateChange(event:StateChangeEvent):void

            {

            var s:String = event.newState.slice(0, event.newState.indexOf("State"));

             

            var tabItem:Object = getTabItemByName(s);

             

             

            if(s == "home")

            {

            trace("going home");

            view.selectedIndex = -1;

            } else if(view.dataProvider.getItemIndex(tabItem) != view.selectedIndex)

            {

            trace("not going home, changing to "+s);

            view.selectedItem = tabItem;

            }

            }

             

            private function getTabItemByName(name:String):Object

            {

            for each(var obj:Object in view.dataProvider)

            {

            if(obj.name == name)

            {

            return obj;

            }

            }

             

            return null;

            }

            }

            }

             

             

            which talks to and event class called NavigationEvent:

             

             

            package za.co.vw.projectname.event

            {

            import flash.events.Event;

             

            public class NavigationEvent extends Event

            {

            public static const VIEW_CHANGE:String = "viewChange";

             

            public static const ABOUT:String = "about";

            public static const APPLY:String = "apply";

            public static const DATE:String = "date";

            public static const WATCH:String = "watch";

            public static const GTI:String = "gti";

            public static const HOME:String = "home";

             

            public var targetViewId:String;

             

            public function NavigationEvent(type:String, targetViewId:String="", bubbles:Boolean=false, cancelable:Boolean=false)

            {

            super(type, bubbles, cancelable);

            this.targetViewId = targetViewId;

            }

            }

            }

             

             

             

             

            most of my other components have mediators which dispatch navigation events, all of this being registered and and executed by the robotlegs frame works. The connections to the classes and their mediators are made in the ViewPrepCommand class:

             

             

            package za.co.vw.projectname.controller

            {

            import org.robotlegs.mvcs.Command;

             

            import spark.components.TabBar;

             

            import za.co.vw.projectname.view.AboutView;

            import za.co.vw.projectname.view.AboutViewMediator;

            import za.co.vw.projectname.view.ContentView;

            import za.co.vw.projectname.view.ContentViewMediator;

            import za.co.vw.projectname.view.DateView;

            import za.co.vw.projectname.view.DateViewMediator;

            import za.co.vw.projectname.view.HeaderView;

            import za.co.vw.projectname.view.HeaderViewMediator;

            import za.co.vw.projectname.view.MainTabBar;

            import za.co.vw.projectname.view.MainTabBarMediator;

            import za.co.vw.projectname.view.MainView;

            import za.co.vw.projectname.view.MainViewMediator;

             

            public class ViewPrepCommand extends Command

            {

            override public function execute():void

            {

            mediatorMap.mapView(HeaderView, HeaderViewMediator);

            mediatorMap.mapView(ContentView, ContentViewMediator);

            mediatorMap.mapView(MainView, MainViewMediator);

            mediatorMap.mapView(DateView, DateViewMediator);

            mediatorMap.mapView(AboutView, AboutViewMediator);

            mediatorMap.mapView(MainTabBar, MainTabBarMediator);

            }

            }

            }