Embedded HTML in JavaFX WebView not rendering properly

Question

I am trying to embed CodeMirror js editor in a Webview, borrowing heavily from the code that I located from this post. http://github.com/jewelsea/conception

JavaFX code editor with content highlighter for Java Code

Here is the html template

<!doctype html>
<html>
    <head>  
        <link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
        <link rel="stylesheet" href="http://codemirror.net/theme/cobalt.css">  
        <script src="http://codemirror.net/lib/codemirror.js"></script>  
        <script src="http://codemirror.net/mode/sql/sql.js"></script>
    </head>
    <body>
        <form>
            <textarea id="code" name="code">--This is code inside the SQLTtool;&#10;INSERT INTO thing&#10;${code}</textarea>
        </form>
        <script>  var editor = CodeMirror.fromTextArea(document.getElementById("code"), { lineNumbers: true, matchBrackets: true, mode: "text/x-mssql", lineWrapping: true, theme: "cobalt"});
        </script>
    </body>
</html>

Firefox Render

enter image description here

Webview Render

enter image description here

Admittedly, I don't really know what I'm doing here as I'm new to JavaFX and have no experience with JavaScript. Any ideas?

Env

Win 7 64

java version "1.8.0_40" Java(TM) SE Runtime Environment (build 1.8.0_40-b25) Java HotSpot(TM) 64-Bit Server VM (build 25.40-b25, mixed mode)

Code

(I've stripped the code from the Conception project down to a more basic setup)

@Override
public void start(Stage stage) throws Exception {   

    //set-up window 
    stage.setTitle("SQL Tool");
    stage.setMinWidth(800);
    stage.setMinHeight(600);
    stage.setScene(createScene());      
    stage.show();
}

private Scene createScene() throws IOException{

    final AnchorPane ap1 = new AnchorPane(createButton());
    final AnchorPane ap2 = new AnchorPane(createWebView());
    ap2.setBackground(new Background(new BackgroundFill(Color.AZURE,CornerRadii.EMPTY,Insets.EMPTY)));

    Scene scene = new Scene(layoutScene(
            ap1,
            ap2
    ));

    return scene;
}

private WebView createWebView() throws IOException{
    String template = Resources.toString(getResource("codemirror.html"), Charsets.UTF_8);
    WebView webview = new WebView();
    webview.getEngine().loadContent(template);
    AnchorPane.setLeftAnchor(webview, 10.0);
    AnchorPane.setRightAnchor(webview, 10.0);
    AnchorPane.setBottomAnchor(webview, 10.0);
    AnchorPane.setTopAnchor(webview, 10.0);
    return webview;
}

//set-up primary layout
private SplitPane layoutScene(Node... nodes) {
    final SplitPane layout = new SplitPane();
    layout.setOrientation(Orientation.VERTICAL);
    layout.setDividerPositions(.4f);
    layout.getItems().addAll(nodes);
    return layout;
}

private URL getResource(String name) {
    return getClass().getResource("resources/" + name);
}

@ItachiUchiha Thanks! Max 2 links for < 10 rep noobs... so I had to nerf the links at the top. — bazaarjack
– bazaarjack, Commented Apr 15, 2015 at 0:42
Works perfectly for me. Can you update the question with the code you are using as well as the environment you are running it on? — ItachiUchiha
– ItachiUchiha, Commented Apr 15, 2015 at 7:17
Still works perfectly for me. Can you the internet access for java. I guess it is not able to load the js and css libraries to render the view. — ItachiUchiha
– ItachiUchiha, Commented Apr 15, 2015 at 14:15
I am behind a proxy and apparently there is a lot of filtering going on. I was able to pull all the files down and then use a replace statement to get it working temporarily until I can determine the relative links for local files — bazaarjack
– bazaarjack, Commented Apr 15, 2015 at 18:15

bazaarjack · Accepted Answer · 2015-04-15 19:00:59Z

So - aside from the fact that proxy servers can result in counter-intuitive results there was still a small issue I found in my code after I downloaded all the resources locally. I changed my HTML header to this:

<head>  
    <link rel="stylesheet" href="./codemirror.css">
    <link rel="stylesheet" href="./cobalt.css">  
    <script src="./codemirror.js"></script>  
    <script src="./sql.js"></script>
</head>

And the page still wasn't rendering properly. I had to change this code:

String template = Resources.toString(getResource("codemirror.html"), Charsets.UTF_8);
WebView webview = new WebView();
webview.getEngine().loadContent(template);

To this :

URL url = getResource("codemirror.html");
webview.getEngine().load(url.toExternalForm());

It seems that when you load the html using .loadContent() there is no context for the relative links. I was able to determine this by putting a snippet of JS into the html and finding that the document location was "blank". Maybe that should have been obvious

Collectives™ on Stack Overflow

Embedded HTML in JavaFX WebView not rendering properly

Env

Code

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Env

Code

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related