CF8 Ajax Feed Reader In Less Then 60 Lines Of Code

Posted By : todd sharp Posted At : May 30, 2007 2:22 PM Posted In: ColdFusion

4

ColdFusion 8 is beautiful. Without question untouchable. During lunch today I threw together a crude but effective proof of concept feed reader in 45 minutes and with around 55 lines of code. 55. You heard me right. A dynamic Ajaxified feed reader. If you subtract the html tags it's probably more like 40 lines.

I've got a demo hosted up at HostMySite.

Let me break down a few of the new bits to show how some of it is done in CF8. The complete example is attached as a zip to this post.

First cool thing is the cflayout with a type of 'border'. This layout gives us a cool bordered layout in which we can use different cflayoutarea's (top, left, bottom, etc) to get a nice structured feel to our application.

<cflayout type="border">
    <cflayoutarea position="left" name="feedList" size="200">
    <div id="feedDiv" spry:region="dsFeeds" style="margin:10px;">
        <!--Display the data in a list -->
        <ul id="feedList">
            <li spry:repeat="dsFeeds"><a href="JavaScript:getFeed('{url}')">{feedTitle}</a></li>
        </ul>
    </div>
    </cflayoutarea>
    <cflayoutarea position="center" source="feed.cfm" name="feedContainer" />
</cflayout>

So I've got a border layout here with a left panel and a main content panel (position="center"). In the left panel I simply output a dynamic spry dataset of feeds (of course created with cfsprydataset). In the main content area I'm binding the layoutarea to the url 'feed.cfm'. By default I'm not displaying anything - but I could have easily displayed a "Please choose a feed message" by checking to see if my url variable was passed.

So in my feed list I'm calling getFeed() and passing the url in my dataset. Here's a look at my getFeed() function.

<script type="text/javascript">
getFeed = function(url){
ColdFusion.navigate('feed.cfm?feed='+url, 'feedContainer');
}
</script>

More easiness. I use the built in ColdFusion.navigate() function to load the feed from feed.cfm and return the contents of that page to the 'feedContainer' (which is the name of my cflayoutarea).

What about feed.cfm? Must be a complicated template right? Wrong. Without showing every bit of display code - here's the heart of the page:

<cfparam name="url.feed" default="">
<cfparam name="enclosureDir" default="#expandPath("enclosures")#">
<cfif len(url.feed)>
<cffeed action="read" source="#url.feed#" properties="feedData" query="thisFeed" enclosureDir="#enclosureDir#" ignoreEnclosureError = "true" timeout="10" />
</cfif>

Using cffeed gets the contents of the feed and returns the items as a query (by specifying the query attribute) as well as a struct of metadata (by specifying the properties attribute). A bit of outputting this data in some div's and that is it.


This post contains references and/or code samples from the public beta of ColdFusion 8 (Scorpio). The features and code here are subject to change and may not work in the final release of ColdFusion 8. Use at your own risk.

Comments (4)

Rey Bango's Gravatar @Todd: Check out what Ashwin from Adobe did.

http://www.reybango.com/index.cfm/2007/6/6/CF8-Aja...

He revamped the code and made it even more streamlined. Very cool!

Mark Tomkinson's Gravatar Will this code work with CF MX7?

todd sharp's Gravatar Nope. It uses built in cf 8 stuff. Rey - didn't you create a jQuery version? That should work on 7...

Rey Bango's Gravatar Yeah. I'll put up the code when I get back in town.