Question

我的目标是能够使用控制器类将html内容放入fxml文档中的WebView对象。我的FXML文档中还有其他对象，如按钮和图像，我希望WebView只是GUI的一部分。我可以使用控制器类将内容放在FXML文档中的TextArea中。为WebView执行此操作有点棘手，因为它需要WebEngine才能使用它。我知道如何在没有FXML文档的情况下自行启动WebView，但有人知道我的目标是否可以实现吗？

这是我在控制器类中的尝试，但是我得到了一个调用目标异常：

public class FXMLDocumentController implements Initializable {

    @FXML
    private Label label;
    WebEngine engine;

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

    //access WebView in FXML document
    @FXML WebView mywebview; //mywebview is the fxid
    public void displayWeb() {
        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) {
        displayWeb();
    }     

}

Answer 1

这是一种简洁的概念（至少如果我明白你在问什么:-)。我喜欢这个。感谢它的思考。

在重新阅读你的问题时，我可能完全误解了它...如果是这样，我想你可以忽略我的答案。

在FXML中内联指定HTML内容

不幸的是，WebView是最终的，因此您无法扩展WebView以将内容加载方法添加到可在FXML中指定的元素。

解决方案是在WebView周围提供一个小包装类，FXML可以实例化并设置内容。我选择让包装类继承StackPane，这样包装器就是一个Node，并且可以在FXML中实例化，无论你想在哪里使用Node。

您可能可以使用Builder类而不是像我一样的包装类，但是对于FXML这样做的文档非常缺乏，所以我没有尝试过。

为方便起见，将嵌入的html内容包装在CDATA construct中。然后，您不必转义所有html字符，可以保留<，>和其他字符，而不是将这些字符重新编码为<，{{1等等。

Embedded WebView

embeddedwebview /嵌入webview.fxml

&gt;

embeddedwebview / EmbeddedWebViewApp.java

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.VBox?>
<?import embeddedwebview.EmbeddedWebView?>
<VBox xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
      prefHeight="150.0" prefWidth="220.0">
  <padding>
    <Insets bottom="10.0" left="10.0" right="10.0" top="10.0"/>
  </padding>
  <EmbeddedWebView fx:id="embeddedWebView">
    <content>
      <![CDATA[
        <h3>Embedded WebView</h3>
        <p>HTML content inline in FXML</p>
      ]]>
    </content>
  </EmbeddedWebView>
</VBox>

embeddedwebview / EmbeddedWebView.java

package embeddedwebview;

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

public class EmbeddedWebViewApp extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        FXMLLoader loader = new FXMLLoader(
                getClass().getResource(
                        "embedded-webview.fxml"
                )
        );
        Pane pane = loader.load();

        stage.setScene(new Scene(pane));
        stage.show();
    }

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

引用html文档的替代用法。

使用以下内容替换上述fxml中的EmbeddedWebView元素：

import javafx.scene.layout.StackPane;
import javafx.scene.web.WebView;

/**
 * A WebView which has getters and setters for content or a document url.
 *
 * Usage in FXML element is: 
 * 
 *   EITHER by specifying a url to a html document:
 * 
 *      <EmbeddedWebView fx:id="embeddedWebView" url="/embeddedwebview/embedded.html">
 *          
 *   OR by specifying CDATA escaped html content:
 *   
 *     <EmbeddedWebView fx:id="embeddedWebView">
 *         <content>
 *             <![CDATA[
 *                 <h3>Embedded WebView</h3>
 *                 <p>HTML content inline in FXML</p>
 *             ]]>
 *         </content>
 *     </EmbeddedWebView>
 *
 */
public class EmbeddedWebView extends StackPane {

    final private WebView webView;

    // For space efficiency, an alternate implementation could just 
    // rely on the content in the WebView itself rather than 
    // duplicating the content here, but it was simple to implement with a duplicate. 
    private String content;

    private String url;

    public EmbeddedWebView() {
        webView = new WebView();
        getChildren().add(webView);
    }

    public String getContent() {
        return content;
    }

    /**
     * Loads html content directly into the webview.
     * @param content a html content string to load into the webview.
     */
    public void setContent(String content) {
        this.content = content;
        webView.getEngine().loadContent(content);
    }

    public String getUrl() {
        return url;
    }

    /**
     * Loads content into the WebView from a given url.
     * The allowed url types are http, https and file.
     *
     * Additionally, content can be loaded from a classpath resource.
     * To be loaded from the classpath, the url must start with a / character
     * and specify the full resource path to the html
     * (i.e., relative resource path specifiers are not allowed).
     *
     * @param url the location of the html document to be loaded.
     */
    public void setUrl(String url) {
        if ( url == null || ! (url.startsWith("/") || url.startsWith("http:") || url.startsWith("https:") || url.startsWith("file:"))) {
            throw new IllegalArgumentException("url must start with one of http: file: https: or /");
        }

        this.url = url;

        if (url.startsWith("/")) {
            webView.getEngine().load(
                    EmbeddedWebView.class.getResource(url).toExternalForm()
            );
        } else {
            webView.getEngine().load(
                    url
            );
        }
    }
}

embeddedwebview / embedded.html

<EmbeddedWebView fx:id="embeddedWebView" url="/embeddedwebview/embedded.html"/>

setUrl函数是否设置了getUrl返回的全局变量url？

url成员是EmbeddedWebView的本地成员，而不是全局是应用程序的范围，但是，你有一般的想法，<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <h3>Embedded WebView</h3> <p>HTML content inline in FXML</p> </body> </html>是一个setter，FXML通过反射查找它来设置url EmbeddedWebView，你可以使用public setURL()函数从任何类中检索EmbeddedWebView的url。

JavaFX在FXML文档中编辑WebView

1 个答案: