Dojo >= 1.7 Kickstart

25
By: Hazem Saleh

description

This presentation targets the people who wants to learn the basics of Dojo (>= 1.7).

Transcript of Dojo >= 1.7 Kickstart

Page 1: Dojo >= 1.7  Kickstart

By: Hazem Saleh

Page 2: Dojo >= 1.7  Kickstart

What is Dojo?

Dojo Architecture

dojo.js

Getting Started with Dojo

AMD

DOM functions

Event model

Ajax

References

Page 3: Dojo >= 1.7  Kickstart

Dojo is rich Java Web component framework that can be used for building interactive Web 2.0 applications.

Dojo is an open source work.

Page 4: Dojo >= 1.7  Kickstart

Architecture: Dojo base: The framework kernal (dojo.js) around 60 kb. It

contains the Ajax, Classes System (dojo.declare), dojo.query, AMD ...etc.

Dojo core: Utilities over the dojo base. It contains i18n, animation, integration with data sources (data stores), ...etc.

Dijit: Dojo Widgets.

Dojox: Dojo extension components (Includes Dojo mobile).

Util: Some Dojo utilities that have no access from web pages (ShrinkSafe, DOH, ...etc)

Page 5: Dojo >= 1.7  Kickstart

Module Loader Lang Utils (Classes System) & Array Extras Cookie functions Query, Node & Style Utils I/O (Ajax) JSON serialization Fast CSS Style manipulation Events Color functions Browser detection URL functions Animation Utilities

Page 6: Dojo >= 1.7  Kickstart

Include the CSS styles that your Dojo application needs.

Include the dojo.js file as follows:

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js" data-dojo-config="async: true"></script>

Include the required modules.

Page 7: Dojo >= 1.7  Kickstart

Since Dojo 1.7, Dojo is complaint with the AMD (Asynchronous Module Definition) standard.

Most of the Dojo modules are using AMD since Dojo 1.7.

The benefits of AMD: Asynchronous.

Faster.

Standard.

Dojo AMD modules can work with other JavaScript libraries which supports AMD (theoretically).

Page 8: Dojo >= 1.7  Kickstart

Dojo < 1.7 (synchronous):dojo.require("dojo.cookie");dojo.require("my.widget");dojo.addOnLoad(function(){

alert("DOM is ready");})

Dojo >= 1.7 (AMD asynchronous):require(["dojo/cookie", "my/widget",

"dojo/domReady!"], function(cookie, myWidget){alert("DOM is ready");

})

Page 9: Dojo >= 1.7  Kickstart

