如何在JavaFX中为网页加载过程创建进度条？

Question

我正在使用一个使用WebView的JavaFX应用程序。我想制作一个ProgressBar，向用户显示加载页面的进度。我知道如何创建一个ProgressBar，以及如何使用它，但我无法弄清楚如何获得WebView / WebEngine的进展。如何获得进展以更新ProgressBar？

Answer 1

您可以像下面的代码一样：

使用后台线程，java.util.Timer或Future检索任务的方法仍然有效。但JavaFX有一个内置的API来做这样的事情，它是Service和任务类（使用ScheduleService进行重复任务）。

//在JavaFX线程上

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();

可以多次重复使用相同的服务（调用cancel（）和start（）或restart（）），而Task只能使用一次（每次启动时服务都会创建一个新任务）。

Answer 2

从WebEngine的文档：

加载总是发生在后台线程上。在安排后台作业后立即启动加载返回的方法。要跟踪进度和/或取消作业，请使用Worker方法提供的getLoadWorker()实例。

您所要做的就是观察progress的Worker属性。这是一个小例子：

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;
    }

}