Popa Mihai

In this article I will create a custom Spark Button control that will look something like this:

You can find the working example lower on this page.

There are five steps that you must take to create a new Flex 4 Skin (for any Spark component):
Read the rest of this entry »

In this article I will create a custom Spark Panel component that will look something like this:

You can find the working example lower on this page.

There are five steps that you must take to create a new Flex 4 Skin (for any Spark component):

1. Create a new MXML component that extends the SparkSkin class
2. Define the states of the Skin. The default states for most of the components are normal and disabled
3. Define the HostComponent between Metadata tags
4. Specify all the graphical elements that are used by the custom Skin
5. Define the skin parts for the skin

Read the rest of this entry »

Customizing and changing the appearance of Flex components has changed drastically in the last version of Flex 4. In the previous version of Flex, the MX components have most of their skins built in as properties of the component. So to change the customize the appearance of the MX components you could simply use the skin properties directly on the components.

The new Flex 4 skins are separate from the content and functionality of the components. So if you want to change the appearance of a Flex 4 Spark component most of the times you will want to create a custom Skin for the class. After you create the custom Skin class you will associate the custom Skin class with a host components by using the skinClass property. In the code below I assigned the “PanelSkin” to an instance of the Spark Panel component.

<s:panel id="myPanel" skinClass="PanelSkin"></s:panel>

There are five steps that you must take to create a new Flex 4 Skin:
Read the rest of this entry »