Ci-dessous, les différences entre deux révisions de la page.
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 ====== | + | ====== |
[[http:// | [[http:// | ||
Ligne 7: | Ligne 7: | ||
Démo: [[http:// | Démo: [[http:// | ||
+ | [[http:// | ||
===== 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 // | 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 // | ||
+ | |||
==== Code qui connecte ==== | ==== Code qui connecte ==== | ||
Comme d’habitude vous pouvez compléter votre fichier // | Comme d’habitude vous pouvez compléter votre fichier // | ||
- | Nous allons | + | Nous allons |
<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, // | 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, // | ||
+ | |||
===== 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 |
<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, | + | Si vous le voulez, vous pouvez continuer à ajouter le code dans votre document |
+ | <code html> | ||
<script type=" | <script type=" | ||
+ | </ | ||
- | La première chose que nous allons faire est de rendre mobiles les différents produits que nous ajoutons à la liste «catalog» | + | La première chose que nous allons faire est de rendre mobiles les différents produits que nous ajoutons à la liste // |
<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» | + | 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 // |
- | Maintenant que les produits sont déplaçables, | + | Maintenant que les produits sont déplaçables, |
<code javascript> | <code javascript> | ||
Ligne 562: | Ligne 567: | ||
</ | </ | ||
- | Nous créons un objet DOJO «DropTarget» | + | Nous créons un objet DOJO // |
==== Communication ==== | ==== Communication ==== | ||
Ligne 596: | Ligne 601: | ||
</ | </ | ||
- | 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 | + | Avant d’expliquer ce que fait cette fonction, il faut rapidement introduire deux fonctions supplémentaires que propose note script |
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: | ||
</ | </ | ||
- | Pour ce qui est de la fonction | + | Pour ce qui est de la fonction |
- | 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» | + | 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// |
Voici le résultat final de notre shop! | Voici le résultat final de notre shop! | ||
- | FIXME | + | |
+ | {{3: | ||
+ | |||
+ | {{3: | ||
+ | |||
+ | Démo: [[http:// | ||
====== 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 | + | 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 |
- | Pour quelques pistes supplémentaires, | + | Pour quelques pistes supplémentaires, |
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:// | * Le tookit Dojo http:// | ||
* L’API http:// | * L’API http:// |