You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by Deepak MS <me...@gmail.com> on 2013/06/04 15:09:22 UTC
Loosing Button's icon property value
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
Re: Loosing Button's icon property value
Posted by Deepak MS <me...@gmail.com>.
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 <su...@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
>
>
Re: Loosing Button's icon property value
Posted by Lee Burrows <su...@leeburrows.com>.
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