スタイルの適用が無効になる

Flex

久しぶりの更新となってしまいました。

大火事プロジェクトも悲惨な状況は過ぎ去り、ちょっとづつ落ち着きを
取り戻しつつある今日この頃、皆様如何お過ごしでしょうか。


さて、本日FlexのTabNavigatorのタブの色を変更しようとして大いに
はまりましたので記録として残したいと思います。


■タブごとにスタイルを適用する

TabNavigatorにタブが3つ登録された状態とすると、以下のように
スタイルを設定すると、
・最初のタブの文字は「赤」
・真ん中のタブの文字は「青」
・最初のタブの文字は「緑」
で表示されます。

tabNavigator.getTabAt(0).styleName = "style1";
tabNavigator.getTabAt(1).styleName = "style2";
tabNavigator.getTabAt(2).styleName = "style3";

.style1 {
  color: #FF0000;
}
.style2 {
  color: #0000FF;
}
.style3 {
  color: #00FF00;
}

ここで落とし穴！！

■スタイルがキャッシュしない？

あるボタンからTabNavigatorのある画面を表示する場合、最初に表示する際は
スタイルが適用された状態なのに、次表示するとスタイルが飛んでしまう状況に
遭遇しました。

意味がわかりません。


■setStyleで解決

色々調べたところ、styleNameはmxmlで指定する分には問題ないが、ActionScriptで
動的に設定する場合はCSSのクラス名を指定するだけでは駄目なようです。

さて、どうするかということで「setStyle」の登場です。

tabNavigator.getTabAt(0).tab.setStyle("color", 0xFF0000);

上記のようにしているすると、スタイルが飛んでしまう困った状況にはならず
安定して動作しました。


っということで、ちょっとしたTipsでした。