Programmatic skinning -- Flex 2.01

This section describes how to write programmatic skins as ActionScript classes, how to use the basic drawing methods of the Flash Graphics (flash.display.Graphics) package, and how to apply those skins to your Flex controls.

You can modify programmatic skins that come with Flex or create your own. For information on modifying existing skins, see Resources for skins. For information on using the programmatic skin recipe, see Programmatic skins recipe.

The simplest way to reskin a Flex component is to use an existing skin and apply that skin with CSS. You can use all the skins in the mx.skins.halo package and apply those classes to other controls. For example, you make your CheckBox appear like a RadioButton, you can apply the mx.skins.halo.RadioButton skin to the various states of the CheckBox control, as the following example shows:

<?xml version="1.0"?>
<!-- skins/UseHaloSkins.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     RadioButton {
        /* 
           Defaults. Shown here for illustrative purposes. 
        */
        disabledIcon: ClassReference("mx.skins.halo.RadioButtonIcon");
        downIcon: ClassReference("mx.skins.halo.RadioButtonIcon");
        overIcon: ClassReference("mx.skins.halo.RadioButtonIcon");
        selectedDisabledIcon: ClassReference("mx.skins.halo.RadioButtonIcon");
        selectedDownIcon: ClassReference("mx.skins.halo.RadioButtonIcon");
        selectedOverIcon: ClassReference("mx.skins.halo.RadioButtonIcon");
        selectedUpIcon: ClassReference("mx.skins.halo.RadioButtonIcon");
        upIcon: ClassReference("mx.skins.halo.RadioButtonIcon");
     }
     
     CheckBox {
        /* 
           Applies the RadioButtonIcon skin to the CheckBox component's states.
        */
        disabledIcon: ClassReference("mx.skins.halo.RadioButtonIcon");
        downIcon: ClassReference("mx.skins.halo.RadioButtonIcon");
        overIcon: ClassReference("mx.skins.halo.RadioButtonIcon");
        selectedDownIcon: ClassReference("mx.skins.halo.RadioButtonIcon");
        selectedDisabledIcon: ClassReference("mx.skins.halo.RadioButtonIcon");
        selectedOverIcon: ClassReference("mx.skins.halo.RadioButtonIcon");
        selectedUpIcon: ClassReference("mx.skins.halo.RadioButtonIcon");
        upIcon: ClassReference("mx.skins.halo.RadioButtonIcon");
     }
  </mx:Style>

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

</mx:Application>

To see all the states that a component uses a programmatic skin for, you can look at the component's entry in the defaults.css file.

When applying an existing programmatic skin to a component that does not by default use that skin class, you must be sure that the component supports the same states (such as downIcon and upIcon) as the skin's intended owner. Otherwise, you must create a custom programmatic skin class. For information on creating a custom programmatic skin, see Programmatic skins recipe.

After compiling a programmatic skin, you can apply the skin to components in your Flex applications. You can apply skins with CSS, use inline syntax, or use the setStyle() method. For more information, see Applying programmatic skins.

The programmatic skins used by Flex components are in the mx.skins.halo package. All of these skins extend one of the abstract base classes (ProgrammaticSkin, Border, or RectangularBorder). To change the look and feel of the Button control, for example, you can extend the abstract ProgrammaticSkin class and add logic for a Button control.

Using the techniques in this section, you can extend any skin in the default Halo theme, as well as the base skin classes.

Programmatic skinning

Subtopics