« Part 7 | Part 9 »

Part 8 - How to load RSS feeds into widgets

Now that we know how to create widgets, drag them around, remove them and manipulate them in (almost) every imaginable way, it’s time to actually create some real widgets - RSS widgets!
We’re going to use the MuseStorm Javascript components to do this, which will save us lots of time and take about 15 lines of Javascript code to do (nifty!).

Here is an example

Since it’s built on top of our previous widget code, all we need to do is review the RSS feed code:

First we have to download two MuseStorm Javascript components: MuseManger and RSSManager (the J stands for JSON). Together they enable us to pull any RSS feed to our application.

Now for the Javascript part: 

//MuseStorm components
var manager=new MuseManager();
manager.init("TutorialKey",this);

var handler=new Object(); //handle RSSManager events
var rssManager=new JRSSManager();
rssManager.init(manager, "rssManager", handler);

handler.onGetFeed=function(feed,res){	//display RSS feed data
	if (res.status!="OK")
		return;	
	var cont=document.getElementById("content");	//find the 'content' DIV
	if (cont==null)
		return;
	cont.innerHTML="";		//clear the DIV content 
	var arr=feed.getItems();	//get the feed items (posts) array
	var len=arr.length<=7 ? arr.length : 7;	//present up to 7 posts
	var str="";		//create a string containing all the data
	str+="
    ";
	for (var i=0;i"+arr[i].getTitle()+"";
	}
	str+="
";
	cont.innerHTML=str;
	document.getElementById("titlebar").innerHTML=feed.getTitle();	//update RSS feed title
}

function addFeed(){
	var str=document.getElementById('feedurl').value;
	document.getElementById("content").innerHTML="Loading...";
	rssManager.addFeed(str);
}



We start by creating an instance of the MuseManager component var manager=new MuseManager() and initializing it (here we use the demo key - you can use it for limited testing, or register and replace it by your own key).  We then create a handler object, whose task is to update the widget when the RSS data is delivered (more on this in a second).

Next we create the RSSManager object and initialize it (rssManager.init(manager, “rssManager”, handler)) by passing a reference to the Muse Manager object, the name of our RSSManager instance and a reference to the handler object to the init function.

Now we implement the onGetFeed function for the handler. The RSSManager will call the onGetFeed function when it retrieves the RSS feed data (callback). It accepts two parameters, feed, the RSSFeed object (a MuseStorm Javascript object that represents a feed) and res, a status object.

Within the onGetFeed function, we get a reference to the DIV element that will display the data (var cont=document.getElementById("content")).

The feed object contains an array of FeedItem objects (MuseStorm Javascript objects that represent a single feed item), which we access by calling the getItems function var arr=feed.getItems(). We then create a string that makes up a bulleted list of feed items (title and url) and then update the innerHTML of the DIV element to display it. We also update the widget’s title bar to display the title of the feed.

The addFeed function is called when the user clicks the ‘add feed’ button. We extract the feed URL from the text field and call the RSSManager’s addFeed function to load the feed data.

Here’s what happens when the addFeed function is called:

  • The RSSManager contacts the MuseStorm server and requests the feed data
  • The data is prepared and returned (using JSON) to the RSSManager
  • The RSSManager calls the handler’s onGetFeed function

That’s it - we’ve got an RSS Feed reader widget!