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] 130.223.227.115 |
||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
- | ====== Tutoriel Dojo Toolkit ====== | + | ====== |
- | Fichiers source: [[http:// | + | [[http:// |
+ | |||
+ | Fichiers source: [[http:// | ||
Version pdf: {{3: | Version pdf: {{3: | ||
+ | |||
+ | Démo: [[http:// | ||
+ | [[http:// | ||
===== Introduction ===== | ===== Introduction ===== | ||
==== Prérequis ==== | ==== Prérequis ==== | ||
- | Pour pouvoir tester, modifier ou encore implémenter les concepts démontrés dans ce tutorial, il vous faut une installation serveur de type LAMP ou un accès à un hébergement offrant PHP et MySQL 5. | + | Pour pouvoir tester, modifier ou encore implémenter les concepts démontrés dans ce tutorial, il vous faut une installation serveur de type [[wpfr>LAMP]] ou un accès à un hébergement offrant PHP et MySQL 5. |
Il est également fortement recommandé de posséder des bonnes notions dans les langages de mise en forme utilisés pour la création de pages web comme: HTML et CSS. De plus, il est recommandé d’avoir des notions de base en JavaScript ainsi qu’en PHP. Nous avons choisi d’utiliser le PHP comme language de traitement côté serveur, car il est un des plus répandus sur la toile. Mais il est également possible d’en utiliser d’autres qui vous seront peut-être plus familiers. | Il est également fortement recommandé de posséder des bonnes notions dans les langages de mise en forme utilisés pour la création de pages web comme: HTML et CSS. De plus, il est recommandé d’avoir des notions de base en JavaScript ainsi qu’en PHP. Nous avons choisi d’utiliser le PHP comme language de traitement côté serveur, car il est un des plus répandus sur la toile. Mais il est également possible d’en utiliser d’autres qui vous seront peut-être plus familiers. | ||
- | |||
- | Votre serveur LAMP nécessite la version 5.2 ou supérieure de PHP, car notre tutoriel nécessite les nouvelles fonctions JSON ainsi que la version 5 du serveur MySQL pour des raisons de prise en charge de caractères. | ||
==== Qu’est-ce qu’AJAX? ==== | ==== Qu’est-ce qu’AJAX? ==== | ||
Ligne 43: | Ligne 46: | ||
* L’enregistrement des pages; | * L’enregistrement des pages; | ||
* Le bouton retour. | * Le bouton retour. | ||
+ | |||
+ | |||
==== Comment fonctionne AJAX? (adaptivepath) ==== | ==== Comment fonctionne AJAX? (adaptivepath) ==== | ||
Ligne 48: | Ligne 53: | ||
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: | ||
+ | |||
+ | //Le modèle classique d' | ||
+ | |||
+ | {{3: | ||
+ | |||
+ | //Le modèle synchrone des applications web classiques (haut) comparé au modèle asynchrone des applications AJAX (bas) [adaptivepath]// | ||
+ | |||
+ | {{3: | ||
+ | |||
+ | //Une vue plus détaillée d'une interaction Ajax [java.net]// | ||
Le déroulement d’une requête quelconque sous AJAX est plus compliqué du fait que la communication est asynchrone. Mais il permet de garantir à l’utilisateur une interactivité accrue, car il n’aura pas besoin d’attendre un rechargement de la page entière pour disposer des nouvelles informations qu’il attend. | Le déroulement d’une requête quelconque sous AJAX est plus compliqué du fait que la communication est asynchrone. Mais il permet de garantir à l’utilisateur une interactivité accrue, car il n’aura pas besoin d’attendre un rechargement de la page entière pour disposer des nouvelles informations qu’il attend. | ||
Ligne 68: | Ligne 85: | ||
====== Les étapes du tutorial ====== | ====== Les étapes du tutorial ====== | ||
- | FIXME | + | {{3: |
- | Le but de ce tutorial est de créer un site rudimentaire d’e-commerce qui s’appellera | + | Le but de ce tutorial est de créer un site rudimentaire d’e-commerce qui s’appellera |
+ | |||
+ | Pour cela, nous commencerons par l’affichage d’un simple | ||
+ | |||
+ | Il vous restera donc beaucoup de choses à explorer par vous-même, l’important est de comprendre la base de développement sous AJAX. Si quelque chose ne vous paraît pas clair, il est toujours conseillé d’aller consulter l’API http:// | ||
===== 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:// | + | La première étape consiste à télécharger le toolkit Dojo (si ce n’est pas encore fait) http:// |
/ | / | ||
|--dojo/ <- les fichiers dojos décompressés | |--dojo/ <- les fichiers dojos décompressés | ||
|--shopalot.html | |--shopalot.html | ||
- | En ayant construit la structure de base et téléchargé tous les fichiers nécessaires, | + | En ayant construit la structure de base et téléchargé tous les fichiers nécessaires, |
+ | |||
+ | **Remarque préliminaire: | ||
- | Remarque préliminaire; | + | Copiez/collez |
- | Copiez/ | ||
<code html> | <code html> | ||
< | < | ||
Ligne 120: | Ligne 143: | ||
</ | </ | ||
- | Le résultat attendu de ce code devrait ressembler à ceci: FIXME | + | Le résultat attendu de ce code devrait ressembler à ceci: |
+ | |||
+ | {{3: | ||
+ | |||
+ | démo: [[http:// | ||
==== Widget qu’est-ce que c’est? ==== | ==== Widget qu’est-ce que c’est? ==== | ||
- | Avant de regarder en détail le code JavaScript, observons d’abord les propriétés de la balise <div> de notre code. On voit qu’elle comporte un attribut | + | Avant de regarder en détail le code JavaScript, observons d’abord les propriétés de la balise |
+ | |||
+ | Par exemple pour notre // | ||
<code javascript> | <code javascript> | ||
// focusElement: | // focusElement: | ||
Ligne 148: | Ligne 177: | ||
Revenons au code JavaScript: | 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 < | + | Avant de pouvoir utiliser DOJO, il faut charger le script principal du toolkit, c’est ce que fait la première balise |
- | Dans la seconde balise < | + | Dans la seconde balise |
- | Ensuite, nous spécifions la fonction qui sera exécuter au chargement de la page grâce à dojo.addOnLoad(nom_de_notre_fonction) que nous avons appelé dans notre cas «init». | + | Ensuite, nous spécifions la fonction qui sera exécuter au chargement de la page grâce à //dojo.addOnLoad(nom_de_notre_fonction)// que nous avons appelé dans notre cas //init//. |
- | Vous pouvez constater que nous avons utilisé trois manières différentes de récupérer la référence d’un objet HTML portant un id et de l’assigner dans une variable. Il est donc important de donner un attribut id aux balises HTML sur lesquelles on veut interagir avec du code JavaScript. Cependant, il n’y a en fait que deux fonctions, car «dojo.byId» | + | Vous pouvez constater que nous avons utilisé trois manières différentes de récupérer la référence d’un objet HTML portant un id et de l’assigner dans une variable. Il est donc important de donner un attribut id aux balises HTML sur lesquelles on veut interagir avec du code JavaScript. Cependant, il n’y a en fait que deux fonctions, car //dojo.byId// |
- | Il ne reste plus qu’à expliquer ce que fait la commande | + | Il ne reste plus qu’à expliquer ce que fait la commande |
L’avantage de connecter les éléments de cette manière est d’avoir plus de flexibilité et de contrôle que si le code était écrit au niveau de chaque balise à travers tout le texte HTML. | L’avantage de connecter les éléments de cette manière est d’avoir plus de flexibilité et de contrôle que si le code était écrit au niveau de chaque balise à travers tout le texte HTML. | ||
- | 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. // |
===== 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 «float, margin»... | + | 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 //float, margin//... |
- | FIXME | + | |
+ | {{3: | ||
+ | |||
+ | démo: [[http:// | ||
- | 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 |
<code html> | <code html> | ||
<div dojoType=" | <div dojoType=" | ||
Ligne 204: | Ligne 237: | ||
</ | </ | ||
- | Dans ce code nous utilisons deux nouveaux | + | Dans ce code nous utilisons deux nouveaux |
- | Le «LayoutContainer», comme son nom l’indique, | + | Le // |
- | Le «ContentPane» | + | Le // |
- | Pour notre site nous utilisons simplement un «top» | + | Pour notre site nous utilisons simplement un // |
==== Chargement partiel sans frais ==== | ==== Chargement partiel sans frais ==== | ||
- | Le «ContentPane» | + | Le // |
Voici quelques attributs intéressants de l’API. | Voici quelques attributs intéressants de l’API. | ||
Ligne 241: | 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» | + | Pour tester le chargement dynamique, créez une page //form.html// avec juste un titre noté // |
- | Ensuite, ajoutez à notre fonction | + | Ensuite, ajoutez à notre fonction |
- | Par ailleurs, recopiez la fonction | + | Par ailleurs, recopiez la fonction |
<code javascript> | <code javascript> | ||
Ligne 258: | Ligne 291: | ||
} | } | ||
</ | </ | ||
- | Dans cette fonction | + | Dans cette fonction |
- | Si nous avions voulu afficher directement la page form.html au chargement de la page nous aurions pu utiliser l’attribut | + | Si nous avions voulu afficher directement la page //form.html// au chargement de la page nous aurions pu utiliser l’attribut |
<code html> | <code html> | ||
<div dojoType=" | <div dojoType=" | ||
</ | </ | ||
+ | |||
+ | |||
===== Etape 3: Form Widget ===== | ===== Etape 3: Form Widget ===== | ||
==== Formulaire facilité ==== | ==== Formulaire facilité ==== | ||
+ | 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: | ||
+ | |||
+ | {{3: | ||
+ | |||
+ | Démo: [[http:// | ||
+ | |||
+ | Remplacez le code dans votre fichier // | ||
+ | <code html> | ||
+ | <form id=" | ||
+ | < | ||
+ | < | ||
+ | <div class=" | ||
+ | < | ||
+ | < | ||
+ | | ||
+ | | ||
+ | </ | ||
+ | <div class=" | ||
+ | < | ||
+ | < | ||
+ | | ||
+ | | ||
+ | </ | ||
+ | <div class=" | ||
+ | < | ||
+ | < | ||
+ | | ||
+ | </ | ||
+ | <div class=" | ||
+ | < | ||
+ | < | ||
+ | | ||
+ | </ | ||
+ | <div class=" | ||
+ | < | ||
+ | < | ||
+ | <option value=" | ||
+ | <option value=" | ||
+ | <option value=" | ||
+ | </ | ||
+ | </ | ||
+ | <div class=" | ||
+ | < | ||
+ | <input dojotype=" | ||
+ | <input dojotype=" | ||
+ | checked=" | ||
+ | <input dojotype=" | ||
+ | checked=" | ||
+ | <input dojotype=" | ||
+ | <div class=" | ||
+ | < | ||
+ | <div style=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Comme vous pouvez le voir, nous avons surtout utilisé un //widget// qui s’appelle // | ||
+ | |||
+ | Revenons à notre // | ||
+ | |||
+ | 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 // | ||
+ | |||
+ | <code javascript> | ||
+ | //trim: Boolean | ||
+ | //Removes leading and trailing whitespace if true. Default is false. | ||
+ | trim: false, | ||
+ | |||
+ | // | ||
+ | //Converts all characters to uppercase if true. Default is false. | ||
+ | uppercase: false, | ||
+ | |||
+ | // | ||
+ | //Converts all characters to lowercase if true. Default is false. | ||
+ | lowercase: false, | ||
+ | |||
+ | //ucFirst: Boolean | ||
+ | //Converts the first character of each word to uppercase if true. | ||
+ | ucFirst: false, | ||
+ | |||
+ | //digit: Boolean | ||
+ | //Removes all characters that are not digits if true. Default is false. | ||
+ | digit: false, | ||
+ | </ | ||
+ | |||
+ | Un autre composant que nous avons utilisé est le // | ||
+ | |||
+ | 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 // | ||
- | === Etape 4: Communication avec le serveur === | + | <code javascript> |
+ | function submit(){ | ||
+ | var myForm = dojo.byId(" | ||
+ | var firstname = dojo.widget.byId(" | ||
+ | var lastname = dojo.widget.byId(" | ||
+ | var email = dojo.widget.byId(" | ||
+ | |||
+ | | ||
+ | myForm.submit(); | ||
+ | } else{ | ||
+ | alert(" | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Copiez le fichier // | ||
+ | |||
+ | |||
+ | ===== 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: | ||
+ | |||
+ | {{3: | ||
+ | |||
+ | Démo: [[http:// | ||
+ | |||
+ | 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> | ||
+ | <div id=" | ||
+ | < | ||
+ | <form class=" | ||
+ | <input type=" | ||
+ | <ul id=" | ||
+ | <br style=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | 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 // | ||
+ | |||
+ | Nous allons créer une fonction //browse// comme nous l’avions fait pour // | ||
+ | |||
+ | <code javascript> | ||
+ | function browse(){ | ||
+ | var contentPane = dojo.widget.byId(" | ||
+ | // | ||
+ | | ||
+ | | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Ajouter // | ||
+ | |||
+ | Ce que //browse// fait de plus que // | ||
+ | |||
+ | Avant d’aller plus loin dans les détails de la fonction, précisons une des actions que fait le script // | ||
+ | |||
+ | <code javascript> | ||
+ | function getItems(keyword){ | ||
+ | var bindArgs = { | ||
+ | url: " | ||
+ | handler: updateCatalog, | ||
+ | mimetype: " | ||
+ | content: {" | ||
+ | }; | ||
+ | dojo.io.bind(bindArgs); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Ce trick magique est effectué par // | ||
+ | |||
+ | **Remarque: | ||
+ | |||
+ | Maintenant que le serveur nous répond, il faut créer la fonction // | ||
+ | |||
+ | <code javascript> | ||
+ | //create catalog from results provided by the server | ||
+ | function updateCatalog(type, | ||
+ | var catalog = dojo.byId(" | ||
+ | // | ||
+ | | ||
+ | if (data) { | ||
+ | for(var i=0; | ||
+ | // | ||
+ | var newLi = document.createElement(" | ||
+ | | ||
+ | | ||
+ | | ||
+ | //add the item | ||
+ | | ||
+ | } | ||
+ | | ||
+ | //case not result add an item as message | ||
+ | var newLi2 = document.createElement(" | ||
+ | newLi2.innerHTML = '< | ||
+ | newLi2.style.listStyleType=" | ||
+ | catalog.appendChild(newLi2); | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | 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, // | ||
+ | |||
===== Etape 5: drag & drop et communication avancée ===== | ===== Etape 5: drag & drop et communication avancée ===== | ||
==== Drag & Drop ==== | ==== Drag & Drop ==== | ||
+ | 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 // | ||
+ | |||
+ | <code html> | ||
+ | <div id=" | ||
+ | ... ... | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | 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 // | ||
+ | |||
+ | <code html> | ||
+ | <script type=" | ||
+ | </ | ||
+ | |||
+ | La première chose que nous allons faire est de rendre mobiles les différents produits que nous ajoutons à la liste //catalog// dans // | ||
+ | |||
+ | <code javascript> | ||
+ | //make the item draggable | ||
+ | var dnd = new dojo.dnd.HtmlDragCopySource(newLi, | ||
+ | //add a tooltip to the item | ||
+ | var toolTip = dojo.widget.createWidget(" | ||
+ | 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, | ||
+ | |||
+ | <code javascript> | ||
+ | //drag & drop: drop target | ||
+ | var cart = dojo.byId(" | ||
+ | var target = new dojo.dnd.HtmlDropTarget(cart, | ||
+ | //redefine onDrop function of our target | ||
+ | target.onDrop = function(e){ | ||
+ | // | ||
+ | this.onDragOut(e); | ||
+ | var id = e.dragSource.dragObject.id; | ||
+ | addItemToCart(id); | ||
+ | }; | ||
+ | </ | ||
+ | |||
+ | Nous créons un objet DOJO // | ||
==== Communication ==== | ==== Communication ==== | ||
+ | Voici notre dernière fonction pour que le puzzle soit au complet. | ||
+ | |||
+ | <code javascript> | ||
+ | function addItemToCart(itemId) { | ||
+ | var bindArgs = { | ||
+ | url: " | ||
+ | handler: function(type, | ||
+ | var total = dojo.byId(" | ||
+ | if (data) { | ||
+ | //update total | ||
+ | total.innerHTML = (parseFloat(data.price) + parseFloat(total.innerHTML)).toFixed(2); | ||
+ | //create new item from the data | ||
+ | var newLi = document.createElement(" | ||
+ | newLi.innerHTML = dojo.string.summary(data.name, | ||
+ | var cartList = dojo.byId(" | ||
+ | //keep the list small | ||
+ | if(cartList.getElementsByTagName(" | ||
+ | | ||
+ | } | ||
+ | //add item to the list | ||
+ | cartList.appendChild(newLi); | ||
+ | } | ||
+ | }, | ||
+ | mimetype: " | ||
+ | content: {" | ||
+ | }; | ||
+ | //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 // | ||
+ | |||
+ | 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 // | ||
+ | |||
+ | <code html> | ||
+ | <div dojoType=" | ||
+ | </ | ||
+ | |||
+ | 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 // | ||
+ | |||
+ | Voici le résultat final de notre shop! | ||
+ | |||
+ | {{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 //demos// et //test// du toolkit peuvent être une grande source d’inspiration! | ||
- | ===== Ressources ===== | + | Pour quelques pistes supplémentaires, |
- | ===== Références ===== | + | N’oubliez pas que la manière la plus simple d’apprendre est d’essayer! |
+ | ====== Ressources ====== | ||
+ | * Le tookit Dojo http:// | ||
+ | * L’API http:// | ||
+ | * Manuel http:// | ||
+ | * Navigateur firefox http:// | ||
+ | * Extension firefox pour debugger facilement http:// | ||
+ | * IDE eclipse http:// | ||
+ | * Addon AJAX Toolkit Framework pour eclipse http:// | ||
+ | ====== Références ====== | ||
+ | * (openweb.eu.org) http:// | ||
+ | * (java.net) https:// | ||
+ | * (adaptivepath) http:// | ||
+ | * http:// | ||
+ | * http:// | ||
+ | * Source des images : http:// | ||