Workshop Three: An RSS Module


Now we are going to build a module that consumes an RSS feed on the server side. Server-side modules are mostly for folks who have web services and transformations in place. The two pieces that you need on your server are the RSS feed and an XSL transformation file. In our example, we'll take the CNN Top Stories RSS feed and use an XSL stylesheet on a different server to display it all gorgeously.

Before You Begin

This module requires server-side parsing, so you will most likely want to have a working local development environment for testing. We've written instructions to help you set up your dev environment .

Changing the Module View

Now that you have your dev environment set up, the first thing we need to do is change the view portion of our module. We're going to add two new attributes from a new "pub" namespace:

<div class="view NewsExample" pub:src="http://rss.cnn.com/rss/cnn_topstories.rss" pub:style="headlines_rss.xsl">
	<div class="head"><h3>News Headlines</h3></div>
</div>

The pub:src points to the RSS feed XML. Note that the pub:style needs to be an absolute URL to another host.

Next, we have to define our pub namespace, so we change the html element to:

<html lang="en" xmlns:pub="xmlns">

When the module is displayed in an AIM Page, the back end picks up the RSS feed, runs it through our XSL transform file (which is shown below), and then displays the current top news headlines from CNN:

CNN.com

We're Done

That's it — we've completed our server-side RSS module!

We validated it with our Module Validator, and it reports no errors. The W3C Validator, however, will report errors related to the new namespace, but that is because the W3C Validator doesn't recognize namespaces. If your module passes our AIM Pages Validator, it should upload and work correctly.

Our module id is: "superserverside," so to package it up for uploading, we create a zip file named "superserverside.zip," which contains a directory called "superserverside." That directory should contain a file called 'index.html' which has the complete HTML of our module. Here is a link to the HTML file.

If you think you're ready, move on to Workshop 4.

XSL Code

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
	<xsl:output omit-xml-declaration="yes" indent="no"/>
	<xsl:template match="/">
		<div><xsl:apply-templates/></div>
	</xsl:template>
	<xsl:template match="channel">
		<div style="font-weight: bold">
			<xsl:value-of select="title"/>
		</div>
		<ul>
			<xsl:apply-templates select="item"/>
		</ul>
	</xsl:template>
	<xsl:template match="item">
		<li><a href="{link}"> <xsl:value-of select="title" /></a></li>
	</xsl:template>
</xsl:stylesheet>

Complete HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:pub="http://developer.iamalpha.com/xmlns">
<head profile="http://iamalpha.com/.developer/profile">
	<title>Superserverside Module</title>
	<link rel="stylesheet" type="text/css" id="manifest" href="http://iamalpha.com/.developer/css/manifest.css"/>
</head>
<body class="module" id="superserverside"> <h1>Superserverside: Version <span class="version">1.0</span></h1>
	<div class="view superserverside" pub:src="http://rss.cnn.com/rss/cnn_topstories.rss" pub:style="headlines_rss.xsl">
		<div class="head">
			<h3>Super Server-Side Module</h3>
		</div>
	</div>
	
	<h3>Description</h3>
	<p class="description">My Superserverside Module is a proof of concept to show a server-side module. As you can see, I've proved the concept successfully.</p>
	
	<h3>Detail</h3>
	<p class="detail">I could go on and on about how awesome I am, but I'll spare you.</p>
	
	<h3>Author Information</h3>
	<ul>
		<li class="author vcard"><a href="mailto:you@somedomain.com" class="email fn">Your Name</a> - <a href="http://somedomain.com" class="url">Homepage</a></li>
	</ul>
	
	<h3>License</h3>
	<p><a href="http://licenseurlgoeshere" rel="license">Licensed under X</a>.</p>
</body>
</html>