Geek Answers Handbook

Flex - how to make a tabbed panel

There are 3 categories of buttons in my application, I want to have a tab bar that I can use to switch between the three categories, for example, in example:

My application is a mobile application, although I cannot use mx components. When I try to find tabbed mobile navigation, etc., I come up with only viewnavigator examples.

+4
source share
1 answer

For a tabbed mobile 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 to use the tabbed panel in your view. In regular Flex, you have to use the TabBar and attach it to the ViewStack , but the ViewStack not available on the mobile phone ... so you can improvise with the states by binding the TabBar to the state names and hide / show the panels based on the 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 can still save the navigation functionality for mobile devices, but only for one specific view. You can include TabbedViewNavigator inside your view instead of using 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 that you can disable the nested in each of the tab views by setting actionBarVisible="false"

Hope this helps !!!!

+4
source

More articles:


All Articles