Visualrinse | Design and Development by Chad Udell » Mashups http://visualrinse.com Design, Development, Technology and My Life. Thu, 22 Sep 2011 23:21:53 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 How To: Build a Simple RSS Reader with JQuery http://visualrinse.com/2008/09/24/how-to-build-a-simple-rss-reader-with-jquery/ http://visualrinse.com/2008/09/24/how-to-build-a-simple-rss-reader-with-jquery/#comments Thu, 25 Sep 2008 03:15:31 +0000 Chad http://visualrinse.com/?p=417 This one’s from my Mashups class. The first project, was to build an RSS Reader. I’ve already posted a quick tutorial on how to build an RSS reader with Adobe Flex. Here’s a simple one that uses JQuery to get the feeds and then loop through them to output them to the browser window. Piece of cake for many of you, yes, but if you have never used anything but the DOM and plain ol’ JavaScript, you may be scared by the whole AJAX fad on teh intarwebs these days. JQuery makes it super easy to look like a Javascript rockstar. I teach a lot of students that haven’t ever touched a library of code like JQuery before, so tutorials like this are pretty valuable to some readers..

First, create an XHTML file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Untitled</title>
</head>
<body>
</body>
</html>

Then, download my favorite JavaScript API, JQuery.

Link the JS file in by adding this tag in the head:

<script type="text/javascript" src="jquery-1.2.6.min.js" charset="utf-8"></script>

Once we have JQuery linked in, it’s time to write some HTML… I created a couple <div> elements to act as wrappers/containers for the page’s content. I used an <img> to put a nice graphic header in the page, then added some semantic XHTML elements, an <h1> for the text header, a <form> tag to hold a <select> menu populated with a few of my favorite Flash blogs as the <option> elements setting their URLs as the value attributes for those, and of course a <label> to let everyone know they should “Select a Feed” via that menu. After the tags are closed, I put one more div after the form to contain the feed results after they are retrieved. I add id attributes liberally throughout the tags, as I may need to style them or use them in my JQuery reader soon, *hint* *hint*.

If you’re following along, your code probably looks something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>RSS Reader</title>
	<script type="text/javascript" src="jquery-1.2.6.min.js" charset="utf-8"></script>
</head>
<body>
<div id="container">
<a href="visualrinse.com"><img src="http://visualrinse.com/wp-content/themes/smooth-dirt-10/header_08v2.jpg" alt="Visualrinse" title="Visualrinse.com" /></a>
<div id="ui">
<h1>Flash Feed Reader</h1>
<form id="selectParser" action="">
<label>Select a feed:</label>
<select id="diffFeeds">
	<option value="">Select</option>
	<option value="http://feeds.feedburner.com/aralbalkan">Aral Balkan</option>
	<option value="http://www.bit-101.com/blog/?feed=rss2">Bit-101</option>
	<option value="http://feeds.feedburner.com/peterelst/">Peter Elst</option>
	<option value="http://www.gskinner.com/blog/index.xml">Grant Skinner</option>
	<option value="http://blog.andre-michelle.com/feed/">Andre Michelle</option>
	<option value="http://feeds.feedburner.com/flashmagazine/rss2">Flash Magazine</option>
	<option value="http://casario.blogs.com/mmworld/rss.xml">Marco Casario</option>
	<option value="http://www.sephiroth.it/weblog/index.xml">Sephiroth</option>
	<option value="http://www.quasimondo.com/index.xml">Quasimondo</option>
	<option value="http://feeds.feedburner.com/sebleedelisle">Seb Lee-Delisle</option>
	<option value="http://osflash.org/feed.php">OS Flash</option>
</select>
</form>
</div>
<div id="feedContent">
	&nbsp;
</div>
</div>
</body>
</html>

