Blogs
|
SDN by the Dashboard light
|
|
Sometimes one finds real hidden treasures on SDN that only a few people seem to have discovered. A perfect example is this forum thread 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 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:
- not liking Yahoo
- the widgets provided at Yahoo being too commercial
- not wanting to install extra software since the same functionality is provided within Dashboard
Therefore I decided to create a search widget for Dashboard. I took the earlier developed Firefox/Mozilla SDN search plugin 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
<style type="text/css" title="AppleStyle">
@import "SDN.css";
</style>
And include the javascript that will do the actual search, but more on that in a minute.
<script type='text/javascript' src='SDN.js' charset='utf-8'></script>
The only special thing is the <input type=”search”>. 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.
<input type='search' id='search-input' onkeydown='keydown(event, this);' results='0'></input>
The completed code looks like this.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css" title="AppleStyle">
@import "SDN.css";
</style>
<script type='text/javascript' src='SDN.js' charset='utf-8'></script> </head>
<body>
<img src='Default.png'></img>
<input type='search' id='search-input' onkeydown='keydown(event, this);' results='0'></input>
</body>
</html>
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 = "https://www.sdn.sap.com/irj/sdn/search?QueryString=" + 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:
- CFBundleIdentifier – a reverse domain name style string identifying your widget in a unique way
- CFBundleName – containing the name of the widget
- CFBundleDisplayName – containing the name of the widget that will actually be displayed in the Finder under the icon
- CFBundleVersion – the widget version number
- MainHTML – the filename for the file we've created in step 1
Further info can be found in the Dashboard Reference. For our example, the property list looks like this.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>BuildVersion</key>
<string>3</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleVersion</key>
<string>1.0</string>
<key>ProjectName</key>
<string>GoogleWidget</string>
<key>SourceVersion</key>
<string>10300</string>
</dict>
</plist>
and in the infoPList.strings file :
CFBundleDisplayName = "SDN";
Step 5: create the dashboard graphics.
There are two images required for a widget:
- the icon that will be shown on the Dashboard a.k.a. the Widget bar icon. It must be named Icon.png
- the image that will determine the look of your widget. It will also determine the size of the widget when it's not specified in the above property list. It must be named Default.png
Two points of attention: they need to be in PNG format and the leading letter must be a capital letter.
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 – 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 
All this can be downloaded here. You only need to extract it and double click on the icon. It'll install itself under the Library/Widget map (it'll be created if the map doesn't exist yet) of your user. If everything work out well you will see the widget in your Dashboard. If you want to experiment yourself with making widgets under Dashboard, you'll find all info/software at the Apple Developer Connection a.k.a. ADC (I always think of the German automobile club when I go to this site).
Conclusion
As you can see, even Mac enthusiasts remain not free from the influence of SDN. Even without installing extra software like Mozilla/Firefox and other Yahoos, you will be able to retrieve the best from SDN.
Eddy De Clercq is trying to discover the secrets of Business Intelligence at the Katholieke Universiteit Leuven (Belgium).
| Showing messages 1 through 4 of 4. | ||
|
|
||
| Titles Only | Main Topics | Oldest First |
- Konfabulator was not the first, too :-)
2006-02-02 00:35:23 Alon Weinstein
Business Card
[Reply]
A little known fact is that the first application to introduce what is now known as a desktop-widgets-engine is Stardock with their DesktopX application. Konfabulator came next, and Dashboard was more-or-less a rip-off of Konfabulator (although some differences are apparent, especially the fact that Dashboard widgets are hidden and not docked on the desktop; that is of course unless you want them to be ;-))
The widget looks great!
Cheers,
Alon.- Konfabulator was not the first, too :-)
2006-02-02 01:15:42 Eddy De Clercq Business Card [Reply]
Alon,
Thanks for the additional info.
Eddy- Konfabulator was not the first, too :-)
2006-11-27 20:57:21 John Astill
Business Card
[Reply]
Hi Eddi,
The link takes me to the widget for Yahoo. Do you also have a link for the Dashboard version?
Thanks
JohnA- Konfabulator was not the first, too :-)
2006-11-27 23:45:18 Eddy De Clercq Business Card [Reply]
Hi,
The download link I provided (https://sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/business_packages/a1-8-4/eddy_declercq_SDN_widget.zip) surely refers to the Dashboard version.
Eddy
| Showing messages 1 through 4 of 4. |