Sunday, March 13, 2016

JQuery with XSLT

I have been trying some XML transformation with XSLT and as I saw the XML can be transformed into HTML, I thought why not include JQuery into the transformation that I am doing.

I took a sample XML, in XSL I included the HTML and javascript along with JQuery that I wanted.

XML to be transformed:

1
2
3
4
5
6
7
8
<?xml version="1.0"?>
 <root>
  <node_1>
   <element_1>Data of element 1</element_1>
   <element_2>Data of element 2</element_2>
   <element_3>Data of element 3</element_3>
  </node_1>
 </root>

XSL used to transform the above XML:

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes"/>
 <xsl:template match="/">
 
  <html>
   <head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
     $(document).ready(
     $(function() {
      $("#root").accordion();
     }));
    </script>
   </head>
   <body style="background-color:red;">
   <h1 style="text-align:center;color:white;">JQuery accordion</h1>
    <div id="root">
     <xsl:for-each select="/root/node_1/*">
     <xsl:variable name="counter" select="position()" />
      <h6><xsl:value-of select="concat('Step No.',$counter)"/></h6>
      <div>
       <p><xsl:value-of select="."/></p>
       <textarea rows="4" cols="100"></textarea>
      </div>
     </xsl:for-each>
    </div>
    
   </body>
  </html>
 </xsl:template>
</xsl:stylesheet>

In the above XSL transformation, I included the JQuery CDNs and javascript code to make the accordion available and I used a counter variable to dynamically name the accordion steps.

 In the XSL I am accessing and looping through node_1's child elements and using the data of the elements in each steps of the accordion.

 For transformation I used a java code based on the javax.xml.transform package and it's classes.

 Java code used to transform and generate HTML:

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
package com.java;

import java.io.File;

import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerConfigurationException;
import javax.xml.transform.TransformerException;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.stream.StreamResult;
import javax.xml.transform.stream.StreamSource;

public class XSLTest {

 public XSLTest() {

 }

 public static void main(String[] args) {
  TransformerFactory factory = TransformerFactory.newInstance();
  StreamSource xslStream = new StreamSource(new File(
    "demoXslFile1.xsl"));
  Transformer transformer;
  try {
   transformer = factory.newTransformer(xslStream);
   StreamSource in = new StreamSource(new File(
     "demoFile1.xml"));
   StreamResult out = new StreamResult(new File(
     "htmlFile1.html"));
   transformer.transform(in, out);
  } catch (TransformerConfigurationException e) {
   e.printStackTrace();
  } catch (TransformerException e) {
   e.printStackTrace();
  }
 }
}

I used transformer class to transform the XML input to HTML output using XSL transformation file.

 The transform method of Transformer class takes StreamSource and StreamResult type variables as parameters.

 StreamSource variable holds the xml source file.

 StreamResult variable holds the final html file where the html has to be put into.

 Another StreamSource instance variable holds xsl file.

 The TransformerFactory class' instance variable holds reference to a fresh object. The variable then can be used to call newTransformer method which takes xsl file's StreamSource variable as method paramter.

 The Transformer class' instance variable references the above.

XML transformed into HTML:

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script><script>
   $(document).ready(
    $(function() {
     $("#root").accordion();
   }));
  </script>
 </head>
 <body style="background-color:red;">
  <h1 style="text-align:center;color:white;">JQuery accordion</h1>
  <div id="root">
   <h6>Step No.1</h6>
   <div>
    <p>Data of element 1</p>
    <textarea rows="4" cols="100"></textarea>
   </div>
   <h6>Step No.2</h6>
   <div>
    <p>Data of element 2</p>
    <textarea rows="4" cols="100"></textarea>
   </div>
   <h6>Step No.3</h6>
   <div>
    <p>Data of element 3</p>
    <textarea rows="4" cols="100"></textarea>
   </div>
  </div>
 </body>
</html>

HTML rendering:

Applications of XSLT are just awesome, ability to transform the XML data into a structured format is just amazing.
Posted by at
Labels: , , , , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Comments

blog comments powered by Disqus