Flex 4 – Skinning Intro – Part 1

Application – Source

I’m writing this post in regards to skinning in Flex 4 for people who are just starting Flex 4. Skinning is a very important part of Flex 4 and it will come up in pretty much every project that you make.

Step 1: Creating an Application Background Skin

First, you need to create the component. I like to put all of my skins in the same folder, so I created a skins folder. Right click on your folder and select New – MXML Skin. Name your skin, and make sure to specify the host component. In our case it will be “spark.components.Application”. Hit Finish, and this will give you the bare bones of your skin and include the states based on your host component. Since our host component is an Application, the only states we are given are disabled and normal. If we had specified our host component to Button, for example, we would be given the disabled, down, over, and up states.

Next we will be creating the first layer of our skin. It is important to remember that skins are based on layers and each layer you create will cover the one before it (the layer at the bottom of your code is the top layer). We will be using to cover the entire background which is a rectangle. Inside of this, we will use to fill the rectangle. Inside of the fill, we specify how we would like to fill the rectangle. In our example we are using a radial (circular) gradient, but we also could have used a linear gradient, solid color, etc. Inside of we specify the which are the two colors that are blended together. The first gradient entry is the color inside the radial, and the second gradient entry is outside.

Now that we have the Application Background Skin, we have to refer to it inside of our application declaration. You do this by using “skinClass” and referring to the skin file. Ex: skinClass=”com.skins.ApplicationBackgroundSkin”. Now you have a skin for the background of your application.

Application – Source

2 comments on this post.
  1. Flexible Printed Circuit Board – Flex PCB | PCB Electronics Designing:

    […] Flex 4 – Skinning Intro – Part 1 | Axelology […]

  2. Flex 4 – Implementing Bezier Curve – Part 2 | Axelology:

    […] Bezier Curve – Part 2 Posted in August 2nd, 2010 by admin in Flex Here is a link to Step 1: Flex 4 – Skinning Intro – Part 1 if you missed […]

Leave a comment