Changing tab border color at run time in flex

Question

How can I change border color of tab in tab navigator control at runtime? I am trying to access it with its id "mytab" and update it's style.

this.mytab.setStyle("bordercolor","red");

A TabNavigator has multiple tabs and I have to change style of few tabs based on some logic. StyleDeclaration is applicable for all the tabs under tab navigoter but how can use CSSStyleDeclaration based on componentid? The only shortfall with this approach is that Style can not be changed for individual tab.

Answer 1

Setting the style directly on the TabNavigator won't work. You have to set the tabStyleName property on TabNavigator and then create a style with the same name, which will be applied to your tabs. It is the same strategy as my answer to your other question; just set the borderColor style instead.

---

If you really need to set the style dynamically at runtime, you can retrieve the CSSStyleDeclaration for the tabs and set it like so:

  <mx:Style>
    .tabStyle {
      /* define an empty style so there is something to get using getStyleDeclaration */
    }
  </mx:Style>

  <mx:Script>
    <![CDATA[
      protected function changeStyle(event:MouseEvent):void
      {
        var cssStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".tabStyle");
        cssStyle.setStyle("borderColor", "red");
      }
    ]]>
  </mx:Script>

  <mx:TabNavigator id="mytab" width="200" height="200" tabStyleName="tabStyle">
    <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)"/>