StyleManager クラスを使用すると、ActionScript でクラスセレクタおよびタイプセレクタにアクセスできます。また、継承可能なプロパティと継承不可能なプロパティをグローバルに適用することもできます。StyleManager を使用すると、新しい CSS スタイル宣言を定義し、それを Flex アプリケーションのコントロールに適用できます。

StyleManager を使用したスタイルの設定

StyleManager を使用して値を設定するには、次のシンタックスを使用します。

mx.styles.StyleManager.getStyleDeclaration(style_name).setStyle("property", value);

style_name に指定できるのは、リテラルの global、Button や TextArea などのタイプセレクタ、<mx:Style> タグまたは外部スタイルシートで定義されたクラスセレクタのいずれかです。グローバルスタイルは、各オブジェクトで明示的にオーバーライドされない限り、すべてのオブジェクトに適用されます。

getStyleDeclaration() メソッドは、継承不可能なスタイルを一度に複数のクラスに適用する場合に役立ちます。このプロパティは、CSSStyleDeclaration タイプのオブジェクトを参照します。タイプセレクタや外部スタイルシートは、既に CSSStyleDeclaration タイプのものであると想定されます。Flex では、このタイプのオブジェクトに定義したクラスセレクタが内部で変換されます。

次の例では、スタイルプロパティを Button、myStyle および global の各スタイル名に適用します。

<?xml version="1.0"?>
<!-- styles/USingStyleManager.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp(event)">
  <mx:Style>    
     .myStyle {
        color: red;
     }
  </mx:Style>   

  <mx:Script><![CDATA[
     import mx.styles.StyleManager;
     public function initApp(e:Event):void {
        // Type selector; applies to all Buttons and subclasses 
        // of Button.
        StyleManager.getStyleDeclaration("Button").
            setStyle("fontSize",24); 

        // Class selector; applies to controls using the style 
        // named myStyle. Note that class selectors must be prefixed 
        // with a period.
        StyleManager.getStyleDeclaration(".myStyle").
            setStyle("color",0xCC66CC);

        // Global style: applies to all controls.
        StyleManager.getStyleDeclaration("global").
            setStyle("fontStyle","italic");
     }
  ]]></mx:Script>
  
  <mx:Button id="myButton" 
        label="Click Here" 
        styleName="myStyle"
  />
  <mx:Label id="myLabel" 
        text="This is a label" 
        styleName="myStyle"
  />
  
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

StyleManager を使用したセレクタへのアクセス

StyleManager の selectors プロパティを使用して、現在 StyleManager に登録されているすべてのクラスセレクタとタイプセレクタのリストにアクセスできます。リストされるセレクタは、グローバルセレクタ、デフォルトセレクタおよびすべてのユーザー定義セレクタです。このプロパティは読み取り専用プロパティです。

StyleManager の getStyleDeclaration() メソッドへの引数としてセレクタの名前を使用できます。

次の例では、StyleManager に登録されているすべてのセレクタの名前を配列に格納しています。次に、その配列に対して反復処理を行い、セレクタ名を getStyleDeclaration() メソッドに渡してスタイルプロパティの別の配列の値を表示します。

<?xml version="1.0" encoding="utf-8"?>
<!-- styles/SelectorsTest.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">    
    <mx:Style>
        .unusedStyleTest {
            fontSize:17;
            color:green;
        }
    </mx:Style>
    
    <mx:Script>
        <![CDATA[
            import mx.styles.StyleManager;
            
            private var stylesList:Array = [
                'fontSize', 'color', 'fontWeight', 'fontFamily', 'fontStyle'
            ];
            
            public function showSelectors():void {            
                msg.text = "List all selectors, and show when they explicitly define the following:\n";
                msg.text += stylesList.toString();

                var selectors:Array = StyleManager.selectors;
                for (var i:int = 0; i < selectors.length; i++) {
                    msg.text += "\n\n" + selectors[i] + " {"      
                    for (var j:int = 0; j < stylesList.length; j++) {
                        var s:String = CSSStyleDeclaration(StyleManager.getStyleDeclaration(selectors[i])).getStyle(stylesList[j]);
                        if (s != null) {
                            msg.text += "\n    " + stylesList[j] + ":" + s + ";";
                        }
                    }
                    msg.text += "\n}";
                }
            }
        ]]>
    </mx:Script>    
    <mx:Button label="Show Selectors" click="showSelectors()"/>    
    <mx:TextArea id="msg" width="100%" height="100%"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

StyleManager を使用したスタイル宣言の作成

CSS スタイル宣言を作成するには、ActionScript で CSSStyleDeclaration クラスを使用します。これを利用すると、実行時にスタイルシートを作成して編集し、Flex アプリケーションのクラスに適用できます。実行時にスタイル定義を変更して適用するには、setStyle() メソッドを使用します。

StyleManager は、setStyleDeclaration() メソッドも備えています。このメソッドを使用すると CSSStyleDeclaration オブジェクトをセレクタとして適用できるので、あるタイプのコンポーネントすべてにスタイルシートを適用できます。このセレクタは、クラスセレクタまたはタイプセレクタとして機能します。

次の例では、新しい CSSStyleDeclaration オブジェクトを作成し、いくつかのスタイルプロパティをオブジェクトに適用します。次に、StyleManager の setStyleDeclaration() メソッドを使用してすべての Button コントロールに新しいスタイルを適用します。

<?xml version="1.0"?> 
<!-- styles/StyleDeclarationTypeSelector.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
  <mx:Script><![CDATA[ 
     import mx.styles.StyleManager;
     
     private var myDynStyle:CSSStyleDeclaration;

     private function initApp():void {
        myDynStyle = new CSSStyleDeclaration('myDynStyle');

        myDynStyle.setStyle('color', 'blue');
        myDynStyle.setStyle('fontFamily', 'georgia');
        myDynStyle.setStyle('themeColor', 'green');
        myDynStyle.setStyle('fontSize', 24);
     
        // Apply the new style to all Buttons. By using a type
        // selector, this CSSStyleDeclaration object will replace
        // all style properties, causing potentially unwanted 
        // results.
        StyleManager.setStyleDeclaration("Button",myDynStyle, true);
     }
  ]]></mx:Script>

  <mx:Button id="myButton" label="Click Me"/>

</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

タイプセレクタに新しい CSSStyleDeclaration を設定すると、既存のタイプセレクタ全体が新しいセレクタに置き換えられます。新しい CSSStyleDeclaration で明示的に値が定義されていないスタイルプロパティは、すべて null に設定されます。これによって、defaults.css ファイルまたは既に適用済みのスタイルシートで定義されているスキンやマージンなどのプロパティが削除されることがあります。

すべてのスタイルプロパティが無効にならないようにするには、クラスセレクタを使用して新しい CSSStyleDeclaration オブジェクトを適用します。既存のタイプセレクタのプロパティがクラスセレクタのスタイルプロパティに置き換えられることはないので、次の例に示すように、コンポーネントのデフォルト設定が維持されます。

<?xml version="1.0"?> 
<!-- styles/StyleDeclarationClassSelector.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
  <mx:Script><![CDATA[ 
     import mx.styles.StyleManager;
     
     private var myDynStyle:CSSStyleDeclaration;

     private function initApp():void {
        myDynStyle = new CSSStyleDeclaration('myDynStyle');

        myDynStyle.setStyle('color', 'blue');
        myDynStyle.setStyle('fontFamily', 'georgia');
        myDynStyle.setStyle('themeColor', 'green');
        myDynStyle.setStyle('fontSize', 24);
     
        // Apply the new style using a class selector. 
        // This maintains the values of the existing style 
        // properties that are not over-ridden by the new 
        // CSSStyleDeclaration.
        StyleManager.setStyleDeclaration(".myButtonStyle", 
            myDynStyle, true);
        
        // You can also apply the new style by setting the 
        // value of the  styleName property in ActionScript.
        myOtherButton.styleName=myDynStyle;
        
     }
  ]]></mx:Script>

  <mx:Button id="myButton"
        label="Click Me" 
        styleName="myButtonStyle"
  />

  <mx:Button id="myOtherButton" label="Click Me"/>

</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

CSSStyleDeclaration オブジェクトを削除するには、次の例に示すように、StyleManager の clearStyleDeclaration() メソッドを使用します。

<?xml version="1.0"?> 
<!-- styles/ClearStyleDeclarationExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
  <mx:Script><![CDATA[ 
     import mx.styles.StyleManager;
     
     private var myDynStyle:CSSStyleDeclaration;

     private function initApp():void {
        myDynStyle = new CSSStyleDeclaration('myDynStyle');

        myDynStyle.setStyle('color', 'blue');
        myDynStyle.setStyle('fontFamily', 'georgia');
        myDynStyle.setStyle('themeColor', 'green');
        myDynStyle.setStyle('fontSize', 24);
     
        StyleManager.setStyleDeclaration(".myButtonStyle", 
            myDynStyle, true);
        
     }
     
     private function resetStyles():void {
        StyleManager.clearStyleDeclaration(".myButtonStyle", 
            true);
     }
     
  ]]></mx:Script>

  <mx:Button id="myButton" 
        label="Click Me" 
        styleName="myButtonStyle" 
        click="resetStyles()"
  />

</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

clearStyleDeclaration() メソッドを使用すると、指定したセレクタのスタイルのみが削除されます。コンポーネントにクラスセレクタを適用し、そのコンポーネントのクラスセレクタに対してこのメソッドを呼び出すと、このコンポーネントのタイプセレクタのスタイルは削除されずに残ります。

setStyleDeclaration() メソッドおよび clearStyleDeclaration() メソッドは多くの計算処理を行います。update パラメータを false に設定すると、新しいスタイルを Flash Player が直ちに適用またはクリアしないようにできます。

次の例では、様々なターゲットに新しいクラスセレクタを設定しますが、最後のスタイル宣言の適用まで更新をトリガしません。

<?xml version="1.0"?> 
<!-- styles/UpdateParameter.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
  <mx:Script><![CDATA[ 
     import mx.styles.StyleManager;

     private var myButtonStyle:CSSStyleDeclaration = 
        new CSSStyleDeclaration('myButtonStyle');
     private var myLabelStyle:CSSStyleDeclaration = 
        new CSSStyleDeclaration('myLabelStyle');
     private var myTextAreaStyle:CSSStyleDeclaration = 
        new CSSStyleDeclaration('myTextAreaStyle');

     private function initApp():void {
        myButtonStyle.setStyle('color', 'blue');
        myLabelStyle.setStyle('color', 'blue');
        myTextAreaStyle.setStyle('color', 'blue');
     }

     private function applyStyles():void {
        StyleManager.setStyleDeclaration("Button", myButtonStyle, false);
        StyleManager.setStyleDeclaration("Label", myLabelStyle, false);
        StyleManager.setStyleDeclaration("TextArea", myTextAreaStyle, true);
     }
  ]]></mx:Script>

  <mx:Button id="myButton" label="Click Me" click="applyStyles()"/>
  <mx:Label id="myLabel" text="This is a label"/>
  <mx:TextArea id="myTextArea" text="This is a TextArea"/>

</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

update パラメータに false を渡した場合、Adobe® Flash® Player はセレクタを保存するだけでスタイルを適用しません。update パラメータに true を渡した場合、Flash Player はアプリケーションに含まれる各ビジュアルコンポーネントのスタイルを再計算します。