The StyleManager class lets you access class selectors and type selectors in ActionScript. It also lets you apply inheritable and noninheritable properties globally. Using the StyleManager, you can define new CSS style declarations and apply them to controls in your Flex applications.

Setting styles with the StyleManager

To set a value using the StyleManager, use the following syntax:

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

The style_name can be the literal global, a type selector such as Button or TextArea, or a class selector that you define in either the <mx:Style> tag or an external style sheet. Global styles apply to every object that does not explicitly override them.

The getStyleDeclaration() method is useful if you apply a noninheritable style to many classes at one time. This property refers to an object of type CSSStyleDeclaration. Type selectors and external style sheets are assumed to already be of type CSSStyleDeclaration. Flex internally converts class selectors that you define to this type of object.

The following examples illustrate applying style properties to the Button, myStyle, and global style names:

<?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 Me" styleName="myStyle"/>

    <mx:Label id="myLabel" text="This is a label." styleName="myStyle"/>

</mx:Application>
The executing SWF file for the previous example is shown below:

Accessing selectors with the StyleManager

You can access a list of all the class and type selectors that are currently registered with the StyleManager by using the StyleManager's selectors property. The selectors listed include the global selector, default selectors, and all user-defined selectors. This property is a read-only property.

You can use the name of a selector as the argument to the StyleManager's getStyleDeclaration() method.

The following example stores the names of all the selectors that are registered with the StyleManager in an Array. It then iterates over that Array and displays values for another Array of style properties by passing the selector name to the getStyleDeclaration() method.

<?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>
The executing SWF file for the previous example is shown below:

Creating style declarations with the StyleManager

You can create CSS style declarations by using ActionScript with the CSSStyleDeclaration class. This lets you create and edit style sheets at run time and apply them to classes in your Flex applications. To change the definition of the styles or to apply them during run time, you use the setStyle() method.

The StyleManager also includes a setStyleDeclaration() method that lets you apply a CSSStyleDeclaration object as a selector, so you can apply a style sheet to all components of a type. The selector can be a class or type selector.

The following example creates a new CSSStyleDeclaration object, applies several style properties to the object, and then applies the new style to all Button controls with the StyleManager's setStyleDeclaration() method:

<?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>
The executing SWF file for the previous example is shown below:

When you set a new CSSStyleDeclaration on a type selector, you are replacing the entire existing type selector with your own selector. All style properties that you do not explicitly define in the new CSSStyleDeclaration are set to null. This can remove skins, margins, and other properties that are defined in the defaults.css file or other style sheet that you may have applied already.

To avoid nullifying all style properties, you can use a class selector to apply the new CSSStyleDeclaration object. Because a class selector's style properties do not replace existing type selector properties, the components maintain their default settings, as the following example shows:

<?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>
The executing SWF file for the previous example is shown below:

To remove a CSSStyleDeclaration object, use the StyleManager's clearStyleDeclaration() method, as the following example shows:

<?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>
The executing SWF file for the previous example is shown below:

Using the clearStyleDeclaration() method removes only the specified selector's styles. If you apply a class selector to a component, and then call the method on that component's class selector, the component's type selector styles remain.

The setStyleDeclaration() and clearStyleDeclaration() methods are computationally expensive. You can prevent Flash Player from applying or clearing the new styles immediately by setting the update parameter to false.

The following example sets new class selectors on different targets, but does not trigger the update until the last style declaration is applied:

<?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 control."/>

</mx:Application>
The executing SWF file for the previous example is shown below:

When you pass false for the update parameter, Adobe® Flash® Player stores the selector but does not apply the style. When you pass true for the update parameter, Flash Player recomputes the styles for every visual component in the application.