Loading icon

[Ping]

Hi all,

I was wondering if is it possible to implement a loading icon by
replacing an arbitrary widget by a 'loading' spinner image. I want to
replace, lets say a listbox that's populating its entries through rpc,
wiht a spinner image while the data is still arriving.

I'm betting that I cannot just call a DOM.setElement() because that
would probably mess up the listbox's inner state, but if I could
overlay an image with the exact same size of the widget's size, it
would be nice enough.

Thanks,
miguel ping

[walden]

You can overlay it using a PopupPanel (is it still called that?).

You could also swap the Image and the ListBox at the widget level (not
the element level) and do no harm to the doco.

Walden

[Miguel Ping]

But how do I swap the widgets without disrupting the container of the main widget?
Can you post a working example? I'm afraid i'll always disrupt the container of the widget...

[walden]

Working Example:

package example.gwt.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.*;

/**
* User: wmathews
* Date: Feb 13, 2008
* Time: 7:33:11 AM
*/
public class FooEntry implements EntryPoint {

Grid myGrid;
Image myImage;
ListBox myListBox;
CheckBox myCheckBox;

public void onModuleLoad() {
myGrid = new Grid(1, 2);
myImage = new Image("Progressbar.gif");
myListBox = new ListBox();
myListBox.addItem("one");
myListBox.addItem("two");
myListBox.addItem("three");
myCheckBox = new CheckBox("loading");
myCheckBox.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
if (myCheckBox.isChecked()) {
myGrid.setWidget(0, 0, myImage);
} else {
myGrid.setWidget(0, 0, myListBox);
}
}
});
myGrid.setWidget(0, 0, myListBox);
myGrid.setWidget(0, 1, myCheckBox);
RootPanel.get().add(myGrid);

}
}


On Feb 12, 6:34 pm, "Miguel Ping" <miguel.p...@gmail.com> wrote:
> But how do I swap the widgets without disrupting the container of the main
> widget?
> Can you post a working example? I'm afraid i'll always disrupt the container
> of the widget...
>

> On Feb 12, 2008 10:12 PM, walden <wmath...@aladdincapital.com> wrote:
>
>
>
>
>
> > You can overlay it using a PopupPanel (is it still called that?).
>
> > You could also swap the Image and the ListBox at the widget level (not
> > the element level) and do no harm to the doco.
>
> > Walden
>
> > On Feb 12, 2:19 pm, Ping <miguel.p...@gmail.com> wrote:
> > > Hi all,
>
> > > I was wondering if is it possible to implement a loading icon by
> > > replacing an arbitrary widget by a 'loading' spinner image. I want to
> > > replace, lets say a listbox that's populating its entries through rpc,
> > > wiht a spinner image while the data is still arriving.
>
> > > I'm betting that I cannot just call a DOM.setElement() because that
> > > would probably mess up the listbox's inner state, but if I could
> > > overlay an image with the exact same size of the widget's size, it
> > > would be nice enough.
>
> > > Thanks,

> > > miguel ping- Hide quoted text -
>
> - Show quoted text -

[Miguel Ping]

Hi again,

Thanks for the code .Just one question: You're assuming my container inherits from HtmlTable, so you can call the setWidget() method. I would like to replace any widget in any container, and maintain its exact size. If your example used a FlowPanel instead of a Grid, it wouldn't be possible to do that.

[walden]

I thought initially you were concerned with maintaining the integrity
of the cooperative DOM and GWT systems. Now it sound more like you
are concerned with controlling the size. You can examine the rendered
size of any attached widget. You can set the size of any widget you
attach. What am I missing?

On Feb 13, 8:15 am, "Miguel Ping" <miguel.p...@gmail.com> wrote:
> Hi again,
>
> Thanks for the code .Just one question: You're assuming my container
> inherits from HtmlTable, so you can call the setWidget() method. I would
> like to replace any widget in any container, and maintain its exact size. If
> your example used a FlowPanel instead of a Grid, it wouldn't be possible to
> do that.
>

> > > - Show quoted text -- Hide quoted text -

[Miguel Ping]

Nothing, I just want to be able to selectively show a loading icon without disrupting the DOM and without disrupting the page structure (ie, without putting a big image that would jerk my template or so). I'm guessing that I can achieve that by using your example and setting the size appropriately on most cases. I'm sure I'll bump into some css issue but that's another story.

thanks again

[walden]

Ok, I think I fully understand now. If you were to replace, at the
document level, some element of a GWT Widget with some other arbitrary
element by manipulating the DOM directly, you could really mess the
system. But it sounds like you're not considering that. Sorry I
misunderstood.

I was going to say before that I think it's a bit stylistically odd to
stick a spinner in to replace in input element, as a way of saying
that the system is waiting for a background process. I think it's
more normal, stylistically, for that spinner thing to be completely
independent. Two common solutions come to mind: (1) somewhere in a
header or toolbar there is a dedicated little patch of real estate to
display a spinner. In IE7, for example, if you refresh a tab, the
icon on the right of the tab turns into a spinner, then turns back
into the favicon of the site when the load is complete. That's IE,
but you can do something similar in your own content. (2) the easiest
thing is to put a modal popup in place that blocks user access to
input elements with a glass panel, and the popup just says
"loading...". I think those are the most expected and user-friendly
ways to do it. Neither interferes with the flow or layout of the
document.

Walden

On Feb 13, 6:25 pm, "Miguel Ping" <miguel.p...@gmail.com> wrote:
> Nothing, I just want to be able to selectively show a loading icon without
> disrupting the DOM and without disrupting the page structure (ie, without
> putting a big image that would jerk my template or so). I'm guessing that I
> can achieve that by using your example and setting the size appropriately on
> most cases. I'm sure I'll bump into some css issue but that's another story.
>
> thanks again
>

[Miguel Ping]

My first thought was a modal popup, but I'm using gwt in conjunction with portlets. I don't want to block up the whole page that may contain other portlets, but only my portlet. I'm experimenting with the glass panel from the incubator, but I'm having some issues with my current style and the glass panel's functionality.

Even if I block only my portlet, I'd prefer to block only a small portion of the UI, because if my operation is too slow, I want the user to be able to do some other stuff instead of waiting. Maybe if I present a cancel button in the popup, I can redirect the user to another place...

thanks again

[walden]

If I were you, I'd place a spinner image in the header of the viewport
for your portlet, and I would set the input controls to disabled while
the spinner is spinning, and leave it at that. Hide the spinner and
re-enable the controls after the wait.

On Feb 14, 8:04 am, "Miguel Ping" <miguel.p...@gmail.com> wrote:
> My first thought was a modal popup, but I'm using gwt in conjunction with
> portlets. I don't want to block up the whole page that may contain other
> portlets, but only my portlet. I'm experimenting with the glass panel from
> the incubator, but I'm having some issues with my current style and the
> glass panel's functionality.
>
> Even if I block only my portlet, I'd prefer to block only a small portion of
> the UI, because if my operation is too slow, I want the user to be able to
> do some other stuff instead of waiting. Maybe if I present a cancel button
> in the popup, I can redirect the user to another place...
>
> thanks again
>

> On Thu, Feb 14, 2008 at 12:51 PM, walden <wmath...@aladdincapital.com>