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?

which obvious reasons? :) server side code usually responds in ms, so adding a progress bar and removing it after 100ms will look like annoying flickering — milan, Jan 19 '12 at 09:18
Well my server needs up to 3 seconds to respond due to complexity of data. I will try to optimize SQL later but it wont be under 100ms for some calls. You have made me think and I'll try not to show progress wheel where there is no need, but for some of server calls I will most definitely need it. — Nemanja Kovacevic, Jan 19 '12 at 09:56

score 5 · Accepted Answer · edited May 23 '17 at 12:09

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.

score 4 · Answer 2 · answered Jan 19 '12 at 08:07

4

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

answered Jan 19 '12 at 08:07

Vladimir Korobkov

599
3
11

score 0 · Answer 3 · answered Jul 11 '14 at 18:10

A very simple solution is to use pace.js. It's javascript script that display progress bars collecting events from the DOM. You can configure to listen to all GWT-RCP events and also when the client loads fragments. Just add the script tag to the html file where you have your GWT module loaded.

This should work "out of the box" for GWT activity and regular ajax.

<script type="text/javascript" language="javascript"
    src="js/pace.min.js"
    data-pace-options='{"elements":{"selectors":["body","script"]},"ajax":{"trackMethods":["GET","POST"]}}'></script>

plain gwt progress wheel

3 Answers3