You modify the appearance of Flex components through style properties. These properties can define the size of a font used in a Label control, or the background color used in the Tree control. In Flex, some styles are inherited by children from their parent containers, and across style types and classes. This means that you can define a style once, and then have that style apply to all controls of a single type or to a set of controls. In addition, you can override individual properties for each control at a local, component, or global level, giving you great flexibility in controlling the appearance of your applications.

This section introduces you to applying styles to controls. It also provides a primer for using Cascading Style Sheets (CSS), an overview of the style value formats (Length, Color, and Time), and describes style inheritance. Subsequent sections provide detailed information about different ways of applying styles in Flex.

Flex does not support controlling all aspects of component layout with CSS. Properties such as x, y, width, and height are properties, not styles, of the UIComponent class, and therefore cannot be set in CSS. Other properties, such as left, right, top, and bottom, are style properties and are used to manipulate a component's location in a container.

Using styles in Flex

There are many ways to apply styles in Flex. Some provide more granular control and can be approached programmatically. Others are not as flexible, but can require less computation.

To determine if an object's properties can be styled by using CSS, check to see if the class or its parent implements the IStyleClient interface. If it does, you can set the values of the object's style properties with CSS. If it does not, the class does not participate in the styles subsystem and you therefore cannot set its properties with CSS. In that case, the properties are public properties of the class and not style properties.

When applying styles, you must be aware of which properties your theme supports. The default theme in Flex does not support all style properties. For more information, see About supported styles.

External style sheets

Use CSS to apply styles to a document or across entire applications. You can point to a style sheet without invoking ActionScript. This is the most concise method of applying styles, but can also be the least flexible. Style sheets can define global styles that are inherited by all controls, or individual classes of styles that only certain controls use.

The following example applies the external style sheet myStyle.css to the current document:

<mx:Style source="myStyle.css"/>

For more information, see Using external style sheets.

Flex includes a global style sheet, defaults.css, inside the framework.swc file. This file contains style definitions for the global class selector, and type selectors for most Flex components. For more information about defaults.css, see About the default style sheet.

Flex also includes several other style sheets that each have a unique look and feel. For more information, see About the included theme files.

Local style definitions

Use the <mx:Style> tag to define styles that apply to the current document and its children. You define styles in the <mx:Style> tag using CSS syntax and can define styles that apply to all instances of a control or to individual controls. The following example defines a new style and applies it to only the myButton control:

<?xml version="1.0"?>
<!-- styles/ClassSelector.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Style>
        .myFontStyle { 
            fontSize: 15;
            color: #9933FF;
        }
    </mx:Style>

    <!-- This button has the custom style applied to it. -->
    <mx:Button id="myButton" styleName="myFontStyle" label="Click Me"/>

    <!-- This button uses default styles. -->
    <mx:Button id="myButton2" label="Click Me"/>

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

The following example defines a new style that applies to all instances of the Button class:

<?xml version="1.0"?>
<!-- styles/TypeSelector.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Style>
        Button { 
            fontSize: 15;
            color: #9933FF;
        }
    </mx:Style>

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

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

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

For more information, see Using local style definitions.

StyleManager class

Use the StyleManager class to apply styles to all classes or all instances of specified classes. The following example sets the fontSize style to 15 and the color to 0x9933FF on all Button controls:

<?xml version="1.0"?>
<!-- styles/StyleManagerExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">

    <mx:Script><![CDATA[
        public function initApp():void {
            StyleManager.getStyleDeclaration("Button").setStyle("fontSize",15);
            StyleManager.getStyleDeclaration("Button").setStyle("color",0x9933FF);
        }
    ]]></mx:Script>

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

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

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

You can also use the CSSStyleDeclaration object to build run-time style sheets, and then apply them with the StyleManager's setStyleDeclaration() method.

For more information, see Using the StyleManager class.

getStyle() and setStyle() methods

Use the setStyle() and getStyle() methods to manipulate style properties on instances of controls. Using these methods to apply styles requires a greater amount of processing power on the client than using style sheets but provides more granular control over how styles are applied.

The following example sets the fontSize to 15 and the color to 0x9933FF on only the myButton instance:

<?xml version="1.0"?>
<!-- styles/SetStyleExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">

    <mx:Script><![CDATA[
        public function initApp():void {
            myButton.setStyle("fontSize",15);
            myButton.setStyle("color",0x9933FF);
        }
    ]]></mx:Script>

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

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

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

For more information, see Using the setStyle() and getStyle() methods.

Inline styles

Use attributes of MXML tags to apply style properties. These properties apply only to the instance of the control. This is the most efficient method of applying instance properties because no ActionScript code blocks or method calls are required.

The following example sets the fontSize to 15 and the color to 0x9933FF on the myButton instance:

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

    <!-- This button uses custom inline styles. -->
    <mx:Button id="myButton" color="0x9933FF" fontSize="15" label="Click Me"/>

    <!-- This button uses default styles. -->
    <mx:Button id="myOtherButton" label="Click Me"/>

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

