web-dev-qa-db-ja.com

CSSファイルをJavaFXWebViewに適用する

CSSファイルをJavaFXWebViewオブジェクトに適用しようとしています。私が読んだことから、これでうまくいくはずですが、WebViewがスタイルなしで表示されるため、明らかに何かが欠けています。

package net.snortum.play;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class WebviewCssPlay extends Application {

    @Override
    public void start(Stage stage) {
        stage.setTitle("CSS Styling Test");
        stage.setWidth(300);
        stage.setHeight(200);

        WebView browser = new WebView();
        WebEngine webEngine = browser.getEngine();
        webEngine.loadContent("<html><body><h1>Hello!</h1>This is a <b>test</b></body></html>");

        VBox root = new VBox(); 
        root.getChildren().addAll(browser);
        root.getStyleClass().add("browser");
        Scene scene = new Scene(root);
        stage.setScene(scene);
        scene.getStylesheets().add("/net/snortum/play/web_view.css");
        stage.show();
    }

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

私のCSSファイルは次のようになります。

.browser {
    -fx-background-color: #00ff80;
    -fx-font-family: Arial, Helvetica, san-serif;
}
csswebviewjavafx
11
ksnortum

James_Dはすでに彼の回答で説明しています 「JavaFxCSS」を「HTMLCSS」に変換する方法ですが、使用する方が便利な場合があります WebEngine.setUserStylesheetLocation CSSを含むスタイルシートを設定するには：

webEngine.setUserStyleSheetLocation(getClass().getResource("style.css").toString());

style.cssにはcssコードが含まれています：

body {
    background-color: #00ff80; 
    font-family: Arial, Helvetica, sans-serif;
}
26
fabian

コードはCSSをJavaFXWebViewノードに適用します。 WebView内に表示されているHTMLドキュメントにCSSを適用しようとしています。 Webビューにはテキストを含むJavaFXノードがないため、-fx-font-familyは効果がなく、HTMLページの背景がWebViewの背景を覆い隠すため、-fx-background-colorは表示されません。

やりたいことをするためには、ロードされたドキュメントのDOMを操作し、それに（標準のHTML適用可能な）CSSを適用する必要があります。これは次のようになります。

import javafx.application.Application;
import javafx.concurrent.Worker.State;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.Text;


public class WebViewCssPlay extends Application {

    private static final String CSS = 
              "body {"
            + "    background-color: #00ff80; "
            + "    font-family: Arial, Helvetica, san-serif;"
            + "}";

    @Override
    public void start(Stage stage) {
        stage.setTitle("CSS Styling Test");
        stage.setWidth(300);
        stage.setHeight(200);

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

        webEngine.getLoadWorker().stateProperty().addListener((obs, oldState, newState) -> {
            if (newState == State.SUCCEEDED) {
                Document doc = webEngine.getDocument() ;
                Element styleNode = doc.createElement("style");
                Text styleContent = doc.createTextNode(CSS);
                styleNode.appendChild(styleContent);
                doc.getDocumentElement().getElementsByTagName("head").item(0).appendChild(styleNode);

                System.out.println(webEngine.executeScript("document.documentElement.innerHTML"));
            }
        });
        webEngine.loadContent("<html><body><h1>Hello!</h1>This is a <b>test</b></body></html>");

        VBox root = new VBox(); 
        root.getChildren().addAll(browser);
        root.getStyleClass().add("browser");
        Scene scene = new Scene(root);
        stage.setScene(scene);
//        scene.getStylesheets().add("/net/snortum/play/web_view.css");
        stage.show();
    }

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

編集：@fabianの回答も参照してください。これは、ほとんどのユースケースではるかにクリーンで望ましいものです。

12
James_D