Date post: | 03-Apr-2015 |
Category: |
Documents |
Upload: | ginette-berard |
View: | 107 times |
Download: | 1 times |
Dojo
Carol McDonald, Java Architect,Updated and adapted by Michel Buffa
2
Problèmes avec Ajax
• JavaScript > Support inconsistant entre
browsers> Nécessite des tests cross browsers> Le code peut devenir difficile à
developper, debugger, et maintenir
3
Dojo Client SideDojo Client SideJavaScript LibraryJavaScript Library
4
Qu'est-ce que le Dojo Toolkit?
• Ensemble Open Source de librairies JavaScript • Simplifie le code javascript • Appartient à Google aujourd'hui (qui a racheté Jot)• Supporté par
> IBM, Sun, JotSpot, SitePen, Renkoo, AOL TurboAjax, OpenLaszlo, Nexaweb, Bea Systems
• http://dojotoolkit.com/• Indépendant de la techologie serveur et des
langages utilisés (java, c#, python, ruby...)
source: dojotoolkit.org
5
Les librairies du Toolkit Dojo
6
Dojo 3 parties : Dojo
> Support cross-browser, chargement des packages , accès et manipulation du DOM, debugger Firebug Lite, évènements, composants MVC, Drag and drop, appels Ajax asynchrones, encodage, décodage JSON
dijit > Widgets, Contrôles avancés d'interface
utilisateur,système de template
dojoX> innovations: graphiquess, support du mode offline,
widgets évolués comme les tableaux (grid), etc
7
IntégrerIntégrer dojo à une dojo à une applicationapplication
8
1) L'application télécharge des morceaux de Dojo depuis le net :
Google:
<SCRIPT TYPE="text/javascript" SRC= ”http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"></SCRIPT>
La balise script est utilisée pour charger le script dojo.js, toujours obligatoire.
9
2) Ajouter Dojo dans son application (il sera déployé avec l'application)
• Downloader depuis http://dojotoolkit.org/downloads
• Unzipper le fichier à côté des pages web ou jsp du projet.
• Inclure dojo comme ceci dans les pages qui l'utilisent
<script type="text/javascript" djConfig="parseOnLoad: true" src="dojo-release-1.3.2/dojo/dojo.js"> </script>
Pas de “/” ici ! Le système de chargement des packages chargera toutes les dépendances s'il y en a !
10
Dojo dans son application
Ici dojo a été mis sous le répertoire js (classique lorsque on utilise plusieurs frameworks), dans le répertoire qui contient les pages web ou jsp (le repertoire “web” du projet netbeans par exemple)
11
3) Installer une fois pour toute Dojo sur le serveur (recommandé)• Que ce soit Tomcat ou Glassfish, dézipper Dojo
dans le docroot du serveur, par exemple> C:\Sun\AppServer\domains\domain1\docroot\
dojo-release-1.3.2> C:\Program Files\Apache Software Foundation\
Apache Tomcat 6.0.18\webapps\ROOT\dojo-release-1.3.2
• Et l'inclure dans l'application :
<script type="text/javascript" djConfig="parseOnLoad: true" src=“/dojo-release-1.3.2/dojo/dojo.js"> </script>
“/” obligatoire ici, l’inverse de ce qu’on a vu précédemment !
12
Dojo contient plusieursDémonstrationsPar exemple : themeTester.html
13
Exemples de widgets issus de dijit
14
Choses à faire dans une page pour utiliser Dojo
<head> <style type="text/css"> @import "js/dojo/resources/dojo.css";"; </style> <script type="text/javascript" src="js/dojo/dojo.js" djConfig="parseOnLoad: true" isDebug: true > </script></head> Cette ligne indique qu'on va
activer le mode debug : celava générer des messages encouleur pour firebug
Mais si on est pas sous Firefoxavec Firebug, Dijo inclut unmini debugger pour les autresbrowsers : firebug lite !
Charger la CSS Dojo
15
Exemple de traces dans le debugger : console.log("log button clicked");console.debug("debug button clicked");console.info("info button clicked");console.warn("warn button clicked");console.error("error button clicked");
16
Logging avec firebug lite dans IE console.log("log button clicked");console.debug("debug button clicked");console.info("info button clicked");console.warn("warn button clicked");console.error("error button clicked");
17
Dijit = Dijit = dojo Widgetdojo Widget
18
dijit est une couche au-dessus de Dojo
Les widgets Doko
19
Qu'est-ce qu'un widget Dojo ?
• Un élément de GUI comme un button, text box, scroll bar, calendar, tree etc> Facile à utiliser, déclaratif (comme xhtml)> On peut associer des événements (écouteurs) à des
widgets> On ne se préoccupe plus de problèmes de
compatibilité entre navigateurs
• HTML+CSS sont pris en compte par JavaScript via Dojo
20
Exemple déclaratif de button<head> <style type="text/css"> @import "js/dijit/themes/tundra/tundra.css"; @import "js/dojo/resources/dojo.css"; </style> <script type="text/javascript" djConfig="parseOnLoad: true" src="js/dojo/dojo.js" ></script> <script type="text/javascript"> dojo.require("dijit.form.Button"); </script></head><body class="tundra">
<button dojoType="dijit.form.Button" onclick="call_function"> Log Button</button>
Charger la CSS de Dijit
Style/thème pour les widgetsCharger le module
Pour les widgets déclaratifs
21
Même exemple mais par programmation<head> ... <script type="text/javascript"> dojo.require("dijit.form.Button");
var myButton = new dijit.form.Button( {title:"Log Button"}, dojo.byId("someDiv")); </script>...</head><body class="tundra">
<div id="someDiv"></div>
</body>
22
Widgets pour formulaires• CheckBox, RadioButton,ComboBox,
CurrencyTextBox, DateTextBox, NumberTextBox, Slider, ValidationTextBox, Textarea
• Attributs: disabled: Boolean• Methodes:
> focus donne le focus focus à ce widget > getValue donne la valeur du widget. > setValue modifie la valeur du widget. > reset reset de la valeur du widget > Undo remet la dernière valeur
• Points d'extension: onChange: ce sont des écouteurs (callbacks)
23
Exemple dijit.form.DateTextBox
<script>dojo.require("dijit.form.DateTextBox");</script><body><input type="text" name="date1" value="2005-12-30"dojoType="dijit.form.DateTextBox"required="true" />
24
Dijit, widgets de Layout• Accordion Container,Content Pane, Layout
Container, Split Container, Stack Container, Tab Container
25
Exemple dijit.layout.AccordionContainer<script>dojo.require("dojo.parser");dojo.require("dijit.layout.AccordionContainer");</script><body><div dojoType="dijit.layout.AccordionContainer" duration="200" style="margin-right: 30px; width: 400px; height: 300px; overflow:
hidden"> <div dojoType="dijit.layout.AccordionPane" selected="true"
title="Pane1"> <p > some text ...</p > <!-- contenu html --> </div> <div dojoType="dijit.layout.AccordionPane"
title="Pane2" href="tab1.html" > <!-- c'est un URL !
Chargé en Ajax ! --> </div></div>
26
Dijit menus et boutons• Button, ComboButton, DropDownButton, Menu,
Toolbar
27
Exemple dijit.Menu<script>dojo.require("dojo.parser");dojo.require("dijit.Menu");</script><body><div dojoType="dijit.Menu" id="submenu1" contextMenuForWindow="true" style="display:
none;"> <div dojoType="dijit.MenuItem" iconClass="myIcon" onClick="alert('Hello world');"> Enabled Item
</div> <div dojoType="dijit.PopupMenuItem" id="submenu2"> Enabled Submenu <div dojoType="dijit.Menu"> <div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')"> Submenu Item One</div> . . .</div>
28
Fonctions dojo Fonctions dojo indispensablesindispensables
29
Fonctions Dojo
• dojo.byId("id");> Equivalent à : document.getElementById("someid");
• dijit.byId("id");> renvoie une instance de Dijit widget;
• dojo.addOnLoad("functionname"); > Appelle la fonction une fois que toute la page
et tous ses scripts ont été chargés.
30
Dojo Query
// Query par tag xhtml. Equivalent à // document.getElementsByTagName("IMG");
dojo.query("img"); // Query par classe. dojo.query(".progressIndicator"); // Query par id. Equivalent à // document.getElementById("widget123");// ou dojo.byId("widget123")
dojo.query("widget123");
31
Dojo For Each
• dojo.forEach(collection, function(item) { console.debug(item); } );
> Execute une fonction dans une boucle for• dojo.query("select", document).forEach("item.disabled = true;");> désactive tous les tags SELECT de la page
32
Dojo et les événementsDojo et les événements
33
dojo et la gestion des événements
Dojo• Simplifie le système de gestion des événements
de JavaScript • Permet de connecter une fonction que vous
avez écrite à : > Un événement DOM, par exemple un click sur un lien
<a href>.> un événement généré par un objet, par exemple une
animation qui démarre> Un autre appel de function : permet de déclencher
des réactions en chaine.> Un topic, dans lequel d'autres objets peuvent publier.
34
dojo.event.connect(srcObj,"srcFunc", targetFunc);
function myFunction() { alert("dojo.connect handler");
}
var link = dojo.byId("mylink");
dojo.event.connect(link, "onclick", myFunction);
<a href="#" id="mylink">Click Me</a>
35
Connecter des Objects et des Fonctions var someObject = {
bar: function() { console.debug("Bar fired!");
return 14; }
}
var anotherObject = {
anotherBar: function () { console.debug("anotherBar fired!"); }
}
dojo.connect(someObject, "bar", anotherObject, "anotherBar");
sourceObj, "sourceFunc", targetObj, “targetFunc”
36
Déconnecter des Fonctions
objectConnections[1]= dojo.connect(someObject, "baz", anotherObject, "afterBaz");
dojo.disconnect(objectConnections[1]);
37
S'abonner et publier dans un Topic (équivalent de messages qui déclenchent des actions, cf JMS)var unObjet = {
method1: (param1, param2) {
console.debug("f1 appelée avec: "+ param1+" et : " + param2); return; },
}
topics[1] = dojo.subscribe("MesMessages", "unObjet", method1);
dojo.publish("MesMessages", ["Alex", "Russell"]);
dojo.unsubscribe(topics[1]);
38
Appels Ajax : Appels Ajax : XMLHttpRequest (XHR):XMLHttpRequest (XHR):dojo.xhrDelete(), dojo.xhrDelete(), dojo.xhrGet(), dojo.xhrGet(), dojo.xhrPost(), dojo.xhrPost(), dojo.xhrPut()dojo.xhrPut()
39
Web traditionnel AJAX
within a browser, there is AJAX engine
40
Envoie de requête, récupérer la réponse d'un serveur <script type="text/javascript"> dojo.xhrGet({ url: 'sayHello', load: helloCallback, error: helloError, content: {name: dojo.byId('name').value } });
</script>
Appeler un url
Fonction de callback
Contenu à envoyer
En cas d'erreur, on appellecette fonction.
41
Dojo Hello WorldDojo Hello World
42
Connecter un événement à un Widget (bouton ici)
<head>... <script type="text/javascript"> dojo.require("dijit.form.Button"); </script>...</head><body class="tundra">
Name: <input name="Name" id="name" type="text" />
<button dojoType="dijit.form.Button" id="helloButton"> Hello World! <script type="dojo/method" event="onClick"> makeAjaxCall(); </script></button>
</body> On déclare un écouteur avec le type dojo/method
43
Suite...<head> <script type="text/javascript"> function makeAjaxCall(){ dojo.xhrGet({ url: 'sayHello.jsp', load: helloCallback, error: helloError, content: {name: dojo.byId('name').value } }); } function helloCallback(data,ioArgs) { dojo.byId("returnMsg").innerHTML = data; } </script></head><body> Name: <input name="Name" id="name" type="text" /> <button dojoType="dijit.form.Button" <script type="dojo/method" event="onClick"> makeAjaxCall(); ... <p id=returnMsg></p>
call url
Callback function
Content to send
On error function
44
La page sayHello.jsp (attention, jdk 1.6 !)
<% String returnString = request.getParameter("name");
if (returnString == null || returnString.isEmpty()) { // Return error message returnString = "Name is required."; out.print("Error: " + returnString); } else { // Return the name out.print("Hello: " + returnString); }%>
45
dojo.xhrPost pour envoyer un formulaire <head> <script type="text/javascript"> function makeAjaxCall(){ dojo.xhrPost({ url: 'sayHello', load: helloCallback, error: helloError, form: 'myForm' }); } function helloCallback(data,ioArgs) { dojo.byId("returnMsg").innerHTML = data; } </script></head><body> <form id="myForm" method="POST"> Name: <input type="text" name="name"> </form> <button dojoType="dijit.form.Button" <script type="dojo/method" event="onClick"> makeAjaxCall();
<p id=returnMsg></p></body>
xhrPost
Formulaire
46
Dojo MVCDojo MVC
47
Echange de données JSON
var cobblers = [
{"filling": "peach", "timeToBake": 30 },
{"filling": "cherry", "timeToBake": 35 },
{"filling": "blueberry", "timeToBake": 30}
];
{ "cobblers": [
{"filling": "peach", "timeToBake": 30 },
{"filling": "cherry", "timeToBake": 35 },
{"filling": "blueberry", "timeToBake": 30}
]
}
Objets javascript Dans le code
Ce qui est envoyé sur le réseau, Presque pareil !
48
Envoi de paramètre en JSONdojo.xhrGet( {
// ici l'URL de ma servlet par exemple.
url: "validateServlet",
handleAs: "json", load: function(responseObject, ioArgs) {
// Prints "peach"
console.dir(responseObject.cobblers[0].filling);
return responseObject;
}
// More properties for xhrGet...
});
49
Exemple dijit.form.FilteringSelect
Le fichier states.json contient :
{identifier:"abbreviation", items: [ {name:"Alabama", label:"Alabama",abbreviation:"AL"}, {name:"Alaska", label:"Alaska",abbreviation:"AK"}, . . . {name:"Wisconsin", label:"Wisconsin",abbreviation:"WI"}, {name:"Wyoming", label:"Wyoming",abbreviation:"WY"}]}
50
Exemple dijit.form.FilteringSelect
<script> dojo.require("dojo.parser"); dojo.require("dijit.form.FilteringSelect"); dojo.require("dojo.data.ItemFileReadStore");</script></head><body> <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" url="states.json"></div> <form method="post"> <input dojoType="dijit.form.FilteringSelect" store="stateStore" searchAttr="name" name="state1" autocomplete="true" /> <input type="submit" value="Go!" /> </form>
Le menu select est la vue
Lecture des donnés, c'est le modèle
Drag and DropDrag and Drop
54
Drag and Drop<script> dojo.require("dojo.dnd.source"); dojo.require("dojo.parser"); </script>
<h3>Source 1</h3><div dojoType="dojo.dnd.Source" jsId="c1" class="container"> <div class="dojoDndItem">Item Alpha</div> <div class="dojoDndItem">Item Beta</div> <div class="dojoDndItem">Item Gamma</div> <div class="dojoDndItem">Item Delta</div></div>
<h3>Pure Target 2</h3><div dojoType="dojo.dnd.Target" jsId="c2" class="container"> <div class="dojoDndItem">One item</div></div>
source
target
55
Conclusion
• Dojo = gros support, très puissant,• Modulaire (on ne charge pas toute la librairie à
chaque fois)• Bon choix si besoin en GUI importants• Nombreux modèles disponibles (stores pour
flickr, google, youtube, etc.)
56
Ressources web intéressantes
• Le livre “The Book of dojo” sur le site officiel:> http://dojotoolkit.org/
• Cours et Tps sur :• http://www.javapassion.com/ajaxcodecamp
• Très nombreux exemples à copier/coller sur • http://www.dojocampus.org• En particulier suivre le lien “dojo explorer”