Showing the Hand Cursor in Flex

Sometimes in Flex the simple things are more obscure than they should be. This is the case for making a hand cursor show up for a button or label or practically any other component. Now this is a fairly easy thing to do, you just need to know exactly what attributes to set on the component.

You can see in the example below that the first button doesn't have a hand cursor on it. This is the default of a flex button and all other flex components. The second button has a hand cursor, which takes two attributes to show the cursor. The third item (the label) also has a hand cursor - but this takes yet another attribute. As always you can right click the example below to view the source.

To enable the hand cursor for a button you need to set the buttonMode attribute to true and useHandCursor to true. Why a property named 'buttonMode' is not true by default for a button, I have no idea. For other components you also need to set mouseChildren to false. And now all that is really left is to look at the code for the example.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="vertical" width="300" height="200">
  <mx:Button width="90%" height="50%" label="No Hand Cursor Button" />
  <mx:Button width="90%" height="50%" label="Hand Cursor Button" 
    buttonMode="true" useHandCursor="true" />
  <mx:Label width="100%" height="10%"  text="label with hand cursor" 
    buttonMode="true" useHandCursor="true" mouseChildren="false"/>
</mx:Application>

Well, I hope that someone finds this quick tutorial useful. Thanks for reading!

Source Files:

• [Hand Cursor.zip](http://tpstatic.com/_sotc/sites/default/files/421/source/Hand Cursor.zip)