XML Extension

Transforming XML to HTML

What if you want to transform the following XML document (open it with IE5) into HTML?

Consider the following XSL document (open it with IE5) as an HTML template to populate a HTML document with XML data:

In the above file, the xsl:for-each element locates elements in the XML document and repeats a template for each one. The select attribute describes the element in the source document. The syntax for this attribute is called an XSL Pattern, and works like navigating a file system where a forward slash (/) selects subdirectories. The xsl:value-of element selects a child in the hierarchy and inserts the content of that child into the template.

Since an XSL style sheet is an XML file itself, the file begins with an xml declaration. The xsl:stylesheet element indicates that this document is a style sheet. The template has also been wrapped with xsl:template match="/" to indicate that this is a template that corresponds to the root (/) of the XML source document.

If you add a reference to the above stylesheet to your original XML document (look at line 2), your browser will nicely transform your XML document into HTML (open it in IE5):

A JavaScript Solution

In the previous chapter I explained how XSL can be used to transform a document from XML to HTML. The trick was to add an XSL stylesheet information to the XML file, and to let the browser do the transformation.

Even if this works fine, it is not always desirable to include a stylesheet reference in the XML file, and the solution will not work in a non XML aware browser.

A much more versatile solution would be to use a JavaScript to do the XML to HTML transformation.

By using a JavaScript we are more open for these possibilities:

• Allowing the JavaScript to do browser specific testing

• Using different style sheets according to browser and/or user needs

That's the beauty of XSL. One of the design goals for XSL was to make it possible to transform data from one format to another, supporting different browsers and different user needs.

XSL transformation on the client side is bound to be a major part of the browsers work tasks in the future, as we will se a growth in the specialized browser marked (think: Braille, Speaking Web, Web Printers, Handheld PCs, Mobile Phones .....).

The XML file and the XSL file

Take a new look at the XML document that you saw in the previous chapter (or open it with IE5):

And at the companying XSL stylesheet (or open it with IE5):

The syntax of the above XSL document was explained in the previous chapter, so it will not be explained here. But be sure to notice that the XML file does not have a reference to the XSL file, and the XSL file does not have a reference to the XML file.

IMPORTANT: The above sentence indicates that an XML file could be transformed using many different XSL files.

Transforming XML to HTML on the client

Here is the simple source code needed transform the XML file to HTML on the client (try it yourself):

(The example above uses JavaScript. If you don't know to write JavaScript, you should take a trip to JavaScript School.)

The first block of code creates an instance of the Microsoft XML parser (XMLDOM), and loads the XML document into memory. The second block of code creates another instance of the parser and loads the XSL document into memory. The last line of code transforms the XML document using the XSL document, and writes the result to the HTML document.

Nice and simple.

A JavaScript Solution

In the previous chapter I explained how XSL can be used to transform a document from XML to HTML. The trick was to add an XSL stylesheet information to the XML file, and to let the browser do the transformation.

Even if this works fine, it is not always desirable to include a stylesheet reference in the XML file, and the solution will not work in a non XML aware browser.

A much more versatile solution would be to use a JavaScript to do the XML to HTML transformation.

By using a JavaScript we are more open for these possibilities:

• Allowing the JavaScript to do browser specific testing

• Using different style sheets according to browser and/or user needs

That's the beauty of XSL. One of the design goals for XSL was to make it possible to transform data from one format to another, supporting different browsers and different user needs.

XSL transformation on the client side is bound to be a major part of the browsers work tasks in the future, as we will se a growth in the specialized browser marked (think: Braille, Speaking Web, Web Printers, Handheld PCs, Mobile Phones .....).

The XML file and the XSL file

Take a new look at the XML document that you saw in the previous chapter (or open it with IE5):

And at the companying XSL stylesheet (or open it with IE5):

The syntax of the above XSL document was explained in the previous chapter, so it will not be explained here. But be sure to notice that the XML file does not have a reference to the XSL file, and the XSL file does not have a reference to the XML file.

IMPORTANT: The above sentence indicates that an XML file could be transformed using many different XSL files.

Transforming XML to HTML on the client

Here is the simple source code needed transform the XML file to HTML on the client (try it yourself):

(The example above uses JavaScript. If you don't know to write JavaScript, you should take a trip to JavaScript School.)

The first block of code creates an instance of the Microsoft XML parser (XMLDOM), and loads the XML document into memory. The second block of code creates another instance of the parser and loads the XSL document into memory. The last line of code transforms the XML document using the XSL document, and writes the result to the HTML document.

Nice and simple.

A Cross Browser Solution

In the previous chapter I explained how XSL can be used to transform a document from XML to HTML in the browser. The trick was to let the JavaScript use an XML parser to do the transformation.

This solution will not work with a browser that don't support an XML parser.

To make our XML data available to all kinds of browsers, we have to transform the XML document on the SERVER and send it as pure HTML to the BROWSER.

That's another the beauty of XSL. One of the design goals for XSL was to make it possible to transform data from one format to another on a server, returning readable data to all kinds of future browsers.

XSL transformation on the server is bound to be a major part of the Internet Information Server work tasks in the future, as we will se a growth in the specialized browser marked (think: Braille, Speaking Web, Web Printers, Handheld PCs, Mobile Phones .....).

The XML file and the XSL file

Take a new look at the XML document that you saw in the previous chapter (or open it with IE5):

And at the companying XSL stylesheet (or open it with IE5):

The syntax of the above XSL document was explained in the previous chapter, so it will not be explained here. But be sure to notice that the XML file does not have a reference to the XSL file, and the XSL file does not have a reference to the XML file.

IMPORTANT: The above sentence indicates that an XML file on the server could be transformed using many different XSL files.

XML TRANSFORMATION

Transforming XML to HTML on the Server

Here is the simple source code needed transform the XML file to HTML on the server (View it in your browser):

(The example is an ASP file, and the code is a VBScript. If you don't know ASP or VBScript you should take a trip to ASP School.)

The first block of code creates an instance of the Microsoft XML parser (XMLDOM), and loads the XML file into memory. The second block of code creates another instance of the parser and loads the XSL document into memory. The last line of code transforms the XML document using the XSL document, and returns the result to the browser.

Nice and simple.

XSL Sort

Where to put the Sort Information

Take a new look at the XML document that you have seen in almost every chapter (or open it with IE5):

To output this XML file as an ordinary HTML file, and sort it at the same time, simply add an order-by attribute to your for-each element like this:

<xsl:for-each select="CATALOG/CD" order-by="+ ARTIST">

The order-by attributes takes a plus (+) or minus (-) sign, to define an ascending or descending sort order, and an element name to define the sort element.Now take a look at your slightly adjusted XSL stylesheet (or open it with IE5):

Transforming it on the Client

Here is the simple source code needed transform the XML file to HTML on the client (try it yourself):

XSL Filter Query

Where to put the Filter Information

Take a new look at the XML document that you have seen in almost every chapter (or open it with IE5):

To filter the XML file, simply add filter to the select attribute in your for-each element like this:

<xsl:for-each select="CATALOG/CD[ARTIST='Bob Dylan']">

Leagal filter operators are:

• =  (equal)

• =! (not equal)

• &LT& less than

• &GT& greater than

Transforming it on the Client

Here is the simple source code needed transform the XML file to HTML on the client (try it yourself):

Where to put the IF condition

Take a new look at the XML document that you have seen in almost every chapter (or open it with IE5):

To put an conditional if test against the content of the file, simply add an xsl:if element to your XSL document like this:

<xsl:if match=".[ARTIST='Bob Dylan']">
... some output ...
</xsl:if>

Now take a look at your slightly adjusted XSL stylesheet (or open it with IE5):

Transforming it on the Client

Here is the simple source code needed transform the XML file to HTML on the client (try it yourself):