Warning: Undefined array key "DOKU_PREFS" in /home/clients/0de9ff9beee4541cf1f61437ce7bce2b/web/hec/inc/common.php on line 2082
Shopalot Tutoriel Dojo Toolkit [HEC 4 ALL]

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
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 ======+====== Shopalot Tutoriel Dojo Toolkit ======
 [[http://dojotoolkit.org|{{3:reseaux_et_telecommunications:dojo.png}}]] [[http://dojotoolkit.org|{{3:reseaux_et_telecommunications:dojo.png}}]]
  
Ligne 5: Ligne 5:
  
 Version pdf: {{3:reseaux_et_telecommunications:tutorial_dojo_final.pdf|Tutorial dojo.pdf}} Version pdf: {{3:reseaux_et_telecommunications:tutorial_dojo_final.pdf|Tutorial dojo.pdf}}
 +
 +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 15: Ligne 18:
 Un produit de nettoyage?, un club de football néerlandais? Non plus! Comme tout le monde en parle, voici ce que cela signifie vraiment. Un produit de nettoyage?, un club de football néerlandais? Non plus! Comme tout le monde en parle, voici ce que cela signifie vraiment.
  
-AJAX: Asynchronous JavaScript and XML+AJAX: Asynchronous JavaScript and XML !!
  
 D’après la signification de l’acronyme, vous remarquerez rapidement qu’AJAX n’est pas une technologie en soi, mais un «regroupement de technologies déjà existantes pour créer des applications web découplé client-serveur». (openweb.eu.org): D’après la signification de l’acronyme, vous remarquerez rapidement qu’AJAX n’est pas une technologie en soi, mais un «regroupement de technologies déjà existantes pour créer des applications web découplé client-serveur». (openweb.eu.org):
Ligne 43: Ligne 46:
     * L’enregistrement des pages;     * L’enregistrement des pages;
     * Le bouton retour.     * Le bouton retour.
 +
  
  
Ligne 50: Ligne 54:
 Ces temps d’attentes (pendant lesquels l’information est traitée par le serveur) résultent de la communication synchrone entre le client et le serveur, ce qu’Ajax permet d’éviter. Voici un exemple concret pour être un peu plus explicite: Ces temps d’attentes (pendant lesquels l’information est traitée par le serveur) résultent de la communication synchrone entre le client et le serveur, ce qu’Ajax permet d’éviter. Voici un exemple concret pour être un peu plus explicite:
  
-{{3:reseaux_et_telecommunications:web_app_model.png|Le modèle classique d'application web (gauche) comparé au modèle AJAX (droite) [adaptivepath]}}+{{3:reseaux_et_telecommunications:web_app_model.png?400|Le modèle classique d'application web (gauche) comparé au modèle AJAX (droite) [adaptivepath]}}
  
 //Le modèle classique d'application web (gauche) comparé au modèle AJAX (droite) [adaptivepath]// //Le modèle classique d'application web (gauche) comparé au modèle AJAX (droite) [adaptivepath]//
  
-{{3:reseaux_et_telecommunications:web_app_model2..png|Le modèle synchrone des applications web classiques (haut) comparé au modèle asynchrone des applications AJAX (bas) [adaptivepath]}}+{{3:reseaux_et_telecommunications:web_app_model2..png?400|Le modèle synchrone des applications web classiques (haut) comparé au modèle asynchrone des applications AJAX (bas) [adaptivepath]}}
  
 //Le modèle synchrone des applications web classiques (haut) comparé au modèle asynchrone des applications AJAX (bas) [adaptivepath]// //Le modèle synchrone des applications web classiques (haut) comparé au modèle asynchrone des applications AJAX (bas) [adaptivepath]//
  
-{{3:reseaux_et_telecommunications:ajax.png|Une vue plus détaillée d'une interaction Ajax [java.net]}}+{{3:reseaux_et_telecommunications:ajax.png?400|Une vue plus détaillée d'une interaction Ajax [java.net]}}
  
 //Une vue plus détaillée d'une interaction Ajax [java.net]// //Une vue plus détaillée d'une interaction Ajax [java.net]//
Ligne 90: Ligne 94:
  
 ===== Etape 1: Hello World ===== ===== Etape 1: Hello World =====
 +
 ==== Mise en place ==== ==== Mise en place ====
 La première étape consiste à télécharger le toolkit Dojo (si ce n’est pas encore fait) http://dojotoolkit.org/download/ et de l’extraire dans le dossier de votre projet. Ensuite, créez un fichier //shopalot.html// dans le répertoire source de votre projet. Vous devriez avoir: La première étape consiste à télécharger le toolkit Dojo (si ce n’est pas encore fait) http://dojotoolkit.org/download/ et de l’extraire dans le dossier de votre projet. Ensuite, créez un fichier //shopalot.html// dans le répertoire source de votre projet. Vous devriez avoir:
Ligne 140: Ligne 145:
 Le résultat attendu de ce code devrait ressembler à ceci: Le résultat attendu de ce code devrait ressembler à ceci:
  
-{{3:reseaux_et_telecommunications:etape1.png|étape 1}}+{{3:reseaux_et_telecommunications:etape1.png?600|étape 1}}
  
-démo: [[http://www.fritscher.ch/dojo/shopalot/etape1.html|fritscher.ch/dojo/shopalot/etape1.html]]+démo: [[http://www.fritscher.ch/dojo/shopalot/etape1.html|www.fritscher.ch/dojo/shopalot/etape1.html]]
  
 ==== Widget qu’est-ce que c’est? ==== ==== Widget qu’est-ce que c’est? ====
Ligne 185: Ligne 190:
  
 Remarque: le code CSS n’est pas expliqué, mais si cela vous intéresse, observez le fichier style. Il faut toutefois savoir que certains templates DOJO peuvent être modifiés par CSS en spécifiant body. //dojoValidateEmpty//, si cela ne devait pas fonctionner normalement. Remarque: le code CSS n’est pas expliqué, mais si cela vous intéresse, observez le fichier style. Il faut toutefois savoir que certains templates DOJO peuvent être modifiés par CSS en spécifiant body. //dojoValidateEmpty//, si cela ne devait pas fonctionner normalement.
 +
  
 ===== Etape 2: Layout Widget ===== ===== Etape 2: Layout Widget =====
 ==== Mise en page facilité ==== ==== Mise en page facilité ====
-DOJO n’a pas uniquement des fonctionnalités pour gérer facilement l’interaction sur un site web, mais aussi sa mise en page. Voici la mise en page que nous allons obtenir, sans devoir utiliser d‘astuces avec des propriétés css telles que «floatmargin»... +DOJO n’a pas uniquement des fonctionnalités pour gérer facilement l’interaction sur un site web, mais aussi sa mise en page. Voici la mise en page que nous allons obtenir, sans devoir utiliser d‘astuces avec des propriétés css telles que //floatmargin//... 
-FIXME+ 
 +{{3:reseaux_et_telecommunications:etape2.png?600|étape 2}} 
 + 
 +démo: [[http://www.fritscher.ch/dojo/shopalot/etape2.html|www.fritscher.ch/dojo/shopalot/etape2.html]]
  
-Insérez ce code dans vote fichier shoplalot.html (après le tag «body») ou simplement référez-vous au fichier etape2.html. Pour les graphismes, logo et bords arrondis, copiez le répertoire images et son contenu dans votre dossier de travail.+Insérez ce code dans vote fichier //shoplalot.html// (après le tag **body**) ou simplement référez-vous au fichier //etape2.html//. Pour les graphismes, logo et bords arrondis, copiez le répertoire images et son contenu dans votre dossier de travail.
 <code html> <code html>
 <div dojoType="LayoutContainer" layoutChildPriority='none' id="main"> <div dojoType="LayoutContainer" layoutChildPriority='none' id="main">
Ligne 228: Ligne 237:
 </code> </code>
  
-Dans ce code nous utilisons deux nouveaux «widgets» DOJO: «LayoutContainer» et «ContentPane».+Dans ce code nous utilisons deux nouveaux //widgets// DOJO: //LayoutContainer// et //ContentPane//.
  
-Le «LayoutContainer», comme son nom l’indique, n’a pas vraiment de fonction autre que celle de permettre le positionnement des éléments qui se trouvent à l’intérieur de celui-ci. D’où son seul attribut «layoutChildPriority» qui peut prendre les valeurs suivantes: «none, top-bottom, left-right» qui définissent l’ordre de priorité dans lequel les éléments sont alignés.+Le //LayoutContainer//, comme son nom l’indique, n’a pas vraiment de fonction autre que celle de permettre le positionnement des éléments qui se trouvent à l’intérieur de celui-ci. D’où son seul attribut //layoutChildPriority// qui peut prendre les valeurs suivantes: //none, top-bottom, left-right// qui définissent l’ordre de priorité dans lequel les éléments sont alignés.
  
-Le «ContentPane» est un «div» spécial qui, s’il est placé à l’intérieur d’un «LayoutContainer», tout comme d’autres «widgets», prend en plus des ses propres attributs, un attribut de positionnement «layoutAlign» qui peut contenir les valeurs, «left, right, bottom, top et client». Cependant, dans toute la page le «ContentPane» n’ a le droit d’avoir qu’un seul élément avec la valeur client, étant donné que celui-ci remplit l’espace non occupé par les autres.+Le //ContentPane// est un **div** spécial qui, s’il est placé à l’intérieur d’un //LayoutContainer//, tout comme d’autres //widgets//, prend en plus des ses propres attributs, un attribut de positionnement //layoutAlign// qui peut contenir les valeurs, //left, right, bottom, top et client//. Cependant, dans toute la page le //ContentPane// n’ a le droit d’avoir qu’un seul élément avec la valeur client, étant donné que celui-ci remplit l’espace non occupé par les autres.
  
-Pour notre site nous utilisons simplement un «top» et un «bottom» pour l’en-tête et le pied de page, un «left» pour le menu et le client pour la zone principale.+Pour notre site nous utilisons simplement un //top// et un //bottom// pour l’en-tête et le pied de page, un //left// pour le menu et le client pour la zone principale.
  
  
 ==== Chargement partiel sans frais ==== ==== Chargement partiel sans frais ====
-Le «ContentPane» de DOJO offre, en plus de ses attributs de positionnement, la possibilité de changer aisément et dynamiquement son contenu ou de charger une page tierce sans avoir recours à un «iframe» (ce qui peut éviter des problèmes de droits d’accès lors de «cross-site scripting», que nous ne couvrons pas dans ce tutorial).+Le //ContentPane// de DOJO offre, en plus de ses attributs de positionnement, la possibilité de changer aisément et dynamiquement son contenu ou de charger une page tierce sans avoir recours à un **iframe** (ce qui peut éviter des problèmes de droits d’accès lors de cross-site scripting, que nous ne couvrons pas dans ce tutorial).
  
 Voici quelques attributs intéressants de l’API. Voici quelques attributs intéressants de l’API.
Ligne 265: Ligne 274:
 Nous constatons que la page a chargé une page HTML complète et dont seule la party body sera recopiée par défaut. Nous constatons que la page a chargé une page HTML complète et dont seule la party body sera recopiée par défaut.
  
-Pour tester le chargement dynamique, créez une page form.html avec juste un titre noté «checkout» à l’intérieur, comme dans notre fichier etape2_form.html.+Pour tester le chargement dynamique, créez une page //form.html// avec juste un titre noté //checkout// à l’intérieur, comme dans notre fichier //etape2_form.html//.
  
-Ensuite, ajoutez à notre fonction «init» les deux lignes de code qui figurent ci-dessous. D’après l’étape 1, vous devriez savoir le rôle qu’ont ces deux lignes, c'est-à-dire d’appeler la fonction «checkout» quand on clique sur le lien «checkout» de note menu.+Ensuite, ajoutez à notre fonction //init// les deux lignes de code qui figurent ci-dessous. D’après l’étape 1, vous devriez savoir le rôle qu’ont ces deux lignes, c'est-à-dire d’appeler la fonction //checkout// quand on clique sur le lien //checkout// de note menu.
  
-Par ailleurs, recopiez la fonction «checkout», ou simplement utilisez le fichier etape2.html.+Par ailleurs, recopiez la fonction //checkout//, ou simplement utilisez le fichier //etape2.html//.
  
 <code javascript> <code javascript>
Ligne 282: Ligne 291:
 } }
 </code> </code>
-Dans cette fonction «checkout», nous récupérons l’objet «widget» dans lequel nous voulons charger la nouvelle page et en exécutant la fonction «setUrl» avec comme paramètre l’emplacement du nouveau fichier.+Dans cette fonction //checkout//, nous récupérons l’objet //widget// dans lequel nous voulons charger la nouvelle page et en exécutant la fonction //setUrl// avec comme paramètre l’emplacement du nouveau fichier.
  
-Si nous avions voulu afficher directement la page form.html au chargement de la page nous aurions pu utiliser l’attribut «href» sur le «widget» «ContentPane».+Si nous avions voulu afficher directement la page //form.html// au chargement de la page nous aurions pu utiliser l’attribut //href// sur le //widget ContentPane//.
  
 <code html> <code html>
 <div dojoType="ContentPane"  id="content" cacheContent="false" href="form.html"></div> <div dojoType="ContentPane"  id="content" cacheContent="false" href="form.html"></div>
 </code> </code>
 +
  
  
Ligne 296: Ligne 306:
 DOJO contient aussi des «widgets» facilitant la création de formulaire plus intuitif. Par exemple, nous pouvons dénombrer une aide à la sélection de date, un éditeur de texte riche, un contrôle du contenu d’un champ. DOJO contient aussi des «widgets» facilitant la création de formulaire plus intuitif. Par exemple, nous pouvons dénombrer une aide à la sélection de date, un éditeur de texte riche, un contrôle du contenu d’un champ.
  
-Voici le formulaire que nous allons réaliser. +Voici le formulaire que nous allons réaliser
-FIXME+ 
 +{{3:reseaux_et_telecommunications:etape3.png?600|étape 3}} 
 + 
 +Démo: [[http://www.fritscher.ch/dojo/shopalot/etape3.html|www.fritscher.ch/dojo/shopalot/etape3.html]]
  
-Remplacez le code dans votre fichier form.html par celui-ci ou récupérer le fichier etape3_form.html. +Remplacez le code dans votre fichier //form.html// par celui-ci ou récupérer le fichier //etape3_form.html//
 <code html> <code html>
 <form id="myForm" action="showPost.php" method="post"> <form id="myForm" action="showPost.php" method="post">
Ligne 351: Ligne 364:
 </code> </code>
  
-Comme vous pouvez le voir, nous avons surtout utilisé un «widget» qui s’appelle «ValidationTextbox», mais il en existe bien d’autres encore: «CurrencyTextbox»«DateTextbox»«emailTextbox»«IntegerTextbox»«IpAddressTextbox»«RealNumberTextbox»«TimeTextbox»,… Consultez la page de validation dans le dossier demo du toolkit pour visualiser leurs différents effets.+Comme vous pouvez le voir, nous avons surtout utilisé un //widget// qui s’appelle //ValidationTextbox//, mais il en existe bien d’autres encore: //CurrencyTextboxDateTextboxemailTextboxIntegerTextboxIpAddressTextboxRealNumberTextboxTimeTextbox,...// Consultez la page de validation dans le dossier demo du toolkit pour visualiser leurs différents effets.
  
-Revenons à notre «ValidationTextbox», si nous regardons dans l’API, nous nous rendons compte que nous pouvons spécifier un message unique dans trois situations: message d’invite (promptMessage), message si le champ est invalide (invalidMessage) et si le champ est vide (missingMessage).+Revenons à notre //ValidationTextbox//, si nous regardons dans l’API, nous nous rendons compte que nous pouvons spécifier un message unique dans trois situations: message d’invite (//promptMessage//), message si le champ est invalide (//invalidMessage//) et si le champ est vide (//missingMessage//).
  
-Cependant, il n’y a pas de référence à «trim», ni «ucFrist» que nous avons utilisé pour effacer les espaces vides après le contenu ou pour mettre en majuscule la première lettre de chaque mot entré.+Cependant, il n’y a pas de référence à //trim//, ni //ucFrist// que nous avons utilisé pour effacer les espaces vides après le contenu ou pour mettre en majuscule la première lettre de chaque mot entré.
  
-Pour trouver d’où viennent ces attributs il vous faut vous rendre à la section «Inheritance Chain» de l’API et vous constaterez que «ValidationTextbox» à comme parent Textbox. Et c’est bien dans les infos de celui-ci que vous y retrouverez ces attributs.+Pour trouver d’où viennent ces attributs il vous faut vous rendre à la section //Inheritance Chain// de l’API et vous constaterez que //ValidationTextbox// à comme parent Textbox. Et c’est bien dans les infos de celui-ci que vous y retrouverez ces attributs.
  
 <code javascript> <code javascript>
Ligne 381: Ligne 394:
 </code> </code>
  
-Un autre composant que nous avons utilisé est le «dropdowndatepicker». Nous y avons juste spécifié le format d’output désiré et laissé les autres paramètres par défaut, mais soyez attentif au fait que vous avez la possibilité de configurer énormément d’autres variables.+Un autre composant que nous avons utilisé est le //dropdowndatepicker//. Nous y avons juste spécifié le format d’output désiré et laissé les autres paramètres par défaut, mais soyez attentif au fait que vous avez la possibilité de configurer énormément d’autres variables.
  
-Les autres éléments que nous avons utilisés comme «ComboBox, CheckBox, Button» n’ont pas vraiment de fonctions spéciales, ils permettent juste d’obtenir un graphisme plus attrayant sans aucune modification préalable. Cependant, si vous voulez créer vos propres graphismes avancés, il vous faudra allez bien plus loin que ce que nous proposons dans ce tutorial. Un bon point de départ est la démo sur les boutons disponible dans le toolkit.+Les autres éléments que nous avons utilisés comme //ComboBox, CheckBox, Button// n’ont pas vraiment de fonctions spéciales, ils permettent juste d’obtenir un graphisme plus attrayant sans aucune modification préalable. Cependant, si vous voulez créer vos propres graphismes avancés, il vous faudra allez bien plus loin que ce que nous proposons dans ce tutoriel. Un bon point de départ est la démo sur les boutons disponible dans le toolkit.
  
 ==== Validation rapide ==== ==== Validation rapide ====
-Au niveau du code JavaScript nous avons uniquement crée une fonction «submit()» appelée par le bouton du formulaire. Cette fonction récupère les références vers les objets champs puis vérifie si ceux-ci sont soit rempli ou soit valide d’après le type de champ, grâce aux différentes fonctions préprogrammées des différents «widgets». (Code disponible dans le fichier etape3.html)+Au niveau du code JavaScript nous avons uniquement crée une fonction //submit()// appelée par le bouton du formulaire. Cette fonction récupère les références vers les objets champs puis vérifie si ceux-ci sont soit rempli ou soit valide d’après le type de champ, grâce aux différentes fonctions préprogrammées des différents //widgets//. (Code disponible dans le fichier //etape3.html//)
  
 <code javascript> <code javascript>
Ligne 403: Ligne 416:
 </code> </code>
  
-Copiez le fichier showPost.php dans votre dossier de travail, si tout est en ordre. Le formulaire envoie ses informations au fichier PHP showpost.php par méthode POST. Celui-ci affiche uniquement les valeurs qu’il reçoit par la méthode POST, à vous d’étendre ses fonctionnalités comme vous le désirez ou de rediriger le formulaire sur un autre script. Toutefois, n’oubliez pas qu’il est toujours une bonne idée de revalider le contenu au niveau du serveur, afin d’éviter des tentatives malicieuses d’injecter du code.+Copiez le fichier //showPost.php// dans votre dossier de travail, si tout est en ordre. Le formulaire envoie ses informations au fichier PHP //showpost.php// par méthode POST. Celui-ci affiche uniquement les valeurs qu’il reçoit par la méthode POST, à vous d’étendre ses fonctionnalités comme vous le désirez ou de rediriger le formulaire sur un autre script. Toutefois, n’oubliez pas qu’il est toujours une bonne idée de revalider le contenu au niveau du serveur, afin d’éviter des tentatives malicieuses d’injecter du code. 
  
 ===== 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éesChargez le script-requête shopalot.sql (attention celui-ci est au format «utf8», cependant la table crée ne l’est pas)+{{3:reseaux_et_telecommunications:etape4.png?600|étape 4}}
  
-Copiez également le dossier «items» qui contient les images des produits, ainsi que le script getitems.phpN’oubliez pas d’ajuster les informations de connexion à votre base de données dans ce scriptNous reviendrons sur son contenu ultérieurement.+Démo: [[http://www.fritscher.ch/dojo/shopalot/etape4.html|http://www.fritscher.ch/dojo/shopalot/etape4.html]]
  
-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 //shopalot.sql// (attention celui-ci est au format //utf8//, cependant la table crée ne l’est pas) 
 + 
 +Copiez également le dossier //items// qui contient les images des produits, ainsi que le script //getitems.php//
 +<note>N’oubliez pas d’ajuster les informations de connexion à votre base de données dans ce script. Nous reviendrons sur son contenu ultérieurement.</note> 
 + 
 +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.
  
 <code html> <code html>
Ligne 426: Ligne 444:
 </code> </code>
  
-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 442: Ligne 461:
 </code> </code>
  
-Ajouter browse(); à note fonction init(e) pour que la page contenant la liste de produits s’affiche au chargement de la page.+Ajouter //browse();// à note fonction //init(e)// pour que la page contenant la liste de produits s’affiche au chargement de la page.
  
-Ce que «browse» fait de plus que «checkout», est de connecter la fonction «onLoad» avec une nouvelle fonction «getItems()» que nous allons créer. Cette fonction a pour but de charger la liste (catalog) de tous les éléments de la base de données lorsque la page browse.html a été chargée dans le «contentPane».+Ce que //browse// fait de plus que //checkout//, est de connecter la fonction //onLoad// avec une nouvelle fonction //getItems()// que nous allons créer. Cette fonction a pour but de charger la liste (//catalog//) de tous les éléments de la base de données lorsque la page //browse.html// a été chargée dans le //contentPane//
  
-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 «action» la valeur «search» et comme second paramètre «keyword» avec une valeur représentant un mot-clé, celui-ci nous retourne les objets correspondant à ce mot-clé se trouvant dans note base de données. Le format dans lequel ces valeurs sont retournées est appelé JSON (JavaScript Object Notation) qui permettra de facilement retraiter ces données dans nos fonctions.+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 //action// la valeur //search// et comme second paramètre «keyword» avec une valeur représentant un mot-clé, celui-ci nous retourne les objets correspondant à ce mot-clé se trouvant dans note base de données. Le format dans lequel ces valeurs sont retournées est appelé JSON (JavaScript Object Notation) qui permettra de facilement retraiter ces données dans nos fonctions.
  
 <code javascript> <code javascript>
Ligne 460: Ligne 479:
 </code> </code>
  
-Ce trick magique est effectué par «dojo.io.bind» et des quelques paramètres que nous attribuons à cette fonction. Dans notre cas, le paramètre «url» contient le nom du fichier à contacter, «content» les paramètres à lui transmettre, tandis que «mimetype» spécifie le format de retour auquel nous nous attendons et «handler» la fonction à exécuter lorsqu’on reçoit une réponse.+Ce trick magique est effectué par //dojo.io.bind// et des quelques paramètres que nous attribuons à cette fonction. Dans notre cas, le paramètre //url// contient le nom du fichier à contacter, //content// les paramètres à lui transmettre, tandis que //mimetype// spécifie le format de retour auquel nous nous attendons et //handler// la fonction à exécuter lorsqu’on reçoit une réponse.
  
-RemarqueCe que nous ne couvrons pas: Io permet aussi de soumettre un formulaire en asynchrone http://manual.dojotoolkit.org/WikiHome/DojoDotBook/Book108+**Remarque:** Ce que nous ne couvrons pas: Io permet aussi de soumettre un formulaire en asynchrone http://manual.dojotoolkit.org/WikiHome/DojoDotBook/Book108
  
-Maintenant que le serveur nous répond, il faut créer la fonction «updateCatalog» que nous avons spécifié dans la communication. Par défaut, le connecteur «bind» va toujours nous retourner une variable «type» qui contient «load» ou «error» pour faire du traitement d’erreur, «data» qui contient le contenu de la réponse du serveur, en plus de l’événement standard de JavaScript.+Maintenant que le serveur nous répond, il faut créer la fonction //updateCatalog// que nous avons spécifié dans la communication. Par défaut, le connecteur //bind// va toujours nous retourner une variable //type// qui contient //load// ou //error// pour faire du traitement d’erreur, «data» qui contient le contenu de la réponse du serveur, en plus de l’événement standard de JavaScript.
  
 <code javascript> <code javascript>
Ligne 493: 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, «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 499: 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 512: 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 528: 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 545: Ligne 567:
 </code> </code>
  
-Nous créons un objet DOJO «DropTarget» avec «cart» qui est le nom de limage 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 lid 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 579: 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 589: 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.txt · Dernière modification: d-m-Y H:i de 130.223.227.115
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