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.
Example
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
- Flex SDK - Confluence: "Gumbo Skinning (including SkinnableComponent) - Functional and Design Specification"
- Adobe Flex 4 Help: "Skinning Spark components - Accessing the host component from inside the skin"
- "Advanced FXG Spark Icon Buttons with one generic skin in Flex4 (Gumbo)" by Andy Hulstkamp
Happy Gumbo skinning ;)
-Jens