JavaFX 在 FXML 文档中打开 WebView

Question

我可以使用 JavaFX WebEngine 和 WebView 成功地打开一个显示 html 文档/url 的 WebView，但我想在 FXML 文档中打开一个 WebView 以及按钮和 ImageView 等其他元素。我的目标是有一个 GUI 来显示图像，其中包含一个显示在 WebView 对象内的 html 文档。

这是自己打开 WebView 的程序：

public class HTMLViewer extends Application {

    private Scene scene;
    MyBrowser myBrowser;
    TextArea myTextArea;


public static void main(String[] args) throws IOException, BadLocationException {

    launch(args);
}

    @Override
    public void start(Stage primaryStage) {
    primaryStage.setTitle("HTMLViewer");

    myBrowser = new MyBrowser();
    scene = new Scene(myBrowser, 800, 600);

    primaryStage.setScene(scene);
    primaryStage.show();
}

class MyBrowser extends Region{

    final String hellohtml = "chang.htm"; //html file to view

    WebView webView = new WebView();
    WebEngine webEngine = webView.getEngine();

    public MyBrowser(){

        URL urlHello = getClass().getResource(hellohtml); 
        webEngine.load(urlHello.toExternalForm());

        getChildren().add(webView);
    }
  }    
}

这是我通过 FXML 文档加载 WebView 的尝试，该文档需要 WebView.java 主类、WebViewController.java 和 WebView.fxml

WebView.java

public class WebView extends Application {
private Object primaryStage;

public static void main(String[] args) {
    launch(args);
}

@Override
public void start(Stage primaryStage) throws IOException {
    Parent root =    FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
    primaryStage.setTitle("HTMLViewer");
    Scene scene = new Scene(root);

    primaryStage.setScene(scene);
    primaryStage.show();
}



WebEngine getEngine() {
    throw new UnsupportedOperationException("Not supported yet."); //To change body of generated methods, choose Tools | Templates.
}

}

WebViewController.java

public class FXMLDocumentController implements Initializable {

@FXML
private Label label;
//WebView mywebview = new WebView();
String link = "https://www.google.com";
WebEngine engine;

@FXML
private void handleButtonAction(ActionEvent event) {
    System.out.println("You clicked me!");
    label.setText("Hello World!");
}

@FXML WebView mywebview; //access WebView in FXML document
public void displayWeb() {
    WebEngine engine = mywebview.getEngine();
    final String hellohtml = "chang.htm"; //HTML file to view in web view

    URL urlHello = getClass().getResource(hellohtml);
    engine.load(urlHello.toExternalForm());
}

@Override
public void initialize(URL url, ResourceBundle rb) {
    engine = mywebview.getEngine();
    engine.load(link);
    displayWeb();
}    

}

WebView.FXML

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.web.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" prefHeight="600.0" prefWidth="900.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8" fx:controller="webview.FXMLDocumentController">
    <children>
        <Button fx:id="button" layoutX="23.0" layoutY="24.0" onAction="#handleButtonAction" text="Click Me!" />
        <Label fx:id="label" layoutX="126" layoutY="120" minHeight="16" minWidth="69" />
      <WebView fx:id="mywebview" layoutX="102.0" layoutY="20.0" prefHeight="559.0" prefWidth="775.0" />
    </children>
</AnchorPane>

运行应用程序时出现异常

无法将 webview.WebView 字段 webview.WebViewController.mywebview 设置为 javafx.scene.web.WebView

我的目标可以实现吗？如果是这样有没有人知道这样做的方法？如有任何帮助，我将不胜感激，谢谢。

Answer 1

从 FXML 将 WebView 加载到控制器时，它的工作方式与任何其他控件一样。下面是一个显示网站的最小示例程序。

Main.java

package webview;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application
{
    @Override
    public void start(Stage primaryStage) throws Exception
    {
        Parent root = FXMLLoader.load(getClass().getResource("WebView.fxml"));
        Scene scene = new Scene(root, 600, 400);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args)
    {
        launch();
    }
}

WebViewController.java

package webview;

import javafx.fxml.FXML;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;

public class WebViewController
{
    @FXML
    private WebView webView;

    @FXML
    private void initialize()
    {
        WebEngine engine = webView.getEngine();
        engine.load("http://www.example.org");
    }
}

我在这里没有使用 Initializable interface，因为它在 JavaFX 8 中有些过时了。

此接口已被自动将位置和资源属性注入控制器所取代。 FXMLLoader 现在将自动调用控制器定义的任何适当注释的无参数 initialize() 方法。建议尽可能使用注入方式。

WebView.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.web.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="webview.WebViewController">
   <children>
      <WebView fx:id="webView" layoutX="100.0" layoutY="176.0" prefHeight="400.0" prefWidth="600.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
   </children>
</AnchorPane>

为什么这在您的控制器中不起作用？因为你导入了错误的 WebView。在控制器中，webView 变量是您的自定义 webview.WebView 类的一个实例，它扩展了 Application 而不是控件。 FXMLLoader 试图从 FXML 文件中分配 javafx.scene.web.WebView 并失败，因为类型不兼容。