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. La technique pour modifier le style CSS avec le framework Dojo▲
Apprenez dans cette vidéo, à accéder et modifier le style d'un élément CSS avec Dojo.
Vous verrez comment ajouter ou supprimer une classe CSS et comment permuter deux classes.
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) :
*/
<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/dojo/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");
function showStyleW()
{
alert(dojo.style("div_text", "width")+"px");// affiche une alert avec la largeur de la balise avec id div_text
}
function updateStyle()
{
dojo.style("div_text", {"backgroundColor": "#0000FF",
"border": "3px solid #9683EC",
"height": "180px"});// modifier la couleur de fond de la balise avec id div_text
}
function addClassStyle() // ajoute des classes CSS à un élément
{
dojo.addClass("div_text", ["style1", "style2", "style3"]);
dojo.byId("div_text").innerHTML="Modification des classes CSS OK.";
}
function isClassStyle()// vérifie si la classe est présente
{
dojo.attr("result", "innerHTML", "Classe CSS style1 : " + dojo.hasClass("div_text", "style1"));
}
function removeClassStyle()// supprime la classe CSS style1
{
dojo.removeClass("div_text", "style1");
}
/**
* ajoute classe CSS si elle est absente ou supprime classe CSS si elle est présente dans la balise ciblée
*/
function changeClassStyle()
{
dojo.toggleClass("div_text", "style1");
}
</script>
<style type="text/css">
body{
font-family: Arial;
}
div { width: 350px;
border: 1px solid black;
background-color: #26C4EC;
text-align: center;
margin-top: 25px;}
.text { background-color: #BBD2E1;
border: 3px solid #0000FF;
padding: 5px;}
.style1 { width: 580px;
background-color: #23D2Ef;
color: #ccc;}
.style2 { border: 10px solid #ffC423;
font-size: 34px;}
.style3 { padding: 20px;
font-style: italic}
</style>
</head>
<body class="claro">
<header>
<span>Developpement Facile</span>
</header>
<div id="div_text" class="text">Module 1</div>
<br />
<button onclick="showStyleW()">Afficher la largeur de Module 1</button>
<button onclick="updateStyle()" type="button">Modifier le style</button>
<button onclick="addClassStyle()" type="button">Ajouter des classes CSS</button>
<button onclick="isClassStyle()" type="button">classe CSS style1 présente ???</button>
<button onclick="removeClassStyle()" type="button">Supprimer classe CSS style1</button>
<button onclick="changeClassStyle()" type="button">Permuter classe CSS</button>
<br />
<div id="result">Le résultat du test.</div>
<br />
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
III. La technique pour utiliser les strings avec le framework Dojo▲
Dans cette vidéo, apprenez à manipuler les chaînes de caractères avec Dojo.
Vous verrez comment enlever les espaces, ajouter des caractères, remplacer une chaîne de caractères.
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) :
*/
<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/dojo/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("dojo.string");
/**
* A la fin du chargement de la page.
* @return {[type]} [description]
*/
dojo.addOnLoad(function()
{
console.log("page chargée");
// remplace les valeurs {0} {2} {3} par les valeurs du tableau
dojo.byId("result").innerHTML = dojo.replace(
"Bonjour, {0} {2} créateur de {3} !",
["Matthieu", "D.", "D", "Développement Facile"] );
});
/**
* vérifie si une valeur est une chaîne de caractères
* @param {[type]} sValue [description]
* @return {[type]} [description]
*/
function testString(sValue)
{
if (dojo.isString(sValue))
alert(sValue + " est une chaîne de caractères");
else
alert(sValue + " n\'est pas une chaîne de caractères");
}
/**
* Suppression des espaces dans un texte
* @return {[type]} [description]
*/
function deleteSpace()
{
var sTextInit = dojo.byId("text_input").value;
var sTextEnd = dojo.trim(sTextInit);
dojo.byId("result").innerHTML = sTextEnd;
}
/**
* complète une chaîne de caractères en ajoutant des éléments
* pour atteindre une taille définie.
* @return {[type]} [description]
*/
function completeString()
{
var sTextInit = dojo.byId("text_input").value;
var sTextEnd = dojo.string.pad(sTextInit, 69, ":) ", true);
dojo.byId("result").innerHTML = sTextEnd;
}
</script>
<style type="text/css">
body{
font-family: Arial;
}
div { width: 550px;
border: 1px solid black;
background-color: #26C4EC;
text-align: center;
float : left;
margin-top: 25px;}
ul { list-style-type: none;
padding: 0px;}
button { margin-right: 30px;}
</style>
</head>
<body class="claro">
<header>
<span>Developpement Facile</span>
</header>
<br /><br />
<button type="button" onClick="testString(1000)" style="float: left;">1000 est une string ?</button>
<br /><br />
Renseignez un texte avec des espaces :<br />
<input type="text" id="text_input" size="32"><br /><br />
<button id="bouton" type="button" onclick="deleteSpace()">Supprimer les espaces</button>
<button id="bouton" type="button" onclick="completeString()">Compléter la string</button>
<br />
<div id="result"></div>
<br /><br /><br /><br />
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
IV. Comment implémenter les événements avec le framework Dojo▲
Découvrez comment gérer les événements avec Dojo.
Vous verrez comment remplacer la méthode addEventListener par dojo.connect.
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) :
*/
<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/dojo/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("dojo.string");
/**
* A la fin du chargement de la page.
* @return {[type]} [description]
*/
dojo.addOnLoad(function()
{
console.log("page chargée");
// effet de style sur un div lors du survol de la souris
dojo.connect(dojo.byId("div_over"),"onmouseover",function(e)
{
dojo.byId("div_over").innerHTML = "onmouseOver";
dojo.style("div_over", { "backgroundColor": "#0000FF",
"fontWeight" : "bold",
"color" : "#cccccc",
"fontStyle" : "normal"});
});
// effet de style sur un div lors de la sortie de la souris
dojo.connect(dojo.byId("div_over"),"onmouseout",function(e)
{
dojo.byId("div_over").innerHTML = "onmouseLeave";
dojo.style("div_over", { "backgroundColor" : "white",
"fontWeight" : "bold",
"color" : "#000000",
"fontStyle" : "italic"});
});
// écoute de l'événement onfocus
dojo.connect(dojo.byId("your_text"),"onfocus",function(e)
{
dojo.addClass("your_text", "effect1");
});
// écoute de l'événement onblur / perte du focus
dojo.connect(dojo.byId("your_text"),"onblur",function(e)
{
dojo.removeClass("your_text", "effect1");
}); 
});
bChecked = false;// par défaut les checkbox sont décochées
/**
* Coche / décoche toutes les checkbox
* @param {[type]} oForm : le formulaire avec les checkbox
* @return {[type]} [description]
*/
function checkAll( oForm)
{
if (bChecked == false)
bChecked = true;
else
bChecked = false;
// parcours de toutes les checkbox du formulaire
for (var i =0; i < oForm.elements.length; i++)
oForm.elements[i].checked = bChecked;
}
</script>
<style type="text/css">
body{
font-family: Arial;
}
div { width: 550px;
height: 60px;
border: 1px solid black;
background-color: #26C4EC;
text-align: center;
float : left;
margin-top: 25px;}
ul { list-style-type: none;
padding: 0px;}
button { margin-right: 30px;}
.effect1 {
background-color : #ffC4EC;
-webkit-box-shadow: 5px 5px 10px #000000;
-moz-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
</style>
</head>
<body class="claro">
<header>
<span>Developpement Facile</span>
</header>
<br /><br />
<form id ="formulaire">
<input type="checkbox" name="chk1"> Module 1<br />
<input type="checkbox" name="chk2"> Module 2<br />
<input type="checkbox" name="chk3"> Module 3<br />
<input type="checkbox" name="chk4"> Module 4<br />
<br />
<input type='checkbox' id="all" onclick='checkAll(formulaire);'>Sélectionner / désélectionner tout
<br /><br />
Ecrivez votre texte : <input type="text" id="your_text" size="33">
</form>
<div id="div_over">Bonjour</div>
<br /><br /><br /><br />
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
V. La technique pour utiliser les événements avancés avec le framework Dojo▲
Cette vidéo fait suite au cours précédent sur les événements avec Dojo.
Découvrez comment gérer de nouveaux événements 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) :
*/
<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/dojo/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("dojo.string");
/**
* A la fin du chargement de la page.
* @return {[type]} [description]
*/
dojo.addOnLoad(function()
{
console.log("page chargée");
// affiche l'image lors du changement d'état de la case à cocher
dojo.connect(dojo.byId("see_image"),"onchange",function(e)
{
dojo.style("box_image", {"visibility": "visible"});
});
// appel lorsque la souris passe au-dessus de la liste
dojo.connect(dojo.byId("liste_module"),"onmouseenter",function(e)
{
// sélectionne tous les enfants de la balise ul
dojo.query("ul :nth-child(odd)").style("backgroundColor", "#26C4EC");
});
// appel lorsque la souris quitte la liste
dojo.connect(dojo.byId("liste_module"),"onmouseleave",function(e)
{
dojo.query("ul :nth-child(odd)").style("backgroundColor", "#ffffff");
});
// lors du clic sur la balise div
dojo.connect(dojo.byId("div_mouse"),"onclick",function(e)
{
// récupère les coordonnées de la souris
var oCoords = "(" + e.pageX + "," + e.pageY + ")";
dojo.byId("mouse_coords").innerHTML = "La souris se situe à x;y : "+ oCoords;
});
// ajout d'un écouteur sur un événement onclick
var node = dojo.byId("btn_call");
var handleBtn = dojo.connect(node, "onclick", function(e)
{
alert("La boite de dialogue s'affiche une seule fois !");
dojo.disconnect(handleBtn);// supprime l'événement onclick
});
});
</script>
<style type="text/css">
body{
font-family: Arial;
}
div { width: 550px;
height: 60px;
border: 1px solid black;
background-color: #26C4EC;
text-align: center;
float : left;
margin-top: 25px;}
ul{
width: 200px;
}
.effect1 {
background-color : #ffC4EC;
-webkit-box-shadow: 5px 5px 10px #000000;
-moz-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#box_image { visibility: hidden;}
</style>
</head>
<body class="claro">
<header>
<span>Developpement Facile</span>
</header>
<br /><br />
<input type="checkbox" id="see_image"> Cliquez pour afficher l'image<br>
<div id="box_image"><img src="14-logo-dev-facile.png"></div>
<br /><br />
<ul id="liste_module">
<li>Module 1</li>
<li>Module 2</li>
<li>Module 3</li>
<li>Module 4</li>
<li>Module 5</li>
<li>Module 6</li>
<li>Module 7</li>
<li>Module 8</li>
</ul>
<span id="mouse_coords"></span>
<br />
<div id="div_mouse"></div>
<br /><br /><br /><br /><br /><br />
<button id="btn_call">Appel de la boite de dialogue</button>
<br /><br />
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
VI. Comment créer des animations avec le framework Dojo▲
Vous verrez dans cette vidéo, comment ajouter des animations avec Dojo.
Ajouter des effets très sympas sur votre site ou votre application Web.
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) :
*/
<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/dojo/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("dojo.string");
dojo.require("dojo.fx");
/**
* A la fin du chargement de la page.
* @return {[type]} [description]
*/
dojo.addOnLoad(function()
{
console.log("page chargée");
dojo.style("paraph2", "opacity", "0");// masque le 2e paragraphe
// création d'un effet pour afficher une image
var node1 = dojo.byId("btn1");
dojo.connect(node1, "onclick", function()
{
dojo.fx.wipeIn({ node: "image_logo1", duration: 1000}).play();
});
// création d'un effet pour masquer une image
var node2 = dojo.byId("btn2");
dojo.connect(node2, "onclick", function()
{
dojo.fx.wipeOut({ node: "image_logo1", duration: 500}).play();
});
});
/**
* Création d'un effet d'apparition sur un paragraphe
* @return {[type]} [description]
*/
function show_p2()
{
dojo.fadeIn({ node: "paraph2", duration: 1000}).play();
}
/**
* Création d'un effet pour cacher un élément
* @return {[type]} [description]
*/
function hide_p2()
{
dojo.fadeOut({ node: "paraph2", duration: 1000}).play();
}
</script>
<style type="text/css">
body{
font-family: Arial;
}
div { width: 550px;
height: 60px;
border: 1px solid black;
background-color: #26C4EC;
text-align: center;
float : left;
margin-top: 25px;}
ul{
width: 200px;
}
.effect1 {
background-color : #ffC4EC;
-webkit-box-shadow: 5px 5px 10px #000000;
-moz-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#box_image { visibility: hidden;}
.imgPic{
width: 200px;
height: 200px;
border: none;
background-color: #fff;
}
</style>
</head>
<body class="claro">
<header>
<span>Developpement Facile</span>
</header>
<br /><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing
nec, ultricies sed, dolor.</p>
<p id="paraph2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing
nec, ultricies sed, dolor.</p>
<a href="#" onclick="show_p2()">Lire la suite...<a>
<br /><br />
<a href="#" id="lien" onclick="hide_p2()">Cacher la suite...<a>
<br /><br />
<button id="btn1" type="button">Afficher l'image</button>
<button id="btn2" type="button">Cacher l'image</button>
<br />
<div id="image_logo1" class="imgPic" style="display: none;"><img src="14-logo-dev-facile.png" ></div>
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
VII. 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 !
VIII. 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.
