I. Introduction▲
Dojo Toolkit est une bibliothèque très complète pour JavaScript. Elle vous permettra d'écrire rapidement votre application Web avec un rendu incroyable.
Cette bibliothèque contient de nombreux outils pour manipuler le JavaScript, faire des animations, manipuler le DOM.
Elle possède également un système de création de widget pour réaliser des composants réutilisables complexes, en plus d'en proposer de nombreux préfabriqués.
Apprenez à intégrer cette bibliothèque, en utilisant une méthode de formation structurée, pas à pas et orientée pratique.
Avec la méthode "Développement Facile", vous allez apprendre à développer des applications Web incroyables, que vos visiteurs adoreront !
Retrouvez un extrait de la formation gratuite "Dojo Facile", composée de plus de 30 cours professionnels pour vous aider à progresser rapidement avec la maîtrise du Dojo.
Téléchargez Dojo Toolkit, iciTéléchargez Dojo Toolkit, ici
II. Comment le framework JavaScript Dojo peut littéralement décupler vos applications Web▲
Dans cette vidéo, découvrez une présentation du framework Dojo pour JavaScript. Comment le télécharger, l'installer et l'utiliser.
Ci-dessous, un premier exemple de code.
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: true"></script>
-->
<title>HTML5</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="dojo-release-1.9.3/dijit/themes/claro/claro.css" />
<script src="dojo-release-1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit/form/Button");
dojo.require("dojo/domReady!");
dojo.require("dijit/form/DateTextBox");
dojo.require("dijit/form/ToggleButton");
dojo.require("dijit/form/ComboButton");
dojo.require("dijit/Menu");
/**
* A la fin du chargement de la page.
* @return {[type]} [description]
*/
dojo.addOnLoad(function()
{
console.log("page chargée");
require(["dijit/form/Button", "dojo/domReady!"], function(Button)
{
var button = new Button({
label: "Cliquez ici !",
onClick: function(){ console.log("Clic sur le 1er bouton!"); }
}, "btn");
button.startup();
});
require(["dijit/form/Button", "dojo/domReady!"], function(Button)
{
var button2 = new Button({
iconClass:"dijitIconNewTask",
showLabel:false,
label: "Clic ici !",
onClick: function(){ console.log("Clic sur le 2e bouton!"); }
}, "btn2");
button2.startup();
});
require(["dijit/form/ToggleButton", "dijit/form/ComboButton", "dijit/Menu", "dijit/MenuItem", "dijit/form/DropDownButton", "dijit/TooltipDialog"], function(ToggleButton, ComboButton, Menu, MenuItem)
{
var toggleButton = new ToggleButton({
iconClass: "dijitCheckBoxIcon",
label: "Bouton à cocher !",
checked: true
}, "toggle");
toggleButton.startup();
var menu = new Menu({
id: "saveMenu"
});
var menuItem1 = new MenuItem({
label: "Enregistrer",
iconClass: "dijitEditorIcon dijitEditorIconSave",
onClick: function() { console.log("Enregistrer"); }
});
var menuItem2 = new MenuItem({
label: "Enregistrer Sous",
onClick: function() { console.log("Enregistrer Sous"); }
});
menu.addChild(menuItem1);
menu.addChild(menuItem2);
var comboButton = new ComboButton({
optionsTitle: "Save Options",
iconClass: "dijitIconFile",
label: "Combo",
dropDown: menu,
onClick:function(){ console.log("Clicked ComboButton"); }
}, "combo");
comboButton.startup();
menu.startup();
});
});
</script>
<style type="text/css">
body{
font-family: Arial;
}
</style>
</head>
<body class="claro">
<header>
<span>Developpement Facile</span>
</header>
<br /><br />
<h1 id="greeting">Bonjour tout le monde !</h1>
<div>
<button id="btn"></button>
<button id="btn2"></button>
<label for="date">Choisissez votre date :</label>
<input id="date" value="2014-05-16" data-dojo-type="dijit/form/DateTextBox">
<button id="toggle"></button>
<button id="combo"></button>
</div>
<br /><br />
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
III. Installation et utilisation des thèmes graphiques du framework Dojo▲
Dans cette vidéo, découvrez comment installer et utiliser des thèmes graphiques avec Dojo. Dojo propose de base quatre thèmes graphiques.
Ci-dessous, l'exemple du thème nihilo.
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: true"></script>
-->
<title>HTML5</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="dojo-release-1.9.3/dijit/themes/nihilo/nihilo.css" />
<script src="dojo-release-1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit/form/Button");
dojo.require("dojo/domReady!");
dojo.require("dijit/form/DateTextBox");
dojo.require("dijit/form/ToggleButton");
dojo.require("dijit/form/ComboButton");
dojo.require("dijit/Menu");
/**
* A la fin du chargement de la page.
* @return {[type]} [description]
*/
dojo.addOnLoad(function()
{
console.log("page chargée");
require(["dijit/form/Button", "dojo/domReady!"], function(Button)
{
var button = new Button({
label: "Cliquez ici !",
onClick: function(){ console.log("Clic sur le 1er bouton!"); }
}, "btn");
button.startup();
});
require(["dijit/form/Button", "dojo/domReady!"], function(Button)
{
var button2 = new Button({
iconClass:"dijitIconNewTask",
showLabel:false,
label: "Clic ici !",
onClick: function(){ console.log("Clic sur le 2e bouton!"); }
}, "btn2");
button2.startup();
});
require(["dijit/form/ToggleButton", "dijit/form/ComboButton", "dijit/Menu", "dijit/MenuItem", "dijit/form/DropDownButton", "dijit/TooltipDialog"], function(ToggleButton, ComboButton, Menu, MenuItem)
{
var toggleButton = new ToggleButton({
iconClass: "dijitCheckBoxIcon",
label: "Bouton à cocher !",
checked: true
}, "toggle");
toggleButton.startup();
var menu = new Menu({
id: "saveMenu"
});
var menuItem1 = new MenuItem({
label: "Enregistrer",
iconClass: "dijitEditorIcon dijitEditorIconSave",
onClick: function() { console.log("Enregistrer"); }
});
var menuItem2 = new MenuItem({
label: "Enregistrer Sous",
onClick: function() { console.log("Enregistrer Sous"); }
});
menu.addChild(menuItem1);
menu.addChild(menuItem2);
var comboButton = new ComboButton({
optionsTitle: "Save Options",
iconClass: "dijitIconFile",
label: "Combo",
dropDown: menu,
onClick:function(){ console.log("Clicked ComboButton"); }
}, "combo");
comboButton.startup();
menu.startup();
});
});
</script>
<style type="text/css">
body{
font-family: Arial;
}
</style>
</head>
<body class="nihilo">
<header>
<span>Developpement Facile</span>
</header>
<br /><br />
<h1 id="greeting">Bonjour tout le monde !</h1>
<div>
<button id="btn"></button>
<button id="btn2"></button>
<label for="date">Choisissez votre date :</label>
<input id="date" value="2014-05-16" data-dojo-type="dijit/form/DateTextBox">
<button id="toggle"></button>
<button id="combo"></button>
</div>
<br /><br />
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
L'exemple du thème soria.
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: true"></script>
-->
<title>HTML5</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="dojo-release-1.9.3/dijit/themes/soria/soria.css" />
<script src="dojo-release-1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit/form/Button");
dojo.require("dojo/domReady!");
dojo.require("dijit/form/DateTextBox");
dojo.require("dijit/form/ToggleButton");
dojo.require("dijit/form/ComboButton");
dojo.require("dijit/Menu");
/**
* A la fin du chargement de la page.
* @return {[type]} [description]
*/
dojo.addOnLoad(function()
{
console.log("page chargée");
require(["dijit/form/Button", "dojo/domReady!"], function(Button)
{
var button = new Button({
label: "Cliquez ici !",
onClick: function(){ console.log("Clic sur le 1er bouton!"); }
}, "btn");
button.startup();
});
require(["dijit/form/Button", "dojo/domReady!"], function(Button)
{
var button2 = new Button({
iconClass:"dijitIconNewTask",
showLabel:false,
label: "Clic ici !",
onClick: function(){ console.log("Clic sur le 2e bouton!"); }
}, "btn2");
button2.startup();
});
require(["dijit/form/ToggleButton", "dijit/form/ComboButton", "dijit/Menu", "dijit/MenuItem", "dijit/form/DropDownButton", "dijit/TooltipDialog"], function(ToggleButton, ComboButton, Menu, MenuItem)
{
var toggleButton = new ToggleButton({
iconClass: "dijitCheckBoxIcon",
label: "Bouton à cocher !",
checked: true
}, "toggle");
toggleButton.startup();
var menu = new Menu({
id: "saveMenu"
});
var menuItem1 = new MenuItem({
label: "Enregistrer",
iconClass: "dijitEditorIcon dijitEditorIconSave",
onClick: function() { console.log("Enregistrer"); }
});
var menuItem2 = new MenuItem({
label: "Enregistrer Sous",
onClick: function() { console.log("Enregistrer Sous"); }
});
menu.addChild(menuItem1);
menu.addChild(menuItem2);
var comboButton = new ComboButton({
optionsTitle: "Save Options",
iconClass: "dijitIconFile",
label: "Combo",
dropDown: menu,
onClick:function(){ console.log("Clicked ComboButton"); }
}, "combo");
comboButton.startup();
menu.startup();
});
});
</script>
<style type="text/css">
body{
font-family: Arial;
}
</style>
</head>
<body class="soria">
<header>
<span>Developpement Facile</span>
</header>
<br /><br />
<h1 id="greeting">Bonjour tout le monde !</h1>
<div>
<button id="btn"></button>
<button id="btn2"></button>
<label for="date">Choisissez votre date :</label>
<input id="date" value="2014-05-16" data-dojo-type="dijit/form/DateTextBox">
<button id="toggle"></button>
<button id="combo"></button>
</div>
<br /><br />
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
Et l'exemple du thème tundra.
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
-->
<title>HTML5</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="dojo-release-1.9.3/dijit/themes/tundra/tundra.css" />
<script src="dojo-release-1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit/form/Button");
dojo.require("dojo/domReady!");
dojo.require("dijit/form/DateTextBox");
dojo.require("dijit/form/ToggleButton");
dojo.require("dijit/form/ComboButton");
dojo.require("dijit/Menu");
/**
* A la fin du chargement de la page.
* @return {[type]} [description]
*/
dojo.addOnLoad(function()
{
console.log("page chargée");
require(["dijit/form/Button", "dojo/domReady!"], function(Button)
{
var button = new Button({
label: "Cliquez ici !",
onClick: function(){ console.log("Clic sur le 1er bouton!"); }
}, "btn");
button.startup();
});
require(["dijit/form/Button", "dojo/domReady!"], function(Button)
{
var button2 = new Button({
iconClass:"dijitIconNewTask",
showLabel:false,
label: "Clic ici !",
onClick: function(){ console.log("Clic sur le 2e bouton!"); }
}, "btn2");
button2.startup();
});
require(["dijit/form/ToggleButton", "dijit/form/ComboButton", "dijit/Menu", "dijit/MenuItem", "dijit/form/DropDownButton", "dijit/TooltipDialog"], function(ToggleButton, ComboButton, Menu, MenuItem)
{
var toggleButton = new ToggleButton({
iconClass: "dijitCheckBoxIcon",
label: "Bouton à cocher !",
checked: true
}, "toggle");
toggleButton.startup();
var menu = new Menu({
id: "saveMenu"
});
var menuItem1 = new MenuItem({
label: "Enregistrer",
iconClass: "dijitEditorIcon dijitEditorIconSave",
onClick: function() { console.log("Enregistrer"); }
});
var menuItem2 = new MenuItem({
label: "Enregistrer Sous",
onClick: function() { console.log("Enregistrer Sous"); }
});
menu.addChild(menuItem1);
menu.addChild(menuItem2);
var comboButton = new ComboButton({
optionsTitle: "Save Options",
iconClass: "dijitIconFile",
label: "Combo",
dropDown: menu,
onClick:function(){ console.log("Clicked ComboButton"); }
}, "combo");
comboButton.startup();
menu.startup();
});
});
</script>
<style type="text/css">
body{
font-family: Arial;
}
</style>
</head>
<body class="tundra">
<header>
<span>Developpement Facile</span>
</header>
<br /><br />
<h1 id="greeting">Bonjour tout le monde !</h1>
<div>
<button id="btn"></button>
<button id="btn2"></button>
<label for="date">Choisissez votre date :</label>
<input id="date" value="2014-05-16" data-dojo-type="dijit/form/DateTextBox">
<button id="toggle"></button>
<button id="combo"></button>
</div>
<br /><br />
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
IV. Votre première application avec le framework Dojo en trois lignes de code▲
On rentre dans le vif du sujet avec cette vidéo, où vous allez apprendre à vous servir de Dojo.
Ici votre première application en trois lignes de code.
Ci-dessous, l'exemple de code.
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
-->
<title>HTML5</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="dojo-release-1.9.3/dijit/themes/soria/soria.css" />
<script src="dojo-release-1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.DateTextBox");
/**
* A la fin du chargement de la page.
* @return {[type]} [description]
*/
dojo.addOnLoad(function()
{
console.log("page chargée");
});
</script>
<style type="text/css">
body{
font-family: Arial;
}
</style>
</head>
<body class="soria">
<header>
<span>Developpement Facile</span>
</header>
<br /><br />
<h1 id="greeting">Bonjour tout le monde !</h1>
<div>
<form>
<p>Choisissez votre date de depart :
<input type="text" dojoType="dijit.form.DateTextBox" value="2014-05-16" style="width:160px">
</p>
</form>
</div>
<br /><br />
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
V. Les fonctions essentielles du framework Dojo▲
Dans cette vidéo, apprenez à :
- configurer Dojo;
- appeler et charger des modules;
- debugger avec Dojo.
Ci-dessous, l'exemple de code.
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
-->
<title>HTML5</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="dojo-release-1.9.3/dijit/themes/soria/soria.css" />
<script src="dojo-release-1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit/form/Button");
/**
* A la fin du chargement de la page.
* @return {[type]} [description]
*/
dojo.addOnLoad(function()
{
console.log("page chargée");
require(["dijit/form/Button", "dojo/domReady!"], function(Button)
{
var button = new Button({
label: "Cliquez ici !",
onClick: function(){ console.log("Clic sur le 1er bouton!"); }
}, "btn");
button.startup();
});
require(["dijit/form/Button", "dojo/domReady!"], function(Button)
{
var button2 = new Button({
iconClass:"dijitIconNewTask",
showLabel:false,
label: "Clic ici !",
onClick: function(){ console.log("Clic sur le 2e bouton!"); }
}, "btn2");
button2.startup();
});
});
</script>
<style type="text/css">
body{
font-family: Arial;
}
</style>
</head>
<body class="soria">
<header>
<span>Developpement Facile</span>
</header>
<br /><br />
<h1 id="greeting">Bonjour tout le monde !</h1>
<div>
<form>
<p>Choisissez votre date de départ :
<input type="text" dojoType="dijit.form.DateTextBox" style="width:120px">
<button id="btn"></button>
<button id="btn2"></button>
</p>
</form>
</div>
<br /><br />
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
VI. Comment sélectionner les éléments du DOM avec le framework Dojo▲
Apprenez, dans la vidéo suivante, à sélectionner un ou plusieurs éléments du DOM avec Dojo.
Ci-dessous l'exemple de code.
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
-->
<title>HTML5</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="dojo-release-1.9.3/dijit/themes/soria/soria.css" />
<script src="dojo-release-1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
/**
* A la fin du chargement de la page.
* @return {[type]} [description]
*/
dojo.addOnLoad(function()
{
console.log("page chargée");
// modifier le texte de la div identifiée M2 et son style
dojo.byId("M2").innerHTML = "Bloc sélectionné";
dojo.style("M2", {"backgroundColor" : "#819FF7"});
// sélectionne les éléments impairs de la liste à puces
dojo.query("ul :nth-child(odd)").style("backgroundColor","#5FB404");
// sélectionne les éléments avec l'attribut name dont la valeur comporte _this.
dojo.query('div[name*="_this"]').style("backgroundColor", "#FF4000");
});
</script>
<style type="text/css">
body{
font-family: Arial;
}
div{
width: 250px;
height: 20px;
margin: 5px;
}
</style>
</head>
<body class="soria">
<header>
<span>Developpement Facile</span>
</header>
<br /><br />
<div id="M1">Module 1</div>
<div id="M2">Module 2</div>
<div id="M3">Module 3</div>
<ul>
<li>Module 1</li>
<li>Module 2</li>
<li>Module 3</li>
<li>Module 4</li>
<li>Module 5</li>
<li>Module Bonus</li>
</ul>
<div name="tit_thisle">Lorem ipsum dolor _this sit amet</div>
<div name="fisrt">Lorem ipsum dolor sit amet</div>
<div name="other_this">Lorem ipsum dolor sit amet_this</div>
<div name="_thisnew">_thisLorem ipsum dolor sit amet</div>
<div name="last">Lorem ipsum dolor sit amet</div>
<br /><br />
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
VIII. Recevez gratuitement la formation "Dojo Facile"▲
Si vous souhaitez aller plus loin dans la création de sites Web incroyables,
vous pouvez recevoir gratuitement la formation "Dojo Facile" avec des cours pas à pas, accompagnés de codes source commentés.
Ainsi, vous progressez à votre rythme, avec un suivi personnalisé et individuel. Vous avez la possibilité de poser toutes vos questions techniques à la fin de chaque cours.
Vous allez ainsi découvrir comment utiliser le framework Dojo pour développer rapidement et efficacement vos applications Web pour un rendu incroyable.
Cliquez simplement ici pour recevoir gratuitement la formation "Dojo Facile" !Cliquez simplement ici pour recevoir gratuitement la formation Dojo Facile !
VII. Remerciements▲
Merci beaucoup à l'équipe de rédaction de Developpez.com de contribuer à la diffusion de ce tutoriel.
J'adresse également un merci tout particulier à Jacques Jeanjacques_jean pour sa relecture orthographique.
