A Simple DOJO Example

This article explains very basic DOJO example for the beginners. It is often quite difficult for the beginners to understand the basic concepts andstart 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 theframework. Though most of the developers who are using DOJO would have hailed from the Java background,for them it is often confusing theSyntax 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 likedojo buildandobject storein my prevIoUs articles. I would request you to read those articles to get more comprehensive knowledge on DOJO programming.

dojo/_base/declareis the DOJO API for declaring the class object. It is similar to the class keyword in Java. Also it supports multiple inheritancefor inheriting from its super classes. I found many of the first time programmers misunderstood the concepts ondojo/_base/declare.In simple terms,it is used for declaring the class.

declare (ClassName,[InheritedClass1,InheritedClass2],{});

It takes three paramters as arguments.

Firstparameteris 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,DOJOclasses can inherit the properties from itssuperclasses.It supports themultiple inheritanceby allowing multple classes to extend. If you don’t want to inherit any superclasses,assign this paramter as null value.
Thirdparameteris the array of properties. It is nothing but,list of variables and methods. How we define variables and methods inside a Java class,similar wayDOJOalso supports properties and methods defined inside its class. Not only that,one can define constructor for the class. This will beinvoked 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);
			    }
			});
		}
	);

defineisAsynchronous Module Definition (AMD)API which is used by DOJO todefine the classes. AMD is used for improving the performance by loading the resources efficiently. From the version 1.7,DOJO has stsrted using AMDconcepts 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 simplynullif there is no inherited classes. Afterthe 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 defineda 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 aboutdojoConfig. Also readhow 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 fundamentalsof how the classes are defined and initiated. This article itself an example how easy to create a simple example. I have not included thedependencies for running this example,however,it is easy for you with the given examples to get started with your firstDOJO programming. Ifyou 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.dpuf

Reference:http://www.javabeat.net/dojo-example/?utm_source=tuicool

A Simple DOJO Example

猜你在找的Dojo相关文章