Flex Skinning: Introduction w/ Buttons (Part 1)

This is the first part of a multi-part series on Flex skinning. I'll be reviewing the wide assortment of skinning capabilities found in the Flex 3 platform. The goal is to provide documented resources for this specific topic -- something I've found lacking on the Internet. Today, I'll begin a general introduction to skinning by using the Button component.

If on Day 1 of the universe God created the UI, then surely Day 2 there was some company demanding the ability to skin these newfound components. In today's world, it's not enough for a platform to provide UI controls to the developer base. There needs to be an ability to customize the look and feel of these controls for a wide assortment of reasons:

• company identity
  
• differentiation from competitors
  
• specialization to a target demographic (e.g., children like big, colorful buttons)
  

Feel free to spend your own time expanding on that list. What *I* am here for is to explain how to style, skin, and customize your Flex components. First, let's talk terminology.

What is Styling?

When I speak about styling, think CSS, the Web standard. What I mean is that styling refers to specifying color, size, font, etc. When we style a Button, what we mean is that we want to change its color, its label's font, how big it is, where its positioned, and so on. Technically, specifying an X/Y coordinate for a button doesn't seem like styling, but, yes, it is.

CSS is the dominant form of styling on the Web today. We specify all sorts of styling attributes for our Web pages using syntax such as:

.warning {
   color: red;
   font-weight: bold;
}

Yes, even for those of us who secretly use the old way from time to time, we're still styling. And for the most part, styles are a pretty powerful, and necessary, technique. However, you're probably reading this tutorial because you need more than just red & blue buttons or one with the Impact font. That's where skinning comes in.

What is Skinning?

Skinning goes beyond simply styling. What if instead of the standard rectangular button, you want a circular one? What if you want your buttons render themselves dynamically in code? This is skinning.

Now, let's keep one thing in mind. While styling belongs to a designer, skinning can belong to both designer and developer. Quite simply, skinning is a big tent. I've seen situations where the skins are designed in Photoshop, and I've seen times where they are drawn using the Flash Drawing API. If you are a designer or a developer, but not both at once, you can pick the kind of skinning that suits you. However, neither one can necessarily be accomplished via the other.

But enough theory. Let's play with Buttons!

The Example Application

We'll be doing all our examples using a very simple Flex 3 application. All you need to do is create a new application (using Flex Builder or via the command-line) that looks something like this:

<mx:application mx="http://www.adobe.com/2006/mxml" layout="absolute">
   <mx:Style source="styling.css" />
   <mx:button horizontalcenter="0" verticalcenter="0" label="Shiny Red Button!" />
</mx:application>

We won't be touching this code anymore. However, we will be editing the stylesheet. I trust you to setting up this application for yourself. If you need help, you likely want to be reading a tutorial on Flex 3 first. :-)

If you're still with us, let's begin.

Styling a Button

I'm going to demonstrate general styling and skinning by using the most basic and essential UI component of them all: the Button. Once you have your Flex application set up as above, run it and you'll see:



Now, open up your styling.css file and let's start with some basic styling. Let's add:

Button {
   color: white;
}

If you thought that was going to make the button white, you're wrong. It made the label white:



I should mention that our CSS uses a type selector to style the button. Flex also supports the class selector, so feel free to use that. Just add the styleName attribute to your Button. Now, to change the button color:

Button {
   color: white;
   fill-colors: #ff0000, #dd0000;
}

You get:



Note that the background is bi-color. If you want a button that's pure red, just specify #ff0000 for both. (#ff0000 being the hex color for red, of course.)

Now, for that border:

Button {
   color: white;
   border-color: white;     
   fill-colors: #ff0000, #dd0000;
}

There, that gives it some pop:



The label font can also be changed. Now, normally for a real Flex application, you would embed a font to guarantee the button would appear the same way on every OS (in theory). If you want to do that here, I'll leave that up to you -- this is a styling tutorial, however. I'll just use one of my local fonts for this demonstration:

Button {
   color: white;
   border-color: white;
   fill-colors: #ff0000, #dd0000;
   font-family: Rockwell;
}

Keep in mind that the size of the button is based on the font, so we can enlarge the font, too:

Button {
   color: white;
   border-color: white;
   fill-colors: #ff0000, #dd0000;
   font-family: Rockwell;
   font-size: 24;
}

Ah, much better:




Notice that the Button sized itself to accommodate the Font. Thank the Adobe guys for that. If your font might change in the CSS, you may want to ease up on specifying the Button's width and height explicitly.

One last useful thing we can do is to change the shape of the button a bit. By tweaking the corner radius. This gives the button a rounded look:

