Saturday, September 02, 2006

Using XSLT 2.0 to emulate IE7 feed reader appearance (including filter by category, date and title sorting)

I have managed to create an XSLT 2.0 stylesheet that emulates the appearance of IE7's feed reader including sorting functionality.

To see the stylesheet in action click here

Download it here

As with my XSLT 2.0 tagcloud experiment, I have again made use of W3's Online XSLT 2.0 Service and I have again used Microsoft RSS 2.0 feed Recently Added and Updated Feeds (oh the irony!).

The hard bit was sorting by RFC 822 dates. I had to use <xsl:analyze-string> to convert the RFC 822 date string into a sortable format. I found lots of information about how to do this on Dave Pawson's XSLT 2.0 site (date processing, regular expressions) plus finding something similar to the regular expression that matches RFC 822 dates helped a lot (Jorgen Thelin's blog entry containing the helpful regexp).

The XSL stylesheet and CSS are by no means perfect, they currently only work with RSS 2.0 feeds that contain RFC 822 format dates and even then they would benefit from some serious refactoring BUT I'm really pleased with the result, I really should get out more....

14 comments:

ismjml said...

I just discovered your blog. Wonderful articles...I have read a couple and I look forward to reading more.



Thanx,

/hbi
Note: Comment imported. Original by Hakan Bilgin website: http://www.challenger.se at 2006-09-06 22:10

ismjml said...

pretty cool, good job! could look a bit more like the actual IE7b3 feeds with links to comments and so on... but nice work.
Note: Comment imported. Original by erik website: http://contactsheet.de at 2006-09-07 00:31

ismjml said...

Hi Mark,

I have a couple of questions about namespaces and I hope you can help me out.



1. In IE, there is a property named scopeName, which returns the namespace of the element/node. Do you know the equalling property to this in Firefox?

Properties such as localName, nodeName, etc returns the namespace with the nodeName united by a colon…but in uppercase. Which I don’t fancy at all…and I am not satisfied with my solution below…



–Javascript————————–



Node.prototype.__defineGetter__(’scopeName’, function() {

var ln = this.localName.toString();

return (ln.indexOf(’:') > -1)? ln.split(’:')[0] : ‘HTML’ ;

});



————————————–



2. Do you know if it is possible to add namespaces to a document programmatically?



Thanks is advance…


Note: Comment imported. Original by Hakan Bilgin website: http://www.challenger.se at 2006-09-07 21:13

ismjml said...

Firefox and IE treat Namespaces in XML differently. AFAICT, IE treats them just like attributes whereas Firefox at least allows you to access XML documents via namespace. See my GeoURL To Google Maps using the Official API as an example of how IE and Firefox treat XML namespaces differently.





AFAIK, HTML Documents are not considered to be XML by Firefox, so you should be able to use the same nasty approach (see below) and it should work in both IE and Firefox. Unfortunately, I can't test this in IE6 as I've "upgraded" to IE7Beta3.





<html id="myHtml" xmlns:a="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

</head>

<body>

<button onclick="alert('The namespace value is '+document.getElementById('myHtml').attributes.getNamedItem('xmlns:a').value)">Click here</button>

<button onclick="alert('The namespace value is '+document.getElementsByTagName('html')[0].attributes.getNamedItem('xmlns:a').value)">Click here</button>



<script type="text/javascript">

//<![CDATA[

var hello=document.createElement("p");

hello.setAttribute("xmlns:abcdef", "http://whatever");

hello.appendChild(document.createTextNode('Hello'));

document.body.appendChild(hello);

//]]>

</script>

</body>

</html>


Note: Comment imported. Original by markmc website: http://content.mark-mclaren.info/ at 2006-09-07 22:44

ismjml said...

Hi,



This xslt looks awesome!



I tried to use it on an xml of mine, but got the error:



Namespace 'http://whatever' does not contain any functions.



Do you know how can I make it work?
Note: Comment imported. Original by Anonymous at 2007-03-14 21:00

ismjml said...

Is it definitely an XSLT 2.0 engine you are using? There are not many XSLT 2.0 processors about, if you are using Java the chances are you are using Saxon?





Does your transformation work with this online XSLT 2.0 processor?





http://www.w3.org/2005/08/online_xslt/




Note: Comment imported. Original by markmc website: http://content.mark-mclaren.info/ at 2007-03-14 21:16

ismjml said...

I'm not familiar with xslt 2.0.



I've wrote before a simple xslt 1.0 for rss files, linked the xml to it and it worked. But it looks pretty bad.



What I want is to change the xsl file so the rss will be like IE7 for pc's without IE7. So I replaced the file and it writes the error

"Namespace 'http://whatever' does not contain any functions"

What more should I do to make it work? Do I need to install anything?
Note: Comment imported. Original by Anonymous at 2007-03-14 21:29

ismjml said...

I assume you are creating a Java web application? In this scenario, the easiest way for you to use XSLT 2.0 is probably via a servlet.





Yes, for this XSL to work you will need to install an XSLT 2.0 processor since the stylesheet makes use of several features that are only available in XSLT 2.0. There is an open source version of the XSLT 2.0 processor Saxon available that you can use. As an example of how to use Saxon, you can view the source from SaxonSavvyServlet.java [compiled Jar version] which is the engine behind the W3C Online XSLT 2.0 Service.


Note: Comment imported. Original by markmc website: http://content.mark-mclaren.info/ at 2007-03-14 22:49

ismjml said...

Firefox gives me an error when I try to us it:

Error during XSLT transformation: An unknown XPath extension function was called.



What does this mean?
Note: Comment imported. Original by Adam Simpson website: http://www.chiefarchitect.com/ at 2007-06-14 17:11

ismjml said...

I get this error. How can I fix it?



"Error during XSLT transformation: An unknown XPath extension function was called."
Note: Comment imported. Original by Adam Simpson website: http://www.chiefarchitect.com/ at 2007-06-14 17:54

ismjml said...

Hi Adam,



I am not sure what you mean. I use Firefox and the link works for me. TRY HERE.





This XSL stylesheet requires an XSLT 2.0 processor engine (like a server side installation of Saxon). Firefox itself does not yet support the XSLT 2.0 standard, to be honest very little does support XSLT 2.0 yet!




Note: Comment imported. Original by markmc website: http://content.mark-mclaren.info/ at 2007-06-14 20:44

ismjml said...

I have some few questions, could anyone help me?



I have created a XML file which is followed by the RSS schema. Then can I use your ie7feedread-emulator.xml as XSL to transform my XML, so that everyone can view the stylesheet on the IE6 if they access the XML by typing http://some.server/data.xml on the broswer?



Many thanks!
Note: Comment imported. Original by Roy at 2007-08-15 13:39

ismjml said...

Hi Roy,



Sorry but currently this can not be done. AFAIK no browser supports XSLT 2.0 which is what my IE7 emulating stylesheet requires.





You need to link to an URL that is capable of doing XSLT 2.0 transformations against your RSS feed. You can achieve this by taking a copy of the W3C Online XSLT 2.0 Service code. This is open source and makes use of Saxon for XSLT 2.0 processing.





HTH



Mark
Note: Comment imported. Original by markmc website: http://content.mark-mclaren.info/ at 2007-08-15 17:32

ismjml said...

Thanks a lot for your XSL solution. It was very useful.
Note: Comment imported. Original by Oed Babu at 2008-04-30 05:11