Netscape DevEdge

Skip to: [content] [navigation]

The DevEdge RSS-News Ticker Toolbar

Introduction

The DevEdge News Ticker Toolbar is simple to install and provides a convenient way to get the latest news from DevEdge or other online news sources. This browser extension was based on the DevEdge Toolbar technote. It dynamically loads article headlines from remote RSS files and displays them on the toolbar using XUL, JavaScript, and XML-based Standards. The top features are:

Screenshot that shows the DevEdge toolbar UI and its features

Overview

This toolbar was implemented using XUL and JavaScript. To learn specific details about how this toolbar was implemented, please refer to the the original DevEdge Toolbar technote. This section covers the specific details of loading and showing RSS.

Introduction to RSS

In short RSS (Really Simple Syndication) is an XML-based format that allows syndication of articles. The original version was created by Netscape as a means of building extensions for its portal. Today RSS is widely used to syndicate news articles. The newer version allows syndication with richer meta-data description. For specific information on RSS please consult the RSS 2.0 pages.

Here is how the DevEdge RSS file looks like:

Figure 1 : RSS file example based on DevEdge news articles

  
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>DevEdge Viewsource</title>
    <link>http://devedge.netscape.com/viewsource/</link>
    <language>en</language>
    <description>Recent additions to DevEdge Viewsource</description>
    <lastBuildDate>Mon, 30 Jun 2003 09:38:58 GMT</lastBuildDate>
    <copyright>2000-2003 Netscape Communications</copyright>

    <item>
      <title>Article 1</title>
      <link>http://my.website/link-for-the-article1/</link>
      <author>Bob Clary</author>
      <category>Article</category>
      <pubDate>30 Jun 2003 00:00:00 GMT</pubDate>
      <description>Here should be a description to article 1...</description>
    </item>

    <item>
      <title>Article 2</title>
      <link>http://my.website/link-for-the-article2/</link>
      <author>Marcio Galli</author>
      <category>Article</category>
      <pubDate>30 Jun 2003 00:00:00 GMT</pubDate>
      <description>Here should be a description to article 2...</description>
    </item>

 </channel>
</rss>

The RSSLoader object - Loading RSS via XMLHTTPRequest

When the toolbar is initiated, a JavaScript code requests a remote RSS file using Mozilla's XMLHTTPRequest interface. When the requested data is loaded, an array of articles is generated from the RSS. Here is an overview of the class that provides this functionality:

Constructor Summary
  • nsRSSLoader(url)
    when instantiating the object, pass the URL to the RSS datasource.
Method Summary
  • load()
    Return value: void
    Use this method to trigger the call.
  • setCallback(function ref)
    Return value: void
    Use this method to pass the reference to the function to be called when the data is available.
  • setErrorCallback(function ref)
    Return value: void
    Use this method to pass the reference to the function to be called in case of error.
To learn more about the RSSLoader implementation check the source code. When the RSS content is loaded, nsRSSLoader creates an array of elements for each <item /> that is contained in the RSS file. Each element contains a title and a link. Secondly the callback function is executed.

Note: for the purpose of the toolback ticker, a simple array of titles and links is enough. The implementation code that is responsible for the creation of this array is the function nsRSSItem.

Displaying the Headlines

When the callback is executed, the nsRSSLoader's array of articles is used to populated the UI using the DOM.

Installation

Attention: this toolbar is not supported as an official product from DevEdge. It was created simply to demonstrate the technologies involved.

Netscape 7.x uses XPInstall for cross-platform installation of packages. A .xpi file is basically a .zip file that consists of a javascript installer script and the files you want to install. The following script triggers the installation of the XPI. To learn more about XPI, installing and uninstalling the toolbar, please refer to the original DevEdge toolbar technote.

Click here to install (English)
Click here to install (Japanese)

Resources

For further reading about XUL, we recommend XulPlanet.com's XUL Tutorial. Throughout this tutorial, we will link to XulPlanet for more detailed information. The best book on this topic, O'Reilly's Creating Applications with Mozilla, also makes its content available for free online at mozdev.org in typical Mozilla fashion.

XUL:
- XulPlanet.com
- XulPlanet.com XUL Tutorial
- O'Reilly's Creating Applications with Mozilla, also available online at mozdev.org.
- Remote XUL Tutorial
- Creating a Mozilla Extension

XPInstall:
- XPInstall manual

A+R