Here's a technorati tag generator written in JavaScript and using the Dojo Toolkit. A while back I was moaning about the lack of documentation for Dojo, so I thought I would do something about it.

I decided to reinvent the wheel Tag generation is a great little thing for a JavaScript web application. It has very focused functionality and it's not a very big piece of code. So if you want to get into Dojo, you can just look at the JavaScript that I wrote, and see how I use bits and pieces of Dojo to implement stuff.

Now what I did not do was use any widgets. Dojo widgets are a whole other ball game. I have written about them before — see my post about implementing a progress bar widget. This bit of example code is more about all the other cool stuff that Dojo lets you do.

The full source code for the tag generator is available in the tags.js file. The code is fairly direct, there's a bit too much repetition and stuff like that. But I thought I would try to not to "architect" it too much, as it is meant to be easy to understand.

Events

The event handling uses the dojo.event.connect function. I also use the convenient $ function convention, instead of the far too verbose document.getElementById, to pick out the HTML elements I want to attach events too. All the event connection code is at the end of the tags.js file.

Transparency

The links on the side bar bring up semi-transparent divs. This is done with the dojo.style.setOpacity function, which hides all the browser specific stuff. I fade in the transparency over a few seconds using the dojo.lang.setTimeout function, which works properly with JavaScript objects, so it's better than the native setTimeout function.

Escaping

Dojo also provides a full suite of escaping functions. I use dojo.string.escapeXml and dojo.string.encodeAscii for formatting the tag text correctly. These are great little functions that "just work".

Dynamic HTML

Various HTML elements are shown and hidden using the dojo.html.show and dojo.html.hide functions. These work fine so long as the element is display:block. It the element is inline, they won't work.

AJAX

And, of course, AJAX. You knew it was coming. The comment form submits the comment data to the server using AJAX and pops up an alert to let you know it was saved. Look for the dojo.io.bind function to handle all this for you. A really big win. Totally cross-browser and another "just works" feature for Dojo.

I should mention that I use JSON for the data encoding, just in case you were wondering how I did that. It's by far the best method for AJAX data exchange. Yeah, I know, the X is for XML. Well, honestly, JSON is better and much easier to work with, it’s just that AJAJ is crappy acronym.

So there you go. If you're an old hand at Dojo, then this post is probably a bit pointless, but if you're just starting out, hopefully you'll find some of it useful. It's meant to highlight things that Dojo can help you with, even if you aren't building the next GMail, Flickr or Web 2.0 Wonder Site.

Feel free to ask questions in the comments…

Technorati Tags: dojo javascript example tutorial sample tag generator technorati