This post i will discuss about the basics of dojo from scratch .How to add in a page ,explaining each and every aspect of dojo .After reading this post you will be able to add dojo in your page easily .
Little Recap :
What is dojo ?
Its a javascipt based toolkit or we can say framework providing very rich UI components for web.
Why ?
Gives you readymade things that make your page rich and pretty with professional and powerful features.
Where to get DOJO?
Download the dojo package from dojotoolkit website
http://dojotoolkit.org/download/
current latest version is 1.6.1
How to use?
Lets have a very basic HTML code first
This is a very basic html code saying hello :) .We will name the page teddy ;)
So now you and teddy are friends right.so now our friend is very old fashioned we should give him bit new fashion clothes DOJO clothes :P
Now to add DOJO in any page we have to do is add the reference of the JS file "dojo.js"
Dojo JS is the main file in dojo that actually adds all the important objects in page like DOJO,DIJIT,DOJOX.
SO its time we give teddy some gift :)
Hello i am teddy
Tada ..So finally teddy has a new script tag added to it .Now this script tag wil add dojo to the page.
The URL that we have added is a CDN url of dojo hosted on google apis you can refer to your dojo.js also when you download the dojo package.You can find it in
This is the directory structure of the dojo toolkit zip you downloaded from URL given above
dojo/dojo.js
dojox
dijit
So teddy has a new wardrobe to try different clothes or we can say UI components from ,BUT he doesn't know how to wear them .....
But before we get to them there are some basic things to know first....
dojo.ready/dojo.addOnLoad
Any web developer knows the importance of any onload function .There many things that you want to do in onload from enabling/disabling textboxes to setting of default values or making some ajax calls to get some data from server.There are endless possibilities and uses of onload..Now dojo has given a function for this purpose too.
These two functions are same just an alias to each other
How to use them ?
Lets go back to teddy then :) .Since teddy's very naughty we want to be alerted whenever he comes ,So we will add an alert on load of the page so that we know when he comes.
Hello i am teddy
Little Recap :
What is dojo ?
Its a javascipt based toolkit or we can say framework providing very rich UI components for web.
Why ?
Gives you readymade things that make your page rich and pretty with professional and powerful features.
Where to get DOJO?
Download the dojo package from dojotoolkit website
http://dojotoolkit.org/download/
current latest version is 1.6.1
How to use?
Lets have a very basic HTML code first
<html><head> <title>Hello</title> </head><body> <h1>Hello i am teddy</h1></body></html>This is a very basic html code saying hello :) .We will name the page teddy ;)
So now you and teddy are friends right.so now our friend is very old fashioned we should give him bit new fashion clothes DOJO clothes :P
Now to add DOJO in any page we have to do is add the reference of the JS file "dojo.js"
Dojo JS is the main file in dojo that actually adds all the important objects in page like DOJO,DIJIT,DOJOX.
SO its time we give teddy some gift :)
<html><head> <title>Hello</title> <!-- load Dojo --> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script>
</head><body> <h1> </h1></body></html>Tada ..So finally teddy has a new script tag added to it .Now this script tag wil add dojo to the page.
The URL that we have added is a CDN url of dojo hosted on google apis you can refer to your dojo.js also when you download the dojo package.You can find it in
This is the directory structure of the dojo toolkit zip you downloaded from URL given above
dojo/dojo.js
dojox
dijit
So teddy has a new wardrobe to try different clothes or we can say UI components from ,BUT he doesn't know how to wear them .....
But before we get to them there are some basic things to know first....
dojo.ready/dojo.addOnLoad
Any web developer knows the importance of any onload function .There many things that you want to do in onload from enabling/disabling textboxes to setting of default values or making some ajax calls to get some data from server.There are endless possibilities and uses of onload..Now dojo has given a function for this purpose too.
These two functions are same just an alias to each other
How to use them ?
Lets go back to teddy then :) .Since teddy's very naughty we want to be alerted whenever he comes ,So we will add an alert on load of the page so that we know when he comes.
<html><head><title>Hello</title> <!-- load Dojo --> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script><script> dojo.ready(function(){ alert("Teddy's Here !!!!!"); }); </script></head><body> <h1> </h1></body></html>So now when we will run this code it will show an alert with message "Teddy's Here !!!!!"
Similarily you can use dojo.addOnload
dojo.addOnLoad(function(){ alert("Afrobeat"); });
dojo.byId / dijit.byId
These are two most important and most useful functions that you will be using to get reference of any dijit widget or any dom node in page.These are direct alternatives of "document.getElementById" etc....
var node=dojo.byId("id")
This is a simple alias to document.getElementById .One good thing that i feel is that it is short .
it returns null or undefined if no node is found depending on browser.
Dijit.byId("ID") is used to get reference to dijit components or widgets.We will get into details later when we come to widgets.
dojo.byId("id") can be used to modify all properties of html dom node as document.getElementById does like
dojo.byId("id").innerHTML="HELLLO";
will change the innerHTML to hello of the dom node with id "ID".
Now it's too much to wait to see any dojo component right ?
Lets start by adding a dijit textBox to teddy .
Dojo is just like java if you want to use a class you have to import it first similarily in dojo you have to load the module.Dojo does not loads all tha js files of all the components infact it loads the module on demand when it's required.To add a dojo textbox we need to add reference to a dijit widget .
<script type="text/javascript">
dojo.require("dijit.form.TextBox");
</script>Now dojo.require will load a file called TextBox.js from folder strucucture based on the namespace like java.
dijit/form/TextBox.js
When it is loaded you will be able to add dijit textbox to page.Now time to get teddy some DOJO UI.
<html><head><title>Hello</title> <!-- load Dojo --> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script><script> dojo.ready(function(){ alert("Teddy's Here !!!!!"); }); </script></head><body> <h1>Hello i am teddy
</h1> <div dojoType="dijit.form.TextBox"> </div></body></html>
This will add a dojo text box to the page .Sample dojo Text Box
Hello i am teddy
Thats all for today.After this you can add dojo on your page and use it .This is just an overview there's lot to discover .We will uncover the rest later..Till then adios amigos............ :) and don forget to say bye o teddy as he is gonna teach a lot to you guys in coming days :)
