Quick tip (Flex 4): Using generic skin classes
August 10th, 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):
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
August 10th, 2009 at 6:39 pm
Nicely done!
August 11th, 2009 at 1:14 am
Yeah, that is an good idea to workaround the lack of code reuse on Skins…. ( http://www.flexjunk.com/2009/08/03/flex-4-skinning-ignores-developer-needs/ )
I was able to workaround some scenarios that I had here using your approach.
Thanks a lot =D
VELO
November 22nd, 2009 at 9:34 pm
I’ve been trying to figure out all this stuff with skinning Gumbo components today and your article helped me. Thank you!
Also, I can’t understand some things. May be, you can explain something!
For example, I want to write a simple Spark Skin for Button.
There is only one Label ( with text=”{host}” )
no color is specified and it doesn’t use style attributes from host component as in your example.
Then, I create button with my skin and set color to red.
The thing I can’t understand: why is my button becoming red? I do not set any color for Label in my skin, How does flex know about this color?
Thank you!
November 23rd, 2009 at 8:53 am
Evgeny, a color property of a button sets the color of its label: http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/spark/components/supportClasses/ButtonBase.html#style:color
And you don’t need to set the text for the label in your skin using bindings or anything else, just set the id of the label to “labelDisplay”. The button as a “HostComponent” of the skin will do it
BTW: To understand what’s going behind the scenes check out the original skin class of the Spark Button
spark.skins.spark.ButtonSkinor give the helpful links posted above a shot-Jens
November 23rd, 2009 at 2:43 pm
sectore, I know all this. About id “labelDisplay”.
That’s why I specially didn’t set this id, just to test functionality.
And, somehow my label changed its color. Do not know why
November 23rd, 2009 at 2:51 pm
Ok
It seems that the color of the Label is changed by “baseColor” property of the Button or its parent, even “baseColor” is not changed by Button itself. Because “baseColor” is inheritable, e.g. from a Group. To exclude the label try this:
// Note:
// "labelDisplay" == id of label + your skin class
// has to extend SparkSkin
override public function get colorizeExclusions():Array
{
return ["labelDisplay"];
}
-Jens