Web 2.0. Ajax. DWR, DoJo

Transcription

1 Web 2.0 Ajax DWR, DoJo 1

2 Plan Web 2.0 et Web Sémantique AJAX Histoire But d'ajax En quoi consiste Ajax? Architecture technique d Ajax Ajax et DHTML L'objet XMLHttpRequest Construire une requête, pas à pas Exemples de pages Ajax Comment faire un site Ajax? Inconvénients d'ajax DWR DoJo 2

3 Plan Web 2.0 et Web Sémantique 3

4 Web 2.0 Historique Naissance du terme lors de la Conférence Web 2.0 en octobre 2004 ; Terme inventé par : Dale DOUGHERTY de la O Reilly Media Craig CLINE de MediaLive et John BATELLE De web 1.0 à web 2.0

5 Web 2.0 Comparaison du Web 1.0 et du Web 2.0 : On constate à partir de l année 2005 environ, une modification du comportement des utilisateurs sur le Web. Ces nouvelles manières de travailler proviennent d une démocratisation d Internet ainsi que de performances accrues en termes de vitesse de connexion et de disponibilité Le Consortium W3 (W3C) est l organisation qui développe des standards pour le Web dans l optique d unifier les pratiques et de promouvoir la compatibilité des outils. Pour qualifier leweb 2.0, nous pouvons établir trois comparaisons qui illustrent bien les changements d approche et de comportement Netscape vs. Google Akamai vs BitTorrent DoubleClick vs Google AdSense 5

6 Web 2.0 Netscape vs. Google Netscape: Un navigateur très populaire dans les premières heures du Web, était un logiciel. Il devait être téléchargé et installé. Régulièrement, il fallait s inquiéter des mises à jour disponibles et les installer. Les problèmes de compatibilité devaient quant à eux être résolus par l utilisateur. Tout ceci rendait l utilisation d un ordinateur et la navigation sur Internet relativement fastidieuse. Google : également de nombreux autres nouveaux outils du Web. Plus rien à télécharger, plus rien à installer. Nous travaillons avec des services qui sont offerts par les différentes compagnies du Web. Les mises à jour sont réalisées régulièrement par le moteur de recherche et sont complètement transparentes pour l utilisateur. L utilisateur peut travailler à tout moment avec la dernière version sans avoir à s inquiéter de sa mise à jour. 6

7 Web 2.0 Akamai vs BitTorrent Akamai : était à l époque un immense serveur sur lequel les internautes déposaient les fichiers qu ils souhaitaient partager avec d autres. Ces derniers devaient se connecter à ce serveur pour récupérer ces fichiers. BitTorrent: Aujourd hui grâce à des systèmes tel que BitTorrent chacun peut devenir "serveur". Chacun peut mettre sa bibliothèque de documents, musiques, vidéos, etc. à disposition des autres internautes. Ceci bien évidemment entraîne les dérives que l on sait, en particulier en ce qui concerne les droits d auteurs des artistes. Pourtant, on perçoit pour la première fois l idée de communauté car un internaute ne peut plus "survivre" tout seul de son côté, il doit participer à la vie du Web en partageant ses documents. 7

8 Web 2.0 DoubleClick vs Google AdSense DoubleClick: était une entreprise qui gérait la publicité pour les sites Internet. Chaque développeur pouvait s adresser à DoubleClick pour présenter des écrans publicitaires sous forme de logos, de bannières, etc. On ne pouvait pas à l époque présenter de la publicité sur son site et générer de ce fait quelques bénéfices personnels sans passer par un "fournisseur", c est-à-dire une entreprise spécialisée dans ce domaine. AdSense : a été développé par Google et permet d afficher de la publicité sur n importe quel site. Sa force est double. Tout d abord, Ad- Sense est gratuit et son installation est aisée. De ce fait, il peut être utilisé par n importe qui, professionnel ou non du Web, et débouche sur la réalisation de quelques bénéfices pour ses utilisateurs. En effet, chaque «clic» sur une publicité génère un petit revenu pour le propriétaire du site. Ensuite, sa force réside dans l intelligence du service. Les publicités affichées par AdSense sont en rapport direct avec le contenu du site. Un système de mots-clés permet de sélectionner de manière automatique les annonces le plus pertinentes et intéressantes pour les visiteurs du site en question. 8

9 Web 2.0 Définition Web 2.0 est un terme souvent utilisé pour désigner ce qui est perçu comme une transition importante du World Wide Web, passant d'une collection de sites Web à une plate-forme informatique à part entière, fournissant des applications Web aux utilisateurs. Source de la définition:

10 Web 2.0 Qu est-ce que ça veut dire? Le Web 2.0 vise l'interaction entre les utilisateurs. Plusieurs site Web 2.0 sont de véritable réseaux sociaux où chacun peut participer au développement du site. Le Web est en train de devenir une plate-forme à part entière où l utilisateur pourra avoir accès à ses données de n importe quel poste. Voici des exemples: o Blogue o Wikipédia et Wiki o Site de favoris collaboratif o Site d entreposage de vidéos (You Tube) o Netvibes

11 Web 2.0 L'expression "Web 2.0" renvoie à la seconde phase du Web, aussi bien en terme d'architecture qu'en terme d'applications qui y sont développées Programmation légère RSS & Notification Web participatif Web 2.0 Le Web en tant que plateforme Indépendance aux terminaux Valeur cumulée de l'intelligence collective "La valeur est dans les données"

12 Web 2.0 Web participatif Le web devient un medium pleinement participatif dans lequel les utilisateurs sont à la fois lecteurs et auteurs. Cette participation n'est pas restreinte aux médias, elle touche également de plus en plus la communication. Le web en tant que plateforme La plupart des services Web 2.0 émergents offrent une partie de leurs fonctionnalités à travers d'apis que des développeurs tiers peuvent mettre à profit dans leurs propres applications. Valeur cumulée de l'intelligence collective Les actions cumulées des utilisateurs et les données qu'ils produisent (des tags par exemple) ajoutent de la valeur au système global.

13 Web 2.0 Indépendance aux terminaux Il est important de remarquer que le Web 2.0 n'est pas restreint au monde des PC. Le téléphone mobile devient un véritable bureau virtuel.

14 Web 2.0 RSS et notification RSS permet aux utilisateurs de souscrire à une page web et d'être notifiés de tout changement sur cette page. Programmation légère L'ouverture des API(application de programmation informatique) permet aux plus technophiles des internautes de coupler des applications existantes pour en créer de nouvelles (phénomène du "mash-up"). Les types de langages et d'interfaces les plus répandus dans le Web 2.0 sont des langages légers.

15 Web 2.0 Les améliorations et les innovations du Web 2.0 : AJAX RSS Wiki Mashup Permalink XHTML Applications Internet Riches Web sémantique 15

16 Web 2.0 AJAX. AJAX (Asynchronous Javascript And XML) est la solution phare du Web 2.0. Ce n est pas une technologie en soi mais cela évoque l utilisation conjointe de différentes normes et standards (XML, Javascript, XSLT, DOM, CSS, XHTML, entre autres)

17 Web 2.0 Flux RSS L acronyme RSS est du terme anglais «Really Simple Syndication». Ce système permet de diffuser en temps réel les nouvelles des sites d'informations ou des blogues, ce qui permet de consulter rapidement ces dernières sans visiter le site.

18 Web 2.0 Wiki Le terme wiki est un mot Hawaïen qui signifie rapide. Le wiki est une page web qui permet une collaboration et qui ne demande aucune connaissance (ou très peu) de langage HTML. Mashup Site ou application dont le contenu provient de plusieurs sources d information (carte géographique + info).

19 Web 2.0 Permalink (permalien) est un mot-valise formé par la contraction linguistique des mots permanent et lien. Un permalien est l'url initiale d'un article ou d'une page (souvent une nouvelle ou une entrée de weblog) et restant inchangé de façon permanente, ou du moins, pour une certaine période de temps XHTML Le XHTML (acronyme de Extensible HyperText Markup Language) est un langage de création de pages web. XHTML est le remplaçant du langage HTML. Sa structure est modélisée sur le XML, alors que celle de son prédécesseur l'était sur le SGML, plus ancien 19

20 Web 2.0 Synthèse Le Web 2.0 est constitué d une multitude de petites améliorations ou innovations sur le plan technique, ergonomique et sémantique Quels sont les apports du Web 2.0 pour l utilisateur? Moins de clics Plus d informations affichées à l écran Moins de temps de chargement Chacun apporte un contenu (blog, wiki, réseaux sociaux) Les utilisateurs sont des co-développeurs Les services web se développent (ex : Skype, Google ) 20

21 Web 2.0 Les apports pour la machine : Interface plus flexible Une interopérabilité plus poussée Le web 2.0 en tant que plateforme AJAX, JavaScript et le Web

22 Quelques liens à propos du Web 2.0 Webographie : CAVAZZA Frédéric. Web 2.0 : la révolution par les usages. [en ligne]. Disponible sur 20.shtml. O REILLY Tim. What is Web 2.0. [en ligne]. Disponible sur oreillyversion.html Web 2.0. [en ligne]. Disponible sur

23 Plan AJAX Histoire But d'ajax En quoi consiste Ajax? Architecture technique d Ajax Ajax et DHTML L'objet XMLHttpRequest Construire une requête, pas à pas Exemples de pages Ajax Comment faire un site Ajax? Inconvénients d'ajax 29

