JavaFXのWebViewでシーンCSSを無視する

Question

javafx.scene.web.WebViewを使用してsite/htmlをロードすると、そのシーンは私のシーンのカスタムスタイリングの影響を受けるようです。この問題を示すための最小限の例。

Main.java

public class Main extends Application { 

    @Override 
    public void start(Stage primaryStage) throws Exception { 
     VBox root = new VBox(); 

     primaryStage.setScene(new Scene(root, 900, 900)); 

     String css = Main.class.getResource("/test.css").toExternalForm(); 
     primaryStage.getScene().getStylesheets().add(css); 

     WebView webView = new WebView(); 

     root.getChildren().add(webView); 

     webView.getEngine().load("http://google.pl"); 

     primaryStage.show(); 
    } 


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

test.css

.text-area, 
.text-field { 
    -fx-background-color: red; 
} 

これは最終的に

私はもちろんのwebview.getEngine().dontInheritStyles()のような方法をご希望のどれもありません、その結果、私はできませんでしたそうでなければそれを行う方法を見つける。試しました：

webView.getStylesheets().clear(); 
webView.setStyle(null); 
webView.getStyleClass().clear(); 

どれも働いていませんでした。私がこの仕事をすることができたと思う方法の1つは、同じシーンを使わないサブウィンドウでwebviewを開くことですが、私は既存のアプリケーションビューに埋め込むことを望みますそのオプションは私の最後の手段となり、むしろそれを避けます。

Answer 1

JavaFXとSwingの組み合わせなど、何らかの種類のハッキングを使用できます。あなたは

することができますJavaFXのにスイングコントロールを埋め込むことができます - - あなたはスイングに

SwingNodeをJavaFXのコントロールを埋め込むことができます

• JFXPanel：

  は、次の2つのクラスを持っていますラッパークラスのJFXPanelクラスとSwingNodeクラスの使用を組み合わせてください：

  public class Styleless<T extends Parent> extends StackPane { 
      private T root; 
  
      public Styleless(T root) { 
       this.root = root; 
  
       JFXPanel jfxPanel = new JFXPanel(); 
       jfxPanel.setScene(new Scene(root)); 
  
       SwingNode swingNode = new SwingNode(); 
       swingNode.setContent(jfxPanel); 
  
       getChildren().add(swingNode); 
      } 
  
      public T getRoot() { 
       return root; 
      } 
  } 
  

  そして、あなたはこのようにそれを使用することができます：あなたはまた、要素がそれらに適用されるスタイルを取得した管理するために、あなたのCSSでスタイルクラスを使用することができます

  public class Main extends Application { 
  
      @Override 
      public void start(Stage primaryStage) throws Exception { 
       VBox root = new VBox(); 
       primaryStage.setScene(new Scene(root, 900, 900)); 
  
       String css = Main.class.getResource("/test.css").toExternalForm(); 
       primaryStage.getScene().getStylesheets().add(css); 
  
       WebView webView = new WebView(); 
       webView.getEngine().load("http://google.pl"); 
  
       Styleless<WebView> webViewStyleless = new Styleless<>(webView); 
  
       root.getChildren().add(webViewStyleless); 
       VBox.setVgrow(webViewStyleless, Priority.ALWAYS); 
  
       primaryStage.show(); 
      } 
  
      public static void main(String[] args) { 
       launch(args); 
      } 
  } 
  

Answer 2

。あなたのCSSで 'myapplication'クラスを定義し、そのクラスをルートノードに追加します。

test.css

/* any text fields inside a container with the myapplication style class */ 
.myapplication > .text-field{ 
    -fx-background-color: red; 
} 

/* any text areas inside a container with the myapplication style class */ 
.myapplication > .text-area{ 
    -fx-background-color: red; 
} 

Main.java

この方法は、親スタイルクラス」を持っているテキストフィールドにスタイルを適用します '>' CSSセレクタ（ https://www.w3schools.com/cssref/css_selectors.asp）を使用して

... 
root.getStyleClass().add("myapplication"); 
TextField txtField = new TextField("Application text field"); 
root.getChildren().addAll(webView, txtField); 
... 

私のアプリケーション'。 WebViewのが作成されると、それはスタイルクラスのWebビュー '（https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#webview）が

スタイルが継承され値防ぐために、何の現実的な方法はありませんが、スタイルクラスは子供に追加されません。