Home » The Alagad Technical Team Blog » Flex - Simple Skinning Example »

The Alagad Technical Team Blog

Flex - Simple Skinning Example

As I am sure most who have even just dabbled in Flex know, you can style your applications using CSS. The problem with styling is that, at the end of the day, your application still looks like a Flex application (not there is anything wrong with that).  The real power behind making Flex apps look different comes from skinning.

Now, if you are like me, the word 'skinning' will scare the ba-jeezers out of you.  It scares me because it …welll … because, its not someting I am used to and sounds like it requires some design sills, of which I have none.  However, in Flex, skinning your apps is easy, really easy.  You can skin you apps using PhotoShop, Fireworks, Flash or any other program that created images or vector graphics.  I am going to show you how you can use PNG files to skin a button in Flex.

First, create a new Flex project, call it whatever you like, but under your source directory, add the following directories 'assets/css' and 'assets/images' 

Now we need the images we will use (I actually created these myself. I know, it shows). You can save the images below to {project name}/assets/images, or just grab the .zip file here.

These images will represent 4 states of a button, 'up' or what I like to call 'normal', 'over', when a user mouses over the button, 'down' when a user clicks a button and 'disabled', well for when a button is disabled. 

Now that we have our images, create a new file names skins.css in {project name}/assets/css.  We are going to add some styles that will tell Flex what should be used for the skin for a button.

Button
{
  upSkin: Embed(source="../images/button_up.png");
   overSkin: Embed(source="../images/button_over.png");
   downSkin: Embed(source="../images/button_down.png");
   disabledSkin: Embed(source="../images/button_disabled.png");
}

For Flex to use this style sheet, we need to open up the main file and add

<mx:Style source="assets/css/skin.css" /> 

This will tell Flex to use the images we specified as the 'skin' for every button in our app.  This style, as written, can cause issues, though. If the button is wider or taller than our image then we will have scaling issue.  To avoid this, we use 'scale nine'.  Using scale nine breaks our image into 9 different sections and tells Flex which sections are scaled horizontally andwhich are scaled vertically.

 

In the image above you can see how the button is disected.  The 4 corners will not scale at all.  The center sections on the top and bottom will scale horizontally, the middle sections on the left and rigt sides will scale vertically.  The center section will scale vertiaclly and horizontally.  Fortunately, we can easily specify the scale nine information in our style sheet.

  Button
{
  upSkin: Embed(source="../images/button_up.png", scaleGridTop="6", scaleGridLeft="5", scaleGridRight="58",  scaleGridBottom="16");
   overSkin: Embed(source="../images/button_over.png", scaleGridTop="6", scaleGridLeft="5", scaleGridRight="56",scaleGridBottom="14");
   downSkin: Embed(source="../images/button_down.png", scaleGridTop="6", scaleGridLeft="5", scaleGridRight="56", scaleGridBottom="14");
   disabledSkin: Embed(source="../images/button_disabled.png", scaleGridTop="6", scaleGridLeft="5", scaleGridRight="56", scaleGridBottom="14");
}

Now, where ever we have a button in our Flex applicaction, the graphic used for the skin will scale correctly.  The arguments scaleGridTop, etc, tell Flex how to break up the image for scaling.

What if you have different skins or styles you wish to use for different buttons?  You can easily use the styleName property of the button and change our CSS.

  Button.purple {
  upSkin: Embed(source="../images/button_up.png", scaleGridTop="6", scaleGridLeft="5", scaleGridRight="58",  scaleGridBottom="16");
   overSkin: Embed(source="../images/button_over.png", scaleGridTop="6", scaleGridLeft="5", scaleGridRight="56",scaleGridBottom="14");
   downSkin: Embed(source="../images/button_down.png", scaleGridTop="6", scaleGridLeft="5", scaleGridRight="56", scaleGridBottom="14");
   disabledSkin: Embed(source="../images/button_disabled.png", scaleGridTop="6", scaleGridLeft="5", scaleGridRight="56", scaleGridBottom="14");
}

To use this style, you would have code like this:

<mx:Button label="Prettym Skinned Button" styleName="purple"/> 

Check out the demo I created.  You can right-click the applciation to view the source.

For more information about skinning Flex applications, including using Flash files, check out this article on Adobe Dev Net. 

9 responses to “Flex - Simple Skinning Example”

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

Subscribe to this comment thread