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.
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.
Gimp for windows Download
Serif PhotoPlus Download
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
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.