Thursday, January 8, 2015

GWT Progress Bar

Recently, I needed to add a Progress Bar to my main work project.

I had a look around, and there are a few different solutions, but I ended up writing something that uses the HTML5  <progress> element.
eg.,


This picture shows the progress bar dropped into a dialog box, with a status label underneath it.



And, here is the code, in case anyone wants to add a progress bar in a few lines:


package ...;

import com.google.gwt.dom.client.Element;
import com.google.gwt.user.client.ui.HTML;

public class ProgressBar extends HTML 
{
    public ProgressBar()
    {
        super("<progress style='width: 98%;'></progress>");
    }
 
    /**
     * Set the progress indicator the the specified values
     * @param value Current progress value
     * @param max Target/complete value
     */
    public void setProgress(int value, int max)
    {
        Element progressElement = getElement().getFirstChildElement();
        progressElement.setAttribute("value", String.valueOf(value));
        progressElement.setAttribute("max", String.valueOf(max));
    }
 
    /**
     * Remove the progress indicator values.  On firefox, this causes the
     * progress bar to sweep back and forth.
     */
    public void clearProgress()
    {
        Element progressElement = getElement().getFirstChildElement();
        progressElement.removeAttribute("value");
        progressElement.removeAttribute("max");
    }
}

Have fun!

1 comment:

Sam said...

Well, I didn't try this yet. But searching for the same. Thanks a lot for sharing.