Button {
   color: white;
   border-color: white;
   fill-colors: #ff0000, #dd0000;
   font-family: Rockwell;
   font-size: 36;
   corner-radius: 15;
}

Giving:

There's a lot you can do with styling. The Adobe API Documentation tells you all the rest that you can do, but we've covered just about 90% of what you'd ever do with a Button. The advantage of styling is that you can change the look of a control without writing a line of code. The CSS styling in Flex is also an added bonus because it allows us to re-use our knowledge of standard CSS, even if we have to learn or look up new attributes.

However, there is a disadvantage to styling. It can't do much. For example, although you can use the text-selected-color and text-roll-over-color attributes to change the text colors for various Button states, you can't change the background color of the button. You also can't change the fundamental color scheme of the button -- in other words, change the pattern. To do these things, you need a graphics program or a hankering to code!

Skinning a Button with Art

OK, time to roll up the sleeves. Skinning is a lot more arcane than styling, but because of it, you'll see the most individual of results.

There are two ways to go about skinning. The first way is to use graphics. Let's go over that first. Before you do anything, though, revisit your application code and remove the label attribute from your button. If you leave it in, it will sit on top of the graphic you use for your new button.

Now, let's start with a graphic. I'm not a designer, so I just picked out some random button from the Web. I found this one:

Let's make this a button in our application. To do it is simple with skins! A skin is generally a resource you apply, just like a style. The difference is that this resource can be a graphic, SWF, or a chunk of code. In this case, we're using the graphic:

Button {
   skin: Embed('cart-button.png');
}

Note the use of Embed(). Learn it. Love it. As a Flex developer, you will use this a lot! It brings the resource into the app directly, so there is no need to load it in dynamically later. This gives us a button that looks just like the graphic above, except it handles events because it's a bona fide Button!

Now, if you want to skin using a Flash symbol, the syntax is slightly altered:

Button {
   skin: Embed(source='symbols.swf', symbol='SubmitButton');
}

It's the same line, except the source= part is optional if you won't specify any other options. So, if you're skinning with Flash symbols, use the above. If you are using graphics, leave off the source= if you want to. The only other options you are nmost likely to use are for Scale-9, which is a way to specify to Flex what parts of a graphic should not be resized. It's very useful, and there is plenty of material about it on Google.

The rest of the examples will use Flash symbols though. If you follow my examples verbatim, you will need Assets.swf. Right-click to save it and then place it in the same directory as your MXML and CSS files. Now, here's an example of doing a simple mouse over:

Button {
   up-skin: Embed(source='Assets.swf', symbol='OK');
   over-skin: Embed(source='Assets.swf', symbol='OverOK');
}

And the result: (move your mouse over the button)

Notice we change skin to up-skin. The reason we do so is because the skin attribute is somewhat of a convenience skin. It lets us set a skin for all the states of a button. Now, we're just being more specific.

Notice if you click on the button, you don't see anything different happen. If we had used up-skin, we would have seen a big, old-fashioned Flex Button with no text. Because we used the skin attribute, the basic OK button displays the same way for every other state unless we override it, like we did when we specified the over-skin attribute.

But, we want a real down state, so we'll also add a mouse down:

Button {
   up-skin: Embed(source='Assets.swf', symbol='OK');
   over-skin: Embed(source='Assets.swf', symbol='OverOK');
   down-skin: Embed(source='Assets.swf', symbol='DownOK');
}

To get: (click the button)

The good news is that, in most cases, these are the only three skins you'll need. Exceptions include if your button will need to be disabled at some point or if you make your button a toggle button. A toggle button just means the button stays down when you press it, and if you make your Button one, you will also want to add the selectedUpSkin, selectedOverSkin, selectedDownSkin, and possibly the selectedDisabledSkin as well.

Since disabled skins are sometimes necessary, I created one. One nice way to accomplish it is to take your basic Button and apply a high gray tint to it, around 90%. Then we add the skin:

Button {
   up-skin: Embed(source='Assets.swf', symbol='OK');
   over-skin: Embed(source='Assets.swf', symbol='OverOK');
   down-skin: Embed(source='Assets.swf', symbol='DownOK');
   disabled-skin: Embed(source='Assets.swf', symbol='DisabledOK');
}

Done!

As you can see, by simply using these 4 skins, you can change the look of a button in completely customized ways. My mouse over has a pulsation that you couldn't accomplish with just a style. (You can replicate it with events, though.)

But, even as styles reach their limits where skins begin theirs, the same can be said for skinning using code. Code, while more complex, is limitless in its power. How so? Well, I'll show you next time.

Stay tuned for Part 2 of this series where I'll discuss programmatic skinning for Buttons in its entirety.