2015-09-25 10 views
8

पर सीएसएस फ़ाइल को लागू करना मैं जावाएफएक्स वेबव्यू ऑब्जेक्ट में एक सीएसएस फ़ाइल लागू करने की कोशिश कर रहा हूं। जो मैंने पढ़ा है, उससे यह चाल चलनी चाहिए, लेकिन स्पष्ट रूप से मुझे कुछ याद आ रहा है क्योंकि 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); 
    } 
} 

मेरे सीएसएस फ़ाइल इस तरह दिखता है:

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

क्या आप 'वेब व्यू' की शैली को बदलने या 'वेब व्यू' में प्रदर्शित HTML पृष्ठ को बदलने की कोशिश कर रहे हैं? –

+0

वेबव्यू में एचटीएमएल। – ksnortum

उत्तर

18

James_D already explained in his answer कैसे "JavaFX सीएसएस" से "एचटीएमएल सीएसएस" कन्वर्ट करने के लिए है, लेकिन यह अधिक WebEngine.setUserStylesheetLocation उपयोग करने के लिए एक स्टाइलशीट कि सीएसएस शामिल स्थापित करने के लिए सुविधाजनक हो सकता है:

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

style.css शामिल सीएसएस कोड:

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

यह उपयोगी है और बहुत अच्छा काम किया। धन्यवाद @ फ़ैबियन। –

10

आपका कोड JavaFX WebView नोड के लिए सीएसएस लागू होता है; आप WebView के अंदर प्रदर्शित एचटीएमएल दस्तावेज़ पर सीएसएस लागू करने की कोशिश कर रहे हैं। चूंकि वेब व्यू में किसी भी पाठ के साथ कोई जावाएफएक्स नोड्स नहीं है, -fx-font-family का कोई प्रभाव नहीं पड़ता है, और HTML पृष्ठ की पृष्ठभूमि वेबव्यू की पृष्ठभूमि को अस्पष्ट कर देगी, इसलिए -fx-background-color दिखाई नहीं देगी।

जो भी आप चाहते हैं उसे करने के लिए, आपको लोड किए गए दस्तावेज़ के डीओएम में हेरफेर करने और इसे (मानक, एचटीएमएल-लागू) सीएसएस लागू करने की आवश्यकता है।

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

संपादित करें:: यह कुछ ऐसा दिखाई देगा भी @ फैबियन का जवाब है, जो अधिक स्वच्छ और उपयोग के मामलों की विशाल बहुमत में पसंद किया जाता है देखते हैं।

संबंधित मुद्दे