In an MXML tag, you must use the camel-case version of the style property. For example, you must use "fontSize" rather than "font-size" (the CSS convention) in the previous example. For more information on style property names, see About property and selector names.

As with other style properties, you can bind inline style properties to variables.

For more information, see Using inline styles.

Setting global styles

Most text and color styles, such as fontSize and color, are inheritable. When you apply an inheritable style to a container, all the children of that container inherit the value of that style property. If you set the color of a Panel container to green, all buttons in the Panel container are also green, unless those buttons override that color.

Many styles, however, are not inheritable. If you apply them to a parent container, only the container uses that style. Children of that container do not use the values of noninheritable styles.

By using global styles, you can apply noninheritable styles to all controls that do not explicitly override that style. Flex provides the following ways to apply styles globally:

• StyleManager global style
• CSS global selector

The StyleManager lets you apply styles to all controls using the global style. For more information, see Using the StyleManager class.

You can also apply global styles using the global selector in your CSS style definitions. These are located either in external CSS style sheets or in an <mx:Style> tag. For more information, see Using the global selector.

About style value formats

Style properties can be of types String or Number. They can also be Arrays of these types. In addition to a type, style properties also have a format (Length, Time, or Color) that describes the valid values of the property. Some properties appear to be of type Boolean (taking a value of true or false), but these are Strings that are interpreted as Boolean values. This section describes these formats.

Length format

The Length format applies to any style property that takes a size value, such as the size of a font (or fontSize). Length is of type Number.

The Length type has the following syntax:

length[length_unit]

The following example defines the fontSize property with a value of 20 pixels:

<?xml version="1.0"?>
<!-- styles/LengthFormat.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     .myFontStyle { 
        fontSize: 20px;
        color: #9933FF;
     }
  </mx:Style>
  <mx:Button id="myButton" styleName="myFontStyle" label="Click Here"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

If you do not specify a unit, the unit is assumed to be pixels. The following example defines two styles with the same font size:

<?xml version="1.0"?>
<!-- styles/LengthFormat2.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     .myFontStyle { 
        fontSize: 20px;
        color: #9933FF;
     }
     .myOtherFontStyle { 
        fontSize: 20;
        color: #9933FF;
     }
  </mx:Style>
  <mx:Button id="myButton" styleName="myFontStyle" label="Click Here"/>
  <mx:Button id="myButton2" styleName="myOtherFontStyle" label="Click Here"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

The following table describes the supported length units:

Flex does not support the em and ex units. You can convert these to px units by using the following scales:

1em = 10.06667px

1ex = 6px

In Flex, all lengths are converted to pixels prior to being displayed. In this conversion, Flex assumes that an inch equals 72 pixels. All other lengths are based on that assumption. For example, 1 cm is equal to 1/2.54 of an inch. To get the number of pixels in 1 cm, multiply 1 by 72, and divide by 2.54.

When you use inline styles, Flex ignores units and uses pixels as the default.

The fontSize style property allows a set of keywords in addition to numbered units. You can use the following keywords when setting the fontSize style property. The exact sizes are defined by the client browser:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

The following example class selector defines the fontSize as x-small:

<?xml version="1.0"?>
<!-- styles/SmallFont.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>    
     .smallFont {
        fontFamily: Arial, Helvetica, "_sans";
        fontSize: x-small;
        fontStyle: oblique;
     }
  </mx:Style>

  <mx:Button id="myButton" styleName="smallFont" label="Click Here"/>

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

Time format

You use the Time format for component properties that move or have built-in effects, such as the ComboBox component when it drops down and pops up. The Time format is of type Number and is represented in milliseconds. Do not specify the units when entering a value in the Time format.

The following example sets the openDuration style property of the myTree control to 1000 milliseconds. The default value is 250, so this example opens the tree nodes considerably more slowly than normal.

<?xml version="1.0"?>
<!-- styles/TimeFormat.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">

    <mx:Script><![CDATA[
    public function initApp():void {
    myTree.setStyle("openDuration", 1000);
    }
    ]]></mx:Script>

    <mx:XMLList id="treeData">
        <node label="Mail Box">
            <node label="Inbox">
                <node label="Marketing"/>
                <node label="Product Management"/>
                <node label="Personal"/>
            </node>
            <node label="Outbox">
                <node label="Professional"/>
                <node label="Personal"/>
            </node>
            <node label="Spam"/>
            <node label="Sent"/>
        </node>    
    </mx:XMLList>

    <mx:Panel title="Tree Control Example" width="100%">

        <mx:Tree id="myTree" width="100%" labelField="@label" dataProvider="{treeData}"/>

    </mx:Panel>

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

Color format

You define Color in several formats. You can use most of the formats only in the CSS style definitions. The following table describes the recognized Color formats for a style property:

Color formats are of type Number. When you specify a format such as a VGA color name, Flex converts that String to a Number.

CSS style definitions and the <mx:Style> tag support the following color value formats:

<?xml version="1.0"?>
<!-- styles/ColorFormatCSS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     .myStyle { 
        themeColor: #6666CC;    /* CSS hexadecimal format */
        color: Blue;        /* VGA color name */
     }
  </mx:Style>
  <mx:Button id="myButton" styleName="myStyle" label="Click Here"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

