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.

 
AAPL
$100.53
Apple Inc.
+1.37
MSFT
$45.33
Microsoft Corpora
+0.22
GOOG
$586.86
Google Inc.
+4.70

MacTech Search:
Community Search:

Software Updates via MacUpdate

Apple Motion 5.1.2 - Create and customiz...
Apple Motion is designed for video editors, Motion 5 lets you customize Final Cut Pro titles, transitions, and effects. Or create your own dazzling animations in 2D or 3D space, with real-time... Read more
A Better Finder Rename 9.39 - File, phot...
A Better Finder Rename is the most complete renaming solution available on the market today. That's why, since 1996, tens of thousands of hobbyists, professionals and businesses depend on A Better... Read more
PopChar X 6.6 - Floating window shows av...
PopChar X helps you get the most out of your font collection. With its crystal-clear interface, PopChar X provides a frustration-free way to access any font's special characters. Expanded... Read more
MacUpdate Desktop 6.0.2 - Install Mac ap...
MacUpdate Desktop 6 brings seamless 1-click installs and version updates to your Mac. With a free MacUpdate account and MacUpdate Desktop 6, Mac users can now install almost any Mac app on macupdate.... Read more
PDFpenPro 6.3.2 - Advanced PDF toolkit f...
PDFpenPro allows users to edit PDF's easily. Add text, images and signatures. Fill out PDF forms. Merge or split PDF documents. Reorder and delete pages. Even correct text and edit graphics! Create... Read more
PDFpen 6.3.2 - Edit and annotate PDFs wi...
PDFpen allows users to easily edit PDF's. Add text, images and signatures. Fill out PDF forms. Merge or split PDF documents. Reorder and delete pages. Even correct text and edit graphics! Features... Read more
OS X Yosemite 10.10 DP6 - Developer Prev...
Note: This is a Developer Preview. You must be a registered Apple Mac Developer to download this update. You can also sign up for the free OS X Beta Program to download and preview public beta... Read more
Flavours 1.1.15 - Create and apply theme...
Flavours is a Mac application that allow users to create, apply and share beautifully designed themes. Classy Give your Mac a gorgeous new look by applying delicious themes! Easy Unleash your... Read more
EtreCheck 1.9.14 - For troubleshooting y...
EtreCheck is a simple little app to display the important details of your system configuration and allow you to copy that information to the Clipboard. It is meant to be used with Apple Support... Read more
iFFmpeg 4.5 - Convert multimedia files b...
iFFmpeg is a graphical front-end for FFmpeg, a command-line tool used to convert multimedia files between formats. The command line instructions can be very hard to master/understand, so iFFmpeg does... Read more

Latest Forum Discussions

See All

