XML Element Transformation Chains

XML Tutorials - Herong's Tutorial Examples

∟XSLT (XSL Transformations) Introduction

∟XML Element Transformation Chains - Complex Example

This section provides a tutorial example on how an XSL processor works through a more complex XSLT stylesheet to perform a transformation on an XML document tree in a transformation chain process.

Now let's do another test on the source XML document, tree.xml, presented in the previous section. This time, we going to use a more interesting stylesheet, tree.xsl:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:template match="p">
  <pre>
  Replacement p1.
  <xsl:apply-templates select="c1"/>
  Replacement p2.
  <xsl:apply-templates select="c2"/>
  Replacement p3.
  <xsl:apply-templates select="c3"/>
  Replacement p4.
  <xsl:apply-templates select="c3"/>
  Replacement p5.
  </pre>
 </xsl:template>
 <xsl:template match="c1">
  Replacement c11.
  <xsl:apply-templates select="g11"/>
  Replacement c12.
  <xsl:apply-templates select="g12"/>
  Replacement c13.
 </xsl:template>
 <xsl:template match="c2">
  Replacement c21.
 </xsl:template>
</xsl:stylesheet>

Now open tree.xml with Internet Explorer again, you should get:

  Replacement p1.

  Replacement c11.
  Text g11.
  Replacement c12.
  Text g12.
  Replacement c13.

  Replacement p2.

  Replacement c21.

  Replacement p3.

  Text c31.
  Text g31.
  Text c32.
  Text g32.
  Text c33.

  Text c41.

  Replacement p4.

  Text c31.
  Text g31.
  Text c32.
  Text g32.
  Text c33.

  Text c41.

  Replacement p5.

Notice that the output format is much better now. Why? I have inserted a pair of HTML tags, <pre> and </pre> at the beginning and the end of the result content for the root element "p". It tells IE to present everything in-between as pre-formatted text, meaning respect the white spaces. Then I copied and pasted the text out of the IE window into my note.

In order to understand how the output got produced, let's act like the XSL processor doing the transformation our self:

Transformation starts on the root element "p" automatically.
Template for element "p" is available, so we use it.
In template for element "p", text "Replacement p1." is reached, so send it to output.
Then the template calls for transforming element "c1", so we search for template for "c1".
Template for element "c1" is available, so we will go into it.
In template for element "c1", text "Replacement c11." is reached, so send it to output.
Then the templates calls for transforming element "g11", so we search for template for "g11".
But, no template for element "g11" is available, so we use the default template.
The default template does nothing but send the element's text content "Text g11." to output.
Then, we are reaching the text, "Replacement c12.", so send it to output.
Now the template for element "c1" calls for transforming element "g12", so we search for template for "g12".
Again, no template for element "g12" is available, so we use the default template.
The default template sends the text content of "g12", "Text g12.", to output.
The last thing in template for "c1" is the text, "Replacement c13.", so send it to output.
After finishing with template for "c1", we return to template for "p".
The next thing in template for "p" is the text, "Replacement p2.", so send it to output.
The next thing in template for "p" is a call to transform element "c2", so we search for template for element "c2".
Template for element "c2" is available, so we use it, and go into it.
In template for "c2", there is only one text, "Replacement c21.", so send it to output.
Then we return to the calling template for "p".
The next thing in template for "p" is the text, "Replacement p3.", so send it to output.
Now, the template for element "p" calls for transformation for element "c3", so search for template for element "c3".
But again, no template is available for element "c3", so we use the default template.
However, there are two elements named by "c3", so we have to transform both of them.
The default template sends the first text content of the first element "c3", "Text c31.", to output.
Then, the default template calls for transformation on the first child element "g21", so text content, "Text g31." is send to output.
Then, the default template sends the second text content, "Text c32.", to output.
Then, the default template moves to the second child element "g22", and sends text, "Text g32.", to output.
Then, the default template sends the third text content, "Text c33.", to output.
Now, we are done with the first element "c3", we now transform the second element "c3".
Again, we need to use the default template, which sends the text, "Text c41." to output.
Now, we are back in template for "p", reaches text, "Replacement p4.", and sends it to output.
Then, template for "p" calls for transformation for element "c3" again.
Of course, we need to repeat what we just did, sending "Text c31.", "Text g31.", "Text c32.", "Text g32.", "Text c33.", and "Text c41." to output.
Then, we are back in template for "p", reaches text, "Replacement p5.", and sends it to output.
That's it. Done.

If you can follow me through those steps, you truly understand now how XSL processor working from one template to another template, starting from the root template.