
Flex
におけるスタイルの利用について・パート1
まずは、Flex 3
での、スタイルの利用方法のおさらいから。
Flex 3 でのスタイルの利用
HTML 4 / XHTML 1
でのスタイルの利用方法が、(1)タグ要素に直接HTML属性で指定する、(2)要素に直接CSSを適用する、(3)外部CSSを適用する、などなどがありますが、Flex 3
にもいくつかの方法があります。
(1)タイプ要素に直接MXML属性でスタイルを指定する
最もシンプルで簡単な方法。でも、mxml
ファイル中のMXML
コーディング部分がぐちゃぐちゃして読みにくくなってしまうのが、難点。ちなみに、Flex Builder 3
のデザインビューでスタイルをビジュアルに編集すると、この(1)の方法になる。
1 | <? xml version = "1.0" encoding = "utf-8" ?> |
2 | < mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" layout = "absolute" width = "200" height = "120" backgroundColor = "#FFFFFF" backgroundGradientAlphas = "[1.0, 1.0]" backgroundGradientColors = "[#FFFFFF, #FFFFFF]" > |
4 | < mx:Button x = "10" y = "10" label = "ボタン" |

(2)動的にスタイルを適用する
ActionScript 3.0
を使って、動的に Flex 3 コンポーネント
のスタイルを変更してしまう方法。 mx.core.UIComponent
クラス の setStyle()
メソッド を使用。
ロジックにスタイルを書き込むことになるので、プログラムとデザインの分離が出来ない形になってしまう。
1 | <? xml version = "1.0" encoding = "utf-8" ?> |
2 | < mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" layout = "absolute" width = "200" height = "120" backgroundColor = "#FFFFFF" backgroundGradientAlphas = "[1.0, 1.0]" backgroundGradientColors = "[#FFFFFF, #FFFFFF]" initialize = "init()" > |
4 | < mx:Script source = "Hoge_logic.as" /> |
6 | < mx:Button x = "10" y = "10" label = "ボタン" id = "btn1" /> |
1 | private function init(): void { |
2 | btn1.setStyle( "color" , "0xCC0000" ); |
3 | btn1.setStyle( "font-size" , "24" ); |

(3)CSSを使用する
Flex 3 CSS
を使用する方法。下記の例では、タイプセレクタを使っています。ユーザインターフェイスとデザインとロジックの分離ができて便利。その分、やや手間はかかりますが…。
1 | <? xml version = "1.0" encoding = "utf-8" ?> |
2 | < mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" layout = "absolute" width = "200" height = "120" backgroundColor = "#FFFFFF" backgroundGradientAlphas = "[1.0, 1.0]" backgroundGradientColors = "[#FFFFFF, #FFFFFF]" > |
4 | < mx:Style source = "style.css" /> |
6 | < mx:Button x = "10" y = "10" label = "ボタン" /> |

Flex 3 で使用可能なCSSのセレクタ
HTML 4 / XHTML 1
などで使用可能な CSS
のセレクタの種類は、非常にたくさんありますが、Flex 3 CSS
で使用可能なセレクタの種類は以下の2種類のみ。
タイプセレクタ (Type selector)
最も単純なセレクタ。タイプ名を指定することで、そのタイプすべてに対してスタイルを適用できる。
01 | <? xml version = "1.0" encoding = "utf-8" ?> |
02 | < mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" layout = "absolute" width = "200" height = "120" backgroundColor = "#FFFFFF" backgroundGradientAlphas = "[1.0, 1.0]" backgroundGradientColors = "[#FFFFFF, #FFFFFF]" > |
04 | < mx:Style source = "style.css" /> |
06 | < mx:VBox x = "10" y = "10" width = "100%" > |
07 | < mx:Button id = "btn1" label = "ボタン1" /> |
08 | < mx:Button id = "btn2" label = "ボタン2" /> |
09 | < mx:Button id = "btn3" label = "ボタン3" /> |

クラスセレクタ (Class selector)
お馴染みのclass
属性の値でスタイルを指定する。
01 | <? xml version = "1.0" encoding = "utf-8" ?> |
02 | < mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" layout = "absolute" width = "200" height = "120" backgroundColor = "#FFFFFF" backgroundGradientAlphas = "[1.0, 1.0]" backgroundGradientColors = "[#FFFFFF, #FFFFFF]" > |
04 | < mx:Style source = "style.css" /> |
06 | < mx:VBox x = "10" y = "10" width = "100%" > |
07 | < mx:Button id = "btn1" label = "ボタン1" |
09 | < mx:Button id = "btn2" label = "ボタン2" |
11 | < mx:Button id = "btn3" label = "ボタン3" /> |

Flex 3 では、小孫セレクタは対応していない
Flex 3
では、小孫セレクタが対応されていないので、次のような CSS
を定義しても、反映されない。また、Flex Builder 3
で次のような警告が発せられる:「CSSセレクタタイプはサポートされていません:'Button *.strongStyle'
」。
01 | <? xml version = "1.0" encoding = "utf-8" ?> |
02 | < mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" layout = "absolute" width = "200" height = "120" backgroundColor = "#FFFFFF" backgroundGradientAlphas = "[1.0, 1.0]" backgroundGradientColors = "[#FFFFFF, #FFFFFF]" > |
04 | < mx:Style source = "style.css" /> |
06 | < mx:VBox x = "10" y = "10" width = "100%" > |
07 | < mx:Button id = "btn1" label = "ボタン1" |
09 | < mx:Button id = "btn2" label = "ボタン2" |
10 | styleName = "strongStyle" /> |
11 | < mx:Button id = "btn3" label = "ボタン3" /> |
12 | < mx:Label id = "lb1" text = "ラベル1" |
13 | styleName = "strongStyle" /> |
14 | < mx:Label id = "lb2" text = "ラベル2" /> |

comment