Using the StyleManager class

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

styleManager.getStyleDeclaration(style_name).setStyle("property", value);

The styleManager property refers to the top level StyleManager object for the application.

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 <fx: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 -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="initApp(event)">

    <fx:Style>    
        .myStyle {
            color: red;
        }
    </fx:Style>   

     <s:layout>
        <s:VerticalLayout/>
     </s:layout>

    <fx:Script><![CDATA[
        /* To get a reference to the top-level StyleManager, use the Application object's
           styleManager property. */
    
        public function initApp(e:Event):void {
            /* Type selector; applies to all Buttons and subclasses of Button. */
            styleManager.getStyleDeclaration("spark.components.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");
        }
    ]]></fx:Script>

    <s:Button id="myButton" label="Click Me" styleName="myStyle"/>

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

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

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. You can access the top-level StyleManager by using the styleManager property of the Application object. 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 -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">    
    <fx:Style>
        .unusedStyleTest {
            fontSize:17;
            color:green;
        }
    </fx:Style>

     <s:layout>
        <s:VerticalLayout/>
     </s:layout>
        
    <fx:Script>
        <![CDATA[
            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}";
                }
            }
        ]]>
    </fx:Script>    
    <s:Button label="Show Selectors" click="showSelectors()"/>    
    <s:TextArea id="msg" width="100%" height="100%"/>
</s:Application>
The executing SWF file for the previous example is shown below:

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 applications. To change the definition of the styles or to apply them during run time, you use the setStyle() method.

The following example creates a new CSSStyleDeclaration object for the Spark and MX Button controls:

<?xml version="1.0"?>
<!-- styles/StyleDeclarationTypeSelector.mxml -->
<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark"
    creationComplete="initApp()">

     <s:layout>
        <s:VerticalLayout/>
     </s:layout>

  <fx:Script><![CDATA[
     private var mySparkDynStyle:CSSStyleDeclaration;
     private var myHaloDynStyle:CSSStyleDeclaration;

     private function initApp():void {
        /* These CSSStyleDeclaration objects replace
           all style properties for their types, causing potentially unwanted
           results. */
        var mySparkDynStyle:CSSStyleDeclaration  = new CSSStyleDeclaration();
        var myMXDynStyle:CSSStyleDeclaration  = new CSSStyleDeclaration();

        myMXDynStyle.setStyle('color', 'blue');
        myMXDynStyle.setStyle('fontFamily', 'georgia');
        myMXDynStyle.setStyle('fontSize', 24);

        mySparkDynStyle.setStyle('color', 'blue');
        mySparkDynStyle.setStyle('fontFamily', 'georgia');
        mySparkDynStyle.setStyle('fontSize', 24);

        styleManager.setStyleDeclaration("mx.controls.Button", myMXDynStyle, true);
        styleManager.setStyleDeclaration("spark.components.Button", mySparkDynStyle, true);
    }
  ]]></fx:Script>

  <s:Button id="mySparkButton" label="Spark Button"/>
  <mx:Button id="myHaloButton" label="MX Button"/>

</s: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, borders, padding, and other properties that are defined in the default style sheet (defaults.css in the frameworks.swc file), default theme (defaults.css in the spark.swc file) or other style sheet that you may have applied already.