How to make progress bar for web pages loading process in JavaFX?

Question

I am working on a JavaFX application which uses WebView . I'd like to make a ProgressBar which shows the user the progress of loading a page. I know how to create a ProgressBar , and how to work with it, but I can't figure out how to get the progress of the WebView / WebEngine . How do I get the progress in order to update the ProgressBar ?

Answer 1

You can do it like below code:

Method to retrieve tasks using a background thread, java.util.Timer or Future still work. But JavaFX has a built-in API for doing such thing it's the Service and Task classes (used ScheduleService for recurring tasks).

// On the JavaFX thread.

final Service<Foo> service = new Service<Foo> {  

    @Override  
    protected Task<Foo> createTask() {  
        return new Task<Foo>() {  

            @Override  
            protected Foo call() throws Exception {  
              // On another thread.  
              [...]  
              if (isCancelled()) {  
                  updateMessage("Cancelled");  
                  return null;  
              }  
              updateProgress(currentProgress++, totalProgress);  
              updateMessage("Now doing stuff");  
              [...]  
              return result;  
            }  
        };  
    }  
};  
progressBar.progressProperty().bind(service.progressProperty());  
service.setOnSucceeded(event -> {  
    // On the JavaFX thread.  
    progressBar.progressProperty().unbind();  
    final Foo foo = (Foo)event.getSource().getValue();  
    // Pass the result to the view.  
    [...]  
});  
service.setOnCancelled(event -> {  
    // On the JavaFX thread.  
    progressBar.progressProperty().unbind();  
    [...]  
});  
service.setOnFailed(event -> {  
    // On the JavaFX thread.  
    progressBar.progressProperty().unbind();  
    final Throwable ex = event.getSource().getException();  
    // Log and show.  
    [...]  
});  
service.start();

The same Service can be reused several times (call either cancel() and start() or restart()) while a Task can only be used once (the Service will create a new Task each time it starts).

Answer 2

From the documentation of WebEngine :

Loading always happens on a background thread. Methods that initiate loading return immediately after scheduling a background job. To track progress and/or cancel a job, use the Worker instance available from the getLoadWorker() method.

All you have to do is observe the progress property of the Worker . Here's a small example:

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.geometry.Insets;
import javafx.geometry.Orientation;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ProgressBar;
import javafx.scene.control.Separator;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) {
        WebView view = new WebView();
        BorderPane root = new BorderPane(view, createTop(view), null, null, null);
        primaryStage.setScene(new Scene(root, 1000, 600));
        primaryStage.setTitle("WebView Example");
        primaryStage.show();
    }

    private VBox createTop(WebView view) {
        ProgressBar progBar = new ProgressBar();
        progBar.progressProperty().bind(view.getEngine().getLoadWorker().progressProperty());
        progBar.visibleProperty().bind(
                Bindings.when(progBar.progressProperty().lessThan(0).or(progBar.progressProperty().isEqualTo(1)))
                        .then(false)
                        .otherwise(true)
        );
        progBar.managedProperty().bind(progBar.visibleProperty());
        progBar.setMaxWidth(Double.MAX_VALUE);

        VBox top = new VBox(5, createSearchBar(view), progBar, new Separator());
        top.setAlignment(Pos.CENTER);
        return top;
    }

    private HBox createSearchBar(WebView view) {
        TextField urlField = new TextField("https://stackoverflow.com/");
        view.getEngine().locationProperty().addListener(obs -> urlField.setText(view.getEngine().getLocation()));

        Button loadBtn = new Button("Load");
        loadBtn.setOnAction(event -> {
            event.consume();
            view.getEngine().load(urlField.getText());
        });
        loadBtn.disableProperty().bind(view.getEngine().getLoadWorker().runningProperty());

        HBox searchBar = new HBox(5, urlField, new Separator(Orientation.VERTICAL), loadBtn);
        searchBar.setPadding(new Insets(10, 10, 3, 10));
        searchBar.setAlignment(Pos.CENTER);
        HBox.setHgrow(urlField, Priority.ALWAYS);

        return searchBar;
    }

}