24 Histoire Le terme AJAX est l'acronyme de "Asynchronous JavaScript and XML", utilisé pour la première fois par Jesse James Garrett dans son article " Ajax: A New Approach to Web Applications". Ce terme c'est depuis popularisé. Ajax est un concept qui n'est pas lié particulièrement à un langage de développement et à un format d'échange de données pour faciliter la portabilité, la mise en œuvre, AJAX fait appel aux technologies Javascript et XML. Ajax est seulement un nom donné à un ensemble de techniques préexistantes. Ajax dépends essentiellement de XMLHttpRequest, un objet coté client utilisable en JavaScript, qui est apparu avec Internet Explorer

25 But d Ajax Ajax permet d'effectuer des traitements sur le poste client (avec JavaScript) à partir d'informations prises sur le serveur. Ajax permet de modifier partiellement la page affichée par le navigateur pour la mettre à jour sans avoir à recharger la page entière. Par exemple le contenu d'un champ de formulaire peut être changé sans avoir à recharger la page avec le titre, les images, le menu, etc. La création de pages web dynamiques auparavant se faisait coté serveur. Les modifications ou interrogations, faites par le lecteur de la page, sont des requêtes envoyées au serveur, faisant qu'il crée une nouvelle page et l'envoie au navigateur à travers le réseau Internet en utilisant des services web, ou un langage intégré dans la page comme PHP., JSP, ASP,.. Ce n'est plus nécessaire GRACE A AJAX Améliorer l'interactivité et le dynamisme de l'application web 31

26 But d Ajax Exemple : Pour donner une idée simple des puissantes possibilités offertes par Ajax, un exemple peut être offert en utilisant Google Suggest à l'url : 32

27 En quoi consiste Ajax Ajax est une technique qui fait usage des éléments suivants: HTML. CSS (Cascading Style-Sheet) pour la présentation de la page. JavaScript pour les traitements locaux DOM (Document Object Model) qui accède aux éléments de la page ou du formulaire ou aux éléments d'un fichier xml pris sur le serveur (avec la méthode getelementbytagname par exemple)... L'objet XMLHttpRequest lit des données ou fichiers sur le serveur de façon asynchrone. DOMparser pour le traitement des documents XML ; JSP, PHP ou un autre langage de scripts peut être utilisé coté serveur. 33

28 En quoi consiste Ajax Le terme "Asynchronous", asynchrone en français, signifie que l'exécution de JavaScript continue sans attendre la réponse du serveur qui sera traitée quand elle arrivera. Tandis qu'en mode synchrone, le navigateur serait gelé en attendant la réponse du serveur. Le fait de pouvoir opérer des actions asynchrones côté serveur et des mises à jour partielles d'une page web permet d'offrir de nombreuses possibilités de fonctionnalités : Rafraîchissement de données : par exemple rafraîchir le contenu d'une liste lors d'une pagination Auto-complétion d'une zone de saisie Validation de données en temps réel Modifier les données dans une table sans utiliser une page dédiée pour faire la mise à jour. Lors du clic sur un bouton modifier, il est possible de transformer les zones d'affichage en zones de saisie, d'utiliser Ajax pour envoyer une requête de mise à jour côté serveur à la validation par l'utilisateur et de réafficher les données modifiées à la place des zones de saisies 34

29 Architecture technique d Ajax Sans Ajax : Mode Synchrone 35

30 Architecture technique d Ajax Sans Ajax : Mode Synchrone 36

31 Architecture technique d Ajax Avec Ajax : Mode Asynchrone 37

32 Architecture technique d Ajax Avec Ajax : Mode Asynchrone 38