Go to Bed – An Interview With Touchfight...
Touchfight Games is an exciting new indie studio that was co-formed between game journalist and author Nathan Meunier, artist Leonard Kenyon, and programmer Jon Kenyon. Their debut game Go To Bed will be released this fall, and with all the... | Read more »
Assault Vector Review
Assault Vector Review By Rob Thomas on August 19th, 2014 Our Rating: :: SIMPLE STRATEGYUniversal App - Designed for iPhone and iPad While this hex-based warp ride is fine in theory, Assault Vector is a bit too simple to be... | Read more »
Tom Hanks’ Hanx Writer has Taken the App...
Tom Hanks’ Hanx Writer has Taken the App Store by Storm Posted by Jessica Fisher on August 19th, 2014 [ permalink ] iPad Only App - Designed for the iPad | Read more »
It Came from Canada: Galaxy Dash
With its use of well-established tropes like endless flying and sci-fi space shooting, the upcoming Galaxy Dash: Race to the Outer Run most likely won’t confound expectations. However, with its robust amount of opportunities for fun player... | Read more »
PromptSmart Review
PromptSmart Review By Jennifer Allen on August 19th, 2014 Our Rating: :: SNAPPY SPEECHGIVINGUniversal App - Designed for iPhone and iPad Offering you a teleprompter in your pocket, PromptSmart is immensely helpful for those who do... | Read more »
The Firm (Games)
The Firm 1 Device: iOS iPhone Category: Games Price: $.99, Version: 1 (iTunes) Description: RELEASE SPECIAL SALE 50%! Welcome to THE FIRM, Your profil retained our full consideration and we have the pleasure to inform you that your... | Read more »
They Need To Be Fed 3 (Games)
They Need To Be Fed 3 1.0.0 Device: iOS Universal Category: Games Price: $1.99, Version: 1.0.0 (iTunes) Description: 360 degree gravity platforming is back! Run, jump, collect, avoid enemies and feed yourself to the monster at the... | Read more »
Who Wore it Best? Phantom Flower vs. And...
Who Wore it Best? takes a break from all the bloodshed to check out two decidedly tranquil and nature-loving puzzles games: Phantom Flower and And Then it Rained. [ Who Wore it Best? Phantom Flower vs. And Then it Rained is a post from... | Read more »
Sentinel 4: Dark Star Review
Sentinel 4: Dark Star Review By Jennifer Allen on August 19th, 2014 Our Rating: :: STURDY TOWER DEFENSEUniversal App - Designed for iPhone and iPad After 4 years, the latest entry to the Sentinel series is here. It’s not quite as... | Read more »
TrashEver2 - You can move your selected...
TrashEver2 - You can move your selected notes to trash box. 1.0.0 Device: iOS Universal Category: Productivity Price: $.99, Version: 1.0.0 (iTunes) Description: TrashEver is an application only for throwing away the note of Evernote... | Read more »

Price Scanner via MacPrices.net

15-inch 2.2GHz MacBook Pro on sale for $1899,...
Adorama has the new 15″ 2.2GHz Retina MacBook Pro on sale for $1899 including free shipping plus NY & NJ sales tax only. Their price is $100 off MSRP, and it’s the lowest price available for this... Read more
Mid-Size Tablet Shootout Posted: iPad mini wi...
I ‘m curious about how many iPads Apple is actually selling these days. It’s been widely rumored and anticipated that new models with A8 SoCs, 2 GB of RAM, 8 megapixel cameras, and fingerprint... Read more
The 15 Biggest iPad Air Problems And How To A...
What’s this? Fifteen “biggest” problems with the iPad Air? Does that mean there are a lot of smaller problems as well? Say it isn’t so! My old iPad 2 has manifested no hardware problems in three... Read more
TYLT Syncable-Duo, 2-in-1 USB Cable With Appl...
TYLT has introduced the Syncable-Duo, a universal cable solution for charging and syncing data to smartphones and tablets. The Syncable-Duo eliminates the need for multiple cables by incorporating... Read more
Save up to $140 off MSRP with Apple refurbish...
Apple is offering Certified Refurbished iPad Airs for up to $140 off MSRP. Apple’s one-year warranty is included with each model, and shipping is free. Stock tends to come and go with some of these... Read more
2.5GHz Mac mini on sale for $549, save $50
B&H Photo has the 2.5GHz Mac mini on sale for $549.99 including free shipping. That’s $50 off MSRP, and B&H will also include a free copy of Parallels Desktop software. NY sales tax only. Read more
Chromebooks Are Actually Sometimes A Better C...
Mac360′s Kate MacKenzie notes that when Steve Jobs announced the post-PC era, he was assuming that the dominant post-PC device would be the iPad he was unveiling, or another Apple product like the... Read more
Files-Finder Edition 1.0 app Brings Finder/Ex...
Appsicum’s Files Finder App is designed for iPad users who miss the functionality of the OS X Finder and Windows’ Explorer on their tablet. Files-Finder Edition App is a complete tool having rich... Read more
Apple and Samsung Both Face Growth Declines I...
As the tablet PC market matures and growth slows, the dominance of market leaders Apple and Samsung is also weakening, according to the latest NPD DisplaySearch Monthly Tablet PC Panel Shipment... Read more
Target online offers $50 off iPad Air, $100 o...
Target has iPad Airs on sale for $50 off MSRP and the 16GB iPad mini on sale for $199 on their online store this week only. Choose free shipping or free local store pickup (if available). Prices are... Read more

Jobs Board

Project Manager / Business Analyst, WW *Appl...
…a senior project manager / business analyst to work within our Worldwide Apple Fulfillment Operations and the Business Process Re-engineering team. This role will work Read more
Position Opening at *Apple* - Apple (United...
**Job Summary** As businesses discover the power of Apple computers and mobile devices, it's your job - as a Solutions Engineer - to show them how to introduce these Read more
Position Opening at *Apple* - Apple (United...
**Job Summary** As more and more people discover Apple , they visit our stores seeking ways to incorporate our products into their lives. It's your job, as a Store Read more
Position Opening at *Apple* - Apple (United...
**Job Summary** Being a Business Manager at an Apple Store means you're the catalyst for businesses to discover and leverage the power, ease, and flexibility of Apple Read more
Project Manager / Business Analyst, WW *Appl...
…a senior project manager / business analyst to work within our Worldwide Apple Fulfillment Operations and the Business Process Re-engineering team. This role will work Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.