Build a Windows Vista FeedSearch Sidebar Gadget

Pete has been experimenting with Sidebar Gadgets for Windows Vista, and offers his first "really useful" product.

One of the coolest things about Windows Vista is the Sidebar with its Gadgets. And what is even more cool Is the fact that it's very easy to write your own Gadgets. Not only is there a Sidebar API which provides you access to system functions, contacts, and much more, Gadgets are authored with simple HTML You can also write COM components, preferably with C++ ATL, that your gadgets can use. But typically, gadgets use simple client script. There is a simple xml manifest for says which file to load and provide space for the author and title, and the requested permission level, along with a link to your website.

Then you just take your Gadget.xml manifest, your javascript ".js" files, images and or css folder, and your html file, and zip them up. Simply change the ".zip" extension to ".gadget" and when you double-click on your "XXX.gadget" file, it automatically installs in the sidebar!

At live.com, there are a number of examples of simple gadgets to get you started, as well as a gallery of user - submitted gadgets. I found one example that gets recent front page items from Digg.com. It uses the Adobe Spry.Data "AJAX" javascript framework, which is a pretty sophisticated way to do databinding into a static HTML page, so I figured I'd download Spry and give it a shot.

But I'm not particularly enamored of Digg right now. It seems it's degraded to a left-wing 20-something Anti Bush, Anti-Microsoft gathering place where absolutely ridiculous posts of dubious value are getting digged up (scratch that- manipulated up) to the front page. So instead, I started out by whipping up a Gadget that would display the most recent feeds from Eggheadcafe.com. Well, I did say I  like the idea of "feeds"...

Following that, and seeing that it all "worked", I turned my attention to coming up with something that could be more useful. The neat thing about a "page" that is in a Gadget is that it runs in a lowered security context which means you have access to "stuff" on the machine that a "normal" web page would not have, and you don't get any of those nasty security warning bars like you would get in your browser if you loaded a werb page with a bunch of script in it off the filesystem. For example, you can use XmlHttp without warnings.

Many developers aren't aware of the fact that live.com now offers a feed search option, that will return RSS format results of only Blog feeds. That is, the link is to the RSS or Atom Xml of the feed, not a link to the "web page".

Example: MasterPages OR Master Pages

Now this gets very interesting, since by simply dynamically replacing the Search Term portion of the search Url, we can use the DOM to dynamically populate our results markup. Using the Spry.Data framework, we can return a DataSet like object and update our Gadget's visible DOM,with almost no client-side code.



feedSearch gadget



So let's take a look at how I put this together. First, let's take a look at the markup for the page:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<script language="JavaScript" type="text/javascript" src="SpryData.js"></script>
<script language="JavaScript" type="text/javascript" src="xpath.js"></script>

<script language="JavaScript" type="text/javascript">
var baseUrl='http://search.live.com/feeds/results.aspx?q=';
var baseUrlEnd ='&mkt=en-US&format=rss&count=50';
var defaultUrl=baseUrl+'asp.net'+baseUrlEnd; // we need a default search
var dsItems = 
new Spry.Data.XMLDataSet(defaultUrl, "/rss/channel/item", 
      { useCache:  false, loadInterval: 10000 });

function getDataSet( search)
{
var url=baseUrl+search+baseUrlEnd;
dsItems.setURL(url);
dsItems.loadData();
} 
  function move_up() {
    container.scrollTop = container.scrollTop-100;
  }

  function move_down()
  {
     container.scrollTop = container.scrollTop+100;

  }
</script>

<style type="text/css">
<!--
// CSS omitted for brevity
-->
</style>

</head>
<body>
<div align=left>Enter Search, Tab Out:<Br/>
<input type=text id=srch onblur="getDataSet(this.value);" ><Br/>
 <a href='javascript:move_up()'>Up</a> | <a href='javascript:move_down()'>Dn</a>
 </div>

<div id="container" spry:region="dsItems">
  <div id='scroll_text' >
<img src="images/logo.png" width="116" height="16" class="logo" />
  <ul spry:repeat="dsItems">
    <li  class="item" title='{dsItems::description}'><div class="contents">
<a href="{dsItems::link}" target="_blank">{dsItems::title}</a></div></li>
  </ul>
</div>
</div>

</body>
</html>	
	

At the top, you can see the script tags that import the required Spry.Data and xpath scripts. Then, you see that I've set up a baseUrl and baseUrlEnd variable to hold the two "pieces" of the search Url to live.com, in between which gets sandwiched the search term from the "srch" input field. I also have a default search term so that when the Gadget first comes up, it won't be empty.

The getData method simply invokes the Spry.Data methods that get a "DataSet" via this Url, and I set it to reload every 10,000 seconds so you have updating data, and then the getDataSet method which is invoked onblur of the input field, which tells Spry to reload the data from the modified Url. The other two methods, move_up and move_down are simply there to offer a way to scroll up or down in your results HTML without having to take up a lot of Sidebar real estate. When you mouse over a feed item, the description element is a title attribute for the <li > element that shows the item, so you see a nice tooltip containing the description text for the feed. And of course, when you click on one, it brings up IE (or Firefox) with the feed rendered in the default Feed stylesheet so you can subscribe to it.

Now here is the Gadget XML "Manifest":

 <?xml version="1.0" encoding="utf-8" ?>
<gadget>
    <name>Feed Search Gadget</name>
    <namespace>eggheadcafe.com</namespace>
    <version>1.0</version>
    <author name="Peter Bromberg">
        <info url="www.eggheadcafe.com" />
    </author>
    <copyright>2006</copyright>
    <description>Search For RSS/Atom Feeds</description>
	<icons>
    	<icon src="images/icon.png" />
    </icons> 
    <hosts>
        <host name="sidebar">
            <base type="HTML" apiVersion="1.0.0" src="Eggheadcafe.html" />
            <permissions>full</permissions>
            <platform minPlatformVersion="0.3" />
        </host>
    </hosts>
</gadget>

Believe it or not -- except for a few images and css, that's all there is to it! I'd put it online, except you would get "Access denied" errors. On your desktop as a SideBar Gadget, this isn't an issue.

You can also develop and debug your Sidebar Gadgets in Visual Studio 2005. It has great support for client script debugging. Just create a WebSite or Web Application Project, bring in your HTML and script files, make sure that the "disable script debugging" checkboxes are unchecked in Internet Explorer, and you are ready to go.

In the zip file that you can download below, you can extract all the items. Also, if you change the ".zip" extension on this file to ".gadget", you can double-click on the file and it will install in the Sidebar! Enjoy.

Download the Zip file that accompanies this article

By Peter Bromberg   Popularity  (1883 Views)