Learning Flex – Lesson 16, part II Skinning Components

Each component has several “skins” to describe the look of that component in different situations. As an example, a Button has upSkin for it’s default appearance, overSkin for how it appears with the mouse pointer over it, downSkin for when it’s pressed and disabledSkin for when it’s disabled (it also has a corresponding set of 4 for when it’s selected). The available skins for a component are enumerated in the Adobe documentation.

There are three types of skins:

  • Graphical Skins – these are image files that define the appearance of the skin (jpeg, gif or png)
  • Programmable Skins – ActionScript or MXML classes that define a skin using the Flash Drawing API. A single class can define multiple skins.
  • Stateful Skins – programmatic skins that use view states where each state corresponds to a skin of the component.

Graphical Skins

These can be applied inline:

<mx:Button upSkin="@Embed('../assets/buttonUp.gif')"/>

within a Style tag:

overSkin: Embed ("../assets/buttonOver.gif");

and within ActionScript:

public var buttonDwnSkin:Class;

myButton.setStyle("downSkin" , buttonDwnSkin);

Programmatic Skins

You can create programmatic skins either in MXML or ActionScript and define a class per skin or a single class for multiple skins. Using the Flash Player drawing API allows you more flexibility in your design.

The first step is to choose the base class you want to extend for you skin. The main choices are:

  • ProgrammaticSkin – this implements the IFlexDisplayObject, ILayoutClient & IStyleable interfaces. It’s the the most lightweight super class for a skin.
  • Border – this extends ProgrammaticSkin and adds support for the borderMetrics property. This would be used to implement a skin with a border that does not require a background image.
  • RectangularBorder – this extends Border and adds support for the backgroundImage style.

The majority of the work for the class is in overriding the updateDisplayList() method. If you choose one of the border classes, you will also need to override the getter method for the borderMetrics property to return your values.

The name property will provide the current skin name to be rendered. Use graphics.clear() to remove any prior elements, a fill method (beginFill(), beginGradientFill() or beginShaderFill() ) to specify the fill that subsequent graphics calls will use, one or more of the draw methods followed by endFill() to see the graphics displayed.

To use a programmatic skin, you need to provide the created class name. To apply it inline:

<mx:Button overSkin="{MyComponents.MyButtonSkin}"/>

within a Style tag:


and within ActionScript:


Stateful Skins

Flex components such as Button, Slider etc can use stateful skins. They have a style property that is defined for several skin states (for Button it’s skin, for Slider, thumbSkin). By defining a custom skin class based on UIComponent, you can define view states corresponding to some or all of the possible skins and specify graphics for them. This gives you the ability to use transitions to animate the state changes.

You use a stateful skin in the same way as a programmatic skin –  by assigning the class name to the relevant style property (skin for Button etc).

You can make your own custom style properties by making a call to getStyle() within updateDisplayList() and supplying the name of your style.  You should wrap this call with isValidStyleValue() to check if the property exists before you try to use it and declare a default value in the class constructor.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: