skinning multiple UI components

Question

Let's say you have a large number (N) of spark buttons in your app. Let's also say that your buttons all have very similar skins (size, various effects, etc) - the only difference being the specific png that they use as their BitmapImage. Do you end up with N skin files, all differing by 1 line? Or is there a smarter way to do this while not adding a lot of code when you create the buttons in MXML (in fact, ideally, none).

Answer 1

Creating a custom Button with a icon SkinPart typed as a BitmapImage will allow you to use the same Skin for all buttons :

<YourCustomButton icon="@Embed('yourIconFile.png') />

CustomButton.as

public class CustomButton extends Button
    {
        [SkinPart(required="false")]
        public var iconContainer:BitmapImage;

        private var _icon:Object;

        public function CustomButton()
        {
            super();
        }

        override protected function partAdded(partName:String, instance:Object):void
        {
            super.partAdded(partName, instance);

            if (instance == iconContainer && _icon)
                iconContainer.source = _icon;
        }

        public function get icon():Object
        {
            return _icon;
        }
        public function set icon(value:Object):void
        {
            if (iconContainer)
                iconContainer.source = value;

            _icon = value;
        }
    }