show wait cursor for long running process

2946 views
Skip to first unread message

L Frohman

unread,
Jul 30, 2007, 1:02:13 PM7/30/07
to Google Web Toolkit
I have a long running process (5 seconds or more), and I want to show the
wait / hourglass
cursor, while the process runs. The code below works in IE, but not other
browsers. I couldn't find
anything in previous posts. Can anyone tell me what is wrong with the code?

=====================

public void showWait() {
Element element = focusPanel.getElement();
DOM.setStyleAttribute(element,"cursor","wait");
focusPanel.setFocus(true);
DOM.setCapture(element);
}

public void showUnwait() {
Element element = focusPanel.getElement();
DOM.releaseCapture(element);
DOM.setStyleAttribute(element,"cursor","default");
}

(calling code)

public void zoomin() {
showWait();
DeferredCommand.addCommand(new Command() {
public void execute() {
longRunningProcess();
showUnwait();
}
});
}

abickford

unread,
Jul 30, 2007, 5:03:52 PM7/30/07
to Google Web Toolkit
You should probably do this by adding/removing CSS classes to the
elements and styling them as needed.

That being said, i think using "pointer" and "normal" instead of
"wait" and "default" will work as well.

Reinier Zwitserloot

unread,
Jul 30, 2007, 6:52:39 PM7/30/07
to Google Web Toolkit
Do NOT use CSS in case of doubt - direct setting of the DOM is far
less likely to have unwanted side effects, such as not working
properly.

'pointer' is something very very different from wait.

Try setting the cursor directly on the body tag:

DOM.setStyleAttribute(RootPanel.get().getElement(), "cursor", "wait");

If that also doesn't work, could be this just can't be done.

On Jul 30, 11:03 pm, abickford <adam.bickf...@gmail.com> wrote:
> You should probably do this by adding/removing CSS classes to the
> elements and styling them as needed.
>
> That being said, i think using "pointer" and "normal" instead of
> "wait" and "default" will work as well.
>
> On Jul 30, 1:02 pm, "L Frohman" <lfroh...@gmail.com> wrote:
>

L Frohman

unread,
Jul 30, 2007, 7:08:36 PM7/30/07
to Google-We...@googlegroups.com
Thanks, but

DOM.setStyleAttribute(RootPanel.get().getElement(), "cursor", "wait");

didn't help - still works in IE, not in Firefox/Safari.

"could be this just can't be done" - too bad.

Dean S. Jones

unread,
Jul 30, 2007, 11:49:34 PM7/30/07
to Google Web Toolkit
I think it's a pretty well known "browser quirk" that changing the
cursor
while in some JavaScript action/event will not take effect until you
MOVE the cursor after setting it...


Dean S. Jones

unread,
Jul 31, 2007, 12:29:12 AM7/31/07
to Google Web Toolkit
Using the following code, the behavior seems correct for IE 6 and
Firefox 2.0.0.3, using gwt 1.4.10, Safari you have to MOVE the cursor,
as I posted above,
Opera 9.22 is even more bizarre, you have to move the cursor over
another element that has a cursor defined, and back out into the body
again. Note that
if you don't move the cursor FROM over an element that may have a
cursor defined ( like the button that triggered it ) you will not see
the cursor change in
IE or Firefox.

final Button b = new Button("Test");

b.addClickListener(new ClickListener()
{
public void onClick(Widget sender)
{
Timer t = new Timer()
{
public void run()
{


DOM.setStyleAttribute(RootPanel.get().getElement(), "cursor",
"wait");
}

};
t.schedule(5000);

t = new Timer()
{
public void run()
{
DOM.setStyleAttribute(RootPanel.get().getElement(), "cursor",
"pointer");
}
};
t.schedule(10000);

t = new Timer()
{
public void run()
{


DOM.setStyleAttribute(RootPanel.get().getElement(), "cursor",
"wait");
}

};
t.schedule(15000);

t = new Timer()
{
public void run()
{
DOM.setStyleAttribute(RootPanel.get().getElement(), "cursor",
"pointer");
}
};
t.schedule(20000);
}
});
this.add(b);

Peter Blazejewicz

unread,
Jul 31, 2007, 5:44:14 AM7/31/07
to Google Web Toolkit
Hi,
as Dean noted I think we should follow ajax patterns:
http://ajaxpatterns.org/Progress_Indicator
also (from linked page):
<quote>
Note that one form of indicator to avoid is changing the cursor. Many
traditional GUIs switch over to a "rotating hourglass" or related icon
during delays. That's probably inappropriate for Ajax, because it's
something the browser software will often do, e.g. while loading a new
page, so it's likely to create confusion.
</quote>

hth,
regards,
Piotr

Reply all
Reply to author
Forward
0 new messages