flex Spark Tab index de retournement

Question

J'utilise une barre d'onglets spark et j'ai donné une pile de vue en tant que dataprovider ..... dans la pile de vue il y a n éléments ... et chaque élément a un panneau ....

mon code serait quelque chose comme ça ....

<s:tabbar dataprovider = {viewstck-id} height="100%" width="100%"/> 
<viewstack id="viewstck-id"> 
<navigatorContent > 
    <s:panel title="title - 1"/> 
</navigatorContent > 
<navigatorContent > 
    <s:panel title="title - 2"/> 
</navigatorContent >\ 
<navigatorContent > 
    <s:panel title="title - 3"/> 
</navigatorContent > 

mon exigence est quelque chose comme ça ...... d'abord le panneau de l'onglet sélectionné doit afficher son propre titre ..suppose si nous sommes sur l'onglet-1 le titre devrait être titre-1 ... mais quand nous passons la souris sur l'onglet-2, le titre du panneau dans l'onglet-1 devrait être changé en tittle-2 et si la souris est sur tab3, le titre du panneau de l'onglet-1 devrait être changé en tittle-3 et, à la sortie, il devrait être remplacé par le titre de l'onglet sélectionné, c-à-d ... .et de la même manière il devrait fonctionner pour tous les onglets .....

Donc, est-il un moyen d'obtenir le obtenir le rollOverIndex de l'onglet Ou quelqu'un s'il vous plaît me fournir une solution.

- Merci rouge

Answer 1

Eh bien, mon idée est d'utiliser la sous-classe ItemRenderer pour gérer ROLL_OVER événement et obtenir index de l'élément. Par défaut, le rendu d'élément TabBar est la classe ButtonBarButton avec l'habillage TabBarButtonSkin. et la classe ButtonBarButton a la propriété itemIndex. Faisons-le:

---> Code pour

MyButtonBarItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?> 
<s:ButtonBarButton xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" 
       creationComplete="creationCompleteHandler(event)" 
       skinClass="spark.skins.spark.TabBarButtonSkin" 
       > 
    <fx:Script> 
     <![CDATA[ 
      import events.MyTabBarEvent; 

      import mx.events.FlexEvent; 

      protected function creationCompleteHandler(event:FlexEvent):void 
      { 
       this.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler); 
      } 

      private function rollOverHandler(e:MouseEvent) : void 
      { 
       var tbe:MyTabBarEvent = new MyTabBarEvent(MyTabBarEvent.ITEM_ROLL_OVER, true); 
       tbe.itemIndex = this.itemIndex; 
       dispatchEvent(tbe); 
      } 
     ]]> 
    </fx:Script> 
</s:ButtonBarButton> 

Ici nous utilisons événement personnalisé avec la propriété itemIndex:

---> code pour MyTabBarEvent.as placés dans ' paquet d'événements

package events 
{ 
    import flash.events.Event; 

    public class MyTabBarEvent extends Event 
    { 
     public static const ITEM_ROLL_OVER:String = "MyTabBarEvent.ItemRollOver"; 

     public var itemIndex:int; 

     public function MyTabBarEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false) 
     { 
      super(type, bubbles, cancelable); 
     } 
    } 
} 

Tout ce que nous devons faire maintenant est notre gérer événement personnalisé dans notre application:

---> Code pour l'application

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" 
       creationComplete="creationCompleteHandler(event)" 
       > 

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

    <fx:Script> 
     <![CDATA[ 
      import events.MyTabBarEvent; 

      import mx.events.FlexEvent; 

      protected function creationCompleteHandler(event:FlexEvent):void 
      { 
       tabBar.addEventListener(MyTabBarEvent.ITEM_ROLL_OVER, itemRollOverHandler); 
      } 

      protected function itemRollOverHandler(e:MyTabBarEvent) : void 
      { 
       trace ("Item " + e.itemIndex + " roll over event handled"); 
       tabBar.selectedIndex = e.itemIndex; 
      } 

     ]]> 
    </fx:Script> 


    <s:VGroup> 
     <s:TabBar id="tabBar" dataProvider="{viewstckId}" width="100%" itemRenderer="MyButtonBarItemRenderer"/> 
     <mx:ViewStack id="viewstckId"> 
      <s:NavigatorContent label="Title 1"> 
       <s:Panel title="title - 1"/> 
      </s:NavigatorContent > 
      <s:NavigatorContent label="Title 2"> 
       <s:Panel title="title - 2"/> 
      </s:NavigatorContent> 
      <s:NavigatorContent label="Title 3"> 
       <s:Panel title="title - 3"/> 
      </s:NavigatorContent> 
     </mx:ViewStack> 
    </s:VGroup> 
</s:Application> 

Answer 2

Avec Spark TabBar, vous pouvez essayer d'ajouter un écouteur d'événement sur MouseEvent.MOUSE_OVER puis vérifier event.target.label pour obtenir le nom de l'onglet et event.target.itemIndex pour l'index de l'onglet sur lequel la souris survole.