XML

Widget Walkthrough

The first half of this tutorial introduced you to making a rudimentary but functional widget of the sort you can find on Yahoo's site since its purchase of Konfabulator. In this article, you'll add the finishing touches to increase its functionality.

This will instruct the widget to fetch whatever file is waiting at the above URL. You now need to display the file:

function setdata() { datatextarea.data = feeddata; } setdata();

This function can be added into the existing onLoad <action> and simply creates a new URL object, sets the location attribute to the source of the feed, and then retrieves the information as the specified location. At this point, you should have something that looks a little like this:

The function works; it grabs the file located at the target URL, but unfortunately, this happens to be in an XML format! This means our textarea is currently displaying the entire XML file! Another function, to traverse the XML document and pull out just the headlines, is going to be needed. Fortunately, the widget engine provides XPath 1.0 support to make extracting the required items relatively easy.

There are several steps involved in getting the data that we want; if you look at the XML document obtained by the url.fetch command, you'll see that the news headlines we want to grab appear in an element called title, which is a child of the item element, which is a child of the channel element, which finally, is a child of the rss element. Therefore, the element we need is a great-grandchild of the root element. Remove the setData() function as we can extend the getData() function to display the headlines once they have been extracted.