Dojo Modules
Dojo Core:- This contains core dojo files.
Dijit :- This contains modules used for UI widgets.
Dojox :- Contains unstable modules there be included in DIJIT or dojo.
Util : Contains modules for ducumentaiton, Style or testing.
Where to find all our questions :-
One site I recommend for learning dojo is https://dojotoolkit.org/.
Where can I get list of demo of dojo and view its source:-
demos.dojotoolkit.org/demos/
For example for creation of form you can visit:-
http://demos.dojotoolkit.org/demos/form/demo.html
here you will get all demos which can apply to your application.
To see all the widgets you can use in your application or website using dojo
demos.dojotoolkit.org/demos/themePreviewer/demo.html
- How to load dojo in an HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
</body>
</html>
- How to Load another dojo script in your dojo class.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
</script>
</body>
</html>
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
</script>
</body>
</html>
here require method is used to load require dojo classes.
- Writing dojo in an HTML page
dojo.addOnLoad(function() { dojo.create( "div", {
"innerHTML": "Hello, World!" }, dojo.body() ); });
This syntax will write hello world in dojo.
here we are using dojo.create function to load div <> in html using dojo.
Some useful dojo functions
1. dojo.byId The dojo.byId function lets you select a DOM node by its id attribute.
dojo.byId("message").innerHTML;
This is a DIV element with id attribute message1.
2. dojo.fadeOut
dojo.fadeOut({ node: dojo.byId("message"), duration: 600 }).play()
This will cause message to disapper to reappear use fadeIn
3. dojo.query
dojo.query("#list li").forEach(function(item) { console.log(item.innerHTML); });
used to query or work on more than one element.
Using dojo.query to work on attribute using classname
dojo.query(".title").style({ backgroundColor: "yellow", color: "red" });
4. dojo.forEach
For Looping on each element
var list = ['My','name','is','Joe']; dojo.forEach(list, function(item, i) { console.log((i+1)+'. '+item); });
5. The dojo.indexOf function lets you find what position in an array a particular value is at.
dojo.indexOf(list, "name"); 1
Creating Classes
The dojo/_base/declare module is the foundation of class creation within the Dojo Toolkit. declare allows for multiple inheritance to allow developers to create flexible code and avoid writing the same code routines. Dojo, Dijit, and Dojox modules all use declare; in this tutorial, you'll learn why you should too.
ClassName
The className argument represents the name of the class, including the namespace, to be created. Named classes are placed within the global scope. The className can also represent the inheritance chain via the namespace.
Named Class
// Create a new class named "mynamespace.MyClass"
declare("MyClass", null, {
// Custom properties and methods here
});
A class named mynamespace.MyClass is now globally available within the application.
Commonly used functions of dojo
Dojo Config Object
<script type="text/javascript">
var dojoConfig = {
parseOnLoad: true,
isDebug: true,
};
</script>
The attribute
Importing CSS in Dojo
<style type="text/css">
@import "http://maximo.com/dojo/1.1.0/dojo/resources/dojo.css";
@import
"http://maximo.com/dojo/1.1.0/dijit/themes/tundra/tundra.css";
</style>
The dojo/_base/declare module is the foundation of class creation within the Dojo Toolkit. declare allows for multiple inheritance to allow developers to create flexible code and avoid writing the same code routines. Dojo, Dijit, and Dojox modules all use declare; in this tutorial, you'll learn why you should too.
ClassName
The className argument represents the name of the class, including the namespace, to be created. Named classes are placed within the global scope. The className can also represent the inheritance chain via the namespace.
Named Class
// Create a new class named "mynamespace.MyClass"
declare("MyClass", null, {
// Custom properties and methods here
});
A class named mynamespace.MyClass is now globally available within the application.
Commonly used functions of dojo
- Mouseout
- Keypress
- Keyup
- blur
- change
- focus
- click
- mouseover
- submit.
DojoConfig
The
The
dojoConfig object is the primary mechanism for configuring Dojo in a web page or application.
dojoConfig is a simple object stores the array of arrays with key value pairs.
dojo-config attribute
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9/dojo/dojo.js"
data-dojo-config="parseOnLoad: true, isDebug: true"></script>
Dojo Config Object
<script type="text/javascript">
var dojoConfig = {
parseOnLoad: true,
isDebug: true,
};
</script>
The attribute
djConfig="parseOnLoad: true" tells Dojo to search the HTML on your page for any Dojo widgets you may have added. For this to work, we need to include the Dojo parser. This is accomplished by adding some JavaScript code to our page.Importing CSS in Dojo
<style type="text/css">
@import "http://maximo.com/dojo/1.1.0/dojo/resources/dojo.css";
@import
"http://maximo.com/dojo/1.1.0/dijit/themes/tundra/tundra.css";
</style>
Comments
Post a Comment