Tuesday, June 5, 2012

Beacon with Google AJAXSLT

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>
  <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 altogether. Any suggestions on how I can fix this? 

1 comment:

sitapati said...

embeddable ftw!

The screenshot links land on a Google Drive login page...