My First Widget

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 this site http://widgets.yahoo.com/ .
Moving on to requirements for this kind of development

1. 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
2. The secondry 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. 
3. Download the reference manual from the Yahoo site. Click here to download a zip which has the manual in pdf format .
4. 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 tommorow 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
   
   
   
   
   
   
   
   
   
   
   
   
   These files have the basic element as Therefore let us create the basic skeleton of the file
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   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.
   
   
   
   
   
   
   
   
   
   
   
   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.
   
   
   
   
   
   
   
   
   
   
   
   
   
   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.
   
   
   

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   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. 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 this message
   
   
   
   
   
   Click on the use widget button and the desktop should show something like this. Please be advised I have drawn the black rectangle to emphasize the window. 
   
   
   
   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.
   
   
   

Watch the video