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: Avoiding cursor change over dynamic text fields in Flash CS3

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

Volkslied

Answer 1

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;
});

Estancia

In which package do MouseCursor and Mouse exist? The links don't lead anywhere useful anymore. – Gibbon

Answer 2

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/

Westphal

Answer 3

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
}

Extinguish

the setCursor method takes a Class object though. How can I find the Class Object for the standard cursor on whatever operating system the user is on? – Volkslied

You'll have to create the arrow image if you want this functionality. Unfortunately, Flex 3 passes Cursor management to the system if no cursor is defined. It's your system that is displaying the I cursor...not Flex. – Extinguish

hmmm. weird. So how does the system know when to change the cursor? Is there a way to change the identification of a TextField so it doesn't know to change it? – Volkslied

Answer 4

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
}
}

Mitinger

Answer 5

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.

Hildebrand

There are three required properties. See Oscar's answer. – Reasoned