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))
%> |
|
