フレックス3のタブのスタイルを変更

Question

フレックス3.4の新機能です。ボタンをクリックするだけで、いくつかのタブのスタイルを変更したい（強調する）。私はJavaScriptのバックグラウンドから来て、Flexの方法では解釈できません。

Answer 1

TabBarクラスとTabNavigatorクラスには、タブの外観を定義する別のスタイルの名前であるtabStyleNameというスタイルがあります。 TabBarのスタイルをtabStyleNameに変更することで、タブのセットを赤い背景から青に変更する例を示します。必要に応じてタブのスタイルを変更できます。

---

<mx:Style> 
    .redTabs { 
     fillColors: #cc0000, #cc0000; 
    } 

    .blueTabs { 
     fillColors: #0000cc, #0000cc; 
    } 
    </mx:Style> 

    <mx:Script> 
    <![CDATA[ 
     protected function changeStyle(event:MouseEvent):void 
     { 
     theTabs.setStyle("tabStyleName", "blueTabs"); 
     } 
    ]]> 
    </mx:Script> 

    <mx:TabNavigator id="theTabs" x="10" y="10" width="200" height="200" tabStyleName="redTabs"> 
    <mx:Canvas label="apple" width="100%" height="100%"> 
    </mx:Canvas> 
    <mx:Canvas label="orange" width="100%" height="100%"> 
    </mx:Canvas> 
    <mx:Canvas label="banana" width="100%" height="100%"> 
    </mx:Canvas> 
    </mx:TabNavigator> 

    <mx:Button x="10" y="218" label="Change Style!" click="changeStyle(event)"/> 

編集：私はTabNavigatorコンテナで動作するように例を変更しました。