Dojo < 1.7 (Class Declaration):dojo.provide("my.widget");dojo.require("dijit._Widget");dojo.declare("my.widget", dijit._Widget, {

// ...}); Dojo >= 1.7 (Class Declaration):define(["dojo/_base/declare", "dijit/_Widget"],

function(declare, _Widget){return declare(“my.widget”, [_Widget], {

// ...});

});

Page 10: Dojo >= 1.7  Kickstart

AMD brings “convenient” modularity to Dojo.

Let’s see how to:

Create AMD module class.

Create AMD module object.

Let’s create the following:

Doubler class that has one method calculate (divID, number).

Factorial object that has one method calculate (divID, number).

Page 11: Dojo >= 1.7  Kickstart

Doubler class (Doubler.js under “custom” folder):

define(["dojo/dom", "dojo/_base/declare"

], function(dom, declare){return declare("Doubler", null, {

calculate: function(divID, number){var node = dom.byId(divID);node.innerHTML = "Double value (" + number + "):

" + (number * 2);}

});});

Page 12: Dojo >= 1.7  Kickstart

factorial object (Factorial.js under “custom” folder):define([

"dojo/dom"

], function(dom){

return {

calculate: function(divID, number){

var node = dom.byId(divID);

var factorial = 1;

for (i = 1; i <= number; ++i) {

factorial *= i;

}

node.innerHTML = "Factorial value (" + number + "): " + factorial;

}

};

});

Page 13: Dojo >= 1.7  Kickstart

In order to use the “custom” module in the page, you need to change Dojo config before Dojo script include as follows:

<script>

var dojoConfig = {

async: true,

packages: [{

name: "custom",

location: location.href.replace(/\/[^/]*$/, '') + "/custom"

}]

};

</script>

Page 14: Dojo >= 1.7  Kickstart

Use the module objects and classes peacefully:

require([..., "custom/Factorial", "custom/Doubler", ...],

function(..., factorial, Doubler, ...) {

// ...

factorial.calculate("result1", 6);

new Doubler().calculate("result2", 6);

// ...

});

Page 15: Dojo >= 1.7  Kickstart
Page 16: Dojo >= 1.7  Kickstart

There are useful packages which are facilitating DOM processing:

DOM retrieval:

require(["dojo/dom", "dojo/domReady!"], function(dom) {

//Get DOM element by Id.

var one = dom.byId("one");

});

Page 17: Dojo >= 1.7  Kickstart

DOM Construction:require(["dojo/dom", "dojo/dom-construct", "dojo/domReady!"],

function(dom, domConstruct) {

var list = dom.byId("list");

domConstruct.create("li", {innerHTML: "Seven",className: "seven",style: {

fontWeight: "bold"}

}, list);

});

Page 18: Dojo >= 1.7  Kickstart

DOM destruction:

domConstruct.destroy(item) destroys the item with all of its children.

domConstruct.empty(“someElement”) destroys the children of the element without destroying the element itself.

Page 19: Dojo >= 1.7  Kickstart

Simple Action:

require(["dojo/on", "dojo/dom", "dojo/domReady!"],

function(on, dom) {

var myButton = dom.byId("myButton");

on (myButton, "click", function(evt){

alert("Iam clicked");

});

});

Page 20: Dojo >= 1.7  Kickstart

Publish/Subscribe model:require(["dojo/on", "dojo/topic", "dojo/dom", "dojo/domReady!"],

function(on, topic, dom) {

var alertButton = dom.byId("alertButton");

on(alertButton, "click", function() {

// When this button is clicked,

// publish to the "alertUser" topic

topic.publish("alertUser", "I am alerting you.");

});

// Register the alerting routine with the "alertUser" topic.

topic.subscribe("alertUser", function(text){

alert(text);

});

});

Page 21: Dojo >= 1.7  Kickstart

“dojo/_base/xhr” module wraps the complexity of Ajax request creation and response retrieval. Sample Ajax GET request:

require(["dojo/_base/xhr", "dojo/dom", "dojo/domReady!"],

function(xhr, dom) {

// Using xhr.get, as very little information is being sent

xhr.get({

// The URL of the request

url: "get-content.php",

// The success callback with result from server

load: function(newContent) {

dom.byId("contentNode").innerHTML = newContent;

},

// The error handler

error: function() {

// Do nothing -- keep old content there

}

});

});

Page 22: Dojo >= 1.7  Kickstart

Sample Ajax POST request:

var messageNode = dom.byId("messageNode");

// Using xhr.post, as the amount of data sent could be largexhr.post({

url: "submission.php",form: dom.byId("contactForm"),load: function(response) {

messageNode.innerHTML = "Thank you for contacting us!";},error: function() {

messageNode.innerHTML = "Your message could not be sent, please try again."

}});

Page 23: Dojo >= 1.7  Kickstart

If you work with Dojo >= 1.8, use “dojo/request” module instead.require(["dojo/dom", "dojo/on", "dojo/request", "dojo/domReady!"],

function(dom, on, request){

var resultDiv = dom.byId("resultDiv");

request.get("/someServlet").then(

function(response){

// Display the text file content

resultDiv.innerHTML = "<pre>"+response+"</pre>";

},

function(error){

// Display the error returned

resultDiv.innerHTML = "<div class=\"error\">"+error+"<div>";

}

);

}

);

Page 24: Dojo >= 1.7  Kickstart

Dojo toolkit documentation:http://dojotoolkit.org/documentation/

Page 25: Dojo >= 1.7  Kickstart

Twitter: http://www.twitter.com/hazems

Blog: http://www.technicaladvices.com

Email: [email protected]