TweetFollow Us on Twitter

Creating a Dashboard Widget that Processes an RSS Feed

Volume Number: 24 (2008)
Issue Number: 07
Column Tag: Dashboard Widget

Creating a Dashboard Widget that Processes an RSS Feed

What is an RSS feed and how do I process it from within a Dashboard Widget?

by Mihalis Tsoukalos

Article Overview

A Dashboard Widget, named "GetRSS'' Widget, that uses the RSS technology, is going to be programmed in this article using JavaScript, CSS and HTML code as well as some PNG image files. The "GetRSS'' Widget uses the XMLHttpRequest object from the JavaScript programming language to get data from the MacTech RSS feed and present it in a Dashboard Widget fashion.

Because of the unknown amount of the incoming RSS data, this Widget needs to include a scroll bar–a forthcoming article is going to fully present the scroll bar technique. For the purposes of this article, only RSS-related material is going to be explained.

Also, the presented Widget has a backside! Combining two or more techniques is relatively simple as long as you already know how to use each one of them in isolation.

What is RSS?

RSS (Really Simple Syndication) is a Web content syndication format. RSS is a dialect of XML (Extensible Markup Language) and all RSS files must conform to the XML 1.0 specification. It is extensively used by news websites, weblogs and podcasting. The RSS protocol transfers information in an XML file format that is called RSS feed, RSS stream, webfeed or RSS channel.

Two most important advantages of RSS are that the RSS information is transferred as plain text, and that you can use a news aggregator to automatically get the updated information.

A news aggregator is a category of software that can get RSS feed information and present it to the user. Aggregators trim down the time and effort required for frequently checking the websites you want for updates. Using an aggregator you can subscribe to an RSS feed that it will check for new content at user-determined intervals, and retrieve the new content without further human intervention.

The following is a small part of RSS code, taken from MacTech's News RSS: (http://www.mactech.com/news/mactech.rss):

<?xml version="1.0" encoding="UTF-8"?>
<!— generator="wordpress/1.5" —>
<rss version="2.0" 
   xmlns:content="http://purl.org/rss/1.0/modules/content/"
   xmlns:wfw="http://wellformedweb.org/CommentAPI/"
   xmlns:dc="http://purl.org/dc/elements/1.1/"
>
<channel>
   <title>MacTech News</title>
<!—
   [[link]][[?php bloginfo_rss('url') ?]][[/link]]
—>
   <link>http://www.mactech.com/</link>
   <description>MacTech News is the source of news, information, updates and special offers specifically for the Mac technical community.</description>
   <pubDate>Fri, 14 Mar 2008 14:30:31 -0800</pubDate>
   <generator>http://wordpress.org/?v=1.5</generator>
   <language>en</language>
      <item>
      <title>OWC Announces Mercury Elite-AL Pro Firewire+USB2 1TB Drives</title>
      <link>http://www.mactech.com/news/?p=1010258</link>
      <comments>http://www.mactech.com/news/?p=1010258#comments</comments>
      <pubDate>Fri, 14 Mar 2008 06:30:31 -0800</pubDate>
      <dc:creator>Administrator</dc:creator>
      
   <category>Breaking News</category>
      <guid>http://www.mactech.com/news/?p=1010258</guid>
      <description><![CDATA[OWC ANNOUNCES NEW MERCURY ELITE-AL PRO FIREWIRE+USB2 1 TB STORAGE DRIVES
=46ast, Economical FireWire+USB 2.0 Combo External Drive Solutions Feature
New Oxford 934 Chipset and the Latest SATA Technology
Woodstock, IL, March 14, [...]]]></description>
      <wfw:commentRSS>http://www.mactech.com/news/wp-commentsrss2.php?p=1010258</wfw:commentRSS>
   </item>
      <item>
      <title>New Take Control Ebook Helps Switch from PC to Mac</title>
      <link>http://www.mactech.com/news/?p=1010257</link>
      <comments>http://www.mactech.com/news/?p=1010257#comments</comments>

The listing above will help you understand the RSS feed format. The first line dictates that you are using XML version 1.0 with UTF-8 Unicode character encoding. The second and third line tells that you are using RSS version 2.0 code that is created using the WordPress semantic personal publishing software (line 2). The other lines tell you where you can find the definitions of the various standards. You can also find out that each entry (or record) is included inside the <item> tag and consists of the following tags: <title>, <link>, <comments>, <pubDate>, <dc:creator>, <category>, <guid>, <description> and <wfw:commentRSS>. You will later have to decide which of the information you want to include inside your Widget's output.

