4

My app has 3 categories of buttons, I want to have a tabbed panel I can use to switch between the 3 categories like in this example:

My app is a mobile app though so I can't use mx components. When I try searching for mobile tabbed navigation etc., I come up with only viewnavigator examples.

RapsFan1981
  • 1,177
  • 3
  • 21
  • 61

1 Answers1

4

For a mobile tabbed application, you simply use the TabbedViewNavigatorApplication class:

FIRST METHOD

Your views are simply MXML components that use <s:View> as the root note.

Reading your comments, I see that you want a tabbed bar within your view. In normal Flex, you would use a TabBar and attach it to a ViewStack but ViewStack is not available in mobile... so you can improvise using states, binding a TabBar to the names of the states and hide/show panels based on state. Here is an example:

SECOND METHOD*

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

    <s:layout>
        <s:VerticalLayout />
    </s:layout>

    <s:states>
        <s:State name="One" />
        <s:State name="Two" />
        <s:State name="Three" />
    </s:states>

    <s:TabBar id="tabBar" width="100%" 
              change="currentState = tabBar.dataProvider[event.newIndex]">
        <s:ArrayCollection>
            {states.map(function(x) { return x.name; }) }
        </s:ArrayCollection>
    </s:TabBar>

    <s:Group includeIn="One" width="100%" height="100%">
        <s:Label text="Tab One" />
    </s:Group>

    <s:Group includeIn="Two" width="100%" height="100%">
        <s:Label text="Tab Two" />
    </s:Group>

    <s:Group includeIn="Three" width="100%" height="100%">
        <s:Label text="Tab Three" />
    </s:Group>

</s:View>

BUT, you might still want to keep the mobile tab navigation functionality but only for one particular view. You can include a TabbedViewNavigator inside of your view instead of using a TabbedViewNavigatorApplication.

THIRD METHOD

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

</s:View>

You will get a nested "Action Bar" so you can disable the nested one in each of the tab views by setting actionBarVisible="false"

Hope this helps!!!!

Brian Genisio
  • 47,787
  • 16
  • 124
  • 167
  • Actually that wasn't what I was looking for. I don't want to change views. I have a view with a TextArea and a Container I have buttons in. I only want the container to have tabs that group buttons by their function, without changing the view. I might have one tab for font color, size etc, another tab for paragraph formatting, another for something else. – RapsFan1981 Sep 30 '11 at 15:46
  • @RapsFan1981 I have added two more ways to do it. One gives you full control of all of the buttons. You should find something you like between the three options. – Brian Genisio Sep 30 '11 at 16:30
  • @RapsFan1981 I should mention that I think the third option is probably the best one since it is mobile-optimized out of the gate. – Brian Genisio Sep 30 '11 at 16:31