I have been having fun with jQuery for a while and found it a truly state-of-art Javascript library. It’s got many good non-intrusive designs and incredible behaviour predictability. I figured one day that I was reluctant to do DOM manipulation when I was asked to do some SIMPLE proof-of-concept javascript hacks. I certainly hate jQuery in a way that it makes me so lazy, you know, people sometimes feel more secure with better knowledge of the underlying mechanisms but I just can’t help forgetting them.

Anyway, while I am lovin’ jQuery, I always thought I had an reliable omnipotent library, the mighty Dojo Toolkit (”Hallelujah“!) , and that really made me feel secure as if I am backed with it so that if I ever found something can’t be tackled by “lightweight” libraries like jQuery, I can go and grab Dojo and attack the problems with Dijits and Dojox.

“…Maybe the team lead is travelling in a space shuttle between galaxies…”

However, as the title of the article suggests, it doesn’t seem to be the case any more. I haven’t looked into Dojo for a year, but last time I used it it still had one of world’s most promising cross browser dynamic graphic feature, with a lot buzz on a higher level charting engine as well. Yet after year, I figured the current chart engine doesn’t even support custom labelling meaning it will only show 1 - oo on the x axis. What can you achieve with such a limitation? Is it really hard to add a feature simple as that in?  I didn’t give up right away but rather googled for related discussions, and I did, cool, you may think just like I did. Well I found too very similar ones, both of which one of Dojo’s team lead had replied to promising the issue will be written in a few weeks, doesn’t sound too bad eh? The posts were 1 year apart in time, i.e. the first one was in 2007 with the promise that it was going to be done in a few years yet it’s still not there by now. Maybe the team lead is travelling in a space shuttle between galaxies so the time he sees is slower. That’s fine and cool but I certainly won’t be able to live to the pointer when he returns.

Okay, so I can’t use Dojox charting now, but I did some low level dojox.gfx before. How about we go and check that out? Go to the API tool, it’s got a much better interface now with eye-comforting dark gray and nice gradients. It also lists class properties, methods and namespaces in separate sections prefixed by type specific icons. Nice. Yet for most of the classes, there weren’t a single line of words describing what do the functions do or how they should be used, basically in the same state as years ago. Dojo had been behind in documentation since the beginning however it’s not improved after ages. Even the Ajax bubble is about to break yet they still haven’t done their job.

I also checked out Dojo Spotlight, a showcase of projects which adopt Dojo to implement front-end effects. I see few really inspiring ones and many had terrible look and feels.

I am not so sure about what happened to the organization of Dojo but I was pretty disappointed. I felt kind of lost because it doesn’t back me up that well as it used to be so I think I shall take it off my list and hopefully it can hit back sometime later.

This blog is more about reflection of realization of how I think I can keep up with the world technologies rather than Peppy itself.

When I first read about Peppy, yet another CSS selector, I was very reluctant to accept it. I’ve just become a fan of jQuery and now there is something new. Nowadays everyone is trying to impress others and nobody can tell immediately whose work will last for a long time. However with a bunch serious unit test the author provided and solid benchmark results, certainly some great work is done here. So I’d like to check out how to integrate this new selector with some of my other JS frameworks and will use it in my next project.

I am always easily fed up by having too many options, but this is the case more and more often in nowadays technologies world. And this trend will continue for sure because of the massive buzz and evolution of SOA. CTOs, Software Architects, and Software Engineers all need to wade through that software jungle to find out which meet the needs of the company, the product, and the component respectively. I have to give up my satisfaction with current technologies and software I am now comfortable with, and embrace whatever I find to be promising along the way. I may be wrong sometimes by passing on the best solution and choosing another, but at least I won’t be trying to stay in my comfort zone with the software I use from a decade ago.

So I’d like to write to myself, don’t hold any prejudice on new stuff.

SWFObject is a lightweight library for simplifying embedding flash in web pages. It was quite confusing to me at first that such a library was of any use since Flash is one of the most standardized program on the web, yet the web is so heterogeneous that even such proprietary programs are suffering from inconsistencies from browser to browser.

It took me sometime to figure out that the library in fact offers only one main feature (maybe there are others that I don’t know). Proving something is is probably harder than proving something is not. I was expecting some more fancy stuff such as calling ActionScript from web pages but there was not a clue of such functionality. Anyhow, now I finally understood its use, and this trivial lab is born.

The old story

I believe before everything messed up, we only needed a simple embed or object tag to add flash. Apparently this has changed and we need experienced people to set it up for us so we don’t need to re-invent the wheel.

How do they do it now?

Add two lines of JavaScript

<script type="text/javascript" src="jslib/swfobject/swfobject.js"></script>
<script type="text/javascript">swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");</script>

Example

Example: lab006.html

The goal of this tutorial is to explore dojo.rpc module. To my best understanding, this is a simplified way of calling servers asynchronously in Dojo. So now you can save a lot of hassle worrying about the types and versions of browsers.

Modify Interface

setting up a remote message

I created a file called lab005.service and put under dojolab/resource/

Later we will load message, asynchronously, from this file.

adding a output pane

The message in a file could be large, so it’s more appropriate to have an output box to display retrieved text.

Adding RPC function

changing the function name

Since when the button is pressed, it’s going to get some data, so a better name representing its function is preferred.

var getData = function(){
...
}

read url

Like in the last exercise, we will read from the TextBox. The value is set as the url to the file from which we will read. It’s also disabled to give you an idea of what it looks like.

<input id="input" name="string" size="50" type="text" value="resource/lab005.service" />

*With Firebug it’s possible to modify the value of the url so disabling it cannot really protect it from being changed.

create dojo.rpc.JsonService object

Require the module first.

dojo.require("dojo.rpc.JsonService");

Create a new JsonService object, passing it the url which it will call.

//msg was read from TextBox value;
var rpc = new dojo.rpc.JsonService({serviceUrl : msg});

bind and call

With the handle to the JsonService object, we will then bind it to handler functions.

rpc.bind(null, null,
{
callback: function(text){
console.debug("Message Retrieved.");
output.innerHTML = text;
}
},
null);

The third parameter of the bind function must be a object that contains at least a callback function. It may also contain another function to deal with cases when the retrieval fails.

The fourth parameter is the url, since we already specified url during JsonService object creation, it can be null.

The first and second are method and parameters, respectively. They are null because the file from which we will read is a plain text file and doesn’t ask for methods or parameters.

Screenshot

Example

Example: lab005.html
Source Code: lab005.txt

In the last few exercises I demoed some most basic use of Dojo toolkit.

Topics Summary

• Install Dojo, set up directory structure
• Load dojo.js
• Turn on themes
• Load and use dijit
• Add events to dijit
• Interact with other dijits

Form dijits are some of the most useful dijits. A lot of web pages contain forms and these enhanced form dijits can greatly improve the user experience of such web pages.

With the former 4 exercises, one shall be able to look into Dijit’s test pages, which are an important resource to learn the power of Dojo dijits.

Those test pages, which can also serve as demo pages, reside under dojo090/dijit/tests/.The form dijits, in particular, are located under dojo090/dijit/tests/form.

Here is the link to that folder on my server. http://kunalu.com/js/dojo090/dijit/tests/form

Forecast

In the following exercises I will try to get hands dirty to discuss more dojo and dojox functions then packaged dijit.