Cool… So, time to add the interactivity. We’re going to add a script tag to the head area and begin writing a Javascript function. I called mine “get_rss_feeds()”. The basic idea behind the function is to use the JQuery api’s “get()” function to grab the URL of the selected item from feedList (the name of our select menu, remember?), then run through each item in the RSS feed, putting those tasty XML elements from the feed like title, pubdate and description into HTML and popping them on the page. Between runs, we’ll need a way to clear out the div containing the content, so each time a new feed loads, the old content is removed.

So to do this, let’s put the following code in the Javascript block:

function get_rss_feed() {
	//clear the content in the div for the next feed.
	$("#feedContent").empty();
 
	//use the JQuery get to grab the URL from the selected item, put the results in to an argument for parsing in the inline function called when the feed retrieval is complete
	$.get($('#diffFeeds').val(), function(d) {
 
		//find each 'item' in the file and parse it
		$(d).find('item').each(function() {
 
			//name the current found item this for this particular loop run
			var $item = $(this);
			// grab the post title
			var title = $item.find('title').text();
			// grab the post's URL
			var link = $item.find('link').text();
			// next, the description
			var description = $item.find('description').text();
			//don't forget the pubdate
			var pubDate = $item.find('pubDate').text();
 
			// now create a var 'html' to store the markup we're using to output the feed to the browser window
			var html = "<div class=\"entry\"><h2 class=\"postTitle\">" + title + "<\/h2>";
			html += "<em class=\"date\">" + pubDate + "</em>";
			html += "<p class=\"description\">" + description + "</p>";
			html += "<a href=\"" + link + "\" target=\"_blank\">Read More >><\/a><\/div>";
 
			//put that feed content on the screen!
			$('#feedContent').append($(html));  
		});
	});
 
};

Now, besure to add the get_rss_feed function call to the feedList’s onchange event and you are good to go. With a catch, of course. This will only work when accessed locally via the “file://” protocol. IN order to use this online, you’ll need to circumvent the browser security sandbox and use a middleware proxy to grab the XML and make it local. Here’s the PHP:

<?php
	// PHP Proxy
	// Loads a XML from any location. Used with Flash/Flex apps to bypass security restrictions
	// Author: Paulo Fierro
	// January 29, 2006
	// usage: proxy.php?url=http://mysite.com/myxml.xml
 
	$session = curl_init($_GET['url']); 	               // Open the Curl session
	curl_setopt($session, CURLOPT_HEADER, false); 	       // Don't return HTTP headers
	curl_setopt($session, CURLOPT_RETURNTRANSFER, true);   // Do return the contents of the call
	$xml = curl_exec($session); 	                       // Make the call
	header("Content-Type: text/xml"); 	               // Set the content type appropriately
	echo $xml; 	      // Spit out the xml
	curl_close($session); // And close the session
?>

Slick, eh? To use it, simply prepend the proxy’s URL used in the $.get call, like this:

$.get('proxy.php?url='+$('#diffFeeds').val(), function(d) {

So, there you go. Add some CSS in there and it’s all stylish. You can the feed reader in effect here.

Hope you enjoyed this.

]]> http://visualrinse.com/2008/09/24/how-to-build-a-simple-rss-reader-with-jquery/feed/ 37 How To: Make a Simple RSS Reader with Adobe Flex http://visualrinse.com/2008/09/14/how-to-make-a-simple-rss-reader-with-adobe-flex/ http://visualrinse.com/2008/09/14/how-to-make-a-simple-rss-reader-with-adobe-flex/#comments Mon, 15 Sep 2008 03:11:18 +0000 Chad http://visualrinse.com/?p=410 A little over a year ago, I converted my then dormant domain, Mediadinosaur.com, into a gossip focused news aggregator (previously, it was a media/celeb focused community and blog). It now captures feeds from a number of high profile celebrity rags (Egostastic, TMZ, E!, WWTD, etc) and lets you get your fan fix in one centralized place. I built it in Flex to highlight the ease of use of the Framework and the power that the HTTPService and E4X gives you in getting and parsing XML. I’m using the site as an exercise for my Mashups and RIAs class as an introduction to developing with Flex and a easing into the concept of reading and using XML feeds and services for students that may have never used either of them. So let’s take a look at how this all comes together.

Here is the site today:

In this post, we’ll look at the site and find out what makes it tick. Here’s a quick overview: The interface is simple, it consists of only a ComboBox, a DataGrid, a TextArea, a couple Labels/Text components and a LinkButton. All of these Controls are placed in an assortment of Layout controls to assist with the overall look and feel. I then create a HTTPService and a couple quick AS3 functions to populate the ComboBox and handle feed results. The initial feedlist comes from a list of RSS feeds in a custom written XML file (which I’ll share in this post, as well), this could also come from an online service like a custom Yahoo pipe or an OPML file if you really wanted to get fancy.

After the basic app is functioning, I import one of Scalenine’s beautiful and easy to use skins, and voil?†. A feed reader for local filesystem use is ready. This could be run as a SWF or compiled as an AIR app for desktop use. However, if you want to put it online, you’ll need to use a middleware script to serve as a crossdomain proxy loader (this example is going to use PHP). This is needed to get around Flash player’s security sandbox which prevents you from loading XML files from other domains that lack a crossdomain.xml file.

Let’s examine the basic MXML markup before adding any AS3 or style calls:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientColors="[#0099CC, #2383ac]">
	<mx:HTTPService id="feedList" url="data/feedURLs.xml" />
	<mx:HTTPService id="mdFeed" showBusyCursor="true" useProxy="false" />
	<mx:VBox width="100%" height="100%">
		<mx:HBox width="90%" height="40">
			<mx:Label text="Choose a Site:"/>
			<mx:ComboBox id="siteCombo" labelField="name" />
		</mx:HBox>
		<mx:Text width="90%" color="#000000"
		       text="Drag the divider up and down to resize the panel."/>
		<mx:VDividedBox height="100%" width="100%">
			<mx:DataGrid id="mdGrid" labelField="Choose a Site" height="60%" width="100%">
			<mx:columns>
				<mx:DataGridColumn headerText="The Dirt" dataField="title" />
				<mx:DataGridColumn headerText="The Date" width="100" dataField="pubDate"/>
			</mx:columns>
			</mx:DataGrid>
			<mx:TextArea right="10" top="234" bottom="50" left="10" width="100%" height="30%"/>
		</mx:VDividedBox>
		<mx:LinkButton label="Read the Full Post" bottom="10" left="10" width="150"/>
	</mx:VBox>
</mx:Application>

So, in the markup above, we create the visual components mentioned in the paragraph that preceded the source code, and add two HTTPServices, one for the list of all the feeds we are aggregating, and the other for the actual RSS feed data that we will retrieve once the user chooses a feed they want to review.

Here is a glance of the interface in Flex’s IDE:

In order to add the interactivity, we’ll need to supply a list of feeds for the reader to parse, right? Here is the list of sites and the URLs for their RSS feeds in XML:

1
2
3
4
5
6
7
8
9
10
11
12
13

<sites>
	<site name="egotastic.com"	data="http://egotastic.com/feeds/index.xml" />
	<site name="wwtdd.com"	data="http://www.wwtdd.com/?mode=atom" />
	<site name="defamer"	data="http://www.defamer.com/excerpts.xml" />
	<site name="superficial"	data="http://www.thesuperficial.com/index.xml" />
	<site name="idontlikeyouinthatway"	data="http://feeds.feedburner.com/Idontlikeyouinthatwaycom" />
	<site name="people.com"	data="http://www.people.com/people/web/rss" />
	<site name="eonline.com"	data="http://www.eonline.com/everywhere/rss/index.jsp" />
	<site name="tmz.com"	data="http://www.tmz.com/rss.xml" />
	<site name="usweekly.com" data="http://64.90.166.18/atom/feed" />
	<site name="CelebSlam" data="http://www.celebslam.com/feed/" />
	<site name="I Can Haz" data="http://feeds.feedburner.com/ICanHasCheezburger?format=xml" />
</sites>

Now that we have the XML ready, we need to add the MXML to get the feed to the application tag (creationComplete=feedList.send());):

2

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedList.send()" backgroundGradientColors="[#0099CC, #2383ac]">

Once we have the feedList retreived, we need to do something with it, right? Well, let’s add it to the comboBox, “siteCombo”. Here’s the AS to do it:

[Bindable]
private var sites:ArrayCollection = new ArrayCollection();
 
private function siteListHandler(event:ResultEvent):void{
	sites = event.result.sites.site;
	var siteObj:Object = new Object();
	siteObj.name = "Select"
	siteObj.url = "";
	sites.addItemAt(siteObj,0);
	siteCombo.selectedIndex = 0;
	//trace(event.result);
 }

In that snippet, we created an arrayCollection to store the result. We then add the initial null “Select” option to the comboBox. We also need to add the databinding to the “sites” comboBox, so that it can be populated with the list of sites. Let’s do that now:

8

<mx:ComboBox id="siteCombo" dataProvider="{sites}" labelField="name" />

With the sites ComboBox binded (bound?) to the feedList, we need to add the function to handle the change event, so when the user selects a feed, the RSS feed is loaded. Here it is:

public function chooseSiteFeed(url:String, name:String):void{
myURL = url;
mdFeed.send();
}

Now that the mdFeed is triggered, what do we do? Well, it would be a good idea to bind the mdFeed results to the datagrid, right? Then we can see all the posts in the feed:

13

<mx:DataGrid id="mdGrid" labelField="Choose a Site" dataProvider="{mdFeed.lastResult.rss.channel.item}" height="60%" width="100%">

Now that the datagrid is getting fed with the tasty RSS results, we need to let the user read the description and then click a link to see the full post, right?

19
20
21
22

<mx:TextArea right="10" top="234" bottom="50" left="10" width="100%" height="30%"/>
		</mx:VDividedBox>
		<mx:LinkButton label="Read the Full Post" bottom="10" left="10" width="150"/>
	</mx:VBox>

That should work… If not, don’t worry, I’m supplying the full MXML source. But first, let’s make sure we can use this little RSS reader on your site. In order to do this, we need to leverage some serverside scripting in order to load the RSS feed via a proxy script. This will let your SWF file make a call to the script, then script handles the external URL call, returning the result as a local XML file for your flash file. Here is what the PHP looks like:

<?php
	// PHP Proxy
	// Loads a XML from any location. Used with Flash/Flex apps to bypass security restrictions
	// Author: Paulo Fierro
	// January 29, 2006
	// usage: proxy.php?url=http://mysite.com/myxml.xml
 
	$session = curl_init($_GET['url']); 	               // Open the Curl session
	curl_setopt($session, CURLOPT_HEADER, false); 	       // Don't return HTTP headers
	curl_setopt($session, CURLOPT_RETURNTRANSFER, true);   // Do return the contents of the call
	$xml = curl_exec($session); 	                       // Make the call
	header("Content-Type: text/xml"); 	               // Set the content type appropriately
	echo $xml; 	      // Spit out the xml
	curl_close($session); // And close the session
?>

So, make yourself a proxyURL.php file with that content in it and save it. If you go back and modifiy the mdFeed function to use the proxy script, everything should be in order… Here, in totality, is the app:

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedList.send()" backgroundGradientColors="[#0099CC, #2383ac]">
	<mx:Script>
		import mx.collections.ArrayCollection;
		import mx.rpc.events.ResultEvent;
		import mx.effects.Resize;
 
		[Bindable]
		private var sites:ArrayCollection = new ArrayCollection();
		[Bindable]
		public var myURL:String; 
 
		private function siteListHandler(event:ResultEvent):void{
			sites = event.result.sites.site;
			var siteObj:Object = new Object();
			siteObj.name = "Select"
			siteObj.url = "";
			sites.addItemAt(siteObj,0);
			siteCombo.selectedIndex = 0;
		 	//trace(event.result);
		 }
 
		 public function chooseSiteFeed(url:String, name:String):void{
		 	myURL = "proxyURL.php?url=" + url;
       		mdFeed.send();
		 }
 
	</mx:Script>
	<mx:Style source="css/OSX.css" />
	<mx:HTTPService id="feedList" url="data/feedURLs.xml" result="siteListHandler(event)"/>
	<mx:HTTPService id="mdFeed" url="{myURL}" showBusyCursor="true" useProxy="false" />
	<mx:VBox width="100%" height="100%">
		<mx:HBox width="90%" height="40">
			<mx:Label text="Choose a Site:"/>
			<mx:ComboBox id="siteCombo" dataProvider="{sites}" labelField="name" change="chooseSiteFeed(ComboBox(event.target).selectedItem.data, ComboBox(event.target).selectedItem.name)" />
		</mx:HBox>
		<mx:Text width="90%" color="#000000"
		       text="Drag the divider up and down to resize the panel."/>
		<mx:VDividedBox height="100%" width="100%">
			<mx:DataGrid id="mdGrid" labelField="Choose a Site" dataProvider="{mdFeed.lastResult.rss.channel.item}" height="60%" width="100%">
			<mx:columns>
				<mx:DataGridColumn headerText="The Dirt" dataField="title" />
				<mx:DataGridColumn headerText="The Date" width="100" dataField="pubDate"/>
			</mx:columns>
			</mx:DataGrid>
			<mx:TextArea htmlText="{mdGrid.selectedItem.description}" right="10" top="234" bottom="50" left="10" width="100%" height="30%"/>
		</mx:VDividedBox>
		<mx:LinkButton label="Read the Full Post" click="navigateToURL(new URLRequest(mdGrid.selectedItem.link));" bottom="10" left="10" width="150"/>
	</mx:VBox>
</mx:Application>

IN the code I also loaded the OSX skin from Scalenine. So there you have it. Pretty easy, really, though I understand I may not have explained it all as well as possible. It’s just easier when you are actually going through things in front of a lab or class. If you have questions on how it all works, feel free to drop me a line. You can download the source, here.

]]> http://visualrinse.com/2008/09/14/how-to-make-a-simple-rss-reader-with-adobe-flex/feed/ 12 An Oldie, But A Goodie… “What are Mashups?” http://visualrinse.com/2008/09/01/an-oldie-but-a-goodie-what-are-mashups/ http://visualrinse.com/2008/09/01/an-oldie-but-a-goodie-what-are-mashups/#comments Tue, 02 Sep 2008 01:49:32 +0000 Chad http://visualrinse.com/?p=402 A few months ago, I was interviewed by a local TV station for a tech interest segment on mashups. I spoke with Tim McGinnis, the reporter featured in this clip and really had a good time. It was a short piece, but I still really enjoyed getting my couple minutes on the tube. My wife’s grandfather, (now 90!), saw me and immediately called her. The call went something like this:

Grandpa:“Chad’s on TV!”
Renee:“Yeah, we just saw that. Pretty cool, huh?”
Grandpa:“What the hell was he talking about?”
Renee:“I have no idea, either.”

I laughed.

]]> http://visualrinse.com/2008/09/01/an-oldie-but-a-goodie-what-are-mashups/feed/ 7 A Deep and Meaningful API, One to Definitely Try Out: GovTrack.Us http://visualrinse.com/2008/07/06/a-deep-and-meaningful-api-one-to-definitely-try-out-govtrackus/ http://visualrinse.com/2008/07/06/a-deep-and-meaningful-api-one-to-definitely-try-out-govtrackus/#comments Mon, 07 Jul 2008 02:08:06 +0000 Chad http://visualrinse.com/?p=377 About a week ago, I sent out a tweet asking for ideas on new APIs that might be worth checking out. You see, I am teaching a mashup course this fall and I need some new source material. I’ve played with Kuler, ColourLovers, Delicious, Yahoo Pipes, Technorati and a couple others (mostly unpublished and just experimental), but I just feel like I was missing something. I needed to check some other things out. Of course the new AS3 APIs for Google maps are out, so those are absolutely on my list, but I wanted some more “content rich” APIs. I spent some time on programmableweb.com (a great source for mashups and APIs) but only found a couple that struck my fancy enough to think about spending what is virtually my nonexistant free time on building a toy.

