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 Dernière 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] 85.255.120.90 aTVVXCbdCctVU |
||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
- | ====== Tutoriel Dojo Toolkit ====== | + | Test myfunction comment |
- | Fichiers source: [[http:// | + | |
- | + | ||
- | Version pdf: {{3: | + | |
- | + | ||
- | ===== Introduction ===== | + | |
- | ==== 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. | + | |
- | + | ||
- | 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? ==== | + | |
- | Un produit de nettoyage?, un club de football néerlandais? | + | |
- | + | ||
- | AJAX: Asynchronous JavaScript and XML | + | |
- | + | ||
- | D’après la signification de l’acronyme, | + | |
- | + | ||
- | * une présentation utilisant XHTML et CSS ; | + | |
- | * la manipulation dynamique des pages à travers DOM; | + | |
- | * la manipulation des données avec XML et XSLT ; | + | |
- | * l' | + | |
- | * le tout étant assemblé avec du Javascript | + | |
- | + | ||
- | En 2005, le terme AJAX est employé et apparu sur la toile. Il s’est vite doté d’une bonne réputation et fait actuellement sa place comme méthode informatique de développement d’application Web. Cependant, ses composants sont plus anciens, par exemple, l’objet XMLHttpRequest est l’héritier d’un objet ActiveX développé par Microsoft et introduit dans Internet Explorer 5 en 1999. Il a été amélioré sous Internet Explorer 6 pour finalement devenir un standard quelques années plus tard dans les autres browsers comme FireFox, Safari, etc. | + | |
- | + | ||
- | ==== A quoi sert AJAX? ==== | + | |
- | Voici la définition d’après le site openweb.eu.org: | + | |
- | + | ||
- | Les avantages possibles: | + | |
- | * Diminution importante de l’utilisation de la bande passante: seules les données dynamiques sont chargées et non plus tout le document; | + | |
- | * Interactivité accrue: plus de rechargement de la page; | + | |
- | * Rationalisation du code: des routines (de vérification par exemple) n'ont plus à être écrites et maintenues dans deux langages (côté client et côté serveur). | + | |
- | * Diminution du nombre de pages dynamiques nécessaires pour effectuer une même ou un groupe d’actions. | + | |
- | + | ||
- | Les inconvénients possibles: | + | |
- | * Ne fonctionne pas sans JavaScript, ni dans les navigateurs les plus anciens; | + | |
- | * Ne fonctionne qu' | + | |
- | * Peut gêner les habitudes des internautes, | + | |
- | * Les marques-pages et liens vers la page; | + | |
- | * L’enregistrement des pages; | + | |
- | * Le bouton retour. | + | |
- | + | ||
- | ==== Comment fonctionne AJAX? (adaptivepath) ==== | + | |
- | Commençons par expliquer le modèle d’une application Web classique. Le client informe le serveur quelle page il désire consulter, ce dernier fait ses calculs et la lui renvoie. Ensuite, l’utilisateur clique sur un nouveau lien ou effectue une nouvelle action, ce qui déclenche à nouveau une phase d’échanges entre le client et le serveur durant laquelle l’utilisateur doit attendre. | + | |
- | + | ||
- | 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: | + | |
- | + | ||
- | 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. | + | |
- | + | ||
- | Une fois que la page est chargée avec ses composants JavaScript, une action de l’utilisateur va déclencher une communication en arrière-plan de la part du script JavaScript grâce à un objet XML avec le serveur. Il peut donc continuer à effectuer des actions sur la page. Dès que le serveur répond de nouveau par un objet XML le script le récupère, et va mettre à jour la partie de la page web qui est concernée par les nouvelles informations. | + | |
- | + | ||
- | ==== Utilité d’un toolkit JavaScript comme DOJO ==== | + | |
- | Le toolkit DOJO est un cadriciel (framework) Open Source qui peut se résumer en un ensemble de bibliothèques qui a pour but de permettre le développement rapide d’applications Web abouties en JavaScript. Elle permet d’implémenter facilement de l’AJAX dans un site Web. Par ailleurs, elle se targue d’être un outil d’édition d’application Web professionnelle. Mais qui est derrière DOJO? Un peu de culture informatique générale... | + | |
- | + | ||
- | DOJO Foundation est une organisation à but non lucratif qui a pour but de promouvoir ses projets en Open Source. Leur philosophie se résume en quatre points: | + | |
- | * Encourage adoption | + | |
- | * Discourage political contention | + | |
- | * Encourage collaboration and integration with other projects | + | |
- | * Be transparent | + | |
- | + | ||
- | Elle est parrainée par Ibm corporation, | + | |
- | + | ||
- | L’avantage d’utiliser un toolkit comme DOJO ( http:// | + | |
- | + | ||
- | + | ||
- | ====== Les étapes du tutorial ====== | + | |
- | FIXME | + | |
- | + | ||
- | Le but de ce tutorial est de créer un site rudimentaire d’e-commerce qui s’appellera «Shopalot», | + | |
- | + | ||
- | ===== Etape 1: Hello World ===== | + | |
- | ==== Mise en place ==== | + | |
- | 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 | + | |
- | |--shopalot.html | + | |
- | + | ||
- | En ayant construit la structure de base et téléchargé tous les fichiers nécessaires, | + | |
- | + | ||
- | Remarque préliminaire; | + | |
- | + | ||
- | Copiez/ | + | |
- | <code html> | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | <script type=" | + | |
- | <script type=" | + | |
- | dojo.require(" | + | |
- | dojo.require(" | + | |
- | dojo.require(" | + | |
- | //all dojo.require above this line | + | |
- | dojo.addOnLoad(init); | + | |
- | + | ||
- | // executed at start | + | |
- | function init(e) { | + | |
- | // | + | |
- | var dlgHelp = dojo.widget.byId(" | + | |
- | var btn = document.getElementById(" | + | |
- | dlgHelp.setCloseControl(btn); | + | |
- | + | ||
- | //connect links | + | |
- | var linkQuestion = dojo.byId(" | + | |
- | dojo.event.connect(linkQuestion,' | + | |
- | } | + | |
- | </ | + | |
- | </ | + | |
- | < | + | |
- | <a href="#" | + | |
- | <div dojoType=" | + | |
- | < | + | |
- | <form onsubmit=" | + | |
- | <input type=" | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
- | + | ||
- | Le résultat attendu de ce code devrait ressembler à ceci: FIXME | + | |
- | + | ||
- | ==== 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 «dojoType», | + | |
- | <code javascript> | + | |
- | // focusElement: | + | |
- | // provide a focusable element or element id if you need to | + | |
- | // work around FF's tendency to send focus into outer space on hide | + | |
- | focusElement: | + | |
- | + | ||
- | // bgColor: String | + | |
- | // color of viewport when displaying a dialog | + | |
- | bgColor: " | + | |
- | + | ||
- | // bgOpacity: Number | + | |
- | // opacity (0~1) of viewport color (see bgColor attribute) | + | |
- | bgOpacity: 0.4, | + | |
- | + | ||
- | // followScroll: | + | |
- | // if true, readjusts the dialog (and dialog background) when the user moves the scrollbar | + | |
- | followScroll: | + | |
- | + | ||
- | // closeOnBackgroundClick: | + | |
- | // clicking anywhere on the background will close the dialog | + | |
- | closeOnBackgroundClick: | + | |
- | </ | + | |
- | 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 < | + | |
- | + | ||
- | 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». | + | |
- | + | ||
- | 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» n’est qu’un raccourci de la fonciton JavaScript «document.getElementById». Il ne reste donc plus que «dojo.widget.byId» qui lui ne récupère non seulement les informations HTML de l’objet portant le nom indiqué, mais aussi tout l’objet «widget» avec ses fonctions spéciales. C’est ainsi que l’on peut par la suite exécuter des fonctions comme par exemple «setCloseControl» qui va assigner le bouton HTML que l’on vient de récupérer dans la variable «btn» comme étant celui qui va désactiver la boîte de dialogue. | + | |
- | + | ||
- | Il ne reste plus qu’à expliquer ce que fait la commande «dojo.event.connect». Celle-ci permet, comme s’on nom l’indique, | + | |
- | + | ||
- | 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», | + | |
- | + | ||
- | ===== Etape 2: Layout Widget ===== | + | |
- | ==== 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»... | + | |
- | FIXME | + | |
- | + | ||
- | 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> | + | |
- | <div dojoType=" | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | </ | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | </ | + | |
- | < | + | |
- | < | + | |
- | <!-- menu rounded corner top --> | + | |
- | <div class=" | + | |
- | <!-- menu content --> | + | |
- | <div id=" | + | |
- | <a href="#" | + | |
- | <a href="#" | + | |
- | </ | + | |
- | <!-- menu rounded corner bottom --> | + | |
- | <div class=" | + | |
- | < | + | |
- | </ | + | |
- | </ | + | |
- | <!-- main content --> | + | |
- | <div dojoType=" | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
- | + | ||
- | Dans ce code nous utilisons deux nouveaux «widgets» DOJO: «LayoutContainer» et «ContentPane». | + | |
- | + | ||
- | Le «LayoutContainer», | + | |
- | + | ||
- | Le «ContentPane» est un «div» spécial qui, s’il est placé à l’intérieur d’un «LayoutContainer», | + | |
- | + | ||
- | 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 ==== | + | |
- | ===== Etape 3: Form Widget ===== | + | |
- | ==== Formulaire facilité ==== | + | |
- | + | ||
- | ==== Validation rapide ==== | + | |
- | + | ||
- | === Etape 4: Communication avec le serveur === | + | |
- | ==== Autocomplete avec un serveur ==== | + | |
- | + | ||
- | ==== Code qui connecte ==== | + | |
- | + | ||
- | ===== Etape 5: drag & drop et communication avancée ===== | + | |
- | ==== Drag & Drop ==== | + | |
- | + | ||
- | ==== Communication ==== | + | |
- | + | ||
- | ===== Conclusion ===== | + | |
- | + | ||
- | ===== Ressources ===== | + | |
- | + | ||
- | ===== Références ===== | + | |
- | + | ||
- | + | ||
- | + |