Book of Vaadin - vaadin.com

5.18. `ProgressIndicator`
Prev	Chapter 5. User Interface Components	Next

5.18. `ProgressIndicator`

The ProgressIndicator component allows displaying the progress of a task graphically. The progress is given as a floating-point value between 0.0 and 1.0.

Figure 5.39. The Progress Indicator Component

The progress indicator polls the server for updates for its value. If the value has changed, the progress is updated. Notice that the user application does not have to handle any polling event, but updating the component is done automatically.

Creating a progress indicator is just like with any other component. You can give the initial progress value as a parameter for the constructor. The default polling frequency is 1000 milliseconds (one second), but you can set some other interval with the setPollingInterval() method.

// Create the indicator
final ProgressIndicator indicator =
        new ProgressIndicator(new Float(0.0));
main.addComponent(indicator);
// Set polling frequency to 0.5 seconds.
indicator.setPollingInterval(500);

CSS Style Rules

/* Base element. */
.v-progressindicator {}
/* Progress indication element on top of the base. */
.v-progressindicator div {}

The default style for the progress indicator uses an animated GIF image (img/base.gif) as the base background for the component. The progress is a <div> element inside the base. When the progress element grows, it covers more and more of the base background. By default, the graphic of the progress element is defined in img/progress.png under the default style directory. See com.vaadin.terminal.gwt/public/default/progressindicator/progressindicator.css.

5.18.1. Doing Heavy Computation

The progress indicator is often used to display the progress of a heavy server-side computation task. In the following example, we create a thread in the server to do some "heavy work". All the thread needs to do is to set the value of the progress indicator with setValue() and the current progress is displayed automatically when the browser polls the server.

// Create an indicator that makes you look busy
final ProgressIndicator indicator =
        new ProgressIndicator(new Float(0.0));
main.addComponent(indicator);
// Set polling frequency to 0.5 seconds.
indicator.setPollingInterval(500);
// Add a button to start working
final Button button = new Button("Click to start");
main.addComponent(button);
// Another thread to do some work
class WorkThread extends Thread {
    public void run () {
        double current = 0.0;
        while (true) {
            // Do some "heavy work"
            try {
                sleep(50); // Sleep for 50 milliseconds
            } catch (InterruptedException) {}
            
            // Show that you have made some progress:
            // grow the progress value until it reaches 1.0.
            current += 0.01;
            if (current>1.0)
                indicator.setValue(new Float(1.0));
            else 
                indicator.setValue(new Float(current));
            
            // After all the "work" has been done for a while,
            // take a break.
            if (current > 1.2) {
                // Restore the state to initial.
                indicator.setValue(new Float(0.0));
                button.setVisible(true);
                break;
            }
        }
    }
}
// Clicking the button creates and runs a work thread
button.addListener(new Button.ClickListener() {
    public void buttonClick(ClickEvent event) {
        final WorkThread thread = new WorkThread();
        thread.start();
        
        // The button hides until the work is done.
        button.setVisible(false);
    }
});

Figure 5.40. Starting Heavy Work