Experiment with client-side XSLT based on Google AJAXSLT.
69 views
Skip to first unread message
satya
Jun 4, 2012, 2:43:30 PM6/4/12
to beacon
Hi,
(Warning: Very long mail)
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[0][1] is a JQuery wrapper around the Google AJAXSLT
project[1] 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[3] and CSS and media files from
Beacon[4] 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 [5] 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 [6] and [7].
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>
<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>
should work but removing the <xsl:value-of select="."/> removes the
entire text altgether.
Any suggestions on how I can fix this?
[0] http://www.jongma.org/webtools/jquery/#xslt
[1] http://www.jongma.org/webtools/jquery/jquery.xslt.js
[2] http://code.google.com/p/ajaxslt/
[3] https://github.com/satya/beacon/tree/master/beacon/plugins/docbook/xml
[4] https://github.com/satya/beacon/tree/master/beacon
[5] https://docs.google.com/open?id=0B8l35ArmWgUKVmZRZUh1bjk2a0k
[6] https://docs.google.com/open?id=0B8l35ArmWgUKV3JKVGR3TGQ1ZGM
[7] https://docs.google.com/open?id=0B8l35ArmWgUKTGlQQ19rS2FCblU
(Warning: Very long mail)
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[0][1] is a JQuery wrapper around the Google AJAXSLT
project[1] 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[3] and CSS and media files from
Beacon[4] 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 [5] 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 [6] and [7].
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>
<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>
should work but removing the <xsl:value-of select="."/> removes the
entire text altgether.
Any suggestions on how I can fix this?
[0] http://www.jongma.org/webtools/jquery/#xslt
[1] http://www.jongma.org/webtools/jquery/jquery.xslt.js
[2] http://code.google.com/p/ajaxslt/
[3] https://github.com/satya/beacon/tree/master/beacon/plugins/docbook/xml
[4] https://github.com/satya/beacon/tree/master/beacon
[5] https://docs.google.com/open?id=0B8l35ArmWgUKVmZRZUh1bjk2a0k
[6] https://docs.google.com/open?id=0B8l35ArmWgUKV3JKVGR3TGQ1ZGM
[7] https://docs.google.com/open?id=0B8l35ArmWgUKTGlQQ19rS2FCblU
Reply all
Reply to author
Forward
0 new messages