Quick tip (Flex 4): Using generic skin classes

Posted on August 10, 2009

For skinning Flex 4 components you have a lot of great options. One way is using a custom skin class, which extends a Skin or a SparkSkin class and defines all needed style properties by itself.

Imagine a custom button skin, which is more complex than the standard Spark `ButtonSkin. It declares additional gradients, rectangles, transitions etc. If you code all needed values for any style properties within this skin class, you may have to create another button skin class for using only one or two different style properties. Doing this, the amount of skin classes can be increased rapidly!

A better approach is creating generic skin classes. Such a skin class gets most of its properties from CSS declarations of its host component. So all needed styles can be defined using plain CSS and won't be hard-coded anymore, even custom style declarations. That's very simple to do and saves a lot of extra skin classes.


Code is worth a thousand words, so check out the following example. It uses only one generic skin class for all different styled buttons (right mouse click to view source code):

To see this content latest Flash Player Plugin is required.

Source code

Check out the source code here.

Helpful links

Happy Gumbo skinning ;)


Any feedback?

comments powered by Disqus