Is there a way for me to render and parse the SVG element from a html page rendered by javascript in Java,
for example: http://bl.ocks.org/mbostock/raw/4063269/, which in the case is using d3.js.
If I understood you question correctly, your problem is that tools you used (HtmlUnit) cannot handle complex JS (d3.js).
In this case there is nothing better than using an actual browser. You can use Selenium to open your page with a remote controlled browser instance and get JS rendered html from there.
This tutorial contains pretty much all you need. Except the getting html part, you can find it in this SO answer.
After that you can feed the html to any parser you want.
EDIT
Just thought of another way, you can try WebKit Html2Pdf. Its purpose is to create PDF files but it uses WebKit under the hood and you can inject custom script (like document.onload callback) that will post SVG contents to you service after page is loaded.
But I wouldnt go that road, it has many limitations (basically only works for direct urls) and overall is pretty messed up.
If what you're trying to do is get the SVG content as a String, Selenium is your best choice, like #chimmi said. But, you might get away without a real browser window opening by using PhantomJS instead.
In theory, it should work like this:
System.setProperty("phantomjs.binary.path", "/path/to/phantomjs");
WebDriver driver = new PhantomJSDriver();
// Open your page with SVG
driver.get("http://localhost:8080/svgpage");
// Find the SVG
WebElement svg = driver.findElement(By.tageName("svg"));
// Get its XML content
String xml = svg.getAttribute("outerHTML");
From here, you could use Batik if you want to actually render the SVG on screen in your non-web app.
Or, if all you wanted was to make assertions on the SVG contents for testing purposes, remember you can select sub-elements using normal CSS or XPath selectors:
//Select all <path> elements within the SVG
Lis<WebElement> pathElementsInSVG = svg.findElements(By.tagName("path"));
//Assert there is 4 <path>s
assert pathElementsInSVG.size() == 4
Related
The functionality for the project that I am currently working is to get data from a WYSIWYG editor and convert all the input to a PDF document. The problem is sometimes there is necessary to add wider tables and this produces a truncated visualization of them.
To solve this problem, I added to the editor (specifically, CKEditor) a HR button but I renamed it to "Change page orientation", so users can click that before inserting a table. In Java, I used iText 7 to detect this element (<hr>) and change the page orientation. This works like a charm.
Example using iText with a simple table
Now, requirements changed and for license purposes we need to replace iText for another HTML to PDF converter, but we need to keep this functionality.
I found OpenHTMLToPdf and I liked it, but I didn't find the way to replicate this page orientation when a hr (or another specific element) is found.
How can I solve that? I can use whatever library as long as they are open source.
I'm working on a mobile-app that uses cordova, so it's basically a html-website runing in an app. And I have a lot of elements and html-code that has to be present on all pages, e.g. navigation but also popups and so on and so on.
While working on larger webprojects I usually wrap these kind of code-segments in php-files and use "php include" to create my html file. Here however I can't work with php since there is no server. So since I would like to avoid having countless copies of the same code in every html-file, I'm looking for a way to include html code into an html file using jquery maybe?
I did try it with:
$("#includeContent1").load( "mod_navigation.html" );
and
$.get('mod_navigation.html', function(data) { $('body').append(data);});
Both worked, not as great as php, but did the trick. Problem is, the additional content (in this case the navigation) is being loaded "after" the parent html file is shown, making the navigation just pop up with a slight delay. This looks just horrible, because the navigation at the bottom of the screen just keeps flickering while using the app.
Is there a way to avoid these delays? Maybe by jumping to the new page AFTER everything in the html file has been loaded ... or any other way?
could you just try to create the whole DOM in a variable, and when all the HTML code is saved in the variable append it to the body? Say
$("body").empty(); // clear all
var content = "";
/* start to create content here */
$("body").append(content);
Althoug I have no idea how fast this is...
Cheers
You cannot use JavaScript that's on your page to preprocess that page's HTML as it is part of the document and therefore by definition executed after the document has been loaded.
You could however use a callback function to only display the new page after it has fully been loaded.
In an application that I'm developing my goal would be to have highlighted code for some language, i.e. Java, and make so that some elements of code (functions, parameters) are clickable.
I understood that I need some js-based syntax highlighter capable to output raw html instead of linking a CSS stylesheet to the code.
What I still don't get is:
Is there any highlighter that ouputs highlighted code in such format?
How to make just some words clickable?
Is there any alternative to this strategy?
UPDATE1: As first attempt, I downloaded the source code of the android-codepad project, and edited the HTMLViewerPlusPlus class so that it highlights the HTML and, instead of showing it in a WebView, it shows it in a TextView, but since codepad uses css styling, I'm not getting the proper results. I'd need a new alternative that generates hard-styled html code.
UPDATE2: Using jsoup library with this method I managed to parse the code so that I get inline style attribute for each html element, but how to convert css styles to html tags?
Is there a way to change the css style(defined in the page source) dynamically with Java? I know it is possible to do it with JavaScript. If there isn't, are there other situations where JavaScript is the only choice developing a web app?
Matthew is right. The question should be specified better.
If you are about applet that is running on current page your can call any javascript including javascript code that changes style of any element.
You just have to add attribute mayscript to applet tag and then use code like the following:
JSObject win = (JSObject) JSObject.getWindow(this);
win.eval("documeent.getElementById('myelem').style='border-color: red'");
If you are asking about sevlet/jsp you can
1. generate full html code including css
2. bind style element to URL that is mapped to servlet or JSP that generates CSS.
where styles URL brings us to servlet that generates css dynamically using parameter "id".
I hope it helps. Otherwise please try to specify you question.
Why don't you use JS in the JSP page like you would in a regular HTML page?
Is there a way to VIEW the HTML source code that GWT produces? Currently I just give my flex table the DIV id and that DIV is all HTML I can see in ViewSource.
Is there a way to structure my table in HTML (say using div's and lists) and than create a something like FlexTable around that?
To answer the original question, you can view the HTML GWT has rendered via 'Inspect Element' in Firefox, with Firebug is installed. Alternatively the Web Inspector in Safari/Chrome will do the trick, as will the Developer tools in both IE8 and Opera.
Well well it seems the answer is in the documentation.
In particular Organizing Projects outlines how we can bind different widgets to different id's on the page.
So I can effectively do something like:
# html
<div id="id_table"></div>
<div id="id_next_button"></div>
# java
t = new FlexTable()
RootPanel.get("id_table").add(t);
nextbtn = new Button("next");
RootPanel.get("id_next_button").add(nextbtn);
Wohoo!
Regarding the second part of your quetion. It is possible to create a HTML component in GWT. The recomended way to do this is extending ComplexPanel and create the elements using Document.get().createXXXElement(). But it is a little laborius.
Check out this dicussion and I am sure there are other articles about this around the internet. You can also study the code of other components the extend ComplexPanel.