How to Create Desktop Widgets With Yahoo


This will be my first foray into the world of widgets. I am more of a traditional programmer and I use javascript under extreme duress. Therefore I was never attracted toward the field of widgets or gadgets for that matter. If you want to have a look as to what are widgets please visit yahoo site.

Moving on to requirements for this kind of development

Widget engine, Yahoo calls it Konfabulator. (don’t ask me why, I have no idea). Get Yahoo SDK Download SDK. After the download just install it and you are ready to go.

The secondary requirement is a good text editor, Yahoo uses XML and javascript to design widgets thus, I would suggest finding a good XML and Javascript editor. If you are confused please download the visual studio free edition, i think it will be sufficient for your requirements. On this point I am open to suggestions.

Download the reference manual from the Yahoo site. Click here to download a zip which has the manual in pdf format.

Image editor, you will need a good image editor to design your widget backgrounds and the UI in general thus please buy or get an image editor which is as good as Gimp or Photoshop. The following list has been provided by my readers thus I have no idea how good these softwares are but I know that these are free.

Photoscape Download

Gimp for windows Download

Serif PhotoPlus Download

Beside these software’s you need to have basic understanding of XML and Javascript. These tutorials will not try to teach you either of these two subjects.

The main file which is executed has an extension of kon. This you say is like the exe file under the windows environment. The kon file is not a standalone exe but a file which is used by the konfublator. Once the Konfabulator engine is installed on your system as soon as you double click on any kon file the engine will start and the file will be executed. All these steps will be outline in my video tomorrow on the you tube. If you have any questions feel free to drop me a line

Creating the background

For your widget lets build a small background graphic file. I am not trying to create anything complicated to begin with thus the background file will be an image of 200*200 pixels. The base color is transparent thus it will not obstruct anything and there are three- four shapes. The name of the file is back1.png

Widget Background

Creating the program

Lets fire up our favourite text editor and create a file called helloworld.kon. The basic syntax is like a xml file. therefore it must start with the following line just like an XML file

The First Line Of An XMl File

These files have the basic element as Therefore let us create the basic skeleton of the file

Basic Widget Skeleton

Every widget element must have a window element inside it therefore we must define a window which would be the visible portion of your widget. As we all know every window must have a name, title, height and width in the same way we must define these attributes. Again it is upto to you if you want these as attributes of the window element or child of window element. Personally I prefer the latter.

For the background Image create any graphics and store it in png format

As you can see we have defined all the properties the last property that we must add is the image property which will show the background of the window. Lets put in the image element.

RSS1My First Widget400300true

One important point is the files should be in the same path, because we cannot be sure as to the file system of the user thus if you save your widget in a folder called mywidgets then save the image either there or make a sub-directory such as images or resources to save the image files.

As is customary there must be a hello world message somewhere, thus lets put in the text, in yahoo widget this is also an element called text and attributes like data, color,font etc.

Text Element Inserted

By default the text will be printed on the extreme left i.e 0,0 position. If we want to move the text we must give the voffset and hoffset values. Basically these values will move the text vertically and horizontally from the 0,0 position by the amount of pixels you specify. I have placed the text 100 pixels down and 50 pixels to the right.

RSS1My First Widget400300trueResources/widget.pngNDTV Top News5010016#ff4499

Lets save this and try to execute it. If everything has been installed properly and the file has been written properly, your Desktop should show a security message, just click use widget.

There you have it, your first widget, if you want to close it just left click on it and choose close widget.

Tomorrow I will show you how to put some functionality in this widget, hopefully I will have a video ready too.


Leave a Reply