33 Architecture technique d Ajax Tous ces traitements sont déclenchés par un événement utilisateur sur un composant (clic, changement d'une valeur, perte du focus,...) ou système (timer,...) dans la page. La partie centrale d'ajax est un moteur capable de communiquer de façon asynchrone avec un serveur en utilisant le protocole http. Généralement les appels au serveur se font via l'objet Javascript XMLHttpRequest. XMLHttpRequest n'est pas défini dans les spécifications courantes de Javascript mais il est implémenté dans tous les navigateurs récents car il devient un standard. Il est donc important de noter qu'ajax ne fonctionnera pas sur des navigateurs anciens. L'objet XMLHttpRequest occupe un rôle majeur dans Ajax puisqu'il assure les communications entre le client et le serveur. 39

34 Architecture technique d Ajax AJAX nécessite une architecture différente côté serveur: Habituellement en réponse à une requête le serveur renvoie le contenu de toute la page En réponse à une requête faite via AJAX, le serveur doit renvoyer des informations qui seront utilisées côté client par du code Javascript pour mettre à jour la page Le format de ces informations est généralement XML mais ce n'est pas une obligation Le rafraîchissement partiel d'une page via Ajax permet d'accroître la réactivité de l'ihm mais aussi de diminuer la bande passante et les ressources serveurs consommées lors d'un rafraîchissement complet de la page web La mise à jour partielle d'une page en modifiant directement son arbre DOM permet de conserver le contexte de l'état de la page. Les parties inchangées via le DOM restent inchangées et sont toujours connues et utilisables Attention à l utilisation du bouton back du navigateur dans le cas d un rafraîchissement à chaque action avec Ajax 40

35 Architecture technique d Ajax Pour utiliser Ajax dans une page HTML, il faut que : le support de Javascript soit activé dans le navigateur ; Le navigateur implémente l objet XMLHttpRequest ; L'objet XMLHttpRequest permet un échange synchrone ou asynchrone avec le serveur en utilisant le protocole HTTP. La requête http envoyée au serveur peut être de type GET ou POST. Une communication asynchrone permet au navigateur de ne pas bloquer les actions de l'utilisateur en attendant la réponse du serveur. Ainsi, une fonction de type callback est enregistrée pour permettre son appel à la réception de la réponse http. Côté serveur, toute technologie permettant de répondre à une requête http peut être utilisée avec Ajax. J2EE et plus particulièrement les servlets se prêtent particulièrement bien à ces traitements. La requête http est traitée comme toutes requêtes de ce type. En fonction des paramètres reçus de la requête, des traitements sont exécutés pour générer la réponse http. 41

36 Architecture technique d Ajax A la réception de la réponse par le client, la fonction de type callback est appelée. Elle se charge d'extraire les données de la réponse et réaliser les traitements de mise à jour de la page web en manipulant son arbre DOM. 42

37 Ajax et DHTML Dynamic HTML est aussi un ensemble de techniques, qui comprend: HTML ; CSS ; JavaScript ; DHTML permet de modifier le contenu d'une page selon les commandes de l'utilisateur, à partir de données préalablement fournies ou avec un texte tapé par l'utilisateur ; Ajax permet en plus de communiquer avec le serveur. C'est DHTML plus l'objet XmlHttpRequest. 43

38 XmlHttpRequest Ajax utilise un modèle de programmation comprenant d'une part la présentation et d'autre part les évènements Les évènements sont les actions de l'utilisateur, qui provoquent l'appel des fonctions associées aux éléments de la page L'interaction avec l'utilisateur se fait à partir des formulaires ou boutons html. Ces fonctions JavaScript identifient les éléments de la page grâce au DOM et communiquent avec le serveur par l'objet XMLHttpRequest. Pour recueillir des informations sur le serveur. Cet objet dispose de deux méthodes : open: établit une connexion send: envoie une requête au serveur Les données fournies par le serveur seront récupérées dans les champs responsexml ou responsetext de l'objet XMLHttpRequest. S'il s'agit d'un fichier xml, il sera lisible dans responsexml par les méthodes de DOM 44

39 XmlHttpRequest Il faut créer un nouvel objet XMLHttpRequest, pour chaque fichier que vous voulez charger. Il faut attendre la disponibilité des données, et l'état est donné par l'attribut readystate de XMLHttpRequest. 0: non initialisé. 1: connexion établie. 2: requête reçue. 3: réponse en cours. 4: terminé. 45

40 XmlHttpRequest L objet XMLHttpRequest permet d'interagir avec le serveur grace à ses méthodes et ses attributs : Les attributs : readystate status responsetext responsexml onreadystatechange statustext L'état de la requête : 0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, 4 = complete Le code retour http de la réponse (200 est ok 404 si la page n'est pas trouvée) contient les données chargées dans une chaîne de caractères. contient les données chargées sous forme xml, les méthodes de DOM servent à les extraire. Précise la fonction de type callback qui est appelée lorsque la valeur de la propriété readystate change La description du code retour http de la réponse 46

41 XmlHttpRequest Les méthodes : open(mode, url, boolean) send("chaine") abort() getallresponseheaders() getresponseheader(nom) settimeouts(duree) setrequestheader(nom, valeur) mode: type de requête, GET ou POST url: l'endroit ou trouver les données, un fichier avec son chemin sur le disque. boolean: true (asynchrone) / false (synchrone). en option on peut ajouter un login et un mot de passe. null pour une commande GET Abandon de la requête Renvoie une chaîne contenant les en-têtes http de la réponse Renvoie la valeur de l'en-tête dont le nom est fourni en paramètre Précise la durée maximale pour l'obtention de la réponse Précise la valeur de l'en-tête dont le nom est fournie en paramètre 47

42 Construire une requête, pas à pas Première étape: créer une instance C'est une instance de classe classique mais deux options à essayer pour compatibilité avec les navigateurs : ou plus simplement, on peut utiliser les exceptions : 48

43 Construire une requête, pas à pas Seconde étape: attendre la réponse Le traitement de la réponse et les traitements qui suivent sont inclus dans une fonction, et la valeur de retour de cette fonction sera assignée à l'attribut onreadystatechange de l'objet précédemment créé : Troisième étape: faire la requête elle-même Deux méthodes de XMLHttpRequest sont utilisées: - open: commande GET ou POST, URL du document, true pour asynchrone. - send: avec POST seulement, données à envoyer au serveur. La requête ci-dessous lit un document sur le serveur. 49

44 Comment faire un site Ajax Utiliser les Frameworks existants comme DWR, DoJo ; Développer des fonctions javascript dans vos pages WEB pour envoyer des requêtes au serveur pour obtenir un fichier ; Utiliser les méthodes de DOM pour l exploitation du résultat envoyé par le serveur. 50

45 Inconvénients d Ajax AJAX possède cependant quelques inconvénients : Complexité liée à l'utilisation de plusieurs technologies côté client et serveur Utilisation de Javascript : elle implique la prise en compte des inconvénients de cette technologie : difficulté pour déboguer, différences d'implémentation selon le navigateur, code source visible,... AJAX ne peut être utilisé qu'avec des navigateurs possédant une implémentation de l'objet XMLHttpRequest L'objet XMLHttpRequest n'est pas standardisé ce qui nécessite des traitements javascript dépendant du navigateur utilisé Le changement du mode de fonctionnement des applications web (par exemple : impossible de faire un favori vers une page dans un certain état, le bouton back ne permet plus de réafficher la page dans son état précédent la dernière action,...) Ajax augmentent le nombre de requêtes http à traiter par le serveur. 51

46 TP AJAX Voir TP1 et TP 2 52

47 Plan Rappel JAVASCRIPT 53

48 JavaScript: Introduction On doit noter quelques particularités: JavaScript est sensible à la casse. Les primitives et objets de base sont: Boolean, Number, String, Array, Object, function, undefined, Infinity, NaN. Une fonction est un objet. On peut imbriquer une fonction dans une autre. 54

49 JavaScript: variables dynamiques Les variables n'ont pas un type défini lors de la déclaration. Une variable est déclarée dans un scope, local ou global avec le mot-clé var ou juste un assignement: var x = 1; y = 2; Si on la déclare dans une fonction sans le mot-clé var, elle a le scope global et non interne à la fonction. 55

50 JavaScript : les tableaux Les tableaux ont un attribut, la taille (length), et quelques méthodes Le tableau peut être déclaré selon différents moyens: arr = new Array(1000); // tableau avec une taille de arr = new Array(1,2,3); // tableau comprenant trois éléments. arr = [1,2, 3]; // le même tableau déclaré en assignant un litéral. Un tableau associatif se déclare en assignant une liste de couples clé-valeur: arr = { "un": 1, "deux": 2, "trois": 3 } Pour indicer un tableau, il y à deux syntaxes: arr[x] arr["x"] On ajoute des éléments en fin de tableau avec la méthode push. arr.push("x"); // retourne l'élément à la position x //retourne la valeur associée à la clé "x" qui est une chaîne 56

51 JavaScript : les structure de controle Les structures de contrôle sont celles de C Ces structures sont identiques à celles du langage C avec une addition: if else for while do.. while switch case break et continue 57

52 JavaScript : les fonctions Les fonctions peuvent être des objets Une déclaration de fonction débute par le mot clé function. function nomfonct(arguments) {...instructions... return x; } On peut assigner une fonction à une variable: var x = function(arguments) {...instructions... } Cela permet notamment d'associer un traitement à un évènement. L'instruction return retourne une valeur. Tous les arguments sauf les objets sont passés par valeur. 58

53 JavaScript : les Objets En JavaScript, les objets sont similaires aux tableaux associatifs. les clés sont les noms d'attributs et les valeurs leurs valeurs initiales obj1 = { 'type' : "integer", "nom" : "Objet X", taille : 11,... } x = obj1["nom"] // ceci assigne la chaîne 'Objet X' à l'attribut x Les objets sont dynamiques, des attributs peuvent être ajoutés dynamiquement. On peut démarrer avec un objet vide et ajouter attributs et méthodes ensuite: obj1 = {} obj1.mafonc = function() { } La structure des objets est récursive, la valeur d'un attribut peut être un autre objet. 59

54 JavaScript : les Objets On crée une classe en déclarant un constructeur Les classes sont simulées en JavaScript par le moyen des constructeurs, et un constructeur est une fonction. Le mot-clé this identifie les variables d'une fonction comme attributs de la classe function ClassA(x, y) { this.propertyx = x; this.propertyy = y; } obj1 = new ClassA(12, 34); // instance obj1.propertyx = z; obj1.properyz = z; // ajout dynamique d'un nouvel attribut à l'instance. On peut créer une classe vide et définir tous les attributs de cette façon 60

55 JavaScript : les Objets Un attribut peut être effacé par la commande delete, ce qui complète l'aspect dynamique des objets en JavaScript. delete obj1.propertyy; Les méthodes sont des fonctions dans les fonctions On peut définir des fonctions à l'intérieur de fonctions et cela fournit des méthodes aux objets. function ClassA { this.methoda = function(x, y) {...body... } } ;. 61

56 Plan DOM 62

57 DOM : Introduction Dans le cadre d'une page Web, la finalité de JavaScript est essentiellement de modifier les informations affichées. Pour cela, il est nécessaire de les récupérer puis les manipuler. DOM ou Document Object Model aux programmes et scripts d'accéder et de modifier dynamiquement le contenu, la structure et le style de documents XML ou HTML Le programmeur dispose d'objets, qui ont des propriétés, des méthodes et des évènements qui interfacent le document XML ou HTML. En résumé DOM est composé : Un ensemble d'objets, un modèle pour la façon dont ces objets peuvent être combinés, et une interface pour accéder et manipuler les objets 63

58 DOM : Objet et méthodes L'objet Document Document est un objet DOM correspondant à la page en cours. Toutefois certaines balises comme <iframe>, <browser> et <tabbrowser> peuvent introduire de nouveaux documents. Les propriétés de l'objet document document.head : représente la balisehtml <head>. document.body: représente la balise HTML <body>. document.embeds : représente tous les éléments correspondants aux balises HTML <embed>. document.forms: représente tous les formulaires du document. document.images : représente toutes les images du document (balises HTML <img /> uniquement). document.links: représente tous les liens hypertexte du document (balises HTML <area> et <a> ayant un attribut href). 64

59 DOM : Objet et méthodes Les méthodes de l'objet document Il est aussi possible de récupérer des éléments ou des collections à partir soit de l'objet document,. getelementbyid(id) : récupère l'élément dont l'identifiant vaut la valeur passée en paramètre. Cette méthode ne renvoie qu'un élément car un id doit être unique dans le document. Ne s'applique qu'à l'objet document. getelementsbyname(name) : récupère tous les éléments du document ayant un attribut HTML name correspondant au paramètre passé. getelementsbytagname(name) : récupère tous les éléments du document dont le nom de balise correspond au paramètre passé. getelementsbyclassname(classe) : récupère tous les éléments du document ayant un attribut HTML class correspondant au paramètre passé. 65

60 Plan DWR 66

61 DWR: principe de fonctionnement DWR (Direct Web Remoting) est une bibliothèque open source Java dont le but est de faciliter la mise en œuvre d'ajax dans les applications Java. DWR se charge de générer le code Javascript permettant l'appel à des objets Java de type bean qu'il suffit d'écrire. La devise de DWR est "Easy Ajax for Java". DWR encapsule les interactions entre le code Javascript côté client et les objets Java côté serveur : ceci rend transparent l'appel de ces objets côté client. Le site officiel de DWR est à l'url : ou 67

62 DWR: principe de fonctionnement La mise en œuvre de DWR côté serveur est facile : o Ajouter le fichier dwr.jar au classpath de l'application o Configurer une servlet dédiée aux traitements des requêtes dans le fichier web.xml o Ecrire les beans qui seront utilisés dans les pages o Définir ces beans dans un fichier de configuration de DWR La mise en œuvre côté client nécessite d'inclure des bibliothèques JavaScript générées dynamiquement par la servlet de DWR. Il est alors possible d'utiliser les fonctions JavaScript générées pour appeler les méthodes des beans configurés côté serveur. 68

63 DWR : principe de fonctionnement DWR s'intègre facilement dans une application web puisqu'il repose sur une servlet et plus particulièrement avec celles mettant en œuvre le Framework Spring dont elle propose un support. DWR est aussi inclus dans le Framework WebWork depuis sa version 2.2. DWR fournit aussi une bibliothèque JavaScript proposant des fonctions de manipulations courantes en DHTML :modifier le contenu des conteneurs <DIV> ou <SPAN>, remplir une liste déroulante avec des valeurs, etc... DWR est une solution qui encapsule l'appel de méthodes de simples objets de type Java Bean exécutés sur le serveur dans du code JavaScript généré dynamiquement. Le grand intérêt est de masquer toute la complexité de l'utilisation de l'objet XMLHttpRequest et de simplifier à l'extrême le code à développer côté serveur. DWR se compose de deux parties : o Du code JavaScript qui envoie des requêtes à la servlet et met à jour la page à partir des données de la réponse o Une servlet qui traite les requêtes reçues et renvoie une réponse au navigateur 69

64 DWR : principe de fonctionnement Côté serveur, une servlet est déployée dans l'application web. Cette servlet a deux rôles principaux : 1. Elle permet de générer dynamiquement des bibliothèques de code Javascript. Une bibliothèque de code est générée pour chaque bean défini dans la configuration de DWR 2. Elle permet de traiter les requêtes émises par le code Javascript générés pour appeler la méthode d'un bean Une fonction de type callback est précisée à DWR pour être exécutée par un bean à la réception de la réponse à la requête. DWR facilite donc la mise en œuvre d'ajax avec Java côté serveur : il se charge de toute l'intégration de Javabeans côté serveur pour permettre leur appel côté client de manière transparente. 70

65 DWR : principe de fonctionnement DWR possède quelques restrictions : 1. Il ne faut pas utiliser de nom de méthode dans les beans exposés correspondant à des mots réservés en Javascript. Un exemple courant est le mot delete ; 2. Il faut éviter l'utilisation de méthodes surchargées Par défaut, DWR encapsule toutes les méthodes public de la classe définie. Il est donc nécessaire de limiter les méthodes utilisables via DWR à celles requises par les besoins de l'application soit dans la définition des membres de la classe soit dans le fichier de configuration de DWR. 71

66 DWR : étapes de mise en œuvre Coté serveur 1. Il faut ajouter le fichier dwr.jar dans le répertoire WEB-INF/Lib de l'application web qui va utiliser la bibliothèque. 2. Il faut ensuite déclarer dans le fichier de déploiement de l'application web.xml la servlet qui sera utilisée par DWR. Il faut déclarer la servlet et définir son mapping : <servlet> <display-name> DWR Servlet</display-name> <servlet-name>dwr-invoker</servlet-name> <servlet-class>org.directwebremoting.servlet.dwrservlet</servlet-class> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping> 72

67 DWR : étapes de mise en œuvre 3. Il faut créer un fichier de configuration pour DWR nommé dwr.xml dans le répertoire WEB-INF de l'application (Ce fichier permet de déclarer à DWR la liste des beans qu'il devra encapsuler pour des appels en JavaScript) <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN". " <dwr> <allow> <create creator="new" javascript="jdate"> <param name="class" value="java.util.date"/> </create> </allow> </dwr> 73

68 DWR: fichier DWR Exemple Fichier DWR.xml Le fichier dwr.xml permet de configurer DWR. Il est généralement placé dans le répertoire WEB-INF de l'application web exécutant DWR. Le tag <allow> permet de définir les objets qui seront utilisés par DWR. L'attribut javascript permet de donner le nom de l'objet Javascript. Il ne faut pas utiliser comme valeur un mot réservé de JavaScript. Le tag <create> permet de préciser la façon dont un objet va être instancié. Chaque classe qui pourra être appelée via DWR doit être déclarée avec un tel tag. 74

69 DWR : étapes de mise en œuvre 4. Il suffit alors de lancer l'application et d'ouvrir un navigateur sur l'url de l'application et d'ajouter /dwr Cette page liste tous les beans qui sont encapsulés par DWR. Il suffit de cliquer sur le lien d'un bean pour voir afficher une page de test de ce bean. Cette page génère dynamiquement une liste de toutes les méthodes pouvant être appelées en utilisant DWR. 75

70 DWR : étapes de mise en œuvre Le mode debug proposé par DWR est particulièrement utile lors de la phase de développement pour vérifier toutes les méthodes qui sont prises en compte par DWR et les tester. Il est cependant fortement déconseillé de le laisser dans un contexte de production pour des raisons de sécurité. 76

71 DWR: étapes de mise en œuvre Coté client 1. Pour permettre l'utilisation des scripts générés, il suffit de faire un copier/coller dans la partie en-tête de la page HTML des tags <SCRIPT> proposés dans la page de tests de DWR. <head> <script type='text/javascript' src='/[nom_projet]/dwr/interface/jdate.js'></script> <script type='text/javascript' src='/[nom_projet]/dwr/engine.js'></script> <script type='text/javascript' src='/[nom_projet]/dwr/util.js'></script> </head> 2. Les scripts client générés DWR assure un mapping entre les méthodes des objets Java et les fonctions JavaScript générées. Chaque objet Java est mappé sur un objet JavaScript dont le nom correspond à la valeur de l'attribut javascript du creator correspondant dans le fichier de configuration de DWR. Le nom des méthodes est conservé comme nom de fonction dans le code JavaScript. Le dernier paramètre de toutes les fonctions générées par DWR est la fonction de type callback qui sera exécutée à la réception de la réponse. 77

72 DWR : engine.js Engine.js <script type='text/javascript' src='/[nom_projet]/dwr/engine.js'></script> Le fichier engine.js est la partie principale côté Javascript puisqu'il assure toute la gestion de la communication avec le serveur. Certaines options de paramétrage peuvent être configurées en utilisant la fonction DWREngine.setX(). Il est possible de regrouper plusieurs communications en une seule en utilisant les fonctions DWREngine.beginBatch() et DWREngine.endBatch(). Lors de l'appel de cette dernière, les appels sont réalisés vers le serveur. Ce regroupement permet de réduire le nombre d'objets XMLHttpRequest créés et le nombre de requêtes envoyées au serveur.. 78

73 DWR : util.js Util.js Le fichier util.js propose des fonctions utilitaires pour faciliter la mise à jour dynamique de la page. Ces fonctions sont indépendantes d'autres éléments de DWR. 79

74 DWR Voir TP 80

75 Plan DoJo 81

76 Qu'est-ce que le Dojo Toolkit? Ensemble Open Source de librairies JavaScript Simplifie le code javascript Appartient à Google aujourd'hui (qui a racheté Jot) Supporté par > IBM, Sun, JotSpot, SitePen, Renkoo, AOL TurboAjax, OpenLaszlo, Nexaweb, Bea Systems Indépendant de la techologie serveur et des langages utilisés (java, c#, python, ruby...)

77 Les libraries Dojo

78 Dojo 3 parties : Dojo dijit > Support cross-browser, chargement des packages, accès et manipulation du DOM, debugger Firebug Lite, évènements, composants MVC, Drag and drop, appels Ajax asynchrones, encodage, décodage JSON > Widgets, Contrôles avancés d'interface utilisateur,système de template dojox > innovations: graphiques, support du mode offline, widgets évolués comme les tableaux (grid), etc

79 Intégrer dojo à une application 1) L'application télécharge des morceaux de Dojo depuis le net : <SCRIPT TYPE="text/javascript" SRC= xd.js"> </SCRIPT> La balise script est utilisée pour charger le script dojo.js, toujours obligatoire.

80 Intégrer dojo à une application 2) Ajouter Dojo dans son application (il sera déployé avec l'application) Downloader depuis Unzipper le fichier à côté des pages web ou jsp du projet. Inclure dojo comme ceci dans les pages qui l'utilisent <script type="text/javascript" djconfig="parseonload: true" src="dojo-release-1.3.2/dojo/dojo.js"> </script> Pas de / ici! Le système de chargement des packages chargera toutes les dépendances s'il y en a!

81 Dojo dans son application Ici dojo a été mis sous le répertoire js (classique lorsque on utilise plusieurs frameworks), dans le répertoire qui contient les pages web ou jsp (le repertoire web du projet netbeans par exemple)

82 Intégrer dojo à une application 3) Installer une fois pour toute Dojo sur le serveur (recommandé) Que ce soit Tomcat ou Glassfish, dézipper Dojo dans le docroot du serveur, par exemple > C:\Sun\AppServer\domains\domain1\docroot\dojo-release > C:\Program Files\Apache Software Foundation\Apache Tomcat \webapps\ROOT\dojo-release Et l'inclure dans l'application : <script type="text/javascript" djconfig="parseonload: true" src= /dojo-release-1.3.2/dojo/dojo.js"> </script> / obligatoire ici, l inverse de ce qu on a vu précédemment!

83 Intégrer dojo à une application Dojo contient plusieurs Démonstrations Par exemple : themetester.html

84 dojo et Ajax Appels Ajax : XMLHttpRequest (XHR): dojo.xhrget(), dojo.xhrpost(),

85 Envoie de requête, récupérer la réponse d'un serveur <script type="text/javascript"> </script> Appeler un url Fonction de callback dojo.xhrget({ url: 'sayhello', En cas d'erreur, on appelle load: hellocallback, cette fonction. error: helloerror, content: {name: dojo.byid('name').value } }); Contenu à envoyer

86 dojo.xhrpost pour envoyer un formulaire <head> <script type="text/javascript"> function makeajaxcall(){ dojo.xhrpost({ xhrpost url: 'sayhello', load: hellocallback, error: helloerror, form: 'myform' }); Formulaire } function hellocallback(data,ioargs) { dojo.byid("returnmsg").innerhtml = data; } </script> </head> <body> <form id="myform" method="post"> Name: <input type="text" name="name"> </form> <button dojotype="dijit.form.button" <script type="dojo/method" event="onclick"> makeajaxcall(); <p id=returnmsg></p> </body>

87 DoJo Voir TP 93