XSLT | Dmytro Shteflyuk's Home https://kpumuk.info In my blog I'll try to describe about interesting technologies, my discovery in IT and some useful things about programming. Mon, 07 Sep 2015 23:41:12 +0000 en-US hourly 1 https://wordpress.org/?v=6.7.1 Sorting RSS-feed by date using XSLT https://kpumuk.info/development/sorting-rss-feed-by-date-using-xslt/ https://kpumuk.info/development/sorting-rss-feed-by-date-using-xslt/#comments Thu, 06 Apr 2006 06:22:15 +0000 http://kpumuk.info/xslt/sorting-rss-feed-by-date-using-xslt/ In my previous post I’ve described how to display RSS-feed in browser using XSLT. But sometimes It’s necessary to change order of items in feed, for example sort them by date. XSLT 1.1 allows sorting by complex data types, but XSLT 1.0 does not and we need extract separate date parts. First I want to […]

The post Sorting RSS-feed by date using XSLT first appeared on Dmytro Shteflyuk's Home.]]> In my previous post I’ve described how to display RSS-feed in browser using XSLT. But sometimes It’s necessary to change order of items in feed, for example sort them by date. XSLT 1.1 allows sorting by complex data types, but XSLT 1.0 does not and we need extract separate date parts.

First I want to demonstrate simplicity of sorting by date in XSLT 1.1. We need just define dc namespace:

1
2
3
4
<xsl:stylesheet version="1.1"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:digg="http://digg.com//docs/diggrss/"
  xmlns:dc="http://purl.org/dc/elements/1.1/">

Now we are ready to sort:

1
2
3
<xsl:apply-templates select="item">
  <xsl:sort select="pubDate" data-type="dc:date" order="ascending"/>
</xsl:apply-templates>

As I said early in XSLT 1.0 we need to split date to get day, month and so on. To convert month to number I will use following XML-tree:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <months:months>
    <name>Jan</name>
    <name>Feb</name>
    <name>Mar</name>
    <name>Apr</name>
    <name>May</name>
    <name>Jun</name>
    <name>Jul</name>
    <name>Aug</name>
    <name>Sep</name>
    <name>Oct</name>
    <name>Nov</name>
    <name>Dec</name>
  </months:months>

It’s time to create sorting code:

1
2
3
4
5
6
7
8
9
10
11
<xsl:variable name="vMonths" select="document('')/*/months:*"/>
<xsl:apply-templates select="item">
  <xsl:sort select="substring(substring-after(substring-after(substring-after(pubDate, ' '), ' '), ' '), 1, 4)" order="ascending"/>
  <xsl:sort select="count($vMonths/name[
                  .=substring(substring-after(substring-after(current()/pubDate, ' '), ' '), 1, 3)]
                  /preceding-sibling::name)"
            data-type="number"
            order="ascending"/>
  <xsl:sort select="substring(substring-after(pubDate, ' '), 1, 2)" data-type="number" order="ascending"/>
  <xsl:sort select="substring(substring-after(substring-after(substring-after(substring-after(pubDate, ' '), ' '), ' '), ' '), 1, 8)" data-type="text" order="ascending"/>
</xsl:apply-templates>

That’s all. Feed items will be sorted by date in ascending order.

You can view results here or download full sources here.

Books recommended

The post Sorting RSS-feed by date using XSLT first appeared on Dmytro Shteflyuk's Home.]]> https://kpumuk.info/development/sorting-rss-feed-by-date-using-xslt/feed/ 11 Creating browser-friendly RSS feeds https://kpumuk.info/development/creating-browser-friendly-rss-feeds/ https://kpumuk.info/development/creating-browser-friendly-rss-feeds/#comments Wed, 05 Apr 2006 20:54:03 +0000 http://kpumuk.info/xslt/creating-browser-friendly-rss-feeds/ RSS-feeds become the most popular content format in the web todays. There are tons of RSS-readers, aggregators, desktop and online tools for viewing feeds in the world. But what about Web-browsers? Every day I make same mistake: I click “RSS-feed” link and my browser displays XML-source of the feed. Why I can’t examine feed directly […]

The post Creating browser-friendly RSS feeds first appeared on Dmytro Shteflyuk's Home.]]> RSS-feeds become the most popular content format in the web todays. There are tons of RSS-readers, aggregators, desktop and online tools for viewing feeds in the world. But what about Web-browsers? Every day I make same mistake: I click “RSS-feed” link and my browser displays XML-source of the feed. Why I can’t examine feed directly in my browser?

In this article I’ll try to create feed which will be displayed pretty well both in browser and RSS-reader. I’ll use XSLT 1.0 technology to do it (because my Firefox does not support XSLT 1.1).

First we need RSS-feed. I’ve saved digg.com RSS-feed under “programming” category (you can look at this feed here). This feed contains some additional fields in the item section (see RSS 2.0 Specification), this will be useful to show how you can extend my sample.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<item>
  <title>Transparent PNG Images in IE</title>
  <link>http://digg.com/programming/Transparent_PNG_Images_in_IE</link>
  <description>Fellow digg user patrickweber commented w/ this URL. A
    javascript fix that passes off a transparent PNG to DirectX to
    render so IE can render PNG's. You can also do it with CSS via:
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
    sizingMethod=image src='imgurlhere');</description>
  <pubDate>Wed, 5 Apr 2006 02:26:44 GMT</pubDate>
  <guid isPermaLink="true">http://digg.com/programming/Transparent_PNG_Images_in_IE</guid>
  <digg:diggCount>650</digg:diggCount>
  <digg:submitter>
    <digg:username>kefs</digg:username>
    <digg:userimage>/userimages/kefs/medium.jpg</digg:userimage>
  </digg:submitter>
  <digg:submitter>kefs</digg:submitter>
  <digg:category>programming</digg:category>
  <digg:commentCount>90</digg:commentCount>
