Using the StyleManager

The mx.styles.StyleManager class lets you access global style sheets, 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.

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

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

The style_name can be the global style sheet (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. In addition, it can be any object of type CSSStyleDeclaration.

You can also set the value of a style property directly using the following syntax:

mx.styles.StyleManager.styles.style_name.property = "value";

The former method is preferable because calling the setStyle() method forces the Macromedia Flash Player to redraw the screen, while setting a style property directly does not always do so.

The StyleManager can also apply styles to all controls using the global style name. Global styles apply to every object that does not explicitly override them. This is useful is you want to apply a noninheritable style such as textDecoration to many classes at one time.

The following examples illustrate applying the fontWeight property to the ToolTip, myStyle, and global style names:

// Type selector; applies to all ToolTips.
mx.styles.StyleManager.styles.ToolTip.fontWeight = "bold"; 

// Class selector; applies to all controls using the style named myStyle.
mx.styles.StyleManager.styles.myStyle.fontWeight = "bold";

// Global style: applies to all controls.
mx.styles.StyleManager.styles.global.fontWeight = "bold";

Note: If you set either inheritable and noninheritable styles to the global style, Flex applies it to all controls, regardless of their location in the hierarchy.

You can access the values of these properties using the getStyle() method or using a reference to the property, as the following examples show:

var s1 = mx.styles.StyleManager.styles.global.getStyle("fontWeight");
var s2 = mx.styles.StyleManager.styles.global.fontWeight;

The getStyle() method requires more computation, so you should use it only when necessary.

The following example defines the fontFamily and fontWeight style properties for all components using the global style sheet. In addition, it sets the borderStyle of all TextInput controls to solid.

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" width="500" height="400" initialize="initializeStyles()">
   <mx:Script><![CDATA[
      import mx.styles.StyleManager;
      function initializeStyles():Void    {
    // Initialize the global settings.
    StyleManager.styles.global.fontFamily = "Arial";
    StyleManager.styles.global.fontWeight = "bold";
      
    // Initialize all TextInput controls to have solid borders.
    StyleManager.styles.TextInput.borderStyle = "solid";
      }
   ]]></mx:Script>
   <mx:Button id="btn2" label="Click Me" /> 
   <mx:TextArea width="425" height="250" text="this is a text area" /> 
</mx:Application>

Version 1.5

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/15/flex_docs_en/00000560.htm

Add Comment