1 / 69

Dojo

Dojo. Carol McDonald, Java Architect, Updated and adapted by Michel Buffa. Problèmes avec Ajax. JavaScript Support inconsistant entre browsers Nécessite des tests cross browsers Le code peut devenir difficile à developper , debugger, et maintenir. Dojo Client Side JavaScript Library.

colby
Download Presentation

Dojo

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa

  2. Problèmes avec Ajax JavaScript Support inconsistantentre browsers Nécessite des tests cross browsers Le code peut devenir difficile à developper, debugger, et maintenir

  3. Dojo Client SideJavaScript 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égrerdojo à une application

  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> Charger la CSS Dojo Cette ligne indique qu'on vaactiver le mode debug : celava générer des messages encouleur pour firebugMais si on est pas sous Firefoxavec Firebug, Dijo inclut unmini debugger pour les autresbrowsers : firebug lite !

  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 = dojo 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> <scripttype="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 Pour les widgets déclaratifs Charger le module Style/thème pour les widgets

  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"> EnabledSubmenu <div dojoType="dijit.Menu"> <div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')"> Submenu Item One</div> . . . </div>

  28. Fonctions dojo indispensables

  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é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énementDOM, 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 : XMLHttpRequest (XHR):dojo.xhrDelete(), dojo.xhrGet(), dojo.xhrPost(), 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 En cas d'erreur, on appellecette fonction. Contenu à envoyer

  41. Dojo 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 On error function Content to send

  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 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 JSON dojo.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> Lecture des donnés, c'est le modèle Le menu select est la vue

More Related