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):
- Create a new
MXMLcomponent that extends the SparkSkin class - Define the states of the Skin. The default states for most of the components are
normalanddisabled - Define the
HostComponentbetweenMetadatatags - Specify all the graphical elements that are used by the custom Skin
- Define the skin parts for the skin