Question

I am creating a mobile app with Flex 4.6 and I’m using the SplitViewNavigator with tabbed application. I have one left view that never changes that has a static list associated with it. I have multiple views for the right panel of the SplitViewNavigator. I can load the left view and the 1st right view but do not know how to change the view of the right view after a selection has been made from the list in the left view.

My main app file has the following code to load the split view and display the left and 1st right view.

<s:SplitViewNavigator id="svn" width="100%" height="100%">
    <s:ViewNavigator id="leftNav" width="30%" height="100%" firstView="views.LeftView"/>
    <s:ViewNavigator id="rightNav" width="70%" height="100%" firstView="views.RightView1"/>
</s:SplitViewNavigator>

My left view just has a simple list and I can determine which item has been selected but I don’t know how to make the right view change. Assume the right views are just called RightView1, RightView2, etc.

I am assuming I need to use a pushView method but do not know how to reference the right view id (rightNav) in the main app file from the leftView view. But I could be way off here so any help would be greatly appreciated.

cheers,

Answer 1

You can try to do something like this:

Main.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark"
                                  applicationDPI="160"
                                  creationComplete="this_creationCompleteHandler(event)"
                                  >
    <fx:Script>
        <![CDATA[
            import events.ViewEvent;

            import mx.events.FlexEvent;

            import views.RightView1;

            protected function this_creationCompleteHandler(event:FlexEvent):void
            {
                leftNav.addEventListener(ViewEvent.CHANGE_VIEW, leftNav_changeViewHandler);
            }

            protected function leftNav_changeViewHandler(event:ViewEvent):void
            {
                rightNav.pushView(event.view);
            }

        ]]>
    </fx:Script>

    <s:SplitViewNavigator id="svn" width="100%" height="100%">
        <s:ViewNavigator id="leftNav" width="30%" height="100%" firstView="views.LeftView"  />
        <s:ViewNavigator id="rightNav" width="70%" height="100%" firstView="views.RightView1"/>
    </s:SplitViewNavigator>
</s:TabbedViewNavigatorApplication>

LeftView.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark"
        title="LeftView">

    <fx:Script>
        <![CDATA[
            import events.ViewEvent;

            import mx.collections.ArrayCollection;

            import spark.events.IndexChangeEvent;

            private function labelFunc(item:Object):String
            {
                return getQualifiedClassName(item).split("::")[1];
            }

            protected function list_changeHandler(event:IndexChangeEvent):void
            {
                dispatchEvent(new ViewEvent(ViewEvent.CHANGE_VIEW, list.selectedItem as Class, true));
            }

        ]]>
    </fx:Script>
    <s:List id="list" height="100%" width="100%"
            dataProvider="{new ArrayCollection([RightView1, RightView2, RightView3])}"
            labelFunction="labelFunc"
            change="list_changeHandler(event)">

    </s:List>
</s:View>

ViewEvent.as:

package events
{
    import flash.events.Event;

    public class ViewEvent extends Event
    {

        public static const CHANGE_VIEW:String = "changeView";

        public function ViewEvent(type:String, view:Class, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);

            this.view = view;
        }

        public var view:Class;

        override public function clone():Event
        {
            return new ViewEvent(type, view, bubbles, cancelable);
        }
    }
}

This worked for me, but I don’t like this_creationCompleteHandler part in Main.mxml and it’s up to you how to catch ViewEvent. Hope this can help.