Re: Loosing Button's icon property value

[Lee Burrows]

To include an icon, you'll need a BitmapImage component with 
id="iconDisplay" in your skin.


On 04/06/2013 14:09, Deepak MS wrote:
Hey there,

I’m working on an iPad app and I am using button with a custom skin:



<s:Button id="btnRefreshDB" label="Refresh Data"

                                 click="refreshDBclickHandler()" enabled="
true"

                                 icon="@Embed('asset/images/refresh.png')"
textDecoration="none"

                                 touchTap="refreshDBclickHandler()"/>



I also have a CSS which has following declaration:

s|Button

{

       skinClass: ClassReference("com.skins.AppButtonSkin");

       color: #FFFFFF;

       fontFamily: Arial;

       fontSize: 25;

       fontWeight: bold;

       chrome-color: #ff0000;



}





AppButtonSkin just lays out the background:

  <?xml version="1.0" encoding="utf-8"?>

<!-- SparkSkinning/mySkins/SquareButtonSkin.mxml -->

<s:SparkSkin

       xmlns:fx="http://ns.adobe.com/mxml/2009";

       xmlns:s="library://ns.adobe.com/flex/spark"

       minWidth="100" minHeight="100"

       alpha.disabled="0.5">



       <fx:Metadata>

             [*HostComponent*(*"spark.components.Button"*)]

       </fx:Metadata>



       <fx:Script>

             <![CDATA[

                   *static* *private* *const* exclusions:Array = [*
"labelDisplay"*];

                   *override* *public* *function*
*get*colorizeExclusions():Array {
*return* exclusions;}

             ]]>

       </fx:Script>



       <s:states>

             <s:State name="up" />

             <s:State name="over" />

             <s:State name="down" />

             <s:State name="disabled" />

       </s:states>



       <s:Rect left="1" right="1" top="1" bottom="1" radiusX="0" radiusY="0">

             <s:fill>

                   <s:LinearGradient rotation="90">

                         <s:GradientEntry color="0x00b1f2"

                                                  color.over="0xBBBDBD"

                                                  color.down="0x004B7D"

                                                  alpha="1" />

                         <s:GradientEntry color="0x049AD1"

                                                  color.over="0x9FA0A1"

                                                  color.down="0x004B7D"

                                                  alpha="1" />

                   </s:LinearGradient>

             </s:fill>

       </s:Rect>



       <s:Label id="labelDisplay"

                    textAlign="center"

                    verticalAlign="middle"

                    lineBreak="toFit"

                    horizontalCenter="0" verticalCenter="1"

                    left="10" right="10" top="2" bottom="2">

       </s:Label>



</s:SparkSkin>





When I apply this skin to the button, I am loosing icon and label color
property( and all other properties that are defined within CSS for a
button). How do I retain those properties while I apply a custom skin to a
button? To use icon in particular, should I again declare a image component
within the custom skin besides the label?



Kindly help…



Cheers!

Deepak



--
Lee Burrows
ActionScripter