Additional Blogs by Members
Showing results for 
Search instead for 
Did you mean: 
Active Contributor
0 Kudos
Sometimes one finds real hidden treasures on SDN that only a few people seem to have discovered. A perfect example is this forum thread  (SDN Search Widget) posted by David Kang on Jan 4 th . He made SDN search widgets for the Yahoo widget engine  ( These are really great. Certainly for me, since I've already been (co-)developing SDN search tools for browsers, but nothing as yet for the desktop.    The desktop is a cool subject these days. People say that it all started when Apple launched its Dashboard for the Tiger version of OS X, but that's not exactly true. It was a small start-up in Palo Alto called Pixoria that should get all the credit. Raise your hand if you have ever heard of this company. Pixoria developed a scripting application, called Konfabulator, with which people could create mini-apps, a.k.a widgets, for their desktop. The company doesn't exist anymore though as it was acquired by Yahoo in July 2005. Yahoo didn't change it a lot when they re-launched the product. Apart from re-branding it and making it free (it cost $19.95 before), nothing else changed. The file extensions and the name of the engine remained the same. Even after launching version 3 (with some extra features for enabling more Yahoo related widgets) the tutorials don't refer to Yahoo at all. The good thing is that it runs on both Windows and Macintosh, which the Tiger Dashboard doesn't.    At first sight there are many striking similarities between Konfabulator and Dashboard. In fact one could almost believe that they were both written by the same people. The structures of the widgets are basically the same:    ** an application file **   ** a javascript file **   ** a couple of PNG files for the graphical interface **     for the Mac users there are additional files like Info.plist for installation purposes.   On top of that, the look and feel of both approaches is very similar. Things are seldom what they seem though, because if you though that you could interchange widgets between both systems, you'd be wrong. Davids SDN search widget will never work under Dashboard.             The biggest difference is the application file. Whereas Konfabulator works with a “proprietary” XML format, Dashboard sticks to a more “standard” HTML. Standard is not the proper word, since it is more Safari HTML. The canvas tag  (Blank Canvas) is a good example of this, but luckily other browsers will include this tag too.     *My Dashboard is fantastic   *So there is a problem if one doesn't want to use the Yahoo widgets. This can be due to several reasons:   0.1.   0.2. not liking Yahoo 0.3.   0.4. the widgets provided at Yahoo being too commercial 0.5.   0.6. not wanting to install extra software since the same functionality is provided within Dashboard 0.7.      Therefore I decided to create a search widget for Dashboard. I took the earlier developed Firefox/Mozilla SDN search plugin  (Chicken Run) as the functionality to aim for. Here follows a step by step guide on how to proceed.     +Step 1: Create the core application. +   As said earlier, this is just a matter of creating an HTML file. This isn't rocket science in this case. All we need to do is to include the style sheet specification     @import "SDN.css";          And include the javascript that will do the actual search, but more on that in a minute.          The only special thing is the  . This search field is adopted in Safari 1.3 and 2.0 and has some useful features like auto save, history, etc. More info can be found at this web log  (            The completed code looks like this.     "">           @import "SDN.css";             !Default.png!                +Step 2: Create the style sheet +   Again, nothing spectacular. It all depends a bit on one's taste, but I've chosen to stick to a stylesheet that can be found in a lot of widgets.   body {   margin: 0;   }   #search-input   {   position: absolute;   font: 11px "Lucida Grande";   top:11px;   left:111px;   width:211px;   height:22px;   -apple-dashboard-region: dashboard-region(control rectangle); }       +Step 3: Create the javascript file +   Here comes the actual action on what needs to be done when the search string is submitted. I've taken the same action as within the earlier mentioned Firofox/Mozilla search plugin.   window.onfocus = function () {   document.getElementById('search-input').focus();   }       function search (input)   {   var value = input.value;   if (value.length > 0)   {   value = encodeURIComponent (value);   var url = "" + value + "&SearchPluginName=sdn_all&SelectedCustomProps=resourcetype(value=s*)&sourceid=Apple-Dashboard&ie=UTF-8&oe=UTF-8&query="+   value;   if (window.widget)   widget.openURL (url);   }   }       function keydown (event, input)   {   if (event.keyCode == 13) // enter or return   {   search (input);   }   }       +Step 4: Create widget property list +   This is an Apple type thing, so I won't pay too much attention to it in this web log. The widget property list will provide Dashboard with all the necessary information in order to install/operate the widget properly. All this info is kept via XML in the Info.plist and contains at least the following items:   0.1.   0.2. CFBundleIdentifier – a reverse domain name style string identifying your widget in a unique way 0.3.   0.4. CFBundleName – containing the name of the widget 0.5.   0.6. CFBundleDisplayName – containing the name of the widget that will actually be displayed in the Finder under the icon 0.7.   0.8. CFBundleVersion – the widget version number 0.9.   0.10. MainHTML – the filename for the file we've created in step 1 0.11.      Further info can be found in the Dashboard Reference  ( For our example, the property list looks like this.                I started to create these files, but when my colleague Gerrit a.k.a Sh3Ll4C  ( - you know the cartoonist that has been producing a lot of hot air since 1999 and who designed the cartoon in my Digging in the dirt web log  (Digging in the dirt) – saw me bungle he immediately helped me out and the result looks great:     The icon in the dashboard  The widget itself  The result screen, yes SDN even works under Safari