You can use the following color value formats when setting the styles inline or using the setStyle() method:

<?xml version="1.0"?>
<!-- styles/ColorFormatStyleManager.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
  <mx:Script><![CDATA[
     public function initApp():void {
        StyleManager.getStyleDeclaration("Button").
            setStyle("themeColor",0x6666CC);
        StyleManager.getStyleDeclaration("Button").
            setStyle("color","Blue");
     }

     public function changeStyles(e:Event):void {
        // Check against "255" here, because that is the numeric value of "Blue".
        if (e.currentTarget.getStyle("color") == 255) {
            e.currentTarget.setStyle("themeColor", 0xFF0099);
            e.currentTarget.setStyle("color", "Red");
        } else {
            e.currentTarget.setStyle("themeColor", 0x6666CC);
            e.currentTarget.setStyle("color", "Blue");
        }
     }
  ]]></mx:Script>
  <mx:Button id="myButton" 
        label="Click Here" 
        click="changeStyles(event)"
  />
</mx:Application>
The executing SWF file for the previous example is shown below:

Using Arrays for style properties

Some controls accept arrays of colors. For example, the Tree control's depthColors style property can use a different background color for each level in the tree. To assign colors to a property in an Array, add the items in a comma-separated list to the property's definition. The index is assigned to each entry in the order that it appears in the list.

The following example defines Arrays of colors for properties of the Tree type selector:

<?xml version="1.0"?>
<!-- styles/ArraysOfColors.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     Tree {
        depthColors: #FFCC33, #FFCC99, #CC9900;
        alternatingItemColors: red, green;
     }
  </mx:Style>
  
  <mx:XMLList id="treeData">
     <node label="Mail Box">
        <node label="Inbox">
           <node label="Marketing"/>
           <node label="Product Management"/>
           <node label="Personal"/>
        </node>
        <node label="Outbox">
           <node label="Professional"/>
           <node label="Personal"/>
        </node>
        <node label="Spam"/>
        <node label="Sent"/>
     </node>    
  </mx:XMLList>

  <mx:Panel title="Tree Control Example" width="100%">
        <mx:Tree id="myTree" width="100%" labelField="@label" dataProvider="{treeData}"/>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, only depthColors will be seen. The alternatingItemColors property is visible only if depthColors is not set. Both are presented here for illustrative purposes only.

You can define the Array in ActionScript by using a comma-separated list of values surrounded by braces, as the following example shows:

<?xml version="1.0"?>
<!-- styles/SetStyleArray.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
  <mx:Script><![CDATA[
     public function initApp():void {
        myTree.setStyle("depthColors",[0xFFCC33, 0xFFCC99, 0xCC9900]);
        myTree.setStyle("alternatingItemColors",["red", "green"]);
     }
  ]]></mx:Script>
  <mx:XMLList id="treeData">
     <node label="Mail Box">
        <node label="Inbox">
           <node label="Marketing"/>
           <node label="Product Management"/>
           <node label="Personal"/>
        </node>
        <node label="Outbox">
           <node label="Professional"/>
           <node label="Personal"/>
        </node>
        <node label="Spam"/>
        <node label="Sent"/>
     </node>    
  </mx:XMLList>

  <mx:Panel title="Tree Control Example" width="100%">
        <mx:Tree id="myTree" 
           width="100%" 
           labelField="@label" 
           dataProvider="{treeData}"
        />

        <mx:Tree id="myOtherTree" 
           width="100%" 
           labelField="@label" 
           dataProvider="{treeData}" 
           depthColors="[0xFFCC33, 0xFFCC99, 0xCC9900]" 
           alternatingItemColors="['red', 'green']"
        />
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

This example also shows that you can set the properties that use Arrays inline.

Finally, you can set the values of the Array in MXML syntax and apply those values inline, as the following example shows:

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

  <mx:Array id="myDepthColors">
     <mx:Object>0xFFCC33</mx:Object>
     <mx:Object>0xFFCC99</mx:Object>
     <mx:Object>0xCC9900</mx:Object>
  </mx:Array>
  
  <mx:Array id="myAlternatingRowColors">
     <mx:Object>red</mx:Object>
     <mx:Object>green</mx:Object>
  </mx:Array>

  <mx:XMLList id="treeData">
     <node label="Mail Box">
        <node label="Inbox">
           <node label="Marketing"/>
           <node label="Product Management"/>
           <node label="Personal"/>
        </node>
        <node label="Outbox">
           <node label="Professional"/>
           <node label="Personal"/>
        </node>
        <node label="Spam"/>
        <node label="Sent"/>
     </node>    
  </mx:XMLList>

  <mx:Panel title="Tree Control Example" width="100%">
        <mx:Tree id="myTree" 
           width="100%" 
           labelField="@label" 
           dataProvider="{treeData}"
           depthColors="{myDepthColors}" 
           alternatingItemColors="{myAlternatingRowColors}"
        />
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below: