User Interface Components

Figure 5.59. Image Upload Example

5.20. 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.60. 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);

164	ProgressIndicator

User Interface Components

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. S e e com.vaadin.terminal.gwt/public/default/progressindicator/progressindicator.css.

5.20.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;

}

}

}

}

CSS Style Rules

165