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

Tor Browser 12.5.5 - Anonymize Web brows...
Using Tor Browser you can protect yourself against tracking, surveillance, and censorship. Tor was originally designed, implemented, and deployed as a third-generation onion-routing project of the U.... Read more
Malwarebytes 4.21.9.5141 - 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
TinkerTool 9.5 - Expanded preference set...
TinkerTool is an application that gives you access to additional preference settings Apple has built into Mac OS X. This allows to activate hidden features in the operating system and in some of the... Read more
Paragon NTFS 15.11.839 - Provides full r...
Paragon 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... Read more
Apple Safari 17 - Apple's Web brows...
Apple Safari is Apple's web browser that comes bundled with the most recent macOS. Safari is faster and more energy efficient than other browsers, so sites are more responsive and your notebook... Read more
Firefox 118.0 - Fast, safe Web browser.
Firefox offers a fast, safe Web browsing experience. Browse quickly, securely, and effortlessly. With its industry-leading features, Firefox is the choice of Web development professionals and casual... Read more
ClamXAV 3.6.1 - Virus checker based on C...
ClamXAV is a popular virus checker for OS X. Time to take control ClamXAV keeps threats at bay and puts you firmly in charge of your Mac’s security. Scan a specific file or your entire hard drive.... Read more
SuperDuper! 3.8 - Advanced disk cloning/...
SuperDuper! is an advanced, yet easy to use disk copying program. It can, of course, make a straight copy, or "clone" - useful when you want to move all your data from one machine to another, or do a... Read more
Alfred 5.1.3 - Quick launcher for apps a...
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
Sketch 98.3 - Design app for UX/UI for i...
Sketch is an innovative and fresh look at vector drawing. Its intentionally minimalist design is based upon a drawing space of unlimited size and layers, free of palettes, panels, menus, windows, and... Read more

Latest Forum Discussions

See All

Listener Emails and the iPhone 15! – The...
In this week’s episode of The TouchArcade Show we finally get to a backlog of emails that have been hanging out in our inbox for, oh, about a month or so. We love getting emails as they always lead to interesting discussion about a variety of topics... | Read more »
TouchArcade Game of the Week: ‘Cypher 00...
This doesn’t happen too often, but occasionally there will be an Apple Arcade game that I adore so much I just have to pick it as the Game of the Week. Well, here we are, and Cypher 007 is one of those games. The big key point here is that Cypher... | Read more »
SwitchArcade Round-Up: ‘EA Sports FC 24’...
Hello gentle readers, and welcome to the SwitchArcade Round-Up for September 29th, 2023. In today’s article, we’ve got a ton of news to go over. Just a lot going on today, I suppose. After that, there are quite a few new releases to look at... | Read more »
‘Storyteller’ Mobile Review – Perfect fo...
I first played Daniel Benmergui’s Storyteller (Free) through its Nintendo Switch and Steam releases. Read my original review of it here. Since then, a lot of friends who played the game enjoyed it, but thought it was overpriced given the short... | Read more »
An Interview with the Legendary Yu Suzuk...
One of the cool things about my job is that every once in a while, I get to talk to the people behind the games. It’s always a pleasure. Well, today we have a really special one for you, dear friends. Mr. Yu Suzuki of Ys Net, the force behind such... | Read more »
New ‘Marvel Snap’ Update Has Balance Adj...
As we wait for the information on the new season to drop, we shall have to content ourselves with looking at the latest update to Marvel Snap (Free). It’s just a balance update, but it makes some very big changes that combined with the arrival of... | Read more »
‘Honkai Star Rail’ Version 1.4 Update Re...
At Sony’s recently-aired presentation, HoYoverse announced the Honkai Star Rail (Free) PS5 release date. Most people speculated that the next major update would arrive alongside the PS5 release. | Read more »
‘Omniheroes’ Major Update “Tide’s Cadenc...
What secrets do the depths of the sea hold? Omniheroes is revealing the mysteries of the deep with its latest “Tide’s Cadence" update, where you can look forward to scoring a free Valkyrie and limited skin among other login rewards like the 2nd... | Read more »
Recruit yourself some run-and-gun royalt...
It is always nice to see the return of a series that has lost a bit of its global staying power, and thanks to Lilith Games' latest collaboration, Warpath will be playing host the the run-and-gun legend that is Metal Slug 3. [Read more] | Read more »
‘The Elder Scrolls: Castles’ Is Availabl...
Back when Fallout Shelter (Free) released on mobile, and eventually hit consoles and PC, I didn’t think it would lead to something similar for The Elder Scrolls, but here we are. The Elder Scrolls: Castles is a new simulation game from Bethesda... | Read more »

Price Scanner via MacPrices.net

Clearance M1 Max Mac Studio available today a...
Apple has clearance M1 Max Mac Studios available in their Certified Refurbished store for $270 off original MSRP. Each Mac Studio comes with Apple’s one-year warranty, and shipping is free: – Mac... Read more
Apple continues to offer 24-inch iMacs for up...
Apple has a full range of 24-inch M1 iMacs available today in their Certified Refurbished store. Models are available starting at only $1099 and range up to $260 off original MSRP. Each iMac is in... Read more
Final weekend for Apple’s 2023 Back to School...
This is the final weekend for Apple’s Back to School Promotion 2023. It remains active until Monday, October 2nd. Education customers receive a free $150 Apple Gift Card with the purchase of a new... Read more
Apple drops prices on refurbished 13-inch M2...
Apple has dropped prices on standard-configuration 13″ M2 MacBook Pros, Certified Refurbished, to as low as $1099 and ranging up to $230 off MSRP. These are the cheapest 13″ M2 MacBook Pros for sale... Read more
14-inch M2 Max MacBook Pro on sale for $300 o...
B&H Photo has the Space Gray 14″ 30-Core GPU M2 Max MacBook Pro in stock and on sale today for $2799 including free 1-2 day shipping. Their price is $300 off Apple’s MSRP, and it’s the lowest... Read more
Apple is now selling Certified Refurbished M2...
Apple has added a full line of standard-configuration M2 Max and M2 Ultra Mac Studios available in their Certified Refurbished section starting at only $1699 and ranging up to $600 off MSRP. Each Mac... Read more
New sale: 13-inch M2 MacBook Airs starting at...
B&H Photo has 13″ MacBook Airs with M2 CPUs in stock today and on sale for $200 off Apple’s MSRP with prices available starting at only $899. Free 1-2 day delivery is available to most US... Read more
Apple has all 15-inch M2 MacBook Airs in stoc...
Apple has Certified Refurbished 15″ M2 MacBook Airs in stock today starting at only $1099 and ranging up to $230 off MSRP. These are the cheapest M2-powered 15″ MacBook Airs for sale today at Apple.... Read more
In stock: Clearance M1 Ultra Mac Studios for...
Apple has clearance M1 Ultra Mac Studios available in their Certified Refurbished store for $540 off original MSRP. Each Mac Studio comes with Apple’s one-year warranty, and shipping is free: – Mac... Read more
Back on sale: Apple’s M2 Mac minis for $100 o...
B&H Photo has Apple’s M2-powered Mac minis back in stock and on sale today for $100 off MSRP. Free 1-2 day shipping is available for most US addresses: – Mac mini M2/256GB SSD: $499, save $100 –... Read more

Jobs Board

Licensed Dental Hygienist - *Apple* River -...
Park Dental Apple River in Somerset, WI is seeking a compassionate, professional Dental Hygienist to join our team-oriented practice. COMPETITIVE PAY AND SIGN-ON Read more
Sublease Associate Optometrist- *Apple* Val...
Sublease Associate Optometrist- Apple Valley, CA- Target Optical Date: Sep 30, 2023 Brand: Target Optical Location: Apple Valley, CA, US, 92307 **Requisition Read more
*Apple* / Mac Administrator - JAMF - Amentum...
Amentum is seeking an ** Apple / Mac Administrator - JAMF** to provide support with the Apple Ecosystem to include hardware and software to join our team and Read more
Child Care Teacher - Glenda Drive/ *Apple* V...
Child Care Teacher - Glenda Drive/ Apple ValleyTeacher Share by Email Share on LinkedIn Share on Twitter Read more
Cashier - *Apple* Blossom Mall - JCPenney (...
Cashier - Apple Blossom Mall Location:Winchester, VA, United States (https://jobs.jcp.com/jobs/location/191170/winchester-va-united-states) - Apple Blossom Mall Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.