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

Viber 11.9.1 - Send messages and make fr...
Viber lets you send free messages and make free calls to other Viber users, on any device and network, in any country! Viber syncs your contacts, messages and call history with your mobile device, so... Read more
Vallum 3.3.2 - $15.00
Vallum is a little tool that helps you monitor and block apps connections and throttle apps bandwidth. It is able to intercept connections at the application layer, and hold them while you decide... Read more
Microsoft OneNote 16.31 - Free digital n...
OneNote is your very own digital notebook. With OneNote, you can capture that flash of genius, that moment of inspiration, or that list of errands that's too important to forget. Whether you're at... Read more
Apple Pages 8.2.1 - Apple's word pr...
Apple Pages is a powerful word processor that gives you everything you need to create documents that look beautiful. And read beautifully. It lets you work seamlessly between Mac and iOS devices, and... Read more
Numbers 6.2.1 - Apple's spreadsheet...
With Apple Numbers, sophisticated spreadsheets are just the start. The whole sheet is your canvas. Just add dramatic interactive charts, tables, and images that paint a revealing picture of your data... Read more
f.lux 39.9873 - Adjusts the color of you...
f.lux makes the color of your computer's display adapt to the time of day, warm at night and like sunlight during the day. Ever notice how people texting at night have that eerie blue glow? Or wake... Read more
Deeper 2.5.0 - Enable hidden features in...
Deeper is a personalization utility for macOS which allows you to enable and disable the hidden functions of the Finder, Dock, QuickTime, Safari, iTunes, login window, Spotlight, and many of Apple's... Read more
NTFS 15.5.71 - Provides full read and wr...
NTFS breaks down the barriers between Windows and macOS. Paragon NTFS effectively solves the communication problems between the Mac system and NTFS. Write, edit, copy, move, delete files on NTFS... Read more
MTR 5.3.0.0 - The Mac's oldest and...
MTR (was MacTheRipper)--the Mac's oldest and smartest DVD-backup app. MTR - the complete toolbox, not a one-trick, point-and-click extractor. MTR is intended for making fair-use, backup copies of... Read more
Keynote 9.2.1 - Apple's presentatio...
Easily create gorgeous presentations with the all-new Keynote, featuring powerful yet easy-to-use tools and dazzling effects that will make you a very hard act to follow. The Theme Chooser lets you... Read more

Latest Forum Discussions

See All

Black Desert Mobile gets an official rel...
Pearl Abyss has just announced that its highly-anticipated MMO, Black Desert Mobile, will launch globally for iOS and Android on December 11th. [Read more] | Read more »
Another Eden receives new a episode, cha...
Another Eden, WFS' popular RPG, has received another update that brings new story content to the game alongside a few new heroes to discover. [Read more] | Read more »
Overdox guide - Tips and tricks for begi...
Overdox is a clever battle royale that changes things up by adding MOBA mechanics and melee combat to the mix. This new hybrid game can be quite a bit to take in at first, so we’ve put together a list of tips to help you get a leg up on the... | Read more »
Roterra Extreme - Great Escape is a pers...
Roterra Extreme – Great Escape has been described by developers Dig-It Games as a mini-sequel to their acclaimed title Roterra: Flip the Fairytale. It continues that game's tradition of messing with which way is up, tasking you with solving... | Read more »
Hearthstone: Battlegrounds open beta lau...
Remember earlier this year when auto battlers were the latest hotness? We had Auto Chess, DOTA Underlords, Chess Rush, and more all gunning for our attention. They all had their own reasons to play, but, at least from where I'm standing, most... | Read more »
The House of Da Vinci 2 gets a new gamep...
The House of Da Vinci launched all the way back in 2017. Now, developer Blue Brain Games is gearing up to deliver a second dose of The Room-inspired puzzling. Some fresh details have now emerged, alongside the game's first official trailer. [Read... | Read more »
Shoot 'em up action awaits in Battl...
BattleBrew Productions has just introduced another entry into its award winning, barrelpunk inspired, BattleSky Brigade series. Whilst its previous title BattleSky Brigade TapTap provided fans with idle town building gameplay, this time the... | Read more »
Arcade classic R-Type Dimensions EX blas...
If you're a long time fan of shmups and have been looking for something to play lately, Tozai Games may have just released an ideal game for you on iOS. R-Type Dimensions EX brings the first R-Type and its sequel to iOS devices. [Read more] | Read more »
Intense VR first-person shooter Colonicl...
Our latest VR obsession is Colonicle, an intense VR FPS, recently released on Oculus and Google Play, courtesy of From Fake Eyes and Goboogie Games. It's a pulse-pounding multiplayer shooter which should appeal to genre fanatics and newcomers alike... | Read more »
PUBG Mobile's incoming update bring...
PUGB Mobile's newest Royale Pass season they're calling Fury of the Wasteland arrives tomorrow and with it comes a fair chunk of new content to the game. We'll be seeing a new map, weapon and even a companion system. [Read more] | Read more »

Price Scanner via MacPrices.net

New 2019 16″ MacBook Pros on sale for $100 of...
Apple Authorized Reseller Adorama has new 2019 16″ MacBook Pros on sale today for $100 off Apple’s MSRP, each including free shipping. In addition, Adorama charges sales tax for NY & NJ residents... Read more
Apple Watch Series 3 GPS models on sale for l...
Amazon has Apple Watch Series 3 GPS models on sale starting at only $179. There prices are the lowest we’ve ever seen for these models from any Apple reseller. Choose Amazon as the seller rather than... Read more
iOS Bug In Facebook News Feed Lets Device Ca...
NEWS: 11.15.19- Users of the Facebook social media platform’s mobile app running on iOS devices won’t, like, this piece of news one bit in where a bug in the News Feed gave access to the camera... Read more
16″ MacBook Pros on sale! Preorder at Amazon...
Apple’s new 16″ MacBook Pros were only introduced yesterday, but Amazon is already offering a $100 discount on preorders. Prices for the base 6-Core 16″ MacBook Pros start at $2299: – 2019 16″ 2.6GHz... Read more
Use our exclusive MacBook Price Trackers to f...
Our Apple award-winning MacBook price trackers are the best place to look for the best sales & lowest prices on new and clearance MacBook Airs and MacBook Pros–including Apple’s new 16″ MacBook... Read more
New November Verizon iPhone deal: Get an iPho...
Verizon has the 64GB iPhone Xr on sale for 50% off for a limited time, plus they will include a free $200 prepaid MasterCard and a free Amazon Echo Dot. That reduces their price for the 64GB iPhone... Read more
Apple cuts prices on clearance, refurbished 2...
Apple has clearance 2018 15″ 6-Core Touch Bar MacBook Pros, Certified Refurbished, now available starting at only $1829. Each model features a new outer case, shipping is free, and an Apple 1-year... Read more
Up to $450 price drop on clearance 15″ MacBoo...
B&H Photo has dropped prices Apple’s 2019 15″ 6-Core and 8-Core MacBook Pros by $400-$450 off original MSRP, starting at $1999, with free overnight shipping available to many addresses in the US... Read more
Here’s how to save $200 on Apple’s new 16″ Ma...
Apple has released details of their Education discount associated with the new 2019 16″ 6-Core and 8-Core MacBook Pros. Take $200 off the price of the new 8-Core model (now $2599) and $200 off the 16... Read more
Price drop! 2019 15″ 2.6GHz 6-Core MacBook Pr...
Focus Camera has dropped their price for clearance 2019 15″ 2.6GHz 6-Core Space Gray MacBook Pros by $400 to $1999 shipped. Apple’s original MSRP for this model was $2399. Focus charges sales tax for... Read more

Jobs Board

Best Buy *Apple* Computing Master - Best Bu...
**746655BR** **Job Title:** Best Buy Apple Computing Master **Job Category:** Sales **Store NUmber or Department:** 002518-Atlantic Center-Store **Job Description:** Read more
*Apple* Mobility Pro - Best Buy (United Stat...
**744973BR** **Job Title:** Apple Mobility Pro **Job Category:** Store Associates **Store NUmber or Department:** 000949-Rochester Hills-Store **Job Description:** Read more
AV Systems Engineer at *Apple* - Theorem, L...
Job Summary Apple Retail Technology is looking for an Audio Visual Systems Engineer to design and implement scalable, next-generation A/V solutions for Apple ?s Read more
Nurse Practitioner - Field Based (San Bernard...
Nurse Practitioner - Field Based (San Bernardino, CA, Apple Valley, Hesperia) **Location:** **United States** **New** **Requisition #:** PS30312 **Post Date:** 3 Read more
Best Buy *Apple* Computing Master - Best Bu...
**746510BR** **Job Title:** Best Buy Apple Computing Master **Job Category:** Store Associates **Store NUmber or Department:** 001407-Milford-Store **Job Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.