plain gwt progress wheel

Question

I've started learning GWT today and already done a lot since I have java background. My next step is loading JSON data from the backend server but while loading is done I want to show a progress wheel for obvious reasons.

I was expecting an "out of the box" widget for this but it seems there are none (correct me if I'm wrong). Since I'm completely new to GWT I don't want to add complexity with additional frameworks, only plain GWT.

It seems that I'll have to code one since I haven't found some third party code for this. Can someone point me in the right direction? What are the steps? Should I create one image and then rotate it in animation, or create several images and then replace them in a circular fashion? Or am I completely off here?

Answer 1

Well, as for a simple progress wheel that doesn't show the actual progress (just that your application is doing something), I'd recommend a simple animated image (generate one at http://www.ajaxload.info/ for example).

If an animated image/gif is not an option:

A simple solution would be creating several images and replace them in a circular fashion. I used this recently, basically you make a timer that calls itself:

Timer updateAnim = new Timer() {
    @Override
    public void run() {
        currentImage = (currentImage + 1) % NO_IMAGES;
        setVisibilities();
        this.schedule(UPDATE_TICK);
    }
};

private void setVisibilities() {
    img1.setVisible(false);
    img2.setVisible(false);
    switch (currentImage) {
    case 0:
        img1.setVisible(true);
        break;
    case 1:
        img2.setVisible(true);
        break;
    }

}

setVisibilities() just sets the current image to visible, all the other to invisible. I experienced this to be faster than switching the image URL (using only one Image, calling img.setURL(String url);).

Now you just call updateAnim.schedule(UPDATE_TICK); and it will run.

I guess the fastest (because the browser can optimize that) would be the use of a CSS animation (creating one image and rotating it), but probably also the most complex (haven't used that much, so might as well be that it's actually more simple than I think ;). Have a look at this post about CSS rotation animations.

If you want to make a real progress bar (that actually shows progress), you need a callback that gets called on progress. Just update your images / CSS transitions in this progress callback.

Answer 2

In my point of view it is better to get an animated image(such as gif) and show it while data is loading.

There are several web-sites for generating "preloader" images: http://www.preloaders.net/ http://www.ajaxload.info