Embedded HTML in JavaFX WebView not rendering properly -
i trying embed codemirror js editor in webview, borrowing heavily code located post. http://github.com/jewelsea/conception
javafx code editor content highlighter java code
here 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 code inside sqlttool; insert thing ${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
webview render
admittedly, don't know i'm doing here i'm new javafx , have no experience javascript. 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 code conception project down 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); }
so - aside fact proxy servers can result in counter-intuitive results there still small issue found in code after downloaded resources locally. changed html header 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 page still wasn't rendering properly. had change code:
string template = resources.tostring(getresource("codemirror.html"), charsets.utf_8); webview webview = new webview(); webview.getengine().loadcontent(template);
to :
url url = getresource("codemirror.html"); webview.getengine().load(url.toexternalform());
it seems when load html using .loadcontent() there no context relative links. able determine putting snippet of js html , finding document location "blank". maybe should have been obvious
Comments
Post a Comment