</item>

HTML presentation for RSS-feed must contain buttons for add this feed to different online-readers. Brief instructions about using feed necessary too. I like CSS-based design therefor page layout will be placed in external CSS style sheet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:output method="html"/>

  <xsl:template match="/">
    <html>
      <head>
        <title><xsl:value-of select="/rss/channel/title"/></title>
        <link rel="stylesheet" href="digg.css" type="text/css"/>
      </head>
      <xsl:apply-templates select="rss/channel"/>
    </html>
  </xsl:template>

  <xsl:template match="channel">
    <body>
      <div class="topbox">
        <p>This is a <strong>RSS-feed</strong> from the <xsl:value-of select="title"/>
          website. RSS feeds allow you to stay up to date with the latest news and
          features you want from  <xsl:value-of select="title"/>. To subscribe to it,
          you will need a News Reader or other similar device.</p>
      </div>
      <div class="contbox">
        <div class="header">
          <div class="fltl">
            <span class="subhead">Blog for: </span>
          </div>
          <a href="#" class="item">
            <img height="15" hspace="5" vspace="0" border="0" width="32" alt="RSS" src="rss_feed.gif" title="RSS " align="left"/>
            <xsl:value-of select="title"/>
          </a>
          <br class="fltclear"/>
        </div>
        <div class="mainbox">
          <div class="itembox">
            <ul>
              <xsl:apply-templates select="item"></xsl:apply-templates>
            </ul>
          </div>
          <div class="subscrbox">
            <div class="padrhsbox">
              <h2>Subscribe to this feed</h2>
              <p>You can subscribe to this RSS feed in a number of ways, including
                the following:</p>
              <ul>
                <li>Drag the orange RSS button into your News Reader</li>
                <li>Drag the URL of the RSS feed into your News Reader</li>
                <li>Cut and paste the URL of the RSS feed into your News Reader</li>
              </ul>
              <h3>One-click subscriptions</h3>
              <p>If you use one of the following web-based News Readers,
                click on the appropriate button to subscribe to the RSS feed.
              </p>
              <a href="#" onClick="window.location='http://add.my.yahoo.com/rss?url=' + window.location;return false;">
                <img height="17" width="91" vspace="3" border="0" alt="my yahoo" src="myyahoo.gif"/>
              </a><br/>
              <a href="#" onClick="window.location='http://www.bloglines.com/sub/'+ window.location;return false;">
                <img height="18" width="91" vspace="3" border="0" alt="bloglines" src="bloglines.gif"/>
              </a><br/>
              <a href="#" onClick="window.location='http://www.newsgator.com/ngs/subscriber/subext.aspx?url='+ window.location;return false;">
                <img height="17" width="91" vspace="3" border="0" alt="newsgator" src="newsgator.gif"/>
              </a><br/>
              <a href="#" onClick="window.location='http://client.pluck.com/pluckit/prompt.aspx?GCID=C12286x053&amp;a=' + window.location + '&amp;t={title}';return false;">
                <img src="pluspluck.png" vspace="3" border="0" alt="Subscribe with Pluck RSS reader"/>
              </a><br/>
              <a href="#" onClick="window.location='http://www.rojo.com/add-subscription?resource=' + window.location;return false;">
                <img src="add-to-rojo.gif" vspace="3" border="0" alt="Subscribe in Rojo"/>
              </a><br/>
              <a href="#" onClick="window.location='http://fusion.google.com/add?feedurl=' + window.location;return false;">
                <img src="add-to-google-plus.gif" vspace="3" border="0" width="104" height="17" alt="Add to Google"/>
              </a>
            </div>
          </div>
        </div>
      </div>
    </body>
  </xsl:template>

  <xsl:template match="item">
    <li>
      <a href="{link}">
        <xsl:value-of select="title"/>
      </a>
      <small> &#8212; <xsl:value-of select="pubDate"/></small>
      <br/>
      <div class="item_desc">
        <xsl:value-of select="description"/>
      </div>
    </li>
  </xsl:template>
</xsl:stylesheet>

It’s simple to integrate our XSLT-sheet with the RSS-feed. Just add following line after the <?xml ... ?> line:

1
2
<?xml version="1.0"?>
<?xml-stylesheet title="XSL_formatting" type="text/xsl" href="digg.xsl"?>

In the beginning I made a promise to show how you can use custom digg fields. In the xsl:stylesheet we need to add digg namespace:

1
2
3
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:digg="http://digg.com//docs/diggrss/">

Please note that URL contains two slashes. Now we are ready to use custom digg attributes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  <xsl:template match="item">
    <li>
      <a href="{link}">
        <xsl:value-of select="title"/>
      </a>
      <small>
        by <strong><xsl:value-of select="digg:submitter/digg:username"/></strong>
        &#8212; <xsl:value-of select="pubDate"/>
        (<xsl:value-of select="digg:diggCount"/> diggs)
      </small>
      <br/>
      <div class="item_desc">
        <xsl:value-of select="description"/>
      </div>
    </li>
  </xsl:template>

You can look results here. Full sources are available for download.

Books recommended

The post Creating browser-friendly RSS feeds first appeared on Dmytro Shteflyuk's Home.]]> https://kpumuk.info/development/creating-browser-friendly-rss-feeds/feed/ 7