Published: Wednesday, June 07, 2000
Displaying XML Data from other Web Sources as HTML using XSL, Part 2
By Brandon Monahan
Read Part 1
In Part 1 we discussed the basics of XML. While XML is great for describing
data it is not intended to provide information on how that data should be rendered or displayed. This task is
relegated to XSL...
XSL - What is it?
Now that you are comfortable because you know everything you need to know, I will throw XSL at you. XSL is
the style sheet language for XML. By using XSL you can transfer XML documents into text, html, or new XML
documents with different structures. That said; let me say that XSL is really a breeze when using it to
transform XML into HTML. When doing this transfer the XSL file is mostly HTML with smattering of XSL command.
But, we will get into that when the time comes.
Getting Started (You would think by now we were well on our way)
First off, we are going to be parsing our XML file by using the Microsoft DOM object. That means that you
need to have it installed on your server. To install it, just install IE 5.0 or above. If you already have
that browser, no worries, you are ready to go.
Next, let's do a little asp coding. First thing we need to do is initiate the DOM Object:
<%
set xml = Server.CreateObject("Microsoft.XMLDOM")
%>
|
Well that was easy. Next, we need to load our XML document into the DOM. To do this simply call
xml.load method like such:
<%
set xml = Server.CreateObject("Microsoft.XMLDOM")
xml.load("http://headlines.isyndicate.com/pages/cui/news.xml")
%>
|
Now, notice that I am getting XML from an external website. I know that after the abundance of information I
gave you on creating XML documents you will want to run out and build your own XML, but I suggest that for now
we use one that I know to be well formed (also, when we are done, you will have a nice display of constantly
updated news items). If you would like to pull from your own XML data, you will need to specify the physical
path (C:\Blah\Whatever.xml). If the XML file is in the Web site directory structure you can get
the physical path by using Server.MapPath("/SomeWebDir/Whatever.xml")
To see what this XML information looks like, go to it in IE 5 or greater at
http://headlines.isyndicate.com/pages/cui/news.xml.
You will see a layout of news stories each with it's own headline, source, href, and more. Here is the basic
design:
<newsfeed>
<channel cid="" title="" date="" time="">
<headline href="" date="" time="">News Headline</headline>
<headline href="" date="" time="">News Headline</headline>
<headline href="" date="" time="">News Headline</headline>
</channel>
<channel cid="" title="" date="" time="">
<headline href="" date="" time="">News Headline</headline>
<headline href="" date="" time="">News Headline</headline>
</channel>
</newsfeed>
|
Note: this data feed is provided free from ISyndicate.com - if you would like to use this feed or make your
own, please follow their rules including displaying their logo.
This XML is pretty straight forward. The root element is <newsfeed> under which you have
<channel> tags which have the channel (source) name and so on. Under
<channel> is the final element in the hierarchy, the <headline> tags.
So, we have loaded the external XML data into our DOM. The next step is to write the XSL document. So on to
XSL syntax!
XSL Syntax
To make HTML using XSL you simply write out the values of the XML in between the HTML. This is very much akin
to using ASP to write out the values from a database in between HTML tags. Only the syntax is different. For
example, if you were to write a variable to a page and make it bold in ASP it would look like:
In XSL it would look like:
<b><xsl:value-of select="elementName"></b>
|
Not really that difficult at all. A couple things to keep in mind - XSL is written in XML which means all of
the syntax rules apply - Case Sensitive, Quotes around all attributes (including HTML), and all elements must
have an ending element (including HTML). This means that if you use <br> you must use
</br>.
OK, so we have the basic ability to write the value of an element to a page. This ability is useless until we
have the ability to navigate the XML elements. For example, if you were to use
<xsl:value-of select="headline"> with no other code, you would get an error (or a blank screen).
The reason for this is that XML allows elements with the same name that mean different things to co-exist in
a document (as long as they are positioned differently). That translated means you need to specify the exact
location of the element you are trying to print to the page. For example, the following would be proper and
would write out the headline value (assuming you completed the header correctly which we will go into later):
<xsl:value-of select="newsfeed/channel/headline">
|
You can see that this works somewhat like a directory structure - you have to get the correct directory to get
the value.
In Part 3 we'll look at some more powerful uses of XSL and show one way
to display the XML feed from iSyndicate.com!
Read Part 3!
Read Part 1