This article explains very basic DOJO example for the beginners. It is often quite difficult for the beginners to understand the basic concepts and start writing their first example. Once if they know how to start, it is going to be cake walk for them to learn the advanced concepts in the framework. Though most of the developers who are using DOJO would have hailed from the Java background, for them it is often confusing the syntax of delcaring the classes in Javascript. In fact, DOJO provides the similar approach of object oriented concepts which is used in Java.
Lets look into the core basics on DOJO programming. I have covered few important basic details like dojo build and object store in my previous articles. I would request you to read those articles to get more comprehensive knowledge on DOJO programming.
dojo/_base/declare is the DOJO API for declaring the class object. It is similar to the class keyword in Java. Also it supports multiple inheritance for inheriting from its super classes. I found many of the first time programmers misunderstood the concepts on dojo/_base/declare. In simple terms, it is used for declaring the class.
declare (ClassName,[InheritedClass1,InheritedClass2],{});
It takes three paramters as arguments.
- First parameter is class name. The name in which you are delclaring will be registered as its name.
- Second parameter is list of super classes. Similar to Java, DOJO classes can inherit the properties from its super classes. It supports the multiple inheritance by allowing multple classes to extend. If you don’t want to inherit any super classes, assign this paramter as null value.
- Third parameter is the array of properties. It is nothing but, list of variables and methods. How we define variables and methods inside a Java class, similar way DOJO also supports properties and methods defined inside its class. Not only that, one can define constructor for the class. This will be invoked at the time of creating instance for this class. The syntax:
constructor: function(str1, str2){}
The below sample code is the very simple example for declaring a DOJO class.
define(["dojo/_base/declare",
"dojo/_base/lang",
"app/TestClass1",
"app/TestClass2",
],
function (declare,lang){
return declare ("app.Sample",[TestClass1,TestClass2],
{
constructor: function(str1, str2){
this.str1 = str1;
this.str2 = str2;
},
test : function(){
alert(this.str1 + " " + this.str2);
}
});
}
);
define is Asynchronous Module Definition (AMD) API which is used by DOJO to define the classes. AMD is used for improving the performance by loading the resources efficiently. From the version 1.7, DOJO has stsrted using AMD concepts for their APIs. The values added inside define is list of classes or modules required in the class. It is smiliar to import statement in Java.
app.Sample is the class name declared. Testclass1 and TestClass2 are inherited classes. This will be simply null if there is no inherited classes. After the inherited classes, third argument is the array of properties. First one we have declared in this class is the constructor for the same class. Also we have defined a method test. Note that constructir can be utilized for initializing any startup operations.
- See more at: http://www.javabeat.net/dojo-example/?utm_source=tuicool#sthash.3XfNlp9H.dpuf
HTML Code:
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet" href="src/dijit/themes/claro/claro.css"
media="screen">
</head>
<script>
var dojoConfig = {
baseUrl : "src",
packages : [ {
name : "dojo",
location : "dojo"
}, {
name : "dijit",
location : "dijit"
}, {
name : "dojox",
location : "dojox"
}, {
name : "app",
location : "app"
}, ],
parseOnLoad : true,
async : true
};
</script>
<script src="src/dojo/dojo.js"></script>
<script type="text/javascript">
require([ "app/Sample" ], function(Sample) {
var sample = new Sample("Hello", "World!!");
sample.test();
});
</script>
<body>
</body>
</html>
dojoConfig is declared with appropriate values. If you are not familiar with dojoConfig, please read our previous article about dojoConfig. Also read how to setup dojo.
require([ "app/Sample" ], function(Sample) {
var sample = new Sample("Hello", "World!!");
sample.test();
});
The above code is just initiating the class and calls method test. It is very simple to write the DOJO programming if you understand the fundamentals of how the classes are defined and initiated. This article itself an example how easy to create a simple example. I have not included the dependencies for running this example, however, it is easy for you with the given examples to get started with your first DOJO programming. If you find trouble on your way, just send me a comment with your problem details. I will try my best to resolve your problems.
- See more at: http://www.javabeat.net/dojo-example/?utm_source=tuicool#sthash.3XfNlp9H.dpufReference: http://www.javabeat.net/dojo-example/?utm_source=tuicool