Skinning Button Label in Flex 4

Question

I am using a Skin for my buttons in Flex 4. The skinned buttons are displayed correctly.

Now I want the label of the buttons to respond as such:

Font Weight should be Bold when "RollOver" or "MouseOver" over the buttons.

I tried doing it in the mxml below by including the rollOver property to the Label on this button, but it doesnt seem to work.

Am I doing it at the right place, that is in the Skin mxml file? Or should I do it for each button in the Application itself?

Skin Code:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin 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>
        <![CDATA[ 
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>

    <fx:Script>
        <![CDATA[
            protected function labelDisplay_rollOverHandler(event:MouseEvent):void
            {
                FontWeight.BOLD;
                FontStyle.ITALIC;
            }
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <s:BitmapImage includeIn="up" source="{getStyle('upSkin')}" width="100%" height="100%"/>

    <s:BitmapImage includeIn="over" source="{getStyle('overSkin')}" width="100%" height="100%"/>

    <s:BitmapImage includeIn="down" source="{getStyle('downSkin')}" width="100%" height="100%"/>

    <s:BitmapImage includeIn="disabled" source="{getStyle('disabledSkin')}" width="100%" height="100%"/>

    <s:Label id="labelDisplay" textAlign="right" maxDisplayedLines="1" horizontalCenter="1"
             verticalAlign="middle" verticalCenter="1" left="10" right="10" rollOver="labelDisplay_rollOverHandler(event)" />

</s:SparkSkin>

Wade Mueller Wade Mueller · Accepted Answer · 2011-03-09T16:01:04

You can do this easily by changing the fontWeight style for the "over" state. You can do this in MXML by specifying the style followed by the state you want that style to be applied to, like so:

<s:Label id="labelDisplay" fontWeight.over="bold" textAlign="right" maxDisplayedLines="1" horizontalCenter="1"
         verticalAlign="middle" verticalCenter="1" left="10" right="10" />

Hope that helps.

Skinning Button Label in Flex 4

1 Answers