Flex 2 Developer's Guide > Customizing the User Interface > Using Skins > Graphical skinning

Graphical skinning

To use graphical skins, you embed image files in your Flex application. Then you define these files as style properties that replace the existing skins of the component.

For example, to change the appearance of a Button control, you might create three image files called orb_up_skin.gif, orb_down_skin.gif, and orb_over_skin.gif:

In your style sheet, you define the values for the upSkin, downSkin, and overSkin style properties of Button controls to point to these image files. Your Button controls reflect these new skins:

<?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>

Although you apply skins as style properties, you should think of each skin as a class. If you set the value of the upSkin property of a Button control (for example, to "myimage.jpg"), you are really changing the reference from the current skin class to this new class. Flex wraps each embedded asset as an inner class inside the current document's class.

Skins are embedded in the final SWF file of the Flex application. If you change the graphics files that comprise one or more skins, you must recompile your Flex application for the changes to take effect.

You can define skin properties in the following ways:

• Cascading Style Sheets (CSS files). For more information, see Using style sheets to apply skins.
• Inline. For more information, see Applying skins inline.
• The setStyle() method. For more information, see Using the setStyle() method.

One drawback to embedding images as skins is that they can become distorted if you resize the component that has a skin. You can use a technique called scale-9 to create skins that do not become distorted when the component is resized. For information on the scale-9 technique, see Using scale-9 formatting with embedded images.

You must embed graphical skin assets in the application's SWF file. The reason for this is that in order to determine a component's minimum and preferred sizes, skin assets must be present as soon as the component is created. If you reference external assets at run time, Flex does not have the sizing information and, therefore, cannot render the skins properly.

The following example shows how to embed external assets using the @Embed keyword inline:

<?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>

Subtopics

Flex 2.01