July 14, 2008

XSLT Transformation with javascript

Nikolai Kordulla

0 comments >>

XSLT - eXtensible Stylesheet Language Transformation - is a very strong stylesheet language. I will show you, how to transform a xmlString via xslt, in javascript.

Javascript
function XSLTHelper(xslt)
{
  this.xmls = null;
  this.processor = null;
  this.xslt = null;
  this.xslt_file = xslt;
  this.src_doc = null;

  this.init = function()
  {
    if (window.ActiveXObject)
    {
      this.xslt = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
      this.xslt.async = false;
      this.xslt.load(this.xslt_file);
      var template = new ActiveXObject("MSXML2.XSLTemplate");
      template.stylesheet = this.xslt;
      this.processor = template.createProcessor();
    }
    else
    {
      this.processor = new XSLTProcessor();
      this.xslt = document.implementation.createDocument("", "", null);
      this.xslt.async = false;
      this.xslt.load(this.xslt_file);
      this.processor.importStylesheet(this.xslt);
      this.src_doc = document.implementation.createDocument("","", null);
      this.src_doc.async = false;
      this.xmls = new XMLSerializer();
    }
  }

  this.init();

  this.transform = function(xmlString)
  {
    if (window.ActiveXObject)
    {
      this.src_doc = new ActiveXObject("Microsoft.XMLDOM");
      this.src_doc.loadXML(xmlString);
      this.processor.input = this.src_doc;
      this.processor.transform();
      var output = this.processor.output;
    }
    else
    {
      var parser = new DOMParser()
      this.src_doc = parser.parseFromString(xmlString, "text/xml")
      result = this.processor.transformToDocument(this.src_doc);
      this.xmls = new XMLSerializer();
      var output = this.xmls.serializeToString(result);
    }

    return output;
  }
}

var test = new XSLTHelper('./example.xsl');
// just alert the output
alert(test.transform('<edit_preview><youtube>viOSJmzYFq0</youtube></edit_preview>'));

Sample XSLT
<?xml version="1.0" encoding="UTF-8"?>
<!-- The main xsl file for the api website -->
<xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">

<xsl:output method="html" encoding="utf-8" indent="yes" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/html4/strict.dtd"/>

<xsl:template match="edit_preview">
<div lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<xsl:apply-templates/>
</div>
</xsl:template>


<!-- code tag -->
<xsl:template match="code">
<pre class="prettyprint"><xsl:call-template name="cr2br"><xsl:with-param name="text" select="."/></xsl:call-template></pre>
</xsl:template>

<!-- quote tag -->
<xsl:template match="quote">
<q><xsl:call-template name="cr2br"><xsl:with-param name="text" select="."/></xsl:call-template></q>
</xsl:template>

<!-- paragraph tag -->
<xsl:template match="paragraph">
<xsl:apply-templates/>
</xsl:template>

<!-- link tag -->
<xsl:template match="a">
<a href="http://coderpeek.com/xslt/%7B@href%7D"><xsl:apply-templates/></a>
</xsl:template>

<xsl:template match="br">
<br/>
</xsl:template>

<xsl:template match="youtube">
<object width="570" height="461">
<param name="movie" value="http://www.youtube.com/v/{.}&amp;hl=en&amp;fs=1"/>
<param name="allowFullScreen" value="true"/>
<embed width="570" height="461" src="golb-Dateien/a.txt" type="application/x-shockwave-flash" allowfullscreen="true"/></object>
</xsl:template>

<xsl:template match="img">
<img src="golb-Dateien/src.htm" alt="{@alt}" title="{@title}"/>
</xsl:template>

</xsl:transform>

I personally use this function, to make a preview for my articles on this blog.

Comments

 

Leave a Reply

Don't enter anything here:
Name (required) Invalid name
Mail (will not be published) (required) Invalid mail
Website Invalid url

Content couldnt be empty.