インラインスタイルの使用 -- Flex 2.01

スタイルプロパティは、MXML タグでコンポーネントのプロパティとして設定できます。インラインスタイル定義は、他のスタイル定義よりも優先されます。次の例では、Button コンポーネントにタイプセレクタが定義されていますが、インライン定義を使用して color をオーバーライドします。

<?xml version="1.0"?>
<!-- styles/InlineOverride.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     Button { 
        fontSize: 10pt; 
        fontStyle: italic;
        color: #FF0000;
     }
  </mx:Style>
  <mx:Button label="Button Type Selector Color"/>
  <mx:Button color="0x999942" label="Inline Color"/>
</mx:Application>

インラインでスタイルプロパティを設定する場合は、CSS の命名シンタックスではなく、ActionScript スタイルプロパティの命名シンタックスに従う必要があります。たとえば、Button コントロールの fontSize プロパティは、<mx:Style> 宣言では font-size または fontSize に設定できますが、タグ定義では fontSize に設定する必要があります。

<?xml version="1.0"?>
<!-- styles/CamelCase.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     .myFontStyle { 
        fontSize: 15;
     }
     .myOtherFontStyle { 
        font-size: 15;
     }
  </mx:Style>
  <mx:Button id="myButton" styleName="myFontStyle" label="Click Here"/>
  <mx:Button id="myButton2" styleName="myOtherFontStyle" label="Click Here"/>
  <mx:Button id="myButton3" fontSize="15" label="Click Here"/>
</mx:Application>

インラインでカラースタイルプロパティを設定する場合、次の例を示すように、16 進数形式または VGA カラー名を使用できます。

<?xml version="1.0"?>
<!-- styles/ColorFormatInline.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

  <mx:Button id="myButton" themeColor="0x6666CC" color="Blue" label="Click Here"/>

</mx:Application>

clearStyle() メソッドを使用すると、インラインスタイル定義を削除できます。

変数を [Bindable] としてタグ付けしてあれば、インラインスタイルプロパティをその変数にバインドできます。次の例では、HBox コントロールの backgroundColor プロパティの値を、colorValue 変数の値にバインドします。

<?xml version="1.0"?> 
<!-- styles/PropertyBinding.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[ 
     [Bindable]
     public var colorValue:int = 0x333999;
     
     public function changeHBoxStyle():void {
        colorValue = cp.selectedColor;
     }
  ]]></mx:Script>
  <mx:HBox width="100" height="100" backgroundColor="{colorValue}"/>
  <mx:ColorPicker id="cp" showTextField="true" change="changeHBoxStyle()" selectedColor="0x333999"/>
</mx:Application>

スタイルプロパティのバインドでは、多くの計算処理が必要になることがあります。プロパティの適用にこのメソッドを使用するのは、それ以外に手段がない場合に限るようにします。