If you want to display a hand cursor over a Flex component (any Flex Component I would say ?), there are two properties that come handy. useHandCursor and buttonMode. In some cases, a third property called mouseChildren might be required as well.
Here is a little extract from the Flex livedocs , on what buttonMode and mouseChildren means :-
buttonMode property
Specifies the button mode of this sprite. If true, this sprite behaves as a button, which means that it triggers the display of the hand cursor when the mouse passes over the sprite and can receive a click event if the enter or space keys are pressed when the sprite has focus. You can suppress the display of the hand cursor by setting the useHandCursor property to false, in which case the pointer is displayed.
mouseChildren property
Determines whether or not the children of the object are mouse enabled. If an object is mouse enabled, a user can interact with it by using a mouse. The default is true.
If you look at the code below, there are 4 different controls (Label, Image, Button and Text), all 4 of them will display a handCursor but if you notice, for Label and Text, I had to use mouseChildren = false to achieve this and for Image and Button, simply doing buttonMode = true did the trick.
<mx:Label buttonMode="true" text="testing here" useHandCursor="true" mouseChildren="false" /> <mx:Image source="someimage.gif" buttonMode="true"/> <mx:Button label="Button" buttonMode="true" /> <mx:Text text="testing again" buttonMode="true" useHandCursor="true" mouseChildren="false" />
I understand what mouseChildren means, if we set it to false, it basically stops all the mouse activities on that control and we need to do custom events for mouse actions but why I had to set it to false for Label and Text, I am not sure yet! Maybe someone can explain ?
My overall conclusion is, if you want to get a hand cursor, use all 3 properties, sounds like the safest bet to me, atleast we know its going to work!
useHandCursor = true
buttonMode = true
mouseChildren = false
#1 by frank on May 10, 2008 - 11:36 pm
Quote
So, how do you do this in actionscript, say on a shape component?
#2 by Anuj Gakhar on May 11, 2008 - 6:06 pm
Quote
s.buttonMode = true;
s.useHandCursor = true;
something like that, given that s is your Shape object.
#3 by frank on May 12, 2008 - 12:14 am
Quote
cool actually it turns out the shape object doesn’t support those properties so i had to use a sprite instead. thanks!
#4 by kanu kukreja on May 26, 2008 - 8:29 pm
Quote
its perfectly fine thing whatever you have mentioned, but problem with this is it disables the click events of text and label
do have any solution for this?
#5 by Anuj Gakhar on May 27, 2008 - 10:00 am
Quote
@kanu, how did you try the click events , did you add an event listener for the click events? My understanding is it should work.
#6 by Dylan on July 30, 2008 - 3:53 pm
Quote
The best you can for the ComboBox is to set buttonMode=”true” but do not set mouseChildren or else it will disable the ability to use the drop down. Setting buttonMode=”true” allows you to have a hand cursor over the down triangle but not on the option labels.
#7 by Greg on August 14, 2008 - 10:05 pm
Quote
This also works for when you import fl.controls.button in an Actionscript only project.
see http://joshblog.net/2008/02/10/how-to-use-the-flash-cs3-component-set-in-a-flex-builder-actionscript-project/
and
http://de-co-de.blogspot.com/2008/03/wheres-my-skin.html
#8 by Timothy Jones on February 5, 2009 - 9:58 pm
Quote
I looked at the API for this and my impression (though I have not tested this) is that the mouseChildren requirement comes from Label’s internal textField UIComponent that it uses to actually render the text. Since textField is itself a UIComponent, it would by default capture the mouse, and any mouse related parameters would have to be set on it (Label.TextField) instead. By setting mouseChildren = false, the mouse focus is not allowed to drop down to the Text Field. Anyone know?
#9 by chhabeg on March 29, 2009 - 8:27 am
Quote
thats great..
#10 by Ansury on September 6, 2009 - 1:33 am
Quote
“I understand what mouseChildren means, if we set it to false, it basically stops all the mouse activities on that control and we need to do custom events for mouse actions but why I had to set it to false for Label and Text, I am not sure yet! Maybe someone can explain ?”
A component like “Text” isn’t a container and can’t have children, so I’m thinking that has something to do with it, but I’ve never looked into it myself.
#11 by dan on September 22, 2009 - 10:37 am
Quote
set mouseChildren on components that contain children if you want mouse events to apply to the whole component and not separately for each of its children (be careful though, it will disabled their own unique events).
#12 by Ed on May 13, 2010 - 4:35 pm
Quote
Thanks Dude help me so much!
#13 by Andy on July 8, 2010 - 10:58 pm
Quote
This was really helpful!
#14 by jeeva on August 27, 2010 - 11:51 am
Quote
Mac os doesn’t support hand cursor. How to do it?