如何使用SplitViewNavigator Flex4.6更改右视图

Question

我正在使用Flex4.6创建一个移动应用程序，我正在使用带有选项卡的SplitViewNavigator应用程序。我有一个永远不会改变的左视图，它有一个与之相关的静态列表。对于SplitViewNavigator的右侧面板，我有多个视图。我可以加载左视图和第一个右视图，但不知道在从左视图的列表中进行选择后如何更改右视图的视图。

我的主应用程序文件包含以下代码，用于加载拆分视图并显示左侧视图和第1个右侧视图。

<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>

我的左视图只有一个简单的列表，我可以确定选择了哪个项目，但我不知道如何更改右视图。假设正确的视图仅称为RightView1、RightView2等。

我假设我需要使用pushView方法，但不知道如何从leftView视图引用主应用程序文件中的正确视图id (rightNav)。但我可能会离开这里，所以任何帮助都将不胜感激。

干杯,

Answer 1

您可以尝试这样做：

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);
        }
    }
}

这对我来说很有效，但我不喜欢Main.mxml中的this_creationCompleteHandler部件，如何捕获ViewEvent由你决定。希望这能有所帮助。