Which files compose the complete GetRSS Widget?

The files that compose the GetRSS Widget are the following:

1. Info.plist: a file necessary for every Widget.

2. GetRSS.html: the main HTML file for the "GetRSS" Widget.

3. GetRSS.js: the JavaScript code needed for the "GetRSS" Widget.

4. GetRSS.css: the CSS file needed for formatting the Widget.

5. Two image files called Default.png and Icon.png. Every Dashboard Widget has these two graphics files. The Icon.png file should be 82x82 pixels and is displayed in the Dashboard Widget Bar.

6. Some other files and directories that will be shown later on.

The Info.plist file

The contents of the Info.plist file are the following:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN"
    "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>AllowNetworkAccess</key>
    <true/>
    <key>BackwardsCompatibleClassLookup</key>
    <true/>
    <key>CFBundleIdentifier</key>
    <string>com.mtsouk.widget.getrss</string>
    <key>CFBundleName</key>
    <string>GetRSS</string>
    <key>CFBundleShortVersionString</key>
    <string>2.0</string>
    <key>CFBundleVersion</key>
    <string>200</string>
    <key>CloseBoxInsetX</key>
    <integer>8</integer>
    <key>CloseBoxInsetY</key>
    <integer>7</integer>
    <key>MainHTML</key>
    <string>GetRSS.html</string>
</dict>
</plist>

The GetRSS.html file

The contents of the GetRSS.html can be found in the archive for this article at ftp.mactech.com/src/mactech/volume24_2008/24.07.sit. It should be noted that the GetRSS.html file acts as the glue that connects all the other Widget files. It is also easy to understand that the GetRSS.html file contains uncomplicated HTML code. Most of its code is typical and is included in every Widget that uses certain Dashboard features.

The GetRSS.css File

The contents of the GetRSS.css file can be found in the source archive for this column found at ftp.mactech.com/src/mactech/volume24_2008/24.07.sit. The CSS code may look big and complex, but this is not the case. Most of the CSS code is standard for widgets, and is repeated in every widget that has a backside and a scroll bar.

The GetRSS.js File

The GetRSS.js file is the most important file of the whole Widget. A small mistake in it and the Widget will either misbehave or not work at all. Its contents are also in the archive for this article. Later in, "Explaining the Technique," will further explain the technique and you will better understand the JavaScript code.

Before continuing with the rest of the article, I will have to tell you a little problem that I had with this particular Widget. I first wrote this Widget using Mac OS X 10.4 and it worked fine. When I got the Mac OS X 10.5 DVD and first tried the Widget, it did not work as expected. When I pressed on a link, the link was not working. The following JavaScript code (the output of the diff UNIX utility) shows a small modification that I made for the Widget to work:

<       widget.openURL (div.the_link);
<    } else document.location = div.the_link;
—-
>       widget.openURL(div.getAttribute('the_link'));
>    } 
>    else
>       document.location = div.getAttribute('the_link');

It turns out that the div.the_link code was not working as expected in Leopard. I had to use div.getAttribute('the_link') instead for the Widget to work. In Tiger, those notations were, more or less, equivalent.

The full list of the "GetRSS" Widget files

The following is the full list of the files that compose the "GetRSS" Widget.

drwxr-xr-x   AppleClasses
-rw-r—r—   Default.png
-rw-r—r—   GetRSS.css
-rw-r—r—   GetRSS.html
-rw-r—r—   GetRSS.js
-rw-r—r—   Icon.png
drwxr-xr-x   Images
-rw-r—r—   Info.plist
./AppleClasses:
AppleAnimator.js
AppleButton.js
AppleInfoButton.js
AppleScrollArea.js
AppleScrollbar.js
Images/
./AppleClasses/Images:
scroll_thumb_hleft.png
scroll_thumb_hmid.png
scroll_thumb_hright.png
scroll_thumb_vbottom.png
scroll_thumb_vmid.png
scroll_thumb_vtop.png
scroll_track_hleft.png
scroll_track_hmid.png
scroll_track_hright.png
scroll_track_vbottom.png
scroll_track_vmid.png
scroll_track_vtop.png
slide_thumb.png
slide_track_hleft.png
slide_track_hmid.png
slide_track_hright.png
slide_track_vbottom.png
slide_track_vmid.png
slide_track_vtop.png
./Images:
BackSide.png
background.png
dark.png
light.png
top.png
well.png

NOTE: You can find the JavaScript files contained in the AppleClasses directory of the Widget inside the /System/Library/WidgetResources/AppleClasses/ directory. You will also find the ./AppleClasses/Images directory along with its contents there.

Figure 1 shows the image files that can be found inside the ./Images directory of the Widget.


Figure 1: The images of the ./Images directory

The files found inside the AppleClasses/Images directory of the Widget are provided by Apple and can be found in /Developer/Applications/Dashcode.app/Contents/Resources/AppleClasses/Images/ on a Leopard system–provided that you have Dashcode installed.

Explaining the technique

The most challenging part of this Widget is the GetRSS.js JavaScript file. The following function, called load() does the necessary initializations of the JavaScript objects.

function load()
{
    scrollbar = new
    AppleVerticalScrollbar(document.getElementById("myScrollBar"));
    scrollArea = new
    AppleScrollArea(document.getElementById("contents"), scrollbar);
    scrollArea.scrollsHorizontally = false;
    scrollArea.singlepressScrollPixels = 15;
whiteInfoButton = new AppleInfoButton(document.getElementById("flipper"),
    document.getElementById("front"), "white", "white", showBack);
glassButton = new AppleGlassButton(document.getElementById("doneButton"),
"Done", showFront);
    window.onfocus = function () { scrollArea.focus(); }
    window.onblur = function () { scrollArea.blur(); }
    if (!window.widget)
    {
        show();
    }
}

An attention-grabbing JavaScript function is the show() function which is defined as follows:

function show ()
{
    var now = (new Date).getTime();
    
    // only check if 15 minutes have passed
    if ((now - last_updated) > 900000)
    {
        if (xml_request != null)
        {
            xml_request.abort();
            xml_request = null;
        }
        xml_request = new XMLHttpRequest();
        xml_request.onload = function(e) {xml_loaded(e, xml_request);}
        xml_request.overrideMimeType("text/xml");
        xml_request.open("GET", feed.url);
        xml_request.setRequestHeader("Cache-Control", "no-cache");
        xml_request.send(null);
    }
}

The 900000 time value–it represents the minimum refresh time value–is in milliseconds and is therefore equivalent to 15 minutes (900000/1000 = 900 seconds. 900 / 60 = 15 minutes). Then, a new XMLHttpRequest() object is defined. This object holds the RSS feed data after is processed by the xml_loaded(e, request) function. The xml_loaded(e, request) function extracts the data from the required RSS feed fields using the following JavaScript code:

for( var item = channel.firstChild; item != null; item = item.nextSibling)
{
    if( item.nodeName == 'item' )
    {
        var title = findChild (item, 'title');
        // we have to have the title to include the item in the list
        if( title != null )
        {
            var link = findChild (item, 'link');
            var pubDate = findChild (item, 'pubDate');
            results[results.length] = {title:title.firstChild.data,
                link:(link != null ? link.firstChild.data : null),
                date:new Date(Date.parse(pubDate.firstChild.data))
           };
        }
    }
}

The above JavaScript code parses the RSS feed and mines the wanted information. It only looks for the <item>, <title>, <link> and <pubDate> tags and their respective data.


Figure 2: The "GetRSS" Widget look


Figure 3: The backside of the Widget

It is also both interesting and educational to look at the clickOnTitle(event, div) function definition that introduces the widget.openURL() function.

function clickOnTitle(event, div)
{
   if (window.widget)
   {
      widget.openURL(div.getAttribute('the_link'));
   } 
   else
      document.location = div.getAttribute('the_link');
}

The widget.openURL() method opens the given URL in the (default) web browser which resides outside Dashboard.

Inside the JavaScript code you saw some alert() function calls which are the best technique for debugging Widgets. alert() output is written to the Console. Please remember to remove your alert() function calls when you finish debugging or otherwise your Console logs may become too crowded.

Conclusions

Using a Widget to read RSS feeds is a very valuable technique, especially now that Widgets are getting more and more popular. It is also an efficient way of keeping a close eye on an RSS feed without having to open a dedicated browser window. Finally, please note: The RSS-related code of this article is heavily based on the "Sample RSS" Widget code that is provided by Apple in the "/Developer/Examples/Dashboard/Sample RSS" directory of a Tiger system. Strangely enough, Leopard does not have the "/Developer/Examples/Dashboard" directory with the Widget examples. Also note that the "Sample RSS" Widget does not have a backside.

Bibliography and References

1. RSS: http://www.rssboard.org

2. RSS 2.0.1 specification: http://www.rssboard.org/rss-2-0-1

3. XML 1.0: http://www.w3.org/TR/REC-xml

4. WordPress software: http://wordpress.org

5. The XMLHttpRequest object: http://www.w3.org/TR/XMLHttpRequest

