Flex - comment faire un panneau à onglets

Question

Mon application a 3 catégories de boutons, je veux avoir un panneau à onglets que je peux utiliser pour basculer entre les 3 catégories comme dans ce example:

Mon application est une application mobile bien donc je ne peux pas utiliser des composants mx. Lorsque j'essaie de rechercher la navigation par onglet mobile, etc., je ne propose que des exemples de viewnavigator.

Answer 1

Pour une application mobile à onglets, vous utilisez simplement la classe TabbedViewNavigatorApplication:

PREMIÈRE MÉTHODE

Vos vues sont simplement des composants MXML qui utilisent <s:View> comme la note fondamentale. En lisant vos commentaires, je vois que vous voulez une barre à onglets dans votre vue. En Flex normal, vous utiliseriez un TabBar et l'attacheriez à un ViewStack mais ViewStack n'est pas disponible sur mobile ... donc vous pouvez improviser en utilisant des états, en associant un TabBar aux noms des états et en masquant/affichant des panneaux en fonction de l'état. Voici un exemple:

MÉTHODE DEUXIÈME *

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

MAIS, vous pouvez toujours garder la fonctionnalité de navigation par onglets mobile, mais seulement pour un point de vue particulier. Vous pouvez inclure un TabbedViewNavigator dans votre vue au lieu d'utiliser un TabbedViewNavigatorApplication.

troisième méthode

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

Vous obtiendrez un « barre d'action » imbriquée de sorte que vous pouvez désactiver l'une imbriquée dans chacune des vues de l'onglet en mettant actionBarVisible="false"

Hope this helps !!! !