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 Prochaine révision Les deux révisions suivantes | ||
3:reseaux_et_telecommunications:dojo [d-m-Y H:i] boris |
3:reseaux_et_telecommunications:dojo [d-m-Y H:i] 213.246.205.194 |
||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
- | ====== Tutoriel Dojo Toolkit ====== | + | ====== |
[[http:// | [[http:// | ||
Ligne 7: | Ligne 7: | ||
Démo: [[http:// | Démo: [[http:// | ||
+ | [[http:// | ||
===== Introduction ===== | ===== Introduction ===== | ||
Ligne 416: | Ligne 417: | ||
Copiez le fichier // | Copiez le fichier // | ||
+ | |||
===== Etape 4: Communication avec le serveur ===== | ===== Etape 4: Communication avec le serveur ===== | ||
==== Autocomplete avec un serveur ==== | ==== Autocomplete avec un serveur ==== | ||
Maintenant, il est temps d’afficher les produits que nous voulons vendre: | Maintenant, il est temps d’afficher les produits que nous voulons vendre: | ||
- | FIXME | ||
- | Dans cette section nous allons nous intéresser à la base de données. Chargez le script-requête shopalot.sql (attention celui-ci est au format «utf8», cependant la table crée ne l’est pas) | + | {{3: |
- | Copiez également le dossier «items» qui contient les images des produits, ainsi que le script getitems.php. N’oubliez pas d’ajuster les informations de connexion à votre base de données dans ce script. Nous reviendrons sur son contenu ultérieurement. | + | Démo: [[http:// |
- | Comme nous l’avons fait pour le fichier form.html, nous allons maintenant créer un fichier browse.html qui affiche la liste des produits que nous vendons. | + | Dans cette section nous allons nous intéresser à la base de données. Chargez le script-requête // |
+ | |||
+ | Copiez également le dossier //items// qui contient les images des produits, ainsi que le script // | ||
+ | < | ||
+ | |||
+ | Comme nous l’avons fait pour le fichier | ||
<code html> | <code html> | ||
Ligne 438: | Ligne 444: | ||
</ | </ | ||
- | 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 shopalot.html ou directement regarder le résultat dans le fichier etape4.html | + | Comme d’habitude vous pouvez compléter votre fichier |
- | Nous allons | + | Nous allons |
<code javascript> | <code javascript> | ||
Ligne 454: | Ligne 461: | ||
</ | </ | ||
- | Ajouter browse(); à note fonction init(e) pour que la page contenant la liste de produits s’affiche au chargement de la page. | + | Ajouter |
- | Ce que «browse» | + | Ce que // |
- | Avant d’aller plus loin dans les détails de la fonction, précisons une des actions que fait le script getitems.php. Si nous appelons ce script avec comme paramètre | + | Avant d’aller plus loin dans les détails de la fonction, précisons une des actions que fait le script |
<code javascript> | <code javascript> | ||
Ligne 472: | Ligne 479: | ||
</ | </ | ||
- | Ce trick magique est effectué par «dojo.io.bind» | + | Ce trick magique est effectué par //dojo.io.bind// |
- | Remarque. Ce que nous ne couvrons pas: Io permet aussi de soumettre un formulaire en asynchrone http:// | + | **Remarque:** Ce que nous ne couvrons pas: Io permet aussi de soumettre un formulaire en asynchrone http:// |
- | Maintenant que le serveur nous répond, il faut créer la fonction | + | Maintenant que le serveur nous répond, il faut créer la fonction |
<code javascript> | <code javascript> | ||
Ligne 505: | Ligne 512: | ||
Même si cette fonction à l’air complexe, tout ce qu’elle fait est de supprimer l’entier des éléments de la liste catalog, pour ensuite y ajouter des nouveaux éléments créés d’après la réponse du serveur. Si le serveur n’a rien trouvé, un élément contenant un message d’erreur est ajouté à la liste. | Même si cette fonction à l’air complexe, tout ce qu’elle fait est de supprimer l’entier des éléments de la liste catalog, pour ensuite y ajouter des nouveaux éléments créés d’après la réponse du serveur. Si le serveur n’a rien trouvé, un élément contenant un message d’erreur est ajouté à la 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, | + | 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 511: | 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 524: | 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 540: | 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 557: | Ligne 567: | ||
</ | </ | ||
- | Nous créons un objet DOJO «DropTarget» | + | Nous créons un objet DOJO // |
==== Communication ==== | ==== Communication ==== | ||
Ligne 591: | 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 601: | 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:// |