dojo carol mcdonald, java architect, updated and adapted by michel buffa
TRANSCRIPT
![Page 1: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/1.jpg)
Dojo
Carol McDonald, Java Architect,Updated and adapted by Michel Buffa
![Page 2: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/2.jpg)
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
![Page 3: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/3.jpg)
3
Dojo Client SideDojo Client SideJavaScript LibraryJavaScript Library
![Page 4: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/4.jpg)
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
![Page 5: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/5.jpg)
5
Les librairies du Toolkit Dojo
![Page 6: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/6.jpg)
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
![Page 7: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/7.jpg)
7
IntégrerIntégrer dojo à une dojo à une applicationapplication
![Page 8: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/8.jpg)
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.
![Page 9: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/9.jpg)
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 !
![Page 10: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/10.jpg)
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)
![Page 11: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/11.jpg)
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 !
![Page 12: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/12.jpg)
12
Dojo contient plusieursDémonstrationsPar exemple : themeTester.html
![Page 13: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/13.jpg)
13
Exemples de widgets issus de dijit
![Page 14: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/14.jpg)
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
![Page 15: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/15.jpg)
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");
![Page 16: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/16.jpg)
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");
![Page 17: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/17.jpg)
17
Dijit = Dijit = dojo Widgetdojo Widget
![Page 18: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/18.jpg)
18
dijit est une couche au-dessus de Dojo
Les widgets Doko
![Page 19: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/19.jpg)
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
![Page 20: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/20.jpg)
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
![Page 21: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/21.jpg)
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>
![Page 22: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/22.jpg)
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)
![Page 23: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/23.jpg)
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" />
![Page 24: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/24.jpg)
24
Dijit, widgets de Layout• Accordion Container,Content Pane, Layout
Container, Split Container, Stack Container, Tab Container
![Page 25: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/25.jpg)
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>
![Page 26: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/26.jpg)
26
Dijit menus et boutons• Button, ComboButton, DropDownButton, Menu,
Toolbar
![Page 27: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/27.jpg)
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>
![Page 28: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/28.jpg)
28
Fonctions dojo Fonctions dojo indispensablesindispensables
![Page 29: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/29.jpg)
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.
![Page 30: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/30.jpg)
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");
![Page 31: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/31.jpg)
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
![Page 32: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/32.jpg)
32
Dojo et les événementsDojo et les événements
![Page 33: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/33.jpg)
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.
![Page 34: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/34.jpg)
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>
![Page 35: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/35.jpg)
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”
![Page 36: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/36.jpg)
36
Déconnecter des Fonctions
objectConnections[1]= dojo.connect(someObject, "baz", anotherObject, "afterBaz");
dojo.disconnect(objectConnections[1]);
![Page 37: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/37.jpg)
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]);
![Page 38: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/38.jpg)
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()
![Page 39: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/39.jpg)
39
Web traditionnel AJAX
within a browser, there is AJAX engine
![Page 40: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/40.jpg)
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.
![Page 41: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/41.jpg)
41
Dojo Hello WorldDojo Hello World
![Page 42: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/42.jpg)
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
![Page 43: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/43.jpg)
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
![Page 44: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/44.jpg)
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); }%>
![Page 45: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/45.jpg)
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
![Page 46: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/46.jpg)
46
Dojo MVCDojo MVC
![Page 47: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/47.jpg)
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 !
![Page 48: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/48.jpg)
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...
});
![Page 49: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/49.jpg)
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"}]}
![Page 50: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/50.jpg)
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
![Page 51: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/51.jpg)
Drag and DropDrag and Drop
![Page 52: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/52.jpg)
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
![Page 53: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/53.jpg)
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.)
![Page 54: Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa](https://reader035.vdocuments.us/reader035/viewer/2022070309/551d9d8d497959293b8c2d5f/html5/thumbnails/54.jpg)
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”