Dojo

concepcionsockΛογισμικό & κατασκευή λογ/κού

15 Αυγ 2012 (πριν από 5 χρόνια και 4 μήνες)

387 εμφανίσεις

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 Side

JavaScript 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égrer

dojo à 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
\
doj
o
-
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 plusieurs

Démonstrations

Par 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 : cela

va générer des messages en

couleur pour firebug


Mais si on est pas sous Firefox

avec Firebug, Dijo inclut un

mini debugger pour les autres

browsers : 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 =
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>


<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 widgets

Charger 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
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é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 :



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

Contenu à envoyer

En cas d'erreur, on appelle

cette fonction.

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


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 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>


Le menu select est la vue

Lecture des donnés,

c'est le modèle



Drag 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”