Flex学習記07 - スタイルシート

これまでのエントリ

• Flex学習記01 - Flexとは
• Flex学習記02 - Flex Builder
• Flex学習記03 - MXMLとActionScript
• Flex学習記04 - プロジェクトの作成について
• Flex学習記05 - Flexのデバッグ
• Flex学習記06 - MXMLのレイアウト

Flexでは、CSSでスタイルの指定が可能です。
Adobe - デベロッパーセンター : Creative Suite 3とFlex Builder 3を使用したFlex 3のスキンとスタイルのデザイン

• コンポーネント単位に指定するタイプセレクタ
• 任意のコンポーネントに適用できるクラスセレクタ

があり、組み合わせて使うこともできます。

src/css/style.css

/* CSS file */
Application {
  backgroundColor: #66ff99;
  backgroundGradientColors: #33ff33, #66ccff;
  backgroundGradientAlphas: 0.42, 0.34;
  themeColor: #ff0000;
  color: #666666;
}
Button {
  cornerRadius: 15;
  textIndent: 0;
  fillAlphas: 0.6, 0.58, 0.75, 0.65;
  color: #333333;
  textRollOverColor: #000099;
  borderColor: #666666;
  themeColor: #999999;
  fontWeight: bold;
}

src/style.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
  xmlns:mx               = "http://www.adobe.com/2006/mxml"
  xmlns                  = "*"
  width                  = "100%"
  height                 = "100%"
  paddingLeft            = "0"
  paddingRight           = "0"
  paddingTop             = "0"
  paddingBottom          = "0"
  horizontalScrollPolicy = "off"
  verticalScrollPolicy   = "off"
  layout                 = "absolute"
  frameRate              = "60"
  viewSourceURL="src/style.mxml"
  >
  <mx:Style source="css/style.css" />
  <mx:VBox
    width="100%"
    height="100%"
    paddingTop="10"
    paddingLeft="10"
  >
    <mx:Button label="Button-A" />
    <mx:Button label="Button-B" styleName="myFontStyle"/>
  </mx:VBox>
</mx:Application>

表示結果

どんな感じで書いたらいいのかは、Flex Style Explorerを使って見るといいと思います。