** de notre code. On voit qu’elle comporte un attribut //dojoType//, c’est ce que dojo appelle un //widget//, c'est-à-dire une balise qui, lors de l’exécution du code, sera remplacée par du code plus complexe avec une mise en page et une fonctionnalité avancée. Pour savoir quels sont les paramètres de ce //widget// (s’il n’est pas encore documenté), le plus simple c’est de le retrouver dans l’API.
Par exemple pour notre //widget// de type //dialog// on trouve:
// focusElement: String
// provide a focusable element or element id if you need to
// work around FF's tendency to send focus into outer space on hide
focusElement: "",
// bgColor: String
// color of viewport when displaying a dialog
bgColor: "black",
// bgOpacity: Number
// opacity (0~1) of viewport color (see bgColor attribute)
bgOpacity: 0.4,
// followScroll: Boolean
// if true, readjusts the dialog (and dialog background) when the user moves the scrollbar
followScroll: true,
// closeOnBackgroundClick: Boolean
// clicking anywhere on the background will close the dialog
closeOnBackgroundClick: false,
Revenons au code JavaScript:
Avant de pouvoir utiliser DOJO, il faut charger le script principal du toolkit, c’est ce que fait la première balise **
La première chose que nous allons faire est de rendre mobiles les différents produits que nous ajoutons à la liste //catalog// dans //updateCatalotog//. Pour cela, ajoutez ce bout de code après //catalog.appendChild(newLi)//.
//make the item draggable
var dnd = new dojo.dnd.HtmlDragCopySource(newLi, "*", true);
//add a tooltip to the item
var toolTip = dojo.widget.createWidget("Tooltip", {caption:data[i].description,connectId:data[i].id,showDelay:100});
document.body.appendChild(toolTip.domNode);
D’une part, nous rendons le nouvel objet créé déplaçable de catégorie * car nous pouvons isoler les différents objets déplaçables dans des catégories (ce que nous n’utilisons pas), et spécifions qu’il ne peut y avoir de copie de l’élément (sans importance dans note cas vu que nous détruisons l’objet une fois qu’il est lâché sur le caddy).
D’autre part, nous profitons d’ajouter une bulle d’aide affichant la description du produit. Ceci surtout pour montrer la capacité de DOJO à créer des //widgets// en code aussi bien qu’en HTML.
Maintenant que les produits sont déplaçables, il faut encore que nous puissions les déposer dans l’image du caddy. Dans notre fonction //init(e)//, il faut encore y ajouter ces lignes de code.
//drag & drop: drop target
var cart = dojo.byId("cart");
var target = new dojo.dnd.HtmlDropTarget(cart, ["*"]);
//redefine onDrop function of our target
target.onDrop = function(e){
//desactivate drag object
this.onDragOut(e);
var id = e.dragSource.dragObject.id;
addItemToCart(id);
};
Nous créons un objet DOJO //DropTarget// avec //cart// qui est le nom de l'image du caddy que nous avons ajouté juste auparavant. Mais vu que nous ne souhaitions pas utiliser l’action par défaut, lorsqu’un produit est lâché dessus, nous redéfinissons la fonction //onDrop// pour qu’elle récupère l'id de l'élément lâché et le transmette à note fonction //addItemToCart//.
==== Communication ====
Voici notre dernière fonction pour que le puzzle soit au complet.
function addItemToCart(itemId) {
var bindArgs = {
url: "getitems.php",
handler: function(type, data, evt){
var total = dojo.byId("total");
if (data) {
//update total
total.innerHTML = (parseFloat(data.price) + parseFloat(total.innerHTML)).toFixed(2);
//create new item from the data
var newLi = document.createElement("li");
newLi.innerHTML = dojo.string.summary(data.name,15);
var cartList = dojo.byId("cartList");
//keep the list small
if(cartList.getElementsByTagName("li").length >=5){
dojo.dom.removeNode(cartList.firstChild);
}
//add item to the list
cartList.appendChild(newLi);
}
},
mimetype: "text/json",
content: {"action":"additem","itemid":itemId}
};
//make the connection
dojo.io.bind(bindArgs);
}
Avant d’expliquer ce que fait cette fonction, il faut rapidement introduire deux fonctions supplémentaires que propose note script //getitems.php//. Si on l’appelle avec comme paramètre //action// et valeur //additem//, celui-ci attend un deuxième paramètre //itemid// qui aura comme valeur le nom du produit à ajouter au caddy. Il cherchera ce produit dans la base de données, l’ajoute dans le caddy (au niveau de la session PHP) et ensuite répond avec les informations sur l’objet en question. (C’est ici que l’on pourrait améliorer le tutorial et par exemple directement retourner le caddy que l’on réaffichera).
La deuxième fonction à expliquer et que si nous appelons le script sans paramètre, celui-ci nous retourne une liste en HTML avec le contenu du caddy.
Pour utiliser cette option, nous devons ajouter cette ligne dans notre page //form.html//
Pour ce qui est de la fonction //addItemToCart// l’explication est quasi identique à celle de la fonction //getItems//. La différence majeure est au niveau de l’attribut //handler// qui ne contient pas un nom d’une fonction à exécuter, mais directement la fonction. Celle-ci met à jour le total, ainsi que la liste des cinq derniers produits ajoutés.
Nous pouvons voir, qu’en plus des fonctions d’aide DOM, DOJO propose aussi des fonctions d’aide pour la manipulation de texte (String) comme //dojo.string.summary// qui nous aide à limiter le nombre de caractères à 15 maximum.
Voici le résultat final de notre shop!
{{3:reseaux_et_telecommunications:etape5a.png?600|étape 5}}
{{3:reseaux_et_telecommunications:etape5b.png?600|étape 5}}
Démo: [[http://www.fritscher.ch/dojo/shopalot/shopalot.html|http://www.fritscher.ch/dojo/shopalot/shopalot.html]]
====== Conclusion ======
Maintenant c’est à vous d’aller plus loin en vous aidant de l’API et du manuel. Tous les exemples disponibles dans les répertoires //demos// et //test// du toolkit peuvent être une grande source d’inspiration!
Pour quelques pistes supplémentaires, allez voir par exemple dans le manuel la section création de vos propres //widgets//, ou encore essayez d’ajouter des fonctions supplémentaires à notre application, comme par exemple des catégories pour les produits, un historique de commandes, gestion de stock, etc.
N’oubliez pas que la manière la plus simple d’apprendre est d’essayer!
====== Ressources ======
* Le tookit Dojo http://dojotoolkit.org
* L’API http://dojotoolkit.org/api/
* Manuel http://manual.dojotoolkit.org/WikiHome/DojoDotBook
* Navigateur firefox http://www.mozilla.com/firefox/
* Extension firefox pour debugger facilement http://getfirebug.com/
* IDE eclipse http://www.eclipse.org/
* Addon AJAX Toolkit Framework pour eclipse http://www.eclipse.org/atf/
====== Références ======
* (openweb.eu.org) http://openweb.eu.org/articles/objet_xmlhttprequest/
* (java.net) https://d2.dev.java.net/doc/introduction.html
* (adaptivepath) http://www.adaptivepath.com/publications/essays/archives/000385.php
* http://dojo.jot.com/Tutorials/HelloWorld
* http://today.java.net/pub/a/today/2006/04/27/building-ajax-with-dojo-and-json.html
* Source des images : http://www.leshop.ch/, http://www.thinkgeek.com, http://www.amazon.com