An XML Newsfeed Transform with IE5.0,
VBScript and MSXML
By Peter A. Bromberg, Ph.D.
Syndicated newsfeed providers such as Isyndicate and Moreover have become very popular with webmasters of late. You can take your pick of categories, add some customized Javascript code to your site, and display the latest headlines from a variety of sources. Much of this content is also free for the taking, making it even more attractive given the fact that numerous studies indicate that fresh site content that is customized to the interests of the visitor helps to make them "returning visitors".
Both Isyndicate and Moreover offer their content in XML format. This offers some interesting options for the developer. Here at EggheadCafe.com where we cater exclusively to the Windows platform developer, well over 90% of our visitors are using IE 5.0 or higher. This means we know they have the MSXML parser, and it also means we can present 100% client-side code to both get the desired XML newsfeeds to their browser, and to perform the XSL transformation to display same in a nice HTML table. Client - side code means less stress on our server resources, and we like the freedom it gives the visitor to change the newsfeed subject without having to keep running roundtrips to our server.
One evening while playing around with XSL and the Moreover.com XML newsfeed format, I decided to whip up a small presentation that could be stuffed into one of our "include" files and made visible to our visitors in an unobtrusive but useful manner. In this article I will share with you the client - side VBScript and XSL needed to make this presentation on your own site.
First, let's take a look at a sample of what comes over the wire from Moreover.com in XML:
The above is an abbreviated sample, but the XML document structure and schema is complete. The first thing we notice is that this is not a very complex XML document. It has a root element, <morovernews>, and then a bunch of <article> nodes, one for each "article". Then within each article node we have the childnodes of <url>, <headline_text>, etc. All we really need to do our transform is the <headline_text> element, and the <document_url> element so we can make a live hyperlink out of it.
Another thing you'll probably notice if you visit Moreover's site is that the way their XML feeds are organized, you can use the identical URL string for any feed, and only need to insert the title of the feed as a portion of it:
http://p.moreover.com/cgi-local/page?index_newsfeedtitle+xml
This presents a great opportunity to create a listbox with a bunch of choices for the visitor, and dynamically populate the URL with the correct item in DHTML using the onChange event in the listbox control. So now the only remaining piece to our little project, besides a few lines of client - side VBScript, is the XML Transform. The transform is easy. The XSL file is so simple, I've reprinted it inline just below:
Basically what this does is set up an HTML Table 130 pixels wide (so it will fit nicely in a left or right panel page column), and then uses the <xsl:for-each select= method to take each article node, make an <A> tag in a new table row, put the value of the <document_url> childnode in it as the HREF attribute, and put the value of the corresponding <headline_text> childnode in it as the underlined text for the link. So this XSLT will take any of the Moreover newsfeeds and transform it into a narrow vertical table column.
Now let's take a look at the VBScript that pulls all this together, 100% on the CLIENT SIDE:
Here's what my script does:
First, we have a <DIV> tag
to identify the area where we want our transform (HTML Table) displayed.
I call it ID=News. Then, we have our listbox with all the titles and Option
values. The onChange event for the Listbox calls the showNews() function
which declares and sets two XMLDOMDocument objects using CreateObject (that's
CLIENT side code, remember?) and then the Moreover feed is loaded into one
of them, and our XSL stylesheet document is loaded into the other.Finally,
we set the innerHTML property of our <DIV> tag to the transform with:
document.all("News").innerHTML=
xmlDoc.transformNode(xsl)
And Voila! you have user-selected menu-driven dynamically populated XML newsfeed transforms! Enjoy.
Peter Bromberg is a Senior Programmer/Analyst and Windows DNA web developer with Fiserv, Inc. in Orlando. When not creating N-Tier and XML enterprise solutions, he can often be found playing with neural networks or listening to old jazz recordings. He can be reached at pbromberg@yahoo.com