You apply skins by using CSS, by specifying them inline in MXML, by calling the setStyle() method, or by using the StyleManager class.

Applying graphical skins inline

When you apply a skin inline, you specify it as the value of a skin style in MXML.

To apply a graphical skin inline, you embed the skin by using the appropriate skin property of the control, as the following example shows:

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

    <mx:Button id="b1" 
        label="Click Me"
        overSkin="@Embed(source='../assets/orb_over_skin.gif')"
        upSkin="@Embed(source='../assets/orb_up_skin.gif')"
        downSkin="@Embed(source='../assets/orb_down_skin.gif')"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

The location of the skin asset is relative to the location of the MXML file that embeds it.

When embedding inline, you use @Embed (with an at [@] sign prefix) rather than Embed, which you use in CSS files.

Applying programmatic skins inline

For programmatic skins, you specify the class name for each state that you reskin and enclose the class name with curly braces { }. The skin's class definition must be in your source path when you compile the application. If the class file is in the same directory as the Flex application, then you do not need to add it to your source path.

The following example applies the SampleButtonSkin.mxml programmatic skin to the Button control's upSkin, overSkin, downSkin, and disabledSkin states:

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

    <mx:Button id="b1" 
        label="Click Me"
        overSkin="{ButtonStatesSkin}"
        upSkin="{ButtonStatesSkin}"
        downSkin="{ButtonStatesSkin}"
        disabledSkin="{ButtonStatesSkin}"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, the SampleButtonSkin.mxml file is in the same directory as the application. If the skin class is in another directory, you must import the class into the application so that the compiler can resolve the class name, as the following example shows:

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

    <mx:Script>
        import myComponents.*;
    </mx:Script>

    <mx:Button id="b1" 
        label="Click Me"
        overSkin="{myComponents.ButtonStatesSkin}"
        upSkin="{myComponents.ButtonStatesSkin}"
        downSkin="{myComponents.ButtonStatesSkin}"
        disabledSkin="{myComponents.ButtonStatesSkin}"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

When you define stateful skin, you set the skin style property of the control to the class name of your skin component, as the following example shows:

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

    <mx:Script>
        import myComponents.*;
    </mx:Script>

    <mx:Button id="b" 
        label="Hello" 
        skin="{myComponents.MyButtonStatefulSkinAll}"/>
</mx:Application> 
The executing SWF file for the previous example is shown below:

Applying skins by using CSS

When applying skins with CSS, you can use type or class selectors so that you can apply skins to one component or to all components of the same type. You can define the style sheet in the body of the <mx:Style> tag or reference an external style sheet, as the following example shows:

<?xml version="1.0"?>
<!-- skins/UseHaloSkinsStyleSheet.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style source="../assets/UseHaloSkins.css"/>

  <mx:CheckBox id="cb1" label="Click Me"/>
  <mx:RadioButton id="rb1" label="Click Me"/>

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

You can apply skins to a single instance of a component by defining a class selector. The following example applies the custom style to the second button only:

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

  <mx:Style>
        .myButtonStyle {
            overSkin: Embed("../assets/orb_over_skin.gif");
            upSkin: Embed("../assets/orb_up_skin.gif");
            downSkin: Embed("../assets/orb_down_skin.gif");
        }
    </mx:Style>

    <mx:Button id="b1" label="Click Me"/>
    <mx:Button id="b2" label="Click Me" styleName="myButtonStyle"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

You can load style sheets at run time by compiling them into a SWF file. You then use the StyleManager class's loadStyleDeclarations() method to load the CSS-based SWF file at run time, as the following example shows:

<?xml version="1.0"?>
<!-- styles/BasicApp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
        import mx.styles.StyleManager;
        
        public function applyRuntimeStyleSheet():void {
            StyleManager.loadStyleDeclarations("../assets/BasicStyles.swf")
        }
        ]]>
    </mx:Script>    
    <mx:Label text="Click the button to load a new CSS-based SWF file"/>
    <mx:Button id="b1" label="Click Me" click="applyRuntimeStyleSheet()"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

For more information, see Loading style sheets at run time.

Using CSS to apply graphical skins

You typically embed graphical skins as properties of a CSS file in the <mx:Style> tag or in an external style sheet, just as you would apply any style property, such as color or fontSize. The following example defines skins on the Button type selector. In this example, all Buttons controls get the new skin definitions.

<?xml version="1.0"?>
<!-- skins/EmbedImagesTypeSelector.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     Button {
        overSkin: Embed("../assets/orb_over_skin.gif");
        upSkin: Embed("../assets/orb_up_skin.gif");
        downSkin: Embed("../assets/orb_down_skin.gif");
     }
  </mx:Style>
  <mx:Button id="b1" label="Click Me"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

When you embed the graphical skin, you embed it into your application's SWF file. For more information on embedding assets, see Embedding Assets.

Using CSS to apply programmatic skins

You apply programmatic skins in a CSS file by using the ClassReference directive. This directive takes a class name as the argument, where the class name corresponds to the ActionScript or MXML file containing your skin definition. The skin's class must be in your source path when you compile the application.

When using programmatic skins, you assign the component name to the associated skin property. In the following example, the skin is in the file myComponents/MyButtonSkin.as where myComponents is a subdirectory of the directory containing your application:

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

    <mx:Style>
        Button {
            upSkin: ClassReference("myComponents.MyButtonSkin");
        } 
    </mx:Style>  

    <mx:Button label="Hello" id="b" />
