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”
- Home
- Browse
- All Categories
- AI and Robotics
- Biotechnology
- Clean Technology
- Data Management
- Electronics - Devices
- Enterprise Applications
- Entertainment
- Internet and Web Development
- Management
- Mechanics
- Mobile - Wireless
- Networking and Communications
- Oil and Offshore
- Security
- Semiconductor
- Servers
- Software and s/w Development
- Storage
- Telecommunications
- Urban and Civil
- Community
- Upload
Comments 0
Log in to post a comment