6. XMLHttpRequest object: http://developer.apple.com/internet/webcontent/xmlhttpreq.html

7. Ben Hammersley, Developing Feeds with RSS and Atom, O'Reilly & Associates, 2005

8. Leslie M. Orchard, Hacking RSS and Atom. John Wiley & Sons, 2005

9. Elliote Rusty Harold and W. Scott Means, XML in a nutshell, O'Reilly & Associates, 2002


Mihalis Tsoukalos lives in Greece with his wife Eugenia and enjoys digital photography and writing articles. He is the author of the "Programming Dashboard Widgets" eBook. You can reach him at tsoukalos@sch.gr.

 

Community Search:
MacTech Search:

Software Updates via MacUpdate

Duplicate Annihilator 5.7.5 - Find and d...
Duplicate Annihilator takes on the time-consuming task of comparing the images in your iPhoto library using effective algorithms to make sure that no duplicate escapes. Duplicate Annihilator... Read more
BusyContacts 1.0.2 - Fast, efficient con...
BusyContacts is a contact manager for OS X that makes creating, finding, and managing contacts faster and more efficient. It brings to contact management the same power, flexibility, and sharing... Read more
Capture One Pro 8.2.0.82 - RAW workflow...
Capture One Pro 8 is a professional RAW converter offering you ultimate image quality with accurate colors and incredible detail from more than 300 high-end cameras -- straight out of the box. It... Read more
Backblaze 4.0.0.872 - Online backup serv...
Backblaze is an online backup service designed from the ground-up for the Mac.With unlimited storage available for $5 per month, as well as a free 15-day trial, peace of mind is within reach with... Read more
Little Snitch 3.5.2 - Alerts you about o...
Little Snitch gives you control over your private outgoing data. Track background activity As soon as your computer connects to the Internet, applications often have permission to send any... Read more
Monolingual 1.6.4 - Remove unwanted OS X...
Monolingual is a program for removing unnecesary language resources from OS X, in order to reclaim several hundred megabytes of disk space. If you use your computer in only one (human) language, you... Read more
CleanApp 5.0 - Application deinstaller a...
CleanApp is an application deinstaller and archiver.... Your hard drive gets fuller day by day, but do you know why? CleanApp 5 provides you with insights how to reclaim disk space. There are... Read more
Fantastical 2.0 - Create calendar events...
Fantastical is the Mac calendar you'll actually enjoy using. Creating an event with Fantastical is quick, easy, and fun: Open Fantastical with a single click or keystroke Type in your event details... Read more
Cocktail 8.2 - General maintenance and o...
Cocktail is a general purpose utility for OS X that lets you clean, repair and optimize your Mac. It is a powerful digital toolset that helps hundreds of thousands of Mac users around the world get... Read more
Skype 7.6.0.409 - Voice-over-internet ph...
Skype allows you to talk to friends, family and co-workers across the Internet without the inconvenience of long distance telephone charges. Using peer-to-peer data transmission technology, Skype... Read more

Android's Popular OfficeSuite Now A...
Once only available for Android devices, OfficeSuite has finally landed on the app store. The Mobile Systems app lets you view, edit, create, and share Word, Excel, and PowerPoint documents as well as convert them to/from PDFs. It's touted as being... | Read more »
Fast & Furious: Legacy's Creati...
| Read more »
N-Fusion and 505's Ember is Totally...
| Read more »
These are All the Apple Watch Apps and G...
The Apple Watch is less than a month from hitting store shelves, and once you get your hands on it you're probably going to want some apps and games to install. Fear not! We've compiled a list of all the Apple Watch apps and games we've been able to... | Read more »
Appy to Have Known You - Lee Hamlet Look...
Being at 148Apps these past 2 years has been an awesome experience that has taught me a great deal, and working with such a great team has been a privilege. Thank you to Rob Rich, and to both Rob LeFebvre and Jeff Scott before him, for helping me... | Read more »
Hands-On With Allstar Heroes - A Promisi...
Let’s get this out of the way quickly. Allstar Heroes looks a lot like a certain other recent action RPG release, but it turns out that while it’s not yet available here, Allstar Heroes has been around for much longer than that other title. Now that... | Read more »
Macho Man and Steve Austin Join the Rank...
WWE Immortals, by Warner Bros. Interactive Entertainment and WWE, has gotten a superstar update. You'll now have access to Macho Man Randy Savage and Steve Austin. Both characters have two different versions: Macho Man Randy Savage Renegade or Macho... | Read more »
Fearless Fantasy is Fantastic for the iF...
I actually had my first look at Fearless Fantasy last year at E3, but it was on a PC so there wasn't much for me to talk about. But now that I've been able to play with a pre-release version of the iOS build, there's quite a bit for me to talk... | Read more »
MLB Manager 2015 (Games)
MLB Manager 2015 5.0.14 Device: iOS Universal Category: Games Price: $4.99, Version: 5.0.14 (iTunes) Description: Guide your favorite MLB franchise to glory! MLB Manager 2015, officially licensed by MLB.com and based on the award-... | Read more »
Breath of Light (Games)
Breath of Light 1.0.1421 Device: iOS Universal Category: Games Price: $2.99, Version: 1.0.1421 (iTunes) Description: Hold a quiet moment. Breath of Light is a meditative and beautiful puzzle game with a hypnotic soundtrack by... | Read more »

