Using styles -- Flex 2.01

Flex defines styles for setting some of the characteristics of components, such as fonts, padding, and alignment. These are the same styles as those defined and used with Cascading Style Sheets (CSS). Each visual component inherits many of the styles of its superclasses, and can define its own styles. Some styles in a superclass might not be used in a subclass. To determine the styles that a visual component supports, see the styles section of the page for the component in Adobe Flex 2 Language Reference.

You can set all styles in MXML as tag attributes. Therefore, you can set the padding between the border of a Box container and its contents by using the paddingTop and paddingBottom properties, as the following example shows:

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

    <mx:VBox id="myVBox1" borderStyle="solid">
        <mx:Button label="Submit"/>
    </mx:VBox>

    <mx:VBox id="myVBox2" 
        borderStyle="solid" 
        paddingTop="12" 
        paddingBottom="12" >

        <mx:Button label="Submit"/>
    </mx:VBox>
</mx:Application>

You can also configure styles in ActionScript by using the setStyle() method, or in MXML by using the <mx:Style> tag. The setStyle() method takes two arguments: the style name and the value. The following example is functionally identical to the previous example:

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

    <mx:Script>
        <![CDATA[
            private function initVBox():void {
                myVBox2.setStyle("paddingTop", 12);
                myVBox2.setStyle("paddingBottom", 12);
            }
        ]]> 
    </mx:Script>

    <mx:VBox id="myVBox1" borderStyle="solid">
        <mx:Button label="Submit"/>
    </mx:VBox>

    <mx:VBox id="myVBox2" 
        borderStyle="solid" 
        initialize="initVBox();">

        <mx:Button label="Submit"/>
    </mx:VBox>
</mx:Application>

When you use the <mx:Style> tag, you set the styles using CSS syntax or a reference to an external file that contains style declarations, as the following example shows:

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

    <mx:Style>
        .myStyle {paddingTop: 12; paddingBottom: 12;}
    </mx:Style>

    <mx:VBox id="myVBox1" borderStyle="solid">
        <mx:Button label="Submit"/>
    </mx:VBox>

    <mx:VBox id="myVBox2" 
        styleName="myStyle" 
        borderStyle="solid">

        <mx:Button label="Submit"/>
    </mx:VBox>
</mx:Application>

A class selector in a style definition, defined as a label preceded by a period, defines a new named style, such as myClass in the preceding example. After you define it, you can apply the style to any component by using the styleName property. In the preceding example, you apply the style to the second VBox container.

A type selector applies a style to all instances of a particular component type.

The following example defines the top and bottom margins for all Box containers:

<?xml version="1.0"?>
<!-- components\TypeSelStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Style>
        Box {paddingTop: 12; paddingBottom: 12;}
    </mx:Style>

    <mx:VBox id="myVBox" borderStyle="solid">
        <mx:Button label="Submit"/>
    </mx:VBox>

    <mx:Box id="myBox" borderStyle="solid">
        <mx:Button label="Submit"/>
    </mx:Box>
</mx:Application>

In Flex, some, but not all, styles are inherited from parent containers to their children and across style types and classes. Because the borderStyle style is not inherited by the VBox container, this example yields results that are identical to the previous examples. All of these examples result in the following application: