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
>
>
