如何创建和管理嵌套的Tabbed View Navigator?

时间:2012-10-17 18:17:31

标签: flex mobile nested panel tabbed

我正在尝试实现嵌套的TabbedViewNavigator(在视图中)。我按照这篇文章中描述的方法3做了这个:

Flex - how to make a tabbed panel

代码在这里:

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">

<s:TabbedViewNavigator width="100%" height="100%">
    <s:ViewNavigator label="1st Tab" width="100%" height="100%" 
                     firstView="views.FirstTabView"/>
    <s:ViewNavigator label="2nd Tab" width="100%" height="100%" 
                     firstView="views.SecondTabView"/>
    <s:ViewNavigator label="3rd Tab" width="100%" height="100%" 
                     firstView="views.ThirdTabView"/>
</s:TabbedViewNavigator>

但是,如果我在其中一个子视图中调用“navigator.pushView(someView)” - 让我们说FirstTabView - 新视图将被推入嵌套的TabbedViewNavigator而不是父视图导航器。那不是我想要的。我想完全更改应用程序状态并显示新视图。我怎样才能做到这一点?我应该(在主视图中)监听嵌套的TabbedViewNavigator中的更改,然后从那里推送新视图吗?或者我应该以其他方式做到这一点?

1 个答案:

答案 0 :(得分:0)

我通过使用自定义事件解决了它(它是自定义的,因为我需要从中获取数据)。

为TabbedViewNavigator添加了一个侦听器和一个处理程序。从活动的ViewNavigator视图内部调度该事件。事件有bubbles = true,因此它会上升到事件链的顶部。然后只需在事件处理程序中推送新视图。

主要观点:

    <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">

         (...)

         private function setup(){
              tabbed_panel.addEventListener(CustomEvent.BUTTON_PRESSED, eventHandler); 
         }

         private function eventHandler(ev:CustomEvent):void{
             navigator.pushView(MyNewView,ev.event_data);
         }

         (...)


         <s:TabbedViewNavigator id="tabbed_panel" width="100%" height="100%">
             <s:ViewNavigator label="1st Tab" width="100%" height="100%" 
                 firstView="views.FirstTabView"/>
             <s:ViewNavigator label="2nd Tab" width="100%" height="100%" 
                 firstView="views.SecondTabView"/>
         </s:TabbedViewNavigator>

        (...)
    </s:View>

<强> FirstTabView:

    <View...>

         (...)

         private function buttonClickedHandler(event:Event):void{
             dispatchEvent(new CustomEvent(event_data,"BUTTON_PRESSED",true));
         }

         (...)

    </View>

我不知道这是否是解决问题的正确方法,但它确实有效。