Subscribe

Monday 22 February 2010


Hello there everybody, This is the part 2 of the ongoing series of tutorials which deals with the creation of widgets using Yahoo Konfabulator SDK. In my last post I had a simple widget up and running unfortunately it does not do anything. In this video I will try to teach you the most simple way of reacting to events such as button click.
If you are from a programming background then you might expect a button click event but I am going to use the mouse down event instead. The problem with this approach is, if I use the mousedown event of the windows element in my kon file then anywhere you click this event will be fired. What I want is for this event to fire only when I click inside a button. Thus we will simplify our work by creating a separate graphics for the button and using the mousedown event of that object. Confused, don’t be let us see the original file used for the background


Let us say we want the star fish thing as our button. Instead of sweating by finding the co-ordinates etc, I will create a button1.png with the same image and overlay it on my window.

Let us review our original widget file





As I mentioned earlier I will just overlay this image on top of my background.



There you have it your first event driven widget. The important line is the image tag with the button1.png as the source and the onMouseDown event as a sub-element. If you are familiar with Javascript then you must immediately recognize the web scripting aspect of the program. Simple when the object is clicked we call the alert function of javascript with the message.
I would like to emphasize that this program is not meant to do anything except show you how to use events. Some people had requested me to show them how to add JavaScript code blocks. It is quite simple. As shown in the example below

On the top of the code we define script block, declare a function, this function is called when the button is clicked or onMouseDown event of that object.
Again this post was a simple way of adding events to your widget, in the next blog I will try to put in few more functionalities. If any of you is interested in gadgets drop me a line and I will put in a post and video about gadgets.
Do not forget to subscribe to my channel in you tube to get the most updated tutorials.

No comments:

Post a Comment

 
EatonWeb Blog Directory