Hi, I just made a quick try with skin using FXG, and it get colored with chromeColor.
So basically this is what you need to do: - copy paste the source of ButtonSkin in your own skin - remove everything that you don't need , and make sure to keep the part that sets useChromeColor and exclusions - add your FXG ( just instanciate the file) This is a simple example, using an FXG file called " MyFXGArtwork.fxg'. Also, make sure that the FXG uses medium shades of gray (no color) so that chromeColor applies correctly. <?xml version="1.0" encoding="utf-8"?> <s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009"; xmlns:skins="skins.*" minWidth="21" minHeight="21" alpha.disabled="0.5"> <fx:Metadata> <![CDATA[ [HostComponent("spark.components.Button")] ]]> </fx:Metadata> <fx:Script fb:purpose="styling"> <![CDATA[ static private const exclusions:Array = ["labelDisplay"]; override public function get colorizeExclusions():Array { return exclusions; } override protected function initializationComplete():void { useChromeColor = true; super.initializationComplete(); } ]]> </fx:Script> <!-- states --> <s:states> <s:State name="up"/> <s:State name="over"/> <s:State name="down"/> <s:State name="disabled"/> </s:states> <skins:MyFXGArtwork id="fxg" left="0" top="0" right="0" bottom="0" /> <!-- layer 8: text --> <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay --> <s:Label id="labelDisplay" textAlign="center" maxDisplayedLines="1" horizontalCenter="0" verticalCenter="1" verticalAlign="middle" left="10" right="10" top="2" bottom="2"> </s:Label> </s:SparkButtonSkin> -----Message d'origine----- De : Alex Harui [mailto:[email protected]] Envoyé : mercredi 2 octobre 2013 18:35 À : [email protected] Objet : Re: Extending Spark Button Skink IMO, the difficulty of adding a new property/style to the skin is a flaw in the Spark skinning model. You will have to subclass button so you can use a that as the hostcomponent of your custom skin. I believe a workaround is to use getStyle() in the skin to get a custom CSS property, and define custom selectors for each of the buttons. You will not be able to use the custom CSS property in MXML attributes without subclassing Button, though, so you have to use ID or Class selectors or something like that. -Alex On 10/2/13 6:36 AM, "Scott Matheson" <[email protected]> wrote: >Hi > Good idea, I have used my own FXG graphics for the button, I have >based my button on standard button > >How do I > >>Make sure to set userChromeColor to true in the skin initialization >>script. > > >I still would still like to learn how do extend > >Scott > > > >On 10/2/13 2:17 PM, "Maurice Amsellem" <[email protected]> >wrote: > >>Actually, you could just set "chromeColor" for the button. >>That would colorize everything but the label. >> >>If you have customized the skin, (and derived from SparkSkin) you can >>still use chromeColor, but you will have to control yourself the part >>that would be colored or not. >>Make sure to set userChromeColor to true in the skin initialization >>script. >> >>Regards, >> >>Maurice >> >>-----Message d'origine----- >>De : Scott Matheson [mailto:[email protected]] Envoyé : >>mercredi 2 octobre 2013 14:58 À : [email protected] Objet : >>Extending Spark Button Skink >> >>Hi >> I have a simple problem, I have skinned a button, I need X copies of >>the button the only difference is color, I would like to be able to >>use >> >> myButton color = {HostComponent.mycolour} >> >>As a mycolour is not a property of of "spark.components.Button" I >>believe I have to extend "spark.components.Button" first >> >>This is getting a bit more complex than my skill set support :( >> >> An anyone provide an example of how I extend a spark skin, I have >>spend days looking on the internet for examples with out any luck >> >>Scotty >> >> >>________________________________ >> >>Disclaimer: This electronic mail and any attachments are confidential >>and may be privileged. If you are not the intended recipient, please >>notify the sender immediately by replying to this email, and destroy >>all copies of this email and any attachments. Thank you. > > >________________________________ > >Disclaimer: This electronic mail and any attachments are confidential >and may be privileged. If you are not the intended recipient, please >notify the sender immediately by replying to this email, and destroy >all copies of this email and any attachments. Thank you.
