|
XSL - On the
Client
If your
browser supports XML, XSL can be used to transform the document
to HTML in your browser.
A JavaScript
Solution
In the previous
chapter we explained how XSL can be used to transform a document
from XML to HTML. The trick was to add an XSL stylesheet 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 XSL aware browser.
A 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 see a growth
in the specialized browser market (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:
<?xml
version="1.0"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
.
.
.
</CATALOG> |
And the
accompanying XSL stylesheet:
<?xml
version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<body>
<table border="2" bgcolor="yellow">
<tr>
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="CATALOG/CD">
<tr>
<td><xsl:value-of select="TITLE"/></td>
<td><xsl:value-of select="ARTIST"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet> |
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 in your Browser
Here is the
simple source code needed to transform the XML file to HTML on
the client:
<html>
<body>
<script type="text/javascript">
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cd_catalog.xml")
// Load the XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cd_catalog.xsl")
// Transform
document.write(xml.transformNode(xsl))
</script>
</body>
</html> |
XSL - On the
Server
Since not all
browsers support XML and XSL, a solution is to transform the XML
to HTML on the server.
A Cross
Browser Solution
In the previous
chapter we 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 doesn't support an XML parser.
To make 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
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
see a growth in the specialized browser market (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:
<?xml
version="1.0"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
.
.
.
</CATALOG> |
And the accompanying XSL stylesheet:
<?xml
version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<body>
<table border="2" bgcolor="yellow">
<tr>
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="CATALOG/CD">
<tr>
<td><xsl:value-of select="TITLE"/></td>
<td><xsl:value-of select="ARTIST"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet> |
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.
Transforming
XML to HTML on the Server
Here is the
simple source code needed to transform the XML file to HTML on
the server:
<%
'Load the XML
set xml = Server.CreateObject("Microsoft.XMLDOM")
xml.async = false
xml.load(Server.MapPath("cd_catalog.xml"))
'Load the XSL
set xsl = Server.CreateObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load(Server.MapPath("cd_catalog.xsl"))
'Transform the file
Response.Write(xml.transformNode(xsl))
%> |
Page 1
2 3
4 |
