How to make flex buttons use the hand cursor (on roll over)

This is a basic tutorial for beginners in Flex.

* Difficulty: Easy
* Required: Flex Builder

We’re going to extend the Button Component of flex to automatically use the hand cursor. It’s also a good introduction on how to make your own components.

Create a Class

In Flex Builder, right click within the folder of your current Flex project and select “New Actionscript class”

* as Package, put your name or your url backwards, in this example org.noben
* pick a name for the class starting by a capital letter.
* leave the rest as is.

then paste the following code in the Button function, after super();

this.useHandCursor = true;
this.buttonMode = true;

Your code should now look like this:

package org.noben
{
/**
*	Adds Hand Cursor support
*/
	import mx.controls.Button;

	public class Button extends mx.controls.Button
	{
		public function Button()
		{
			super();

			this.useHandCursor = true;
			this.buttonMode = true;
		}

	}
}

MXML Changes

Back in the mxml code of your flex project, add the following line in the mx:Application tag (the main tag):

... xmlns:nn="org.noben.*" ...

Replace org.noben by the package you chose and “nn” by your initials.

ie. xmlns:fb=”com.foobar.*”

Once that’s done, instead of using mx:Button use fb:Button tags.

It looks like this for me:

<nn:Button y="339" label="Save"  width="90" height="30" />

You can also use the design view and simply drag from the CUSTOM folder the component that says Button.

Hope this helped!

Cheers.