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.
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);
/* 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
.
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); } });