Flex 3: How can I change the Mouse Cursor when mousing over a Text Input?

Question

In Flex, by default, when you mouse over a Text Input the mouse cursor is changed to the standard I cross bar. How can I change this cursor so the regular mouse pointer cursor is shown rather than the I cross bar?

update: Well, it seems this process is dirt simple in Flex 4 according to this blog post: http://blog.flexexamples.com/2008/11/03/setting-mouse-cursors-in-flash-player-10/

Since I'm stuck with Flex 3 for the time being, how can I do something similar?

update2: Also, this question is somewhat similar to this question: http://stackoverflow.com/questions/587252/avoiding-cursor-change-over-dynamic-text-fields-in-flash-cs3

Though, I am using the standard Flex Builder, not Flash CS3.

Answer 1

You have to use the CursorManager:

import mx.managers.CursorManager;

protected function textMouseOverHandler(event:Event):void
{
    CursorManager.setCursor(yourCursor, yourPriority, xOffset, yOffset);
    // Rest of your handler
}

protected function textMouseOutHandler(event:Event):void
{
    // be sure to set the cursor back here
}

Answer 2

You could use a HBOX with a Label instead of a TextInput. The system will not change the cursor when the mouse is over the Label. If you want the text to be editable by the user you will need to do some more work.

public class MyTextInput extends HBox
{
public function  MyTextInput()
{
   super();
   var label:Label = new Label();
   label.text="some text";
   addChild(label);
   addEventListener(MouseEvent.CLICK, editProperties, true);
}
private function editProperties(event:MouseEvent)
{
  //do something to allow the user to edit the text e.g. PopupManager.createPopup
}
}

Answer 3

there is also another way by setting buttonMode property to true for any component you wish. this brings the mouse cursor instead of text cursor.

Answer 4

There are three properties that must be modified useHandCursor = true buttonMode = true mouseChildren = false

Leete more information this article http://www.anujgakhar.com/2008/03/27/flex-how-to-display-hand-cursor-on-components/

Answer 5

Just to clarify - the MouseCursor and Mouse classes exist also in Flex 3 on flash 10. So you can hook to the MOUSE_OVER and MOUSE_OUT events:

elem.addEventListener(MouseEvent.MOUSE_OVER, function(event:Event):void {
    Mouse.cursor = MouseCursor.BUTTON;
});

elem.addEventListener(MouseEvent.MOUSE_OUT, function(event:Event):void {
    Mouse.cursor = MouseCursor.ARROW;
});