Rachael Rubin (wildhoney on twitter) was kind enough to point me to the newly revised Last.FM API and I think I will definitely use it at some point, but without a a proper link to the streaming music in their library, building a non playing audio based mashup seems a little less fun that it should be. It seems as though they intentionally make accessing the streams a little difficult to discourage bandwidth abuse.

All that changed today when I came across Govtrack.us on programmableweb. Wow. What a useful API. Fun? Not really… it’s an interface to the mountains of data generated by our Congressional representatives day to day business. Deep stuff. With the ever growing need for governmental transparency in this somewhat crazy time, it’s a fantastic resource to have. Generate clean XML based on what your reps are voting on, meeting about and talking over. Combine this with Google maps or perhaps any number of other rich data sources and you have some amazing potential to bring visibility to a very opaque world. Providing a new or easier to use interface to the insurmountable volumes of legislation might uncover some realizations that may have gone unnoticed otherwise.

I’m definitely going to give this one a spin. Shall we find something out from all of this? It remains to be seen, I guess. I have a few ideas on things I might like to track… how about you?

]]> http://visualrinse.com/2008/07/06/a-deep-and-meaningful-api-one-to-definitely-try-out-govtrackus/feed/ 0 Tried Wordle Yet? Generate Tag Cloud Art From Your Del.icio.us Bookmarks http://visualrinse.com/2008/06/30/tried-wordle-yet-generate-tag-cloud-art-from-your-delicious-bookmarks/ http://visualrinse.com/2008/06/30/tried-wordle-yet-generate-tag-cloud-art-from-your-delicious-bookmarks/#comments Mon, 30 Jun 2008 15:20:08 +0000 Chad http://visualrinse.com/?p=373 It’s no secret that I dig mashups. There is a particularly cool one that popped up recently called Wordle. It generates a word-art style tag cloud from a collection of text, an RSS feed or uses your Del.icio.us bookmarks tags. A very nice packing algorithm and some good color and typography customization options make the end results pretty aesthetically pleasing. Using my web design bookmarks (used very often as a teaching resource for my students), produced this masterpiece:

You should go check the site out. A pretty good selection of creations is popping up over there. I’m not sure about the actual construction of the piece, but due to it being a Java Applet, I’m guessing it was built with Processing.

]]> http://visualrinse.com/2008/06/30/tried-wordle-yet-generate-tag-cloud-art-from-your-delicious-bookmarks/feed/ 6 DekafLovers Featured as Mashup of the Day at ProgrammableWeb. http://visualrinse.com/2008/05/07/dekaflovers-featured-as-mashup-of-the-day-at-programmableweb/ http://visualrinse.com/2008/05/07/dekaflovers-featured-as-mashup-of-the-day-at-programmableweb/#comments Wed, 07 May 2008 18:04:13 +0000 Chad http://visualrinse.com/?p=335 Many thanks to Darius and everyone at ColourLovers for making a great, easy to use API, also thanks to Juan Sanchez and the Degrafa team for making Degrafa the best way to draw in Flex. The DekafLovers mashup is currently featured at programmableweb.com as the mashup of the day and they have a nice writeup of it here. This mashup uses a similar codebase to Cooler Kreator, but uses the ColourLovers API instead of Kuler.

It’s great to get people making these patterns, I love seeing the stuff it produces.

]]> http://visualrinse.com/2008/05/07/dekaflovers-featured-as-mashup-of-the-day-at-programmableweb/feed/ 0