filenetcafe: 01/27/16

Wednesday, 27 January 2016

Creating user defined classes(Modules) in DOJO

This session will describe how to create a user defined class.

Dojo provides a module to define user specific class ,the module name is "declare" .

now lets create a sample class using dojo.

define(["dojo/_base/declare"],function(declare){
return declare("UserDefinedClass",[],{

//define a name to be print
className:"",
constructor:function(){
console.log("Constructor is called !! ");
},
setClassName: function(className){
this.className=className;
},
getClassName:function(){
console.log("ClassName is "+this.className);
}

});

});

save file as UserDefinedClass.js ,means we created our own module with a name UserDefinedClass ,this class is available in your entire package from now and we can include this module as like other predefined module provided by dojo for us.

using UserDefinedClass Module.

<html>
<head>

<script>
var djConfig={
isDebug:true,
parseOnLoad:true
};
</script>

<script
type="text/javascript"
src="./dojo/dojo.js"
>
</script>
</head>
<body>
<span>This Code Example shows how to create a user defined classes using dojo.</span>

<script>
require(["UserDefinedClass","dojo/parser"],function(userdefined,parser){
parser.parse();//parses all widgets if there are any widgets
var object=new userdefined();
//set name of class form here
object.setClassName("sample class");
//log the name of class by calling getClassName method
object.getClassName();
});
</script>
</body>
</html>

In the above code we used our custom module using require() module provide by dojo for us.

OutPut:

Loading Dojo Example

Dojo is one of the fast growing Javascript technology,it is very easy to use and provides a feel for a programmer as we working with an object oriented programming.

In this tutorial we walk through how to load basic dojo script into your file(HTML).
Before we start programming with DOJO we need to get latest dojo modules ,you can get those modules form dojo official website or click here..

here is the HTML code :

<html>
<head>

<script>
//before loading main module try to load initial configurations
var djConfig={
isDebug:true,
parseOnLoad:true
};
</script>



<script
type="text/javascript"
src="./dojo/dojo.js"

></script>

</head>

<body>

<span>Dojo Load Testing</span>

<script>

dojo.addOnLoad(function(){//calling script immediately once page is loaded takes an anonymous function.
alert("Hey,It's Me DOJO Loaded For You..");
});

</script>
</body>

</html>

Explanation:

First and foremost thing is we need to load dojo configurations that can be loaded by using djConfig.
djConfig is an object that have initial loader configuration parameters to be set.in our code we specified two configuration parameters 1.isDebug 2.parseOnLoad
isDebug parameter tells the browser we are going to debug the code while running it through firebug(firebug is a standard tool referred by DOJO)
parseOnLoad parameter tells the page will parse automatically for checking any widgets that are needed to instantiate.
once page is loaded i am calling method addOnLoad() that do all work for us.

OutPut: