Want to Be a Web Developer ? Learn Dojo Tutorial
dojo tutorials
Dojo is an advanced JS library which is light and fast. Dojo version are 1.4,1.5,1.6,1.7,1.8 and 1.9, where 2.0 is planned to release in 2014. Dojo API contains dojo, dijit, dojo/query ,dojo/mobile and dojoX. In a Dojo tutorial it is important to understand the particular usage of these parts. The best part of Dojo is it’s memory management. Where it is also providing an option for programmatic declaration of dijit elements. Dijit is capable to handle UI elements for all kind of displays or browsers. We will discuss all these and will study vast possibilities of Dojo through these Dojo tutorials in upcoming post. So let’s start!
Getting start with Dojo tutorial
To bootstrap Dojo, you will load the dojo api files: dojo/dojo.js .
“Hello Dojo” Example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello!</title> </head> <body> <h1 >Hello Dojo!</h1> <!-- loading Dojo --> <script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" data-dojo-config="async: true"></script> </body> </html>
You might be thinking we missed the http: from the src attribute. If you drop the protocol from a URL, the browser will assume the protocol that the page was loaded with. This means that your page would work seamlessly if you loaded it via http or https. If you didn’t do this, you would likely cause security warnings popping up in your browser in certain situations with https, which isn’t a good user experience. If you are running this code on your local machine, be sure you are running from within a local web server, as this won’t work if you’re using a file: protocol. For many reasons, you should always run Dojo from a web server, even on your local machine.
If you are going to do a significant amount of development, you should download a source distribution and install it on your local web-server. To get the demos working on your local machine, you would want to put the the demo directory that contains your code in the same root directory that contains your Dojo source distribution.
Example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello World</title> </head> <body> <h1>Hello Dojo!</h1> <!-- loading Dojo Locally--> <script src="../dojo/dojo.js" data-dojo-config="async: true"></script> </body> </html>
Defining and Requiring Modules
Modules in Dojo are individual codes which can be loaded separately. They are identifing using a string which is just like the file path where the code is defined.
Example: “my/module/class” is tring using to load a module “class” which is in my/module.
Let us see how to define a module,
// In Module/class.js (which means this code defines
// the "Module/class" module):
define([
// The dojo/dom module is required by this module, so it goes
// in this list of dependencies.
"dojo/dom"
], function(dom){
// Once all modules in the dependency list have loaded, this
// function is called to define the Module/class module.
//
// The dojo/dom module is passed as the first argument to this
// function; additional modules in the dependency list would be
// passed in as subsequent arguments.
var previousText = {};
// This returned object becomes the defined value of this module
return {
setText: function(id, text){
var node = dom.byId(id);
previousText[id] = node.innerHTML;
node.innerHTML = text;
},
restoreText: function(id){
var node = dom.byId(id);
node.innerHTML = previousText[id];
delete previousTextText[id];
}
};
});
Let us see how to use the defined module,
// Require the "class" module which we have created
require(["Module/class"], function(class){
// Use our module to change the text in the greeting
class.setText("greetings", "Hello Dojo!");
//Restore the text to its original state after a few seconds
setTimeout(function(){
class.restoreText("greetings");
}, 3000);
});
Visual Effects
Let us see how to add visual effects to our application to make it more interactive. To add visual effects we have require “dojo/fx”
Let us try some sliding animation,
require(["dojo/dom", "dojo/fx", "dojo/domReady!"], function(dom, fx){
// dom Ready is used because to start animation only after the document get ready
var hello = dom.byId("hello");
hello.innerHTML += " Hello Dojo!";
// let us animate this
fx.slideTo({
top: 200,
left: 300,
node: hello
}).play();
});
That’s all now to get start with Dojo tutorial.
If you like this Dojo tutorial dont forget to hit a like.
See you soon with next lessons of Dojo tutorial . So keep update technobytz..
