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>

Answer 1

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.