FlexにおけるCSSの利用・１

エントリー

FlexにおけるCSSの利用・１

2010/05/1917:04

※注意：このエントリーは、旧日記「Mio Diary Code:P」からデータを移管したものです。

Flex におけるスタイルの利用について・パート1
　まずは、Flex 3 での、スタイルの利用方法のおさらいから。

Flex 3 でのスタイルの利用

HTML 4 / XHTML 1 でのスタイルの利用方法が、（１）タグ要素に直接HTML属性で指定する、（２）要素に直接CSSを適用する、（３）外部CSSを適用する、などなどがありますが、Flex 3 にもいくつかの方法があります。

（１）タイプ要素に直接MXML属性でスタイルを指定する

最もシンプルで簡単な方法。でも、mxmlファイル中のMXMLコーディング部分がぐちゃぐちゃして読みにくくなってしまうのが、難点。ちなみに、Flex Builder 3 のデザインビューでスタイルをビジュアルに編集すると、この（１）の方法になる。

<?xml version="1.0" encoding="utf-8"?>
<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]">
    
    <mx:Button x="10" y="10" label="ボタン"
               color="#CC0000"
               font-size="24" />
    
</mx:Application>

（２）動的にスタイルを適用する

ActionScript 3.0 を使って、動的に Flex 3 コンポーネント のスタイルを変更してしまう方法。 mx.core.UIComponent クラスの setStyle() メソッドを使用。
ロジックにスタイルを書き込むことになるので、プログラムとデザインの分離が出来ない形になってしまう。

Hoge.MXML
Hoge_logic.AS

<?xml version="1.0" encoding="utf-8"?>
<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()">
    
    <mx:Script source="Hoge_logic.as" />
    
    <mx:Button x="10" y="10" label="ボタン" id="btn1" />
    
</mx:Application>

private function init():void {
    btn1.setStyle( "color", "0xCC0000" );
    btn1.setStyle( "font-size", "24" );
}

（３）CSSを使用する

Flex 3 CSS を使用する方法。下記の例では、タイプセレクタを使っています。ユーザインターフェイスとデザインとロジックの分離ができて便利。その分、やや手間はかかりますが…。

Hoge.MXML
style.CSS

<?xml version="1.0" encoding="utf-8"?>
<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]">
    
    <mx:Style source="style.css" />
    
    <mx:Button x="10" y="10" label="ボタン" />
    
</mx:Application>

Button {
    color: #CC0000;
    font-size: 24;
}

Flex 3 で使用可能なCSSのセレクタ

HTML 4 / XHTML 1 などで使用可能な CSS のセレクタの種類は、非常にたくさんありますが、Flex 3 CSS で使用可能なセレクタの種類は以下の2種類のみ。

タイプセレクタ (Type selector)

最も単純なセレクタ。タイプ名を指定することで、そのタイプすべてに対してスタイルを適用できる。

Hoge.MXML
style.CSS

<?xml version="1.0" encoding="utf-8"?>
<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]">
    
    <mx:Style source="style.css" />
    
    <mx:VBox x="10" y="10" width="100%">
        <mx:Button id="btn1" label="ボタン1" />
        <mx:Button id="btn2" label="ボタン2" />
        <mx:Button id="btn3" label="ボタン3" />
    </mx:VBox>
    
</mx:Application>

Button {
    color: #00CC00;
    font-size: 12;
}

クラスセレクタ (Class selector)

お馴染みのclass属性の値でスタイルを指定する。

Hoge.MXML
style.CSS

<?xml version="1.0" encoding="utf-8"?>
<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]">
    
    <mx:Style source="style.css" />
    
    <mx:VBox x="10" y="10" width="100%">
        <mx:Button id="btn1" label="ボタン1"
                   styleName="style1" />
        <mx:Button id="btn2" label="ボタン2"
                   styleName="style1" />
        <mx:Button id="btn3" label="ボタン3" />
    </mx:VBox>
    
</mx:Application>

.style1 {
    color: #0000CC;
    font-size: 12;
}

Flex 3 では、小孫セレクタは対応していない

Flex 3 では、小孫セレクタが対応されていないので、次のような CSS を定義しても、反映されない。また、Flex Builder 3 で次のような警告が発せられる：「CSSセレクタタイプはサポートされていません：'Button *.strongStyle'」。

Hoge.MXML
style.CSS

<?xml version="1.0" encoding="utf-8"?>
<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]">
    
    <mx:Style source="style.css" />
    
    <mx:VBox x="10" y="10" width="100%">
        <mx:Button id="btn1" label="ボタン1"
                   styleName="style1" />
        <mx:Button id="btn2" label="ボタン2"
                   styleName="strongStyle" />
        <mx:Button id="btn3" label="ボタン3" />
        <mx:Label id="lb1" text="ラベル1"
                   styleName="strongStyle" />
        <mx:Label id="lb2" text="ラベル2" />
    </mx:VBox>
    
</mx:Application>

Button {
    color: #999999;
    font-size: 8;
}

.style1 {
    color: #0000CC;
    font-size: 12;
}

.strongStyle {
    color: #CC0000;
    font-weight: bold;
    font-size: 12;
}

/* ↓ Flex 3 では、サポートされていない。*/
Button .strongStyle {
    color: #00CC00;
}

ページ移動

コメントはまだありません。

コメント登録

コメントを入力してください。

ユーティリティ

user profile

nmio

search

calendar

042024/0506
S	M	T	W	T	F	S
-	-	-	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	-

Mio Project!

MENU

エントリー