Applicazione del file CSS a JavaFX WebView

Sto tentando di applicare un file CSS a un oggetto WebView JavaFX. Da quello che ho letto, questo dovrebbe fare il trucco, ma evidentemente mi manca qualcosa perché la WebView viene visualizzata senza alcuno stile.Applicazione del file CSS a JavaFX 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); 
    } 
}

mio file CSS è simile al seguente:

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

fonte

2015-09-25 ksnortum

Stai cercando di cambiare lo stile di 'WebView' o della pagina HTML visualizzata in' WebView'? –

HTML in WebView. – ksnortum

James_D already explained in his answer come convertire "JavaFX CSS" a "CSS HTML", ma può essere più conveniente utilizzare WebEngine.setUserStylesheetLocation per impostare un foglio di stile che contiene il CSS:

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

style.css contiene il codice css:

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

fonte

2015-12-17 16:35:16 fabian

È utile e ha funzionato molto bene. Grazie, @fabian. –

Il codice si applica CSS al nodo JavaFX WebView; si sta tentando di applicare CSS al documento HTML visualizzato all'interno di WebView. Poiché la visualizzazione Web non ha nodi JavaFX con alcun testo, -fx-font-family non ha alcun effetto e lo sfondo della pagina HTML oscurerà lo sfondo di WebView, pertanto -fx-background-color non sarà visibile.

Per fare ciò che si desidera, è necessario manipolare il DOM del documento caricato e applicare a esso (standard, HTML applicabile) CSS. Questo sarebbe simile:

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

Edit: anche vedere la risposta @ di Fabian, che è molto più pulito e preferibile nella stragrande maggioranza dei casi d'uso.

fonte

2015-09-25 15:40:03

Applicazione del file CSS a JavaFX WebView

risposta

Problemi correlati