Using a TabbedViewNavigator inside of a TitleWindow

Question

I'm making a Flex mobile 4.6 application, which is ViewNavigatorApplication (not sure if this has any consequences on the following). This app has a customized ActionBar, visible in the screenshot below.

Troubles starts here: I want to use a TitleWindow as a pop-up that will display some options contained in a TabbedViewNavigator. So basically: TabbedViewNavigator in a TitleWindow in a ViewNavigatorApplication.

This is what I get when simply adding the TabbedViewNavigator:

Apparently, the action bar of my main window is dupplicated inside my TitleWindow, which is obviously not what I want. Here is the code of my TitleWindow so far:

<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="addedToStageHandler(event)">
<fx:Script>
    <![CDATA[
        import mx.events.CloseEvent;
        import mx.events.FlexEvent;
        import mx.managers.PopUpManager;

        private var softKeyboardPanTimer:Timer = new Timer(250, 1);

        protected function closeHandler(event:CloseEvent):void
        {
            stage.focus = null;
            softKeyboardPanTimer.addEventListener(TimerEvent.TIMER, onSoftKeyboardClosed);
            softKeyboardPanTimer.start();
        }

        private function onSoftKeyboardClosed(event:TimerEvent):void
        {
            stage.focus = null;
            PopUpManager.removePopUp(this);
        }

        protected function centerPopUp(e:Event):void
        {
            PopUpManager.centerPopUp(this);
        }

        protected function addedToStageHandler(event:Event):void
        {
            stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, centerPopUp, false, 0, true);   
            this.closeButton.visible = false;
        }

    ]]>
</fx:Script>
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<s:Rect width="100%" height="100%">
    <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry ratio="0" color="#ffffff"/>
            <s:GradientEntry ratio="1" color="#f8f8f8"/>
        </s:LinearGradient>
    </s:fill>
</s:Rect>

<s:Group x="0" y="0" width="100%" height="100%">
    <s:layout>
        <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"/>
    </s:layout>
    <s:TabbedViewNavigator>
        <s:ViewNavigator label="Tab 1"/>
        <s:ViewNavigator label="Tab 2"/>
        <s:ViewNavigator label="Tab 3"/>
    </s:TabbedViewNavigator>
</s:Group>


</s:TitleWindow>

Just one more information: this pop-up is opened by clicking the fourth icon inside the action bar that is duplicated.

Any idea of I can get rid of that ghost bar?

Answer 1

To create a "tab bar" you can actually use a ButtonBar with TabbedViewNavigatorTabBarSkin - as you can see in my example:

Styling ButtonBar font in Flex mobile app - with screenshot attached

I am not sure about the TitleWindow, it probably won't work in a mobile app, but you could use a Callout.

Answer 2

Finally found the issue... I forgot about this piece of CSS that is actually responsible of the original ActionBar skin:

s|ActionBar
{
skinClass: ClassReference("aproove.presentation.ActionBarSkin");
} 

Since the TabbedViewNavigator is containing an ActionBar, the same skin is applied inside my pop-up. Quite dumb heh ;)