Hi Scott, This solution works because you don't have any label in your button. But keep in mind that 'color' style is reserved for the font color, nothing else. So if you eg add a label to your button, it will use the 'color' style and gets colored as well, not what you want.
Maurice -----Message d'origine----- De : Scott Matheson [mailto:[email protected]] Envoyé : mercredi 2 octobre 2013 22:53 À : [email protected] Objet : RE: Extending Spark Button Skink Hi This is the solution I ended up with, seems to work well, using the getStyle <s:SolidColor color.down="{getStyle('color')}" <?xml version="1.0" encoding="utf-8"?> <!-- ADOBE SYSTEMS INCORPORATED Copyright 2008 Adobe Systems Incorporated All Rights Reserved. NOTICE: Adobe permits you to use, modify, and distribute this file in accordance with the terms of the license agreement accompanying it. --> <!--- The default skin class for the Spark Button component. @see spark.components.Button @langversion 3.0 @playerversion Flash 10 @playerversion AIR 1.5 @productversion Flex 4 --> <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"; minWidth="32" minHeight="32" width="32" height="32" alpha.disabled="0.5"> <fx:Metadata> <![CDATA[ /** * @copy spark.skins.spark.ApplicationSkin#hostComponent */ [HostComponent("spark.components.Button")] ]]> </fx:Metadata> <!-- states --> <s:states> <s:State name="up" /> <s:State name="over" /> <s:State name="down" /> <s:State name="disabled" /> </s:states> <s:Group> <s:Group> <s:Rect width="32" height="32"> <s:fill> <s:SolidColor color.down="{getStyle('color')}" color.disabled = "#E6E6E6" color.over="#808080" color.up="#AAAAAA"/> </s:fill> </s:Rect> <s:Path x="8.77393" y="6.04347" winding="nonZero" data="M1.90625 0.187485C1.6543 0.031723 1.34863 -0.030777 1.05566 0.0141449 0.766602 0.0590668 0.493164 0.216782 0.304688 0.435532 0.111328 0.662094 0 0.955063 0 1.24608L0 18.498C0 18.789 0.111328 19.084 0.304688 19.3125 0.493164 19.5351 0.766602 19.6855 1.05566 19.7305 1.34863 19.7754 1.6543 19.7129 1.90625 19.5586L15.8916 10.9355C16.1309 10.7851 16.3184 10.5547 16.4102 10.289 16.5088 10.0195 16.5088 9.72459 16.4102 9.45897 16.3184 9.19334 16.1309 8.95897 15.8916 8.80858L1.90625 0.187485Z"> <s:fill> <s:SolidColor color="#FFFFFF"/> </s:fill> </s:Path> </s:Group> </s:Group> </s:SparkButtonSkin> ________________________________________ From: Maurice Amsellem [[email protected]] Sent: Wednesday, October 02, 2013 5:51 PM To: [email protected] Subject: RE: Extending Spark Button Skink 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. ________________________________ 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.
