Change the mouse pointer

[caroline_europe]

Hi all,
in my application, I need to change the mouse pointer dynamicaly, can
I do that with GWT ?

Example: when I click on the button [click_me], the cursor changes to
"new_cursor.gif".

Thanks!

[Chris]

Sure, you can create a mouse listener and change the css associated
with the cursor.

I do something like:
public class ImagePointerMouseOver implements MouseListener{

public void onMouseEnter(Widget sender){
sender.addStyleName("ImagePointer-enter");
}

public void onMouseLeave(Widget sender){
sender.removeStyleName("its-ImagePointer-enter");
}

</snip rest of the listener methods>
}

with the css being:

.ImagePointer-enter {
cursor:pointer;
cursor:hand;
}

Than attach the listener to the widget where you want the cursor to
change when mouseover'ed. I've not tried to supply my own image; but
I'm imaging it is something similar with just a little different css.

Good luck!

Chris....

[caroline_europe]

Thanks, it's not exactly what I'm trying to do, but I've managed to do
that:

DOM.setStyleAttribute(this.myPanel.getElement(),
"cursor", "move");

The mouse pointer changes like I want, but when I'm moving on widgets
like buttons or textboxes, the pointer changes back to standard
component cursor.

I'm implementing a drag'n'drop from image to widget.
The d'n'd works, but there's no feedback, for this reason I'm trying
to change the pointer of the mouse, between the mouse down on the
image and the mouse up somewhere.

[walden]

I think css would work better for this than inline styles.

.globalMoveCursor *, .globalMoveCursor .absolutelyPositioned {
cursor: move;
}

RootPanel.get().addStyleName("globalMoveCursor");

The first selector hits all the normal document flow elements. The
second selector would be needed if you have absolutely positioned
elements where you also need the cursor to change. This also involves
you doing a little more work to tag those elements with a style name
so they can be targetted. I don't know any other way of reaching
them. I've used this strategy and it works.

Walden

> > > Thanks!- Hide quoted text -
>
> - Show quoted text -

[caroline_europe]

Thanks walden, it works perfectly !

[Paulo Martins]

This post has been made a long time ago, but I found a nice solution and I hope that this helps many guys with the same problem.

if (showWait)

RootPanel.get().getElement().getStyle().setCursor(Style.Cursor.WAIT);

else

RootPanel.get().getElement().getStyle().setCursor(Style.Cursor.AUTO);

This works perfectly for me.

All the best!