JavaFX | Using JavaFX UI Controls | Working With Progress Bars and Progress Indicators

Progress Bar, Progress Indicator

The ProgressIndicator class and its direct subclass ProgressBar provide the capabilities to indicate that a particular task is processing and to detect how much of this work has been already done. While the ProgressBar class visualizes the progress as a completion bar, the ProgressIndicator visualizes the progress in the form of a dynamically changing pie chart. Sometimes an application cannot determine the full completion time of a task. In that case, progress controls remain in indeterminate mode until the length of the task is determined.

Look at the following application, which shows different states of the progress controls depending on their progress variable value.

States of the progress bar and the progress indicator

Take a moment to review the source code of the application. A positive value of the progress variable between 0 and 1 indicates the percentage of progress. For example, 0.4 corresponds to 40%. A negative value for this variable indicates that the progress is in indeterminate mode. Use the indeterminate variable to check whether the progress control is in the indeterminate mode.

Source Code

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.geometry.VPos;
import javafx.scene.control.Label;
import javafx.scene.control.ProgressBar;
import javafx.scene.control.ProgressIndicator;

def values = [-1.0, 0, 0.6, 1.0];

Stage {
    title: "Progress Sample"
    scene: Scene {
        width: 250
        height: 150
        content: [
            VBox {
                spacing: 5
                content: for (value in values){
                    HBox {
                        spacing: 2
                        nodeVPos: VPos.CENTER
                        content: [
                            Label {text: bind "progress: {value}"},
                            ProgressBar {progress: bind value}
                            ProgressIndicator {progress: bind value}
                        ]
                    }
                }
            }
        ]
    }
}

This application was initially simplified to render all the possible states of the progress controls. In real-world applications, the progress variable can be obtained through the computeProgress function, as shown in the following code fragment.

Source Code

ProgressBar {
    progress: bind ProgressBar.computeProgress( 100, value)
}

Alternatively, the progress variable can be bound to the Number variables of the other objects.

Source Code

package progressindicatorsample;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.geometry.Insets;

var slider: Slider;

Stage {
    title: "Application title"
    scene: Scene {
        width: 250
        height: 80
        content: [
            VBox {
                padding: Insets {top: 10 left: 10}
                spacing: 5
                content: [
                    Label {text: "Project completion:"},
                    HBox {
                        spacing: 10
                        content: [
                            slider = Slider {min: 0 max: 100},
                            ProgressIndicator {progress: bind slider.value / 100}
                        ]
                    }
                ]
            }
        ]
    }
}

In this example, the progress variable is bound to the slider's value. When compiled and run, this application produces the following controls.

A progress indicator bound to a slider

The following code fragment shows how to use the computeProgress

Source Code

ProgressBar {
    progress: bind ProgressBar.computeProgress( 100, value)
}

Learn how to use the ProgressBar and ProgressIndicator controls to show progress of an image download. The image is downloaded in the background mode from the remote location through the HTTP protocol. The following screen capture indicates that 71% of the targeted image is loaded.

Take a closer look at the source code of the application.

Source Code

package progresssample;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.image.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;

def image = Image {
    backgroundLoading: true
    url: "http://javafx.com/docs/howto/im/covfloweg.png"
}
var hb: HBox;

Stage {
    title: "Image loading"
    scene: Scene {
        fill: Color.rgb(209, 209, 209)
        width: 400
        height: 280
        content: [
            hb = HBox {
                spacing: 35
                content: [
                    ProgressBar {
                        layoutY: 5
                        layoutInfo: LayoutInfo {width: 250}
                        progress: bind ProgressBar.computeProgress( 100,
                                                                 image.progress)
                    },
                    ProgressIndicator {
                        progress: bind ProgressBar.computeProgress( 100,
                                                                 image.progress)
                    }
                ]
            },
            ImageView {
                image: image
                layoutY: hb.height + 30
            }
        ]
    }
}

The progress variables of the ProgressBar and ProgressIndicator controls are bound to the progress value of the image. Note that the progress of the image download is defined in percent and is between 0 and 100, while the progress variable of the UI controls is between 0 and 1. So, you need to use the computeProgress function to pass the actual value to the progress controls.

When the image file has been downloaded, the following content is shown.

The image downloading is completed

You can also change the look of the progress bar or the progress indicator to align it with the overall style of your graphical content. For more information, see Applying CSS to UI Controls.

Progress Bar, Progress Indicator

Related Documents

Samples That Use Progress Controls