Great! That worked. I just added bitmapimage component with 'iconDisplay' as it's id and it displayed the icon.
On Tue, Jun 4, 2013 at 6:47 PM, Lee Burrows <subscripti...@leeburrows.com>wrote: > 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<http://ns.adobe.com/mxml/2009> >> " >> >> >> xmlns:s="library://ns.adobe.**com/flex/spark<http://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 > >