How to create and manage a nested TabbedViewNavigator?

问题

I'm trying to implement a nested TabbedViewNavigator (inside a View). I did this by following method 3 described in this post:

Flex - how to make a tabbed panel

Code here:

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

However if I call "navigator.pushView(someView)" inside one of the child views - let's say FirstTabView - the new view will be pushed into the nested TabbedViewNavigator instead of the parent's view navigator. That is not what I want. I want to completely change the application state and show a new view. How can I achieve that? Should I listen (in the main view) for changes within the nested TabbedViewNavigator and then push the new view from there? Or should I just do this some other way?

回答1:

I solved it by using a custom event (it's custom because I need to get data from it).

Added a listener and a handler to the TabbedViewNavigator. The event is dispatched from inside the active ViewNavigator view. The event has bubbles=true so that it goes up to the top of the event chain. Then just push the new view in the event handler.

Main View:

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

I don't know if this is a corrrect approach to the problem, but it works.

来源：https://stackoverflow.com/questions/12940728/how-to-create-and-manage-a-nested-tabbedviewnavigator

标签

apache-flex

mobile

nested

panel

tabbed