Yesterday, Andrew Westberg posted the following comment on my post about creating a custom Flex 4 component.
I’ve heard some complaints that Flex 4 is much more verbose for doing what was simple in 3. One example is adding an icon to a button. Thoughts on that?
At first, I misunderstood him and thought he was saying he had heard it was more difficult to add a second icon to a button with Flex 4 than Flex 3, which it’s not. I replied to him directly with an example of just how easy it is, and also sent him here to show him the cool button Juan built. Turns out, what he was saying is that it’s sorta a pain in the ass to add even the first icon, which it is compared to Flex 3 where the Button has built in support for an icon.
Consider the buttons in the image below. They have the same background an mouse over/down treatments, but different icons. Straight out of the Flex box, you’d have to create two different skins to have these two buttons with different icons (I think.)
To work around this I created a simple extension of the Spark Button and gave it an icon property. In the extension I defined an iconElement as a skin part, which, when added is passed the value of the icon property. Now you can create two instances of the same button with the same skin and specify a different icon for each one.
This would have been really easy it I hadn’t run into this SDK bug. Fortunately, after copying the mxmlc.jar into my $FLEX_HOME/lib directory and cleaning the project, it worked as expected.
View Example (view source enabled)
One Comment
very good and professional approach! Thank you very much~ It solved the problem which has been annoying me for weeks.
3 Trackbacks
[...] examples of Spark Icon Buttons have shown up in the past few days. Andy mcintosh did an example here, Rob another one here, I did one myself here. While all were using a slightly different approach [...]
[...] noticed a number of people here (Andy McIntosh), and here (Andy Hulstkamp) working with button icon skins. The main reason for this is that Adobe [...]
[...] Then we have three choices for the PictureButtonSkin: a) create a brand new skin (this had been done before) b) massage the clone of spark.skins.spark.ButtonSkin c) build a descendant (in OOP terms) of the [...]