Displaying a hand cursor when the user rolls over the CheckBox control in Flex

The following example shows how you can display a hand cursor when the user rolls their mouse over the Flex CheckBox control by setting the useHandCursor and buttonMode properties.

According to the documentation for the useHandCursor property:

A Boolean value that indicates whether the pointing hand (hand cursor) appears when the mouse rolls over a sprite in which the buttonMode property is set to true. The default value of the useHandCursor property is true. If useHandCursor is set to true, the pointing hand used for buttons appears when the mouse rolls over a button sprite. If useHandCursor is false, the arrow pointer is used instead.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/15/displaying-a-hand-cursor-when-the-user-rolls-over-the-checkbox-control-in-flex/ -->
<mx:Application name="CheckBox_useHandCursor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:CheckBox id="checkBox"
            label="useHandCursor"
            useHandCursor="{checkBox.selected}"
            buttonMode="true"
            selected="true" />

</mx:Application>

View source is enabled in the following example.

You can also set the useHandCursor property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/15/displaying-a-hand-cursor-when-the-user-rolls-over-the-checkbox-control-in-flex/ -->
<mx:Application name="CheckBox_useHandCursor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                checkBox.useHandCursor = checkBox.selected;
            }
        ]]>
    </mx:Script>

    <mx:CheckBox id="checkBox"
            label="useHandCursor"
            useHandCursor="true"
            buttonMode="true"
            selected="true"
            change="checkBox_change(event);" />

</mx:Application>

Tagged as: buttonMode, useHandCursor