Saxon » Saxon-CE

I would suggest invoking the parse-JSON from within the stylesheet. Something like this perhaps:

  




  
Alternatively, if you want to write a JS application that invokes XSLT, rather than an XSLT application that invokes JS, then do the transformation using transformToHtmlFragment(), and you can then append the returned fragment to the HTML page, and process it in other ways, under the control of your Javascript code.

Still unclear.

I try:

 var x=proc.transformToHTMLFragment(xml);
 console.log("xsl output:"+x)
 json=JSON.parse(x);     
 console.log("json:"+json)	

I get:

xsl output:undefined index2.html:24 SaxonCE.XSLT20Processor 22:13:32.176 SEVERE: Exception com.google.gwt.core.client.JavaScriptException in onModuleLoad: (SyntaxError) : Unexpected token u 6D08C01821381D35BD12009B44D2D65D.cache.html:875 Uncaught client.net.sf.saxon.ce.lib.JavaScriptAPIException: [js] Exception com.google.gwt.core.client.JavaScriptException in onModuleLoad: (SyntaxError) : Unexpected token u 6D08C01821381D35BD12009B44D2D65D.cache.html:1913

My xsl is here: http://dinofancellu.com/demo/xml-visualization/metadata.xsl

Just in case I haven't made myself clear, my use case is this:

XML->SAXON XSLT->TEXT

This TEXT in this case happens to be JSON, which I then want to turn to a proper JSON dom from the JS side.

No params, nothing fancy, just an input doc and an output blob of text.

The docs mention that XSLT20Processor "support asynchronous processing."

For my needs I want to avoid this and if possible have simple synchronous calls, well, at least for know, until I get something reliably working.

e.g.

 var xsl = Saxon.requestXML("metadata.xsl");
 var xml = Saxon.requestXML("metadata.xml");  
 var proc = Saxon.newXSLT20Processor(xsl);

 var jsonstring=proc.XXXXX

 var json=JSON.parse(jsonstring); 

Hi Dino,

In what you mentioned in your last comment, the following I managed to get working:

 var onSaxonLoad = function()
    {
     var xsl = Saxon.requestXML("metadata.xsl");
     var xml = Saxon.requestXML("metadata.xml");
    
     var proc = Saxon.newXSLT20Processor(xsl);
     var x = proc.transformToFragment(xml,document).textContent;
     console.log("xsl output:"+x);
     var json = JSON.parse(x);	
     console.log("json:"+json)	

Please observe I use 'transformToFragment' in the code snippet above. I got an Exception when I used transformToHTMLFragment

Thanks, I'll check it out when I get home. Behind work proxies, bah!

On 1 July 2013 13:15, Saxonica Developer Community < dropbox+saxonica+f38e@plan.io> wrote:

That works fine O'Neil,

You might want to put the example up in the docs.

By the way this is the finished bit of code:

http://dinofancellu.com/demo/xml-visualization

Thanks.

Dino.

Ah, more "issues".

http://dinofancellu.com/demo/xml-visualization/index2.html

works fine, emits json to console.

http://dinofancellu.com/demo/xml-visualization/index2b.html

Emits json then dies horribly.

It doesn't pull in XML but itself, index2b.html

Any idea why it happens and why such a garbled message?

e.g.

xsl output:
        {
         "name":"html"
          ,"children": [  { "name":"head" ,"children": [ { "name":"meta" } , { "name":"link" } , { "name":"script" } ] } , { "name":"body" ,"content":"Hello","children": [ { "name":"script" ,"content":"var onSaxonLoad = function() { var xsl = Saxon.requestXML("metadata.xsl"); var xml = Saxon.requestXML("index2b.html"); var proc = Saxon.newXSLT20Processor(xsl); var x = proc.transformToFragment(xml,document).textContent; console.log("xsl output:"+x) json=JSON.parse(x); console.log("json:"+json) };" } ] } ]
        }
     index2b.html:24
SaxonCE.XSLT20Processor 23:25:44.353
SEVERE: Exception com.google.gwt.core.client.JavaScriptException in onModuleLoad: (SyntaxError) : Unexpected token m 6D08C01821381D35BD12009B44D2D65D.cache.html:875
Uncaught client.net.sf.saxon.ce.lib.JavaScriptAPIException: [js] Exception com.google.gwt.core.client.JavaScriptException in onModuleLoad: (SyntaxError) : Unexpected token m 6D08C01821381D35BD12009B44D2D65D.cache.html:1913

In the source of http://dinofancellu.com/demo/xml-visualization/index2b.html you have the following line of code:

var xml = Saxon.requestXML("index2b.html");

Is this right? Should this not be some XML document?

I know, its deliberate. It is well formed XML. It is comes back as json (look at the console). But then gives the above nasty error.

Dino.

On 2 July 2013 11:04, Saxonica Developer Community < dropbox+saxonica+f38e@plan.io> wrote:

Hi,

Looking more closely at the output of the transformation you have not escaped the quotes that appear within the text content. For example:

"content":"var onSaxonLoad = function() { var xsl = Saxon.requestXML(*"metadata.xsl"*)...

In the stylesheet you will need to call the XPath function analyze-string to properly escape the quotes.

XPath function analyze-string

I'd suggest

"
\\"

then

 replace($x, $quot, $escapedQuot)

Aha, thanks. Original xml didn't have those quotes so worked fine.

On 2 July 2013 11:59, Saxonica Developer Community < dropbox+saxonica+f38e@plan.io> wrote:

Thanks.

Did as

<xsl:variable name="quot">"</xsl:variable>
<xsl:variable name="escapedQuot">\\"</xsl:variable>

... (replace(., $quot, $escapedQuot))

Here's an example of the XSL itself seen as a tree

http://dinofancellu.com/demo/xml-visualization/index4.html

However, yet another small issue.

Looking at the end script node coming back I see:

{ "name":"script" ,"children": [ {"name":"@type","content":"text/javascript"} ] }

i.e. script has no content.

But running on Saxon 9.4 on the server I see what I would expect (had to escape the && first, CE doesn't mind)

{ "name":"script" ,"content":"var m = [20, 120, 20, 120]...

Woops, above issue is for:

http://dinofancellu.com/demo/xml-visualization/index3.html

i.e. the HTML view.

On Safari I see the HTML rendered as a tree with an html node at its root with three children - parseError, head, and body. On Firefox I just see the parseError node.

I guess for some reason the script element has no text node children. I don't know if that might have something to do with the parse errors?

The HTML5 DOM is pretty quirky, so surprises like this cease to be surprising after a while... If you display the string value of the script element, is that any better than displaying its text node children?

Should I be able to scroll to see more of the tree? At present I can only see the whole tree by zooming to a level where I can't read the text.

Re: firefox, console says:

[21:39:34.297] 
        {
         "name":"parsererror"
          ,"content":"XML Parsing Error: not well-formed Location: http://dinofancellu.com/demo/xml-visualization/Saxonce/CECE12D2976993D3B12B21ED2115A689.cache.html Line Number 113, Column 29:","children": [  { "name":"sourcetext" ,"content":"var duration = d3.event && d3.event.altKey ? 1500 : 500; ----------------------------^" } ]
        }
   

Chrome doesn't mind. I tried changing to && but neither chrome or ff liked that.

I'm also concerned by what is coming back from Saxon-CE

If you bring up chrome/safari and its dev console (you should see the json coming back from the xsl)

{ "name":"html" ,"children": [ { "name":"parsererror" ,"children": [ {"name":"@style","content":"display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"} , { "name":"h3" ,"content":"This page contains the following errors:" } , { "name":"div" ,"content":"error on line 113 at column 29: xmlParseEntityRef: no name","children": [ {"name":"@style","content":"font-family:monospace;font-size:12px"} ] } , { "name":"h3" ,"content":"Below is a rendering of the page up to the first error." } ] } , { "name":"head" ,"children": [ { "name":"title" ,"content":"XML->JSON->Tree" } , { "name":"meta" ,"children": [ {"name":"@http-equiv","content":"Content-Type"} ,{"name":"@content","content":"text/html;charset=utf-8"} ] } , { "name":"link" ,"children": [ {"name":"@type","content":"text/css"} ,{"name":"@rel","content":"stylesheet"} ,{"name":"@href","content":"tree_files/style.css"} ] } , { "name":"script" ,"children": [ {"name":"@type","content":"text/javascript"} ,{"name":"@src","content":"Saxonce/Saxonce.nocache.js"} ] } , { "name":"script" ,"children": [ {"name":"@type","content":"text/javascript"} ,{"name":"@src","content":"d3.v3.min.js"} ] } , { "name":"style" ,"content":".node circle { cursor: pointer; fill: #fff; stroke: steelblue; stroke-width: 1.5px; } .node text { font-size: 11px; } path.link { fill: none; stroke: #ccc; stroke-width: 1.5px; }","children": [ {"name":"@type","content":"text/css"} ] } ] } , { "name":"body" ,"children": [ { "name":"div" ,"children": [ {"name":"@id","content":"body"} , { "name":"div" ,"children": [ {"name":"@style","content":"float:left"} , { "name":"a" ,"content":"Click to see visualization of XSL","children": [ {"name":"@href","content":"index4.html"} ] } ] } , { "name":"div" ,"content":"Shows","content":"->JSON (via Saxon-CE","content":")->","children": [ {"name":"@style","content":"text-align:right;margin-right:20px"} , { "name":"a" ,"content":"HTML (This page)","children": [ {"name":"@href","content":"index3.html"} ] } , { "name":"a" ,"content":"XSL","children": [ {"name":"@href","content":"metadata.xsl"} ] } , { "name":"a" ,"content":"D3.js","children": [ {"name":"@href","content":"http://d3js.org/"} ] } ] } , { "name":"div" ,"children": [ {"name":"@id","content":"footer"} , { "name":"div" ,"content":"click or option-click to expand or collapse","children": [ {"name":"@class","content":"hint"} ] } ] } ] } , { "name":"script" ,"children": [ {"name":"@type","content":"text/javascript"} ] } ] } ] }

If you run the same XSLT on Saxon 9.4 server side you get:

{ "name":"html" ,"children": [
{ "name":"head" ,"children": [ { "name":"title" ,"content":"XML->JSON->Tree" }, { "name":"meta" ,"children": [ {"name":"@http-equiv","content":"Content-Type"} , {"name":"@content","content":"text/html;charset=utf-8"} ] } , { "name":"link" ,"children": [ {"name":"@type","content":"text/css"} , {"name":"@rel","content":"stylesheet"} , {"name":"@href","content":"tree_files/style.css"} ] } , { "name":"script" ,"children": [ {"name":"@type","content":"text/javascript"} , {"name":"@src","content":"Saxonce/Saxonce.nocache.js"} ] } , { "name":"script" ,"children": [ {"name":"@type","content":"text/javascript"} ,{"name":"@src","content":"d3.v3.min.js"} ] } , { "name":"style" ,"content":".node circle { cursor: pointer; fill: #fff; stroke: steelblue; stroke-width: 1.5px; } .node text { font-size: 11px; } path.link { fill: none; stroke: #ccc; stroke-width: 1.5px; }","children": [ {"name":"@type","content":"text/css"} ] } ] } , { "name":"body" ,"children": [ { "name":"div" ,"children": [ {"name":"@id","content":"body"} , { "name":"div" ,"children": [ {"name":"@style","content":"float:left"} , { "name":"a" ,"content":"Click to see visualization of XSL","children": [ {"name":"@href","content":"index4.html"} ] } ] } , { "name":"div" ,"content":"Shows","content":"->JSON (via Saxon-CE","content":")->","children": [ {"name":"@style","content":"text-align:right;margin-right:20px"} , { "name":"a" ,"content":"HTML (This page)","children": [ {"name":"@href","content":"index3.html"} ] } , { "name":"a" ,"content":"XSL","children": [ {"name":"@href","content":"metadata.xsl"} ] } , { "name":"a" ,"content":"D3.js","children": [ {"name":"@href","content":"http://d3js.org/"} ] } ] } , { "name":"div" ,"children": [ {"name":"@id","content":"footer"} , { "name":"div" ,"content":"click or option-click to expand or collapse","children": [ {"name":"@class","content":"hint"} ] } ] } ] } , { "name":"script" ,"content":"var m = [20, 120, 20, 120], w = 1280 - m[1] - m[3], h = 800 - m[0] - m[2], i = 0, json, root; var onSaxonLoad = function() { var xsl = Saxon.requestXML("metadata.xsl"); var xml = Saxon.requestXML("index3.html"); var proc = Saxon.newXSLT20Processor(xsl); var jsontext = proc.transformToFragment(xml,document).textContent; console.log(jsontext) json=JSON.parse(jsontext); doD3(); }; var tree = d3.layout.tree() .size([h, w]); // turn on its side var diagonal = d3.svg.diagonal() .projection(function(d) { return [d.y, d.x]; }); var vis = d3.select("#body").append("svg") .attr("width", w + m[1] + m[3]) .attr("height", h + m[0] + m[2]) .append("g") .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); function doD3(){ root=json; root.x0 = h / 2; root.y0 = 0; function toggleAll(d) { if (d.children) { d.children.forEach(toggleAll); toggle(d); } } // Initialize the display to show a few nodes. root.children.forEach(toggleAll); toggle(root) // toggle(root.children[1]); // toggle(root.children[1].children[2]); // toggle(root.children[9]); // toggle(root.children[9].children[0]); update(root); }; function update(source) { // slows down transition if alt key is pressed var duration = d3.event && d3.event.altKey ? 1500 : 500; // Compute the new tree layout. var nodes = tree.nodes(root).reverse(); // Normalize for fixed-depth. nodes.forEach(function(d) { d.y = d.depth * 180; }); // Update the nodes… var node = vis.selectAll("g.node") .data(nodes, function(d) { return d.id || (d.id = ++i); }); // Enter any new nodes at the parent's previous position. var nodeEnter = node.enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) .on("click", function(d) { toggle(d); update(d); }); nodeEnter.append("circle") .attr("r", 1e-6) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); var text=nodeEnter.append("text") .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) .attr("dy", ".35em") .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) .text(function(d) { return d.name; }) .attr("font-style",function(d) { if (d.name.indexOf('@')==0) { return "italic" } else {return "normal";} }) .attr("fill",function(d) { if (d.name.indexOf('@')==0) { return "red" } else {return "black";} }) .style("fill-opacity", 1e-6); text.append("title").text(function(d) { return d.content; }) // Transition nodes to their new position. var nodeUpdate = node.transition() .duration(duration) .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); nodeUpdate.select("circle") .attr("r", 4.5) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); nodeUpdate.select("text") .style("fill-opacity", 1); // Transition exiting nodes to the parent's new position. var nodeExit = node.exit().transition() .duration(duration) .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) .remove(); nodeExit.select("circle") .attr("r", 1e-6); nodeExit.select("text") .style("fill-opacity", 1e-6); // Update the links… var link = vis.selectAll("path.link") .data(tree.links(nodes), function(d) { return d.target.id; }); // Enter any new links at the parent's previous position. link.enter().insert("path", "g") .attr("class", "link") .attr("d", function(d) { var o = {x: source.x0, y: source.y0}; return diagonal({source: o, target: o}); }) .transition() .duration(duration) .attr("d", diagonal); // Transition links to their new position. link.transition() .duration(duration) .attr("d", diagonal); // Transition exiting nodes to the parent's new position. link.exit().transition() .duration(duration) .attr("d", function(d) { var o = {x: source.x, y: source.y}; return diagonal({source: o, target: o}); }) .remove(); // Stash the old positions for transition. nodes.forEach(function(d) { d.x0 = d.x; d.y0 = d.y; }); } // Toggle children. function toggle(d) { if (d.children) { d._children = d.children; d.children = null; } else { d.children = d._children; d._children = null; } }","children": [ {"name":"@type","content":"text/javascript"} ] } ] } ] }

Why is CE not emitting content for the last script node, but server side is?

This is not about JS decoding the JSON, this is the text that is returned from Saxon.

p.s. I know my JSON is emitting multiple content keys, which is wrong for JSON (mixed content), I'll fix that later somehow.

Aha, 2 stops forward, 1 step back.

Put CDATA around my script. Now no parseError on either browser and end script has content! So putting CDATA around the script made it visible in CE. Odd.

However on FF, it seems to hang, then offers to kill script, say no, wait some more, then page comes up.

http://dinofancellu.com/demo/xml-visualization/index3.html

Its not a D3 issue, took out D3 here, just does transform and emits JSON

http://dinofancellu.com/demo/xml-visualization/index3ff.html

Fast on Chrome, hangy on FF.

I added scrolling, changed tree_files/style.css from overflow:hidden to auto

For those that haven't realized you can zoom in and out with ctrl-scroll wheel.

And in chrome at least you can print as pdf to get a lovely jaggy free pdf.

I don't have an answer to the question, but would make the observation that when you process the HTML5 DOM in Saxon-CE it will differ in many ways from the source tree you would see in Saxon server-side. That's because the HTML5 DOM isn't a literal representation of the markup in your HTML source. For example (classically) a table with no tbody or thead elements in the source HTML will acquire these child elements in the HTML DOM tree.

Whether something similar is going on for the script, I'm not sure. The HTML DOM is a strange beast.