progress bar for GWT

Question

Is there a progress bar widget that I can use with GWT or do I have to make it myself? I've tried to use the progress bars in google-web-toolkit-incubator, gwtupload and upload4gwt without any luck.

score 7 · Accepted Answer · answered Jan 22 '13 at 15:27

Some code:

import com.google.gwt.i18n.client.NumberFormat;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.Widget;

public class ProgressBar extends Widget {
    private static final String PERCENT_PATTERN = "#,##0%";
    private static final NumberFormat percentFormat = NumberFormat.getFormat(PERCENT_PATTERN);

    private final Element progress;
    private final Element percentageLabel;
    private double percentage;
    private final double max;

    public ProgressBar(double value, double max) {
        assert max != 0;
        this.max = max;

        progress = DOM.createElement("progress");
        progress.setAttribute("max", Double.toString(max));
        progress.setAttribute("value", Double.toString(value));

        percentageLabel = DOM.createElement("span");
        percentage = value / max;
        percentageLabel.setInnerHTML(percentFormat.format(percentage));
        progress.insertFirst(percentageLabel);

        setElement(progress);
    }

    public void setProgress(double value) {
        progress.setAttribute("value", Double.toString(value));
        percentage = value / max;
        percentageLabel.setInnerHTML(percentFormat.format(percentage));
    }

}

Thanks! I swapped in this for the old gwt-incubator ProgressBar, and in works with my app's file upload (which uses Apache Commons FileUpload on the server side). Two tweaks: (1) for GWT 2.6.1, import com.google.gwt.dom.client.Element since com.google.gwt.user.client.Element is deprecated; (2) I added a default constructor--public ProgressBar() { this(0.0, 100.0); } — Thad, Jul 24 '14 at 22:45

score 2 · Answer 2 · answered Jul 23 '17 at 22:48

2

Here's an HTML5 progress bar example:

In your ui.xml:

<progress ui:field="loadingProgress" style="width:100%" value="0" max="100"></progress>

In your code:

@UiField Element loadingProgress;

loadingProgress.setPropertyInt("value", 50);

answered Jul 23 '17 at 22:48

Craigo

3,384
30
22

this is the easiest one to incorporate into my ui.xml file – Stevko Sep 27 '17 at 23:53

score 2 · Answer 3 · answered Feb 28 '12 at 14:40

I don't know your requirements but HTML5 supports a progressbar tag. Here is a simple example:

Here is the html:

<progress id="bar" value="0" max="100">
    <span id="fallback">
        <p>Your browser does not support progress tag.</p>
    </span>
</progress>

and the script to see how it loads

<script>
    window.onload = function() {

        var bar = document.getElementById("bar"),
        loaded = 0;

        var load = function() {
            loaded += 10;
            bar.value = loaded;

             if(loaded == 100) {
                clearInterval(dummyLoad);
            }
        };

        var dummyLoad = setInterval(function() {
            load();
        } ,1000);
    }
</script>

Additional information: http://www.w3.org/wiki/HTML/Elements/progress Source: http://www.onlywebpro.com/2011/09/09/html5-progress-bar/

progress bar for GWT

3 Answers3