Creating stylable button skins for Flex 4′s new Spark Components isn’t that different from creating stylable skins in Flex 3. Sure you have your skin parts and the whole new way of writing skins, but the basic functionality for handling detecting style changes remains the same. In this demo, I’ve created a Spark Button that has a custom skin applied. The custom’s skin’s properties are set via CSS (making it stylable), and therefore making it possible to use the same button skin in multiple ways, say for a button with a larger font size and a smaller font size, or a purple button and a green button.
I should note that most the styles I defined for this button are ones we’re used to seeing from Flex 3 ‘fillColors’ and ‘cornerRadius’ but really we can define any sort of style property we’d like, for example, I defined a labelStyleName style since I like to define my text styles separately.
(as usual, right click to view source)
I’m trying to use MobileApplication in Flash Builder 4.5 Burrito to get a simple button slightly smaller as for what appears to be padding issues and it seems the fillColors and who knows what else no longer works for a spark button in a MobileApplication or something? WHat’s up with that? Where’s a list of accepted styles for this object again?
If you view source, you’ll see that ‘fillColors’ and many of the other styles are custom coded into the skin that I created. They are NOT built into the SparkSkin class. The point of this article was to show you how to add your own custom styles to a custom skin class based on SparkSkin, not how to use built in styles of SparkSkin. In fact you should not be using SparkSkin as a skin class, as it’s intended to be a base class for skins you create. In fact, if you want to apply custom colours at all to a button skin, you’ll really need to follow this example (or another tutorial) to create a custom skin.
this was really helpful and finally gave me some clarity as to how to get some data into the the different states of a skin from css.
I was using the updateDisplayList trying to set state values… but that was only allowing me access to the style of the current states… aka button:over.
thank you.