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

Alfred 4.2 - Quick launcher for apps and...
Alfred is an award-winning productivity application for OS X. Alfred saves you time when you search for files online or on your Mac. Be more productive with hotkeys, keywords, and file actions at... Read more
MenuMeters 2.0.8 - CPU, memory, disk, an...
MenuMeters is a set of CPU, memory, disk, and network monitoring tools for Mac OS X. Although there are numerous other programs which do the same thing, none had quite the feature set I was looking... Read more
ClipGrab 3.8.15 - Download videos from Y...
ClipGrab is a free downloader and converter for YouTube, Vimeo, Facebook and many other online video sites. It converts downloaded videos to MPEG4, MP3 or other formats in just one easy step Version... Read more
Malwarebytes 4.6.11.3824 - Adware remova...
Malwarebytes (was AdwareMedic) helps you get your Mac experience back. Malwarebytes scans for and removes code that degrades system performance or attacks your system. Making your Mac once again your... Read more
Safari Technology Preview 14.1 - The new...
Safari Technology Preview contains the most recent additions and improvements to WebKit and the latest advances in Safari web technologies. And once installed, you will receive notifications of... Read more
Mactracker 7.9.7 - Database of all Mac m...
Mactracker provides detailed information on every Mac computer ever made, including items such as processor speed, memory, optical drives, graphic cards, supported OS X versions, and expansion... Read more
Tor Browser 10.0.2 - Anonymize Web brows...
The Tor Browser Bundle is an easy-to-use portable package of Tor, Vidalia, Torbutton, and a Firefox fork preconfigured to work together out of the box. It contains a modified copy of Firefox that... Read more
iTubeDownloader 6.5.24 - Easily download...
iTubeDownloader is a powerful-yet-simple YouTube downloader for the masses. Because it contains a proprietary browser, you can browse YouTube like you normally would. When you see something you want... Read more
TeamViewer 15.11.6 - Establish remote co...
TeamViewer gives you remote control of any computer or Mac over the Internet within seconds, or can be used for online meetings. Find out why more than 200 million users trust TeamViewer! Free for... Read more
ffWorks 2.1.18 - Convert multimedia file...
ffWorks, focused on simplicity, brings a fresh approach to the use of FFmpeg, allowing you to create ultra-high-quality movies without the need to write a single line of code on the command-line.... Read more

Latest Forum Discussions

See All

Lamplight City is a detective adventure...
Lamplight City is a steampunk adventure game that's available now for iOS after previously launching on PC. It sees players take on the role of private investigator Miles Fordham who is trying to get justice for his clients whilst tracking down... | Read more »
Genshin Impact Progression Guide - Mid-G...
Once you get up to around Adventure Rank 25, Genshin Impact starts to turn into a different thing. What was once a story-driven affair evolves into something more like a traditional MMO. | Read more »
Pixboy, the hit retro-themed platformer,...
Following its successful debut on PC and Nintendo Switch last summer, retro-themed platformer Pixboy has made the lead to mobile devices. The award-winning indie hit, which was developed by a two-person team at Oaky Games, has drawn comparisons to... | Read more »
Raziel: Dungeon Arena's newest char...
Raziel: Dungeon Arena's October update offers a little bit more than usual Halloween-themed outfits you often get this time of year, though those are here too. But beyond that, there is a new character, mercenary system and much more. In need of... | Read more »
Genshin Impact - Marvelous Merchant Even...
We're month since Genshin Impact's initial release, and we're already here at our second event. The Marvelous Merchant event has already been underway for two days and we have just the info you need to complete this silly scavenger hunt each day... | Read more »
Crash Bandicoot: On The Run! spins onto...
There’s a Crash Bandicoot endless runner coming to mobile sometime next spring. [Read more] | Read more »
Mulled 2 is a refreshingly simple ball-p...
Some of the greatest mobile games are actually the simplest ones, and it’s this philosophy that Mulled 2 was built on. Out now for iOS and Android, the puzzle sequel takes the accessible mechanics of its predecessor and builds on them with enticing... | Read more »
Physics-based tower defense game Goblin...
Indie developer Arif Games has released Goblin Raiders on iOS and Android. [Read more] | Read more »
PUBG Mobile has provided yet another upd...
PUBG Mobile has been making a point of publicly mentioning all of their ongoing efforts to vanquish cheating from the popular battle royale. Today two teams within the company have provided updates on their progress. [Read more] | Read more »
Zombieland: AFK Survival is celebrating...
Zombieland: AFK Survival is currently celebrating its one-year anniversary. If you don't quite recognise the name that's because it initially launched as Zombieland: Double Tapper. Anyway, the game is celebrating turning one with two Halloween-... | Read more »

Price Scanner via MacPrices.net

Apple now offering $8000 discount on maxed Ma...
Apple’s powerful Mac Pro can be fully optioned to a max of $53,399 by choosing a 2.5GHz 28-core Xeon W CPU, 1.5TB of memory, Two Radeon Pro Vega II Duo video cards with 2x32GB memory each, 8TB of... Read more
How to save $100-$200 on a new MacBook with A...
Are you a teacher, student, or staff member of any educational institution and need a new Apple MacBook? When you purchase a new MacBook using Apple’s Education discount, Apple will take $100-$200... Read more
Amazon offers Apple Watch Series 6 and SE dis...
Amazon is among the first Apple resellers to offer sale prices on new Apple Watch Series 6 and Apple Watch SE models with models available for up to $25 off Apple’s MSRP. These are the same Watches... Read more
3rd generation 12.9″ iPad Pros available toda...
Apple restocked select 3rd generation 12.9″ WiFi iPad Pros starting at only $699 and up to $380 off original MSRP. Each iPad comes with a standard Apple one-year warranty, outer cases are new, and... Read more
Upgrading To The iPhone 12 And Making The Swi...
FEATURE: 10.28.20 – The future of wireless technology is here but before you can jump onto the 5G bandwagon, you’ll need to upgrade to a compatible device like one of the new iPhones Apple... Read more
Gazelle drops prices on Apple’s iPhone 11 mod...
Gazelle is offering a range of discounted pre-owned unlocked Apple iPhone 11 models starting at $475, with some models seeing price reductions of up to $200. iPhones are offered in Fair, Good, and... Read more
B&H Photo has 2020 13″ Dual-Core MacBook...
B&H Photo has 2020 13″ Dual-Core MacBook Airs on sale today for $100 off Apple’s MSRP, only $899. Expedited shipping is free to many addresses in the US. These MacBook Airs are the same models... Read more
New promo at Verizon: New 64GB iPhone 11 Pro...
Verizon is offering the new 64GB iPhone 11 Pro Max for free for customers switching and opening a new line of service. Qualified trade-in required, worth up to $850 credited to your account over a 24... Read more
Apple has 2020 13″ 1.4GHz MacBook Pros in sto...
Apple has Certified Refurbished 2020 13″ 1.4GHz/256GB 4-Core Touch Bar MacBook Pros available for $1099, $200 off MSRP. Apple’s one-year warranty is included, shipping is free, and each MacBook has a... Read more
Amazon offers $50 discount on all new 2020 12...
Amazon has new 2020 Apple 12.9″ iPad Pros on sale today for $50 off MSRP, with prices starting at $949. Shipping is free. These are the same iPad Pros sold by Apple in their retail and online stores... Read more

Jobs Board

Licensed Dental Hygienist - *Apple* Valley...
Park Dental Apple Valley is seeking a compassionate, professional Dental Hygienist to join our team-oriented practice. Clinical Requirements Minnesota Licensure and Read more
Deskside Support Technician - *Apple* , Wind...
Deskside Support Technician - Apple , Windows **Ref No.:** 20-01859 **Location:** Northridge, California As part of a leading IT managed services specialist with more Read more
*Apple* Computing Specialist - Best Buy (Uni...
**789374BR** **Job Title:** Apple Computing Specialist **Job Category:** Store Associates **Store Number or Department:** 000896-Atlanta GA-Store **Job Read more
Geek Squad Advanced Repair *Apple* Professi...
**789256BR** **Job Title:** Geek Squad Advanced Repair Apple Professional **Job Category:** Store Associates **Store Number or Department:** 001135-Gulf Coast-Store Read more
Cub Foods - *Apple* Valley - Now Hiring Par...
Cub Foods - Apple Valley - Now Hiring Part Time! United States of America, Minnesota, Apple Valley Retail Post Date 1 day ago Requisition # 124800 Sign Up for Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.