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

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.

[Read the rest of this post ...]

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.

The goal of this exercise is to add interactivity between two dijits, TextBox and Button.

add TextBox

load TextBox dijit

Add another dojo.require after the former two.

dojo.require("dijit.form.TextBox");

add TextBox dijit

Add the following code before button dijit.

<input id="input" class="medium" name="string" type="text" />
<button id="hello" onclick="log()">Hello Dijit</button>

extra attributes

Notice when adding TextBox, a few extra attributes are specified

• trim, tells dojo to remove leading and tailing spaces in the input
• propercase, tells dojo to capitalize the first letter of each word separated by spaces

augment Button onClick function

In this exercise, when the button is pressed, we want the function to read values in the TextBox first, then output the msg to the console.

dijit.registry

To find the TextBox dijit value, we need to find the TextBox dijit first.
dijit.registry, by its name we can guess, contains information about all the dijits in this page. Therefore we can utilize it to find the TextBox dijit and its value.

get the value

//Find the dijit by its id;
var input = dijit.registry.byId("input");
//Get the value of the TextBox by calling its function getValue
var msg = input.getValue();

wrapping up as a function

Replace var log = console.debug in last example with the following code

var log = function(){
var input = dijit.registry.byId("input");
var msg = input.getValue();
if (msg == ""){
msg = "nothing";
}
console.debug("I was pressed to say " + msg);
}

Finally, modify the onClick attribute of the Button.

<button id="hello" onclick="log()">Hello Dijit</button>

Screenshot

Example

Example: lab004.html
Source Code: lab004.txt