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>
2 comments:
embeddable ftw!
The screenshot links land on a Google Drive login page...
Whats up are using Wordpress for your blog platform? I'm new to the blog world but I'm trying to get started and set up my own. Do you need any coding expertise to make your own blog? Any help would be greatly appreciated!
Post a Comment