Flex 4 Fun Forum - Button Skinning in FLex 4

Articles |
News |
Weblogs |
Books |
Forums

Artima Forums | Articles | Weblogs | Java Answers | News

Sponsored Link •

Flex 4 Fun Forum
Button Skinning in FLex 4

0 replies on 1 page.

Welcome Guest
Sign In

Back to Topic List

Reply to this Topic

Search Forum

Threaded View


Previous Topic

Flat View: This topic has 0 replies on 1 page

Royos Jacob

Posts: 1
Nickname: ashvin203
Registered: Jan, 2011

Button Skinning in FLex 4

Posted: Jan 31, 2011 1:37 AM

Hello,

I am a newbie to Flex 4 and am trying to do some skinning to my controls in Flex 4. I have having problem to display the label on my buttons.

Earlier the skinning were being done on the button, but the label was not being displayed. So I included the following code :

<s:Label id="labelDisplay">

After including the above, the label is being displayed but the colour of the label is very pale grey while normally it should be black unless I change it to some other colour. Can anyone help me with this issue? Am i missing something in my codes below.

I am using a .css file and a .mxml file as my host component (codes are shown below) for skinning my button components.

CODE FROM MXML FILE:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>


<s:states>
<s:State name="disabled" />
<s:State name="down" />
<s:State name="over" />
<s:State name="up" />
</s:states>
<s:Label id="labelDisplay"
left="10" right="10" top="5" bottom="5"
horizontalCenter="0" verticalCenter="1" color="#000000"/>





<s:BitmapImage width="100%"
height="100%"
source="{getStyle('upSkin')}"
includeIn="up"/>
<s:BitmapImage width="100%"
height="100%"
source="{getStyle('overSkin')}"
includeIn="over"/>
<s:BitmapImage width="100%"
height="100%"
source="{getStyle('downSkin')}"
includeIn="down"/>
<s:BitmapImage width="100%"
height="100%"
source="{getStyle('disabledSkin')}"
includeIn="disabled"/>

</s:Skin>

CODE FROM CSS FILE:

@namespace mx "library://ns.adobe.com/flex/mx";
@namespace s "library://ns.adobe.com/flex/spark";

s|Button
{
disabledSkin: Embed(source="reelmanager_skins.swf", symbol="Button_disabledSkin");
downSkin: Embed(source="reelmanager_skins.swf", symbol="Button_downSkin");
overSkin: Embed(source="reelmanager_skins.swf", symbol="Button_overSkin");
upSkin: Embed(source="reelmanager_skins.swf", symbol="Button_upSkin");
}

Your precious help is required.

Many thanks.

Previous Topic


	Web Artima.com