[[Shopalot Tutoriel Dojo Toolkit]]
Piste: • Shopalot Tutoriel Dojo Toolkit
Afficher la pageAnciennes révisions
AdministrerDerniers changementsPlan du site

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision 		Révision précédente
3:reseaux_et_telecommunications:dojo [d-m-Y H:i]
boris 		3:reseaux_et_telecommunications:dojo [d-m-Y H:i] (Version actuelle)
130.223.227.115
Ligne 1: Ligne 1:
-====== Tutoriel Dojo Toolkit ======+====== Shopalot Tutoriel Dojo Toolkit ======
 [[http://dojotoolkit.org|{{3:reseaux_et_telecommunications:dojo.png}}]] [[http://dojotoolkit.org|{{3:reseaux_et_telecommunications:dojo.png}}]]
  
Ligne 7: Ligne 7:
  
 Démo: [[http://www.fritscher.ch/dojo/shopalot/shopalot.html|www.fritscher.ch/dojo/shopalot/shopalot.html]] Démo: [[http://www.fritscher.ch/dojo/shopalot/shopalot.html|www.fritscher.ch/dojo/shopalot/shopalot.html]]
 +[[http://www.fritscher.ch/dojo/shopalot/|shopalot]]
  
 ===== Introduction ===== ===== Introduction =====
Ligne 444: Ligne 445:
  
 Comme vous pouvez le constater, ce n’est qu’un simple formulaire avec un champ unique qui appelle une fonction lorsqu’un caractère est entré et lui renvoie son contenu. La deuxième chose à remarquer est la liste vide que nous appelons //catalog//. Comme vous pouvez le constater, ce n’est qu’un simple formulaire avec un champ unique qui appelle une fonction lorsqu’un caractère est entré et lui renvoie son contenu. La deuxième chose à remarquer est la liste vide que nous appelons //catalog//.
 +
  
 ==== Code qui connecte ==== ==== Code qui connecte ====
 Comme d’habitude vous pouvez compléter votre fichier //shopalot.html// ou directement regarder le résultat dans le fichier //etape4.html// Comme d’habitude vous pouvez compléter votre fichier //shopalot.html// ou directement regarder le résultat dans le fichier //etape4.html//
  
-Nous allons créez une fonction //browse// comme nous l’avions fait pour //checkout//.+Nous allons créer une fonction //browse// comme nous l’avions fait pour //checkout//.
  
 <code javascript> <code javascript>
Ligne 511: Ligne 513:
  
 Presque tout le code est du JavaScript standard, notons juste la présence d’une fonction d’aide DOJO pour facilement ôter l’ensemble des éléments d’une liste, //dojo.dom.removeChildren//. Nous ne pouvons donc que vivement recommander que vous jetiez un œil aux différents utilitaires de traitement des nœuds DOM que propose DOJO. Presque tout le code est du JavaScript standard, notons juste la présence d’une fonction d’aide DOJO pour facilement ôter l’ensemble des éléments d’une liste, //dojo.dom.removeChildren//. Nous ne pouvons donc que vivement recommander que vous jetiez un œil aux différents utilitaires de traitement des nœuds DOM que propose DOJO.
 +
  
 ===== Etape 5: drag & drop et communication avancée ===== ===== Etape 5: drag & drop et communication avancée =====
Ligne 516: Ligne 519:
 A ce stade, le client peut voir les produits, mais il ne dispose pas encore de caddy pour stocker ses achats. A ce stade, le client peut voir les produits, mais il ne dispose pas encore de caddy pour stocker ses achats.
  
-Rajoutons donc ces trois lignes dans le menu de notre fichier shopalot.html pour avoir la version finale de ce document.+Rajoutons donc ces trois lignes dans le menu de notre fichier //shopalot.html// pour avoir la version finale de ce document.
  
 <code html> <code html>
Ligne 529: Ligne 532:
 Tout ce qu’il nous faut maintenant concevoir, est le fait que le client puisse glisser & déplacer les produits dans son caddy pour que ceux-ci y soient ajoutés. Tout ce qu’il nous faut maintenant concevoir, est le fait que le client puisse glisser & déplacer les produits dans son caddy pour que ceux-ci y soient ajoutés.
  
-Si vous le voulez, vous pouvez continuer à ajouter le code dans votre document shopalot.html, ou, pour mieux séparer code et mise en page, collez la totalité du code JavaScript dans un nouveau fichier jscode.js et ensuite ajoutez une balise «<script>» dans votre fichier HTML afin qu’il charge jscode.js.+Si vous le voulez, vous pouvez continuer à ajouter le code dans votre document //shopalot.html//, ou, pour mieux séparer code et mise en page, collez la totalité du code JavaScript dans un nouveau fichier //jscode.js// et ensuite ajoutez une balise **<script>** dans votre fichier HTML afin qu’il charge //jscode.js//.
  
 +<code html>
 <script type="text/JavaScript" src="jscode.js"></script> <script type="text/JavaScript" src="jscode.js"></script>
 +</code>
  
-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)».+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)//.
  
 <code javascript> <code javascript>
Ligne 545: Ligne 550:
 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’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.+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.+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.
  
 <code javascript> <code javascript>
Ligne 562: Ligne 567:
 </code> </code>
  
-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».+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 ==== ==== Communication ====
Ligne 596: Ligne 601:
 </code> </code>
  
-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).+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. 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 utiliser cette option, nous devons ajouter cette ligne dans notre page //form.html//
  
 <code html> <code html>
Ligne 606: Ligne 611:
 </code> </code>
  
-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.+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.+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! Voici le résultat final de notre shop!
-FIXME+ 
 +{{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 ====== ====== 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!+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.+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! N’oubliez pas que la manière la plus simple d’apprendre est d’essayer!
  
-===== Ressources ======+====== Ressources ======
   * Le tookit Dojo http://dojotoolkit.org   * Le tookit Dojo http://dojotoolkit.org
   * L’API http://dojotoolkit.org/api/   * L’API http://dojotoolkit.org/api/
3/reseaux_et_telecommunications/dojo.1172932083.txt.gz · Dernière modification: d-m-Y H:i (modification externe)
Afficher la pageAnciennes révisions
Haut de page
chimeric.de = chi`s home Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0 Fristcher.ch