Yahoo Desktop Widget Sample

Here we walk you through creating a simple Yahoo! Desktop Widget that registers itself with nooked as a new client instance that then pulls from a sample nooked feed.

1. Register a new client

   1. Sign In and click "Add A New Client" from "my clients" menu.
   2. While filling the form, make sure you uncheck "authentication" checkbox.
   3. Take note of the client identifier: on my clients page click the name of your new client, and copy the client identifier from client's details page.

2. Create a sample feed

   Your widget will take data about products from nooked feeds. Feeds can be connected to some external feed source or they can be created and modified via our Atom Publishing Protocol APIs. For the purpose of this sample, create sample feed by clicking "Create sample Feed" button on "My Feeds" page.

   The new feed will be added to the end of feed's list as "Sample Feed XYZ".

   Each nooked feed is syndicated in 3 formats: RSS, Atom and AtomPub. Copy the url of Atom version of your feed by clicking right mouse button on the feed icon in the Atom column of the My Feeds table and choose "Copy Link Location".

3. Configure your Yahoo! Widget development environment

   • In order to create the widget you have to install Yahoo Widgets (Konfabulator) SDK
   • If you are not familiar with this SDK heres a great tutorial that will get you up and running in no time.

4. Write your Yahoo Widget

   • We've got a starting point Widget (.zip file) that you can download to save you some initial work. This package has the same structure that is described on chapter "Publishing Your Widget, Widget File Structure" in the first link.
   • The Widget main file "nooked.kon" presents the layout of Widget. The most important parts are:
     • onLoad attribute in the root "widget" tag. It calls the function defined in main.js (which is loaded with "script" tag)
     • "preference" tag which declares preference setting named "instanceId"
   • At the top of the main.js script you can find constants that should be set with appropriate data:
     • // Your client ID (represents this widget) var CLIENT_ID = "XXXXXXXXXXXXXXXXX";
     • // Feed atom URL to be pulled from var FEED_URL = "http://api.nooked.com/v1/feeds/XXXXXXXXXXX.atom";
   • In order to track the number of installed widgets (instances) we need to register each instance in the platform:
     • After widget is loaded an init() function is called. There we check if the widget is run first time and so value of instanceId is empty. If so, we need to register the instance of the widget. The widget sends the request to platform API that returns newly created instance ID. We handle the response with onRegisterInstance() and then parse to store in preferences retrieved value (parseInstance()).
     • Next step is to fetch the feed using the same action as that called from init() in case when instanceId is not empty. After that request onFeed() handler is invoked and then we parse the Feed in parseFeed() method.
     • Now we can populate widget's content. For the example we fill the element with Feed title and element with Feed entries and so on.

Note that in this example we used only one Feed, however in your own widget you can fetch as much feeds and perform as many actions on API as you want. The really important thing here, is to enable measuring of client usage by registering the instance.