Monday, April 17, 2006

How to create your own widgets

Well, there might be many tutorials available on "how to write your own widgets", but i could not find one. Yes, may be i am not that smart in googling :( From nowhere i got this idea of writing a widget. Its very simple than you might think. Atleast some simple widgets are damn easy to write. All you need is a proper connection of available tools :) Before starting i would like to say that i am not any expert in these things, but just another programmer. Anyone reading this is free to comment and suggest some nice ideas.

Setup :
  • Firefox
  • Enough(mail me to know how much is "enough") knowledge of HTML, javascript.
  • Behaviour, Prototype
  • Simple ASCII editor, Notepad or Notepad++(i use it).
  • 2 minutes of your valuable time to get the widget ready and 1 minute to read this scrap.
Ok..i am going to show you how to write a very basic, "hello world" kind of widget. We will call this widget as "SayMyName" widget which takes your name as parameter and echoes it. You will place this widget in your HTML with a single line like this :

<span id="SomeId" class="SayMyName" name="Tutankhamun" />

When you place this line in your HTML, all occurences of this line will be replaced with something like :
Hello Tutankhamun!!

Ofcourse, not Tutankhamun all the time but whatever is the value for the name attribute. I will first show you the complete widget and then go into the details.

Step 1 :

Create a directory and put prototype.js, behaviour.js in it. Later save your html file and myWidget.js in it.

Step 2 :

Copy this HTML and save it as a HTML file :

<script type="text/javascript" language="javascript" src="prototype.js"></script>
<script type="text/javascript" language="javascript" src="behaviour.js"></script>
<script type="text/javascript" language="javascript" src="myWidget.js"></script>
<span id="someId" class="SayMyName" name="Tutankhamun" />

Step 3 :

Copy this javascript and save it as myWidget.js.

var myrule = {
'.SayMyName' : function(element) {
element.onclick = function() {
var helloName = element.getAttribute("name");
new Insertion.Before(element, ' Hello ' + helloName + '!!');

Step 4 :

You are done with the widget. Open the html file in a browser and you should see :


Details :

If you are comfortable with javascript, then it should not be very difficult to get it. Actually the main work is done by the libraries ;) behaviour and prototype. Behaviour lets you attach javascript code to html elements in a much cleaner manner. So the funda is,
  • decide upon some classname which you will be using to attach a handler to. In the above example it is "SayMyName".
  • Write a small rule to tell behaviour what to do if it encounters html elements with the "SayMyName" class selector.
  • Since the handler is not attached to any specific event, it is fired immediately on page load(i guess so, not sure though). The handler is also passed a reference of the element which has the said classname("SayMyName").
  • In the handler, get the value for the attribute "name", store it in a variable. Using the prototype library insert a new <i> element with proper text and the name that we want to echo: new Insertion.Before(element, ' Hello ' + helloName + '!!'); We no more need the span, so delete it : Element.remove(element.firstChild);
Well,...thats it. I know it is a bad tutorial, but it was just an effort to write something. So..instead of writing "something", this is far more better :)

No comments: