dojo carol mcdonald, java architect, updated and adapted by michel buffa

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 !

http://dojotoolkit.org/downloads

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 >  </div> <div dojoType="dijit.layout.AccordionPane"

title="Pane2" href="tab1.html" >  </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”

dojo carol mcdonald, java architect, updated and adapted by michel buffa

Documents