Price Scanner via MacPrices.net

Apple offering refurbished 27-inch 5K iMacs f...
The Apple Store is offering Apple Certified Refurbished 27″ 3.5GHz 5K iMacs for $2119 including free shipping. Their price is $380 off the price of new models, and it’s the lowest price available for... Read more
16GB iPad mini on sale for $199, save $50
Walmart has 16GB iPad minis (1st generation) available for $199.99 on their online store, including free shipping. Their price is $50 off MSRP. Online orders only. Read more
New 128GB MacBook Airs on sale for $50 off MS...
 B&H Photo has 128GB 11″ and 13″ 2015 MacBook Airs on sale today for $50 off MSRP including free shipping plus NY sales tax only: - 11″ 1.6GHz/128GB MacBook Air (Model #MJVM2LL/A): $849 $50 off... Read more
13-inch 2.6GHz Retina MacBook Pro (refurbishe...
The Apple Store has Apple Certified Refurbished 13″ 2.6GHz/128GB Retina MacBook Pros available for $979 including free shipping. Original MSRP for this model was $1299. Read more
Save up to $600 with Apple refurbished Mac Pr...
The Apple Store is offering Apple Certified Refurbished Mac Pros for up to $600 off the cost of new models. An Apple one-year warranty is included with each Mac Pro, and shipping is free. The... Read more
Samsung Galaxy S 6 and Galaxy S 6 edge U.S. P...
Samsung Electronics America, Inc. has announced the Galaxy S 6 and Galaxy S 6 edge will be available in the U.S. beginning April 10, with pre-orders being accepted now. “We have completely reimagined... Read more
13-inch 2.5GHz MacBook Pro (refurbished) avai...
The Apple Store has Apple Certified Refurbished 13″ 2.5GHz MacBook Pros available for $829, or $270 off the cost of new models. Apple’s one-year warranty is standard, and shipping is free: - 13″ 2.... Read more
Save up to $80 on iPad Air 2s, NY tax only, f...
 B&H Photo has iPad Air 2s on sale for $80 off MSRP including free shipping plus NY sales tax only: - 16GB iPad Air 2 WiFi: $469.99 $30 off - 64GB iPad Air 2 WiFi: $549.99 $50 off - 128GB iPad... Read more
iMacs on sale for up to $205 off MSRP
B&H Photo has 21″ and 27″ iMacs on sale for up to $205 off MSRP including free shipping plus NY sales tax only: - 21″ 1.4GHz iMac: $1019 $80 off - 21″ 2.7GHz iMac: $1189 $110 off - 21″ 2.9GHz... Read more
Färbe Technik Offers iPhone Battery Charge LI...
Färbe Technik, which manufactures and markets of mobile accessories for Apple, Blackberry and Samsung mobile devices, is offering tips on how to keep your iPhone charged while in the field: •... Read more

Jobs Board

DevOps Software Engineer - *Apple* Pay, iOS...
**Job Summary** Imagine what you could do here. At Apple , great ideas have a way of becoming great products, services, and customer experiences very quickly. Bring Read more
*Apple* Retail - Multiple Positions (US) - A...
Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, you're also the Read more
Sr. Technical Services Consultant, *Apple*...
**Job Summary** Apple Professional Services (APS) has an opening for a senior technical position that contributes to Apple 's efforts for strategic and transactional Read more
Lead *Apple* Solutions Consultant - Retail...
**Job Summary** Job Summary The Lead ASC is an Apple employee who serves as the Apple business manager and influencer in a hyper-business critical Reseller's store Read more
*Apple* Pay - Site Reliability Engineer - Ap...
**Job Summary** Imagine what you could do here. At Apple , great ideas have a way of becoming great products, services, and customer experiences very quickly. Bring Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.