的Flex 4：確定的TabBar鼠標懸停

Question

指數（不將selectedIndex），我在那裏我試圖更新標籤的text屬性字符串的應用程序，基於其用戶超過了鼠標選項卡上。我已經構造一個簡單的例子，顯示我會如何處理該事件處理函數，如果我爲要使用selectedIndex屬性，但它是有鼠標焦點的標籤，可能會或可能不會是selectedItem屬性，我想以引用和我一直無法找到一種方法來做到這一點。

因此，這裏的例子：

<s:Label 
    id="descriptionLabel" 
    /> 
<s:TabBar 
    id="audioTB" 
    dataProvider="{audioVS}" 
    mouseOver="audioTB_mouseOverHandler(event)" 
    rollOut="audioTB_rollOutHandler(event)" 
    /> 
<mx:ViewStack 
    id="audioVS" 
    > 
    <!--- Menu1 --> 
    <s:NavigatorContent 
     id="audioNC1" 
     label="Audio Menu 1" 
     > 
     <mx:DataGrid 
      id="audioDG1" 
      /> 
    </s:NavigatorContent> 
    <!--- Menu2 --> 
    <s:NavigatorContent 
     id="audioNC2" 
     label="Audio Menu 2" 
     > 
     <mx:DataGrid 
      id="audioDG2" 
      /> 
    </s:NavigatorContent> 
    <!--- Menu3 --> 
    <s:NavigatorContent 
     id="audioNC3" 
     label="Audio Menu 3" 
     > 
     <mx:DataGrid 
      id="audioDG3" 
      /> 
    </s:NavigatorContent> 
</mx:ViewStack> 
</s:Application> 

任何建議，將不勝感激。

感謝， 〜尼

Answer 1

我可以建議你使用自定義事件標籤欄按鈕來解決這個問題：

package 
{ 
    import flash.events.Event; 

    public class TabButtonEvent extends Event 
    { 
     public static const TAB_IS_OVER:String = "tabIsOver"; 

     private var _tabLabel:String; 

     public function TabButtonEvent(type:String, tabLabel:String) 
     { 
      super(type,true,false); 
      this._tabLabel = tabLabel; 
     } 

     public function get tabLabel():String 
     { 
      return _tabLabel; 
     } 

     public override function clone():Event 
     { 
      return new TabButtonEvent(type,tabLabel); 
     } 
    } 
} 

那麼你應該創建自定義標籤欄按鈕的皮膚。好消息是，你可以使用繼承：

package 
{ 
import spark.skins.spark.TabBarButtonSkin; 
import mx.events.StateChangeEvent; 

public class TabBarButtonSkinExt extends TabBarButtonSkin 
{ 
    public function TabBarButtonSkinExt() 
    { 
     super(); 
     addEventListener(StateChangeEvent.CURRENT_STATE_CHANGE, currentStateChangeHandler); 
    } 

    private function currentStateChangeHandler(event:StateChangeEvent):void 
    { 
     if (event.newState.toLowerCase().indexOf("over") > -1) 
     { 
      dispatchEvent(new TabButtonEvent(TabButtonEvent.TAB_IS_OVER, hostComponent.label)); 
     } 
    } 
} 
} 

，包括在標籤欄皮膚此按鈕（不繼承，不好意思）：

<?xml version="1.0" encoding="utf-8"?> 
<!-- TabBarSkinExt.mxml --> 
<s:Skin alpha.disabled="0.5" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009"> 
    <fx:Metadata> 
     <![CDATA[ 
     /** 
     * @copy spark.skins.spark.ApplicationSkin#hostComponent 
     */ 
     [HostComponent("spark.components.TabBar")] 
     ]]> 
    </fx:Metadata> 
    <fx:Script fb:purpose="styling"> 
    <![CDATA[ 
     import mx.core.UIComponent; 

     /** 
     * @private 
     * Push the cornerRadius style to the item renderers. 
     */ 
     override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void 
     { 
      const numElements:int = dataGroup.numElements; 
      const cornerRadius:int = hostComponent.getStyle("cornerRadius"); 
      for (var i:int = 0; i < numElements; i++) 
      { 
       var elt:UIComponent = dataGroup.getElementAt(i) as UIComponent; 
       if (elt) 
        elt.setStyle("cornerRadius", cornerRadius); 
      } 

      super.updateDisplayList(unscaledWidth, unscaledHeight); 
     } 
    ]]> 
    </fx:Script> 
    <s:states> 
     <s:State name="normal" /> 
     <s:State name="disabled" /> 
    </s:states> 

    <!--- @copy spark.components.SkinnableDataContainer#dataGroup --> 
    <s:DataGroup height="100%" id="dataGroup" width="100%"> 
     <s:layout> 
      <s:ButtonBarHorizontalLayout gap="-1" /> 
     </s:layout> 
     <s:itemRenderer> 
      <fx:Component> 
       <s:ButtonBarButton skinClass="TabBarButtonSkinExt" /> 
      </fx:Component> 
     </s:itemRenderer> 
    </s:DataGroup> 
</s:Skin> 

現在您的應用程序：

<?xml version="1.0" encoding="utf-8"?> 
<s:Application minHeight="600" minWidth="955" xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"> 
    <fx:Script> 
    <![CDATA[ 
     import mx.events.FlexEvent; 

     protected function audioTB_rollOutHandler(event:MouseEvent):void 
     { 
      descriptionLabel.text = " "; 
     } 

     protected function audioTB_initializeHandler(event:FlexEvent):void 
     { 
      audioTB.addEventListener(TabButtonEvent.TAB_IS_OVER, audioTB_tabIsOverHandler); 
     } 

     private function audioTB_tabIsOverHandler(event:TabButtonEvent):void 
     { 
      descriptionLabel.text = event.tabLabel; 
      event.stopImmediatePropagation(); 
     } 
    ]]> 
    </fx:Script> 
    <s:layout> 
     <s:VerticalLayout /> 
    </s:layout> 
    <s:Label id="descriptionLabel" /> 
    <s:TabBar dataProvider="{audioVS}" id="audioTB" 
     rollOut="audioTB_rollOutHandler(event)" skinClass="TabBarSkinExt" initialize="audioTB_initializeHandler(event)" /> 
    <mx:ViewStack id="audioVS"> 
     <!--- Menu1 --> 
     <s:NavigatorContent id="audioNC1" label="Audio Menu 1"> 
      <mx:DataGrid id="audioDG1" /> 
     </s:NavigatorContent> 
     <!--- Menu2 --> 
     <s:NavigatorContent id="audioNC2" label="Audio Menu 2"> 
      <mx:DataGrid id="audioDG2" /> 
     </s:NavigatorContent> 
     <!--- Menu3 --> 
     <s:NavigatorContent id="audioNC3" label="Audio Menu 3"> 
      <mx:DataGrid id="audioDG3" /> 
     </s:NavigatorContent> 
    </mx:ViewStack> 
</s:Application> 

希望這有助於！