I was experimenting with XSL transformations on client side so that we could make Beacon embed-able.
It will be useful if we can pull this off because
- it will help us concentrate on the Editor itself and leave the authentication and workflow to the services that would like to use Beacon for editing.
- This will also help in easier adoption by various organizations as they won't have to set up a different service and look for ways to integrate their workflow with Beacon's.
jquery.xslt.js (code here)is a JQuery wrapper around the Google AJAXSLT project which fits in in my opinion because Beacon uses JQuery extensively and Google AJAXSLT gives us a browser independent solution that is essential for Beacon to be adopted.
I looked at the demo code and set up a similar environment in localhost (basically reusing the template XML and XSL files the docbook plugin folder of Beacon and CSS and media files from Beacon and placing them under /var/www/html along with the test HTML as below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title>XSLT Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="docbook.css"/>
</head>
<body>
<div id="output" style="padding: 2px;"> </div>
<script type="text/javascript" src="jquery.min.js"> < /script>
<script type="text/javascript" src="jquery.xslt.js"> < /script>
<script type="text/javascript">
(function() {
// The magic
$('#output').xslt({xmlUrl:'test.xml', xslUrl:'docbook2html.xsl'});
});
</script>
</body>
</html>
The resulting window looked like the screenshot which was really exciting but I was running into the problem that the text in the paragraphs was missing. I added the XSL template for para as below:
<xsl:template match="para">
<p title="docbookPara">
<xsl:value-of select="." />
</p>
<xsl:apply-templates />
</xsl:template>
This fixed most of the problems as shown in screenshots here and here. But now I'm stuck at a rather weird issue. The nested tags don't function properly. Trying to come up with the shortest bit of XSL and XML that show the issue, if my XSL is:
<?xml version="1.0" encoding="ISO-8859-1"?><xsl:stylesheet>
< xsl:template match="/">
<xsl:apply-templates select="para"/>
</xsl:template>
<xsl:template match="para">
<p>
<xsl:value-of select="."/>
<xsl:apply-templates />
</p>
</xsl:template>
<xsl:template match="bold">
<b>
<xsl:value-of select="."/>
</b>
<xsl:apply-templates />
</xsl:stylesheet>
The XML snippet <para> Hello<bold>World</bold>!</para> results in <p>Hello World!<b>World</b></p>
I tried to find out on #xml on Freenode, and according to them, < ?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet>should work but removing the <xsl:value-of select="."/> removes the entire text altogether. Any suggestions on how I can fix this?
<xsl:template match="/">
<xsl:apply-templates select="para"/>
</xsl:template>
<xsl:template match="para">
<p>
<xsl:apply-templates />
</p>
</xsl:template>
<xsl:template match="bold">
<b>
<xsl:apply-templates />
</b>
</xsl:template>
</xsl:stylesheet>
