/About Dojo – I

About Dojo – I

Asalamu Alaikum,

This is Saad Talaat,
How are you?? :).

This time not as i promised last time sadly to talk about the tooltip plugin enterprising…but i will start talking about Dojo and then will give you the main idea of how to enterprise the previous tooltip plugin.in  a next topic..

Anyway Let’s start with Dojo :). before i begin i gave a session about that 2 or 3 months ago..but sadly few have attended so i am gonna talk about it here :).and here is the slide

First What is Dojo ??

Dojo is a Javascript framework not a library which actually depends most on Ajax development for doing it’s marvelous tweaks it’s main job is to program a semi-Dekstop applications over web and it is sooo good in doing that,it also does a good job doing widgets and all of that is open source..

Dojo Also supports all browser which library like jQuery can’t do..and Dojo’s UIs also supports all browser unlike jQuery UI the current version at least the accordion has a pathetic look on the IE browser..but Unlike jQuery Dojo only have 3 themes for it’s UIs but also Unlike the jQuery UIs they arn’t just different in color they are also different in shape.

To be more honest the Dojo’s UIs arn’t UIs they are more like a look and feel for a desktop application over web..

Dojo also provides it’s application with alot of desktop applications facilities like resizing for example table panes…actually a normal table can be a table pane just with changing the dojoType attribute of the table

also those dojoType attributes are gonna disappear soon with html5’s custom attributes they are gonna be deprecated..

Dojo is Used by AOL – IBM – SUN (not anymore sun)- Cisco

anyway let’s see a hello world application 😀

Simply our application will have a button and onclick a message box with hello world comes out.

<title>bla bla</title>
<link ur css….. />
<script src=”dojo/dojo.js” language=”javascript”></script>
<script language=”javascript”>
function efx(){alert(“Hello WOOOOOOORLD!!”);}
function init(){var h=dojo.byId(“btn”);dojo.connect(h,”onClick”,efx);}
<button id=”btn”>Hello</button>

The previous code only does a hello world message the html is quite clear i think let’s start from the 1st script tag

we import the main dojo script that compile or interpret actually

we open another script tag then we require the what?!!!!!!!!!!!

it’s like importing in java but if u went to folder dojo u will find the next names as js files…so instead of writing a big script tag u just require it by dojo so if u went to folder dojo u will find file called fx and nodelist-fx so we just import scripts…anyway

we required fx script which is resonsible for effects…fadein..slide..etc nodelist is an api like the $() function in Jquery u just use query function like this


we actually won’t need those scripts am just showing the structure of the dojo code…


we defined a function that shows a message box

and the next function…dojo.byId!!! yea that is just like document.getElementById!!

then connect….yup 🙂 you can connect the (object,”onevent”,withfunction);

and can connect 2 objects too which i will talk about later..

then we addOnLoad the init function to be invoked or u can use anonymous function inside it the init() function….

i guess it’s quite clear now xD >.> ^.-

to be continued…