How to Create Desktop Widgets with Yahoo

Photoscape

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 Confabulator. (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 puff 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 software’s are but I know that these are free.
PhotoScape Download
Gimp for windows Download
Serif Photo plus 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 ken. This you say is like the exe file under the windows environment. The ken file is not a standalone exe but a file which is used by the confabulator. Once the Confabulator engine is installed on your system as soon as you double click on any ken 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 let’s 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

Let’s fire up our favorite 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 Uxmal 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 up 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 pang 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. Let’s 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.

Article Source: http://EzineArticles.com/?expert=Sudeep_Mukherjee