Изменение цвета границы вкладки во время выполнения в flex

Question

Как изменить цвет границы вкладки в элементе управления навигатором вкладок во время выполнения? Я пытаюсь получить к нему доступ с идентификатором «mytab» и обновить его стиль.

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

TabNavigator имеет несколько вкладок, и я должен изменить стиль нескольких вкладок, основываясь на некоторой логике. StyleDeclaration применимо ко всем вкладкам в навигаторе вкладок, но как использовать CSSStyleDeclaration на основе componententid? Единственным недостатком этого подхода является то, что стиль нельзя изменить для отдельной вкладки.

Answer 1

Установка стиля непосредственно на TabNavigator не будет работать. Вы должны установить свойство tabStyleName на TabNavigator, а затем создать стиль с тем же именем, который будет применяться к вашим вкладкам. Это та же стратегия, что и мой ответ на другой ваш вопрос ; вместо этого просто установите стиль borderColor.

---

Если вам действительно нужно динамически установить стиль во время выполнения, вы можете получить CSSStyleDeclaration для вкладок и установить его так:

  <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)"/>