</mx:Application> 
The executing SWF file for the previous example is shown below:

When you define stateful skin, you set the skin style property of the control to the class name of your skin component, as the following example shows:

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

    <mx:Style>
        Button {
            skin: ClassReference("myComponents.MyButtonStatefulSkinAll");
        } 
    </mx:Style>  

    <mx:Button label="Hello" id="b" />
</mx:Application> 
The executing SWF file for the previous example is shown below:

Applying skins by using the setStyle() method

Skins are defined as style properties, therefore, you can access them with the setStyle() and getStyle() methods. This lets you change skins during run time, or dynamically define them, as long as you embed the graphical asset at compile time.

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

Using the setStyle() method to apply graphical skins

To embed an image so that you can use it with the setStyle() method, you use the [Embed] metadata tag and assign a reference to a variable. You can then use the setStyle() method to apply that image as a skin to a component.

The following example embeds three images and applies those images as skins to an instance of a Button control:

<?xml version="1.0"?>
<!-- skins/EmbedWithSetStyle.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    initialize="init();">

    <mx:Script>
        <![CDATA[
            [Embed("../assets/orb_over_skin.gif")]
            public var os:Class;
    
            [Embed("../assets/orb_down_skin.gif")]
            public var ds:Class;
    
            [Embed("../assets/orb_up_skin.gif")]
            public var us:Class;
    
            private function init():void {
                b1.setStyle("upSkin", us);
                b1.setStyle("overSkin", os);
                b1.setStyle("downSkin", ds);
            }
        ]]>
    </mx:Script>
  
    <mx:Button label="Click Me" id="b1"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

Using the setStyle() method to apply programmatic skins

For programmatic skins, you apply a skin to a control by using the setStyle() method. The skin component must be in your source path when you compile the application. The following example applies the ButtonStatesSkin.as component to a Button by using the setStyle() method:

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

    <mx:Script>
        <![CDATA[
            public function changeSkins():void {
                if (cb1.selected) {
                    b1.setStyle("upSkin", ButtonStatesSkin);
                    b1.setStyle("downSkin", ButtonStatesSkin);
                    b1.setStyle("overSkin", ButtonStatesSkin);
                    b1.setStyle("disabledSkin", ButtonStatesSkin);
                } else {
                    b1.setStyle("upSkin", null);
                    b1.setStyle("downSkin", null);
                    b1.setStyle("overSkin", null);
                    b1.setStyle("disabledSkin", null);
                }               
            }
            
        ]]>
    </mx:Script>

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

    <mx:CheckBox id="cb1" label="Apply custom skin class" click="changeSkins();"/>
  
</mx:Application>
The executing SWF file for the previous example is shown below:

The reference to the ButtonStatesSkin class in the setStyle() method causes the compiler to link in the entire ButtonStatesSkin class at compile time. The resulting SWF file will be larger than if there were no reference to this class, even if the changeSkins() method is never called.

In the previous example, the SampleButtonSkin.mxml file is in the same directory as the application. If the skin class is in another directory, you must import the class into the application so that the compiler can resolve the class name, as the following example shows:

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

    <mx:Script>
        <![CDATA[        
            import myComponents.*;
            
            public function changeSkins():void {
                if (cb1.selected) {
                    b1.setStyle("upSkin", myComponents.ButtonStatesSkin);
                    b1.setStyle("downSkin", myComponents.ButtonStatesSkin);
                    b1.setStyle("overSkin", myComponents.ButtonStatesSkin);
                    b1.setStyle("disabledSkin", myComponents.ButtonStatesSkin);
                } else {
                    b1.setStyle("upSkin", null);
                    b1.setStyle("downSkin", null);
                    b1.setStyle("overSkin", null);
                    b1.setStyle("disabledSkin", null);
                }               
            }
        ]]>
    </mx:Script>

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

    <mx:CheckBox id="cb1" label="Apply custom skin class" click="changeSkins();"/>
  
</mx:Application>
The executing SWF file for the previous example is shown below:

When you define stateful skin, you use the setStyle() method to set the skin style property of the control to the class name of your skin component. For more information on applying stateful skins, see Creating stateful skins.

Applying skins by using the Style Manager

To apply skins to all instances of a control, you can use the StyleManager class, as the following example shows:

<?xml version="1.0"?>
<!-- skins/EmbedWithStyleManager.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()">

    <mx:Script>
        <![CDATA[
            import mx.styles.StyleManager;

            [Embed("../assets/orb_over_skin.gif")]
            public var os:Class;

            [Embed("../assets/orb_down_skin.gif")]
            public var ds:Class;

            [Embed("../assets/orb_up_skin.gif")]
            public var us:Class;

            private function init():void {
    StyleManager.getStyleDeclaration("Button").setStyle("upSkin", us);
    StyleManager.getStyleDeclaration("Button").setStyle("overSkin", os);
    StyleManager.getStyleDeclaration("Button").setStyle("downSkin", ds);
            }
        ]]>
    </mx:Script>
  
    <mx:Button label="Click Me" id="b1"/>
  
</mx:Application>
The executing SWF file for the previous example is shown below:

For more information on using the StyleManager class, see Using the StyleManager class.