Programmation Ajax/web2.0 www.objis.com - Formation AJAX/web2 1 1

A propos d’Objis… Centre de formation depuis 2005 Spécialiste Java et nouvelles technologies Formations intra/inter entreprises 70% de travaux pratiques Bilan pédagogique individuel Paris – Lyon – Dakar www.objis.com www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 2

Formateur : Douglas Mbiandou Ingénieur INSA Lyon (2000) 10 ans d'expériences projets SI Architecte / Formateur Java Resp. formation Objis (www.objis.com) Président Club Solidarité Numérique www.club-solidarite-numerique.org www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 3

SOMMAIRE (5j)‏ Origines et principes du web2.0 (p5)‏ Rappels (X)HTML, CSS, Javascript (p13)‏ Manipulation XML avec DOM (p20)‏ Astuces Plugin Firebug (p41)‏ L'avenir du web : HTML5 , XHTML2 (p48) Objet XMLHTTPRequest (p52)‏ Kit de développement Ajax YUI (p58)‏ Kit de développement Ajax Dojo (p64)‏ Création de flux RSS (p81)‏ Création de web services (p89)‏ www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 4

Le Web 2.0 Origine Principes clés www.objis.com - Formation SPRING www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 5

Origines Idée de 'web 2.0' née en 2004 2005 : Article de Tim O'Reilly :'What Is Web 2.0 ?' + de sites web, + d'applications, + régulièrement Internautes + exigeants Marketing ou réalité ? Plusieurs principes clés www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 6

Principe 1 : web = platteforme Besoin de services...et non de logiciels ! Pionniers : DoubleClick (pub) & Akamai (cache web)‏ http://emea.doubleclick.com/FR/ http://www.akamai.fr/ DougleClick VS Google AdSense Akamai VS BitTorrent Web 1.0 : Netscape, Lotus, Microsoft, Oracle, SAP Web 2.0 : Google, eBay, Amazon, Napster www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 7

Principe 2 : tirer parti de l'intelligence collective Croissance organique de liens Hypertextes Yahoo! : le meilleur de milliers , puis de millions de sites Google PageRank : liens externes ! Communauté eBay : notation utilisateur Amazon : notation utilisateur Sourceforge.net : + de 100.000 projets Phénomène des BLOGS Organisation chronologique flux RSS (Abonnement à une page : bourse, météo, photos…)‏ www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 8

Principe 2 : tirer parti de l'intelligence collective www.objis.com - Formation SPRING 9

Principe 3 : la puissance est dans les données Google : ses pages explorées Yahoo! : son index NavTeq: ses Cartes satellites (750 Millions $)‏ Utilisées par services : Mapquest, maps.yahoo.com, maps.google.com, maps.msn.com Remarque Amazon les données viennent du fournisseur de registre ISBN RR Bowker mais Amazon leur ajoute de la valeur avec commentaires clients Différence entre Fournisseur de données et fournisseur de Logiciels www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 10

Principe 4 : enrichir l'interface utilisateur Utilisateurs de + en + exigeant ! Apporter de l’intelligence ‘coté client’ Avant : Applets, javascript, DHTML Avant : AJAX ! Ex : Gmail (glisser-déposer, messagerie inst.) viadeo.com (mise en reseau)‏ www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 11

Autres principes Libérer le logiciel du seul PC Le web 2.0, c’est aussi les périphériques Portables, PDA…pas seulement le PC ! Ex : iPod / iTunes Des modèles de programmation légers 95% des Services web Amazon.com avec REST Google MAPS avec Ajax L’innovation est dans l’assemblage (mashups)‏ Création d’un service à partir d’autres Ex : housingmaps.com www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 12

Présentation AJAX et technologies associées XML CSS Javascript DOM www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 13

AJAX Asynchronous JAvascript and Xml AJAX = Mélange de plusieurs technos - XML, - Javascript, DOM, - CSS 2005 : Jessie James Garrett 2006 : IBM , Google, Yahoo, et Cie => Open Ajax www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 14

Exemple mise en oeuvre AJAX Achat en ligne : 4 pages - Page 1 : entrer vos coordonnées postales - Page 2 : valider votre commande avant paiement - Page 3 : saisir vos coordonnées bancaires - Page 4 : valider définitivement. 4 A/R client => serveur AJAX : et si on mettait à jour uniquement ce qu'il faut d'une page à l'autre ? www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 15

Comparaison www.objis.com - Formation SPRING www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 16

Comparaison www.objis.com - Formation SPRING www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 17

Exemple framework Ajax : Open Rico Open Rico - Moteur Ajax - Glisser Déposer - Animations - Comportement 2 bibliothèques (fichiers .js) à inclure ds pages php Démonstrations : http://demos.openrico.org www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 18

Exemple framework Ajax : Open Rico www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 19

XML XML = eXtensible Markup Langage Nb de balise infini ( contrairement à HTML)‏ Description données de domaines fonctionnels différents XML = contenu (et non présentation)‏ 1 contenu = Plusieurs présentations possibles HTML, WML, XLS, DOC, CSV, TXT,... www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 20

De HTML à XML 1997 : HTML 4.01 1999 : XHTML 1.0 ( www.w3.org/xml ) www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 21

XHTML 1.0 Reformulation de HTML en Application XML 3 types de documents XHTML 1.0 : XHTML 1.0 Transitional (le + pratique)‏ Idéal pour migration HTML --> XML XHTML 1.0 Strict XHTML 1.0 frameset : support des frames Modules : Core XHTML,Xforms,SVG, MathML Déclaration spécifique : ... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 22

Pourquoi utiliser XHTML ? XHTML plus facile à manipuler ! XSLT : transformation données XML Schema : validation données Xpath / Xquery : extraction données DOM, SAX : programmation HTML vient de SGML : difficile à manipuler XHTML encourage l'utilisation de CSS XHTML meilleur sur périphériques mobiles XHTML extensible. Types complexes. www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 23

Différences HTML / XHTML XHTML est une application XML Fermeture des balises obligatoires ! Le document doit être valide (DTP, Schema)‏ Attributs 'id' et 'name' des éléments a, applet, form, frame, iframe, img, map HTML 4 : Présents XHTML 1.0 : attribut name déprécié XHTML 1.1 : attribut name supprimé. Déclaration et encodage <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 24

Exemple document HTML <html> <head> <title>Formation web 2.0 - HTML</title> </head> <body> <h1>Titre de la page</h1> <p> Vous allez <i>créer</i> des applications web 2. </p> <button>Fais-le !</button> </body> </html> www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 25

version XHTML www.objis.com - Formation SPRING <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formation web 2.0 - HTML</title> </head> <body> <h1>Titre de la page</h1> <p> Vous allez <i>créer</i> des applications web 2. </p> <button>Fais-le !</button> </body> </html> www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 26

Balises <div> et <span> Objectif : décomposer le contenu XHTML en parties dont la signification est identique <div> : éléments de niveau bloc Rupture physique entre éléments précédents le <div> et éléments suivants le <div> <span> : balisage incorporé vous pouvez par exemple appliquer à une expression à l'intérieur d'une phrase Sans style, ces balises ne produisent rien de particulier (sauf saut de ligne pour <div>)‏ www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 27

Attributs 'class' et 'id' Objectif : identifier les éléments de contenu dont vous souhaitez modifier la présentation (CSS) ou le comportement (Javascript)‏ class : identifie un élément que vous pouvez utiliser plusieurs fois Id : identifie un élément unique dans une page www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 28

XSLT XSLT : Extensible StyleSheet Language Transformation Création de pages XHTML Utilisation coté serveur Transformer sources XML avant publication Utilisation coté client : balise <?xml-stylesheet ?> xml-stylesheet : instruction processeur Attributs : Géré par : IE, Firefox, Opera, Safari Non géré par : Konkeror, Lynx, www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 29

+ + Démo XSLT coté client www.objis.com - Formation SPRING www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 30

Démo XSLT coté client function transform () { var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "channel.xml", false); xmlhttp.send(''); var xslhttp = new XMLHttpRequest(); xslhttp.open("GET", "rss.xsl", false); xslhttp.send(''); var processor = new XSLTProcessor(); processor.importStylesheet(xslhttp.responseXML); var newDocument = processor.transformToDocument(xmlhttp.responseXML); var o = document.getElementById("planet"); var n = newDocument.getElementById("planet"); o.parentNode.replaceChild(n, o); } 1 2 3 4 www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 31

Javascript Langage de programmamation coté client Traitement sur navigateur, pas sur serveur ! Ajout d'interactivité aux pages web Validation formulaires, alertes, Roll over... Personalisation de pages, cookies.. Script javascript Interne à page HTML. <script type='text/JavaScript'> Disponible slt pour la page concernée Externe à la page HTML (Maintenance plus aisée). <script src='monscript.js' type='text/JavaScript'> Disponible pour plusieurs pages. www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 32

Manipulation XML avec Javascript/DOM www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 33

DOM Document Object Model Représentation Orientée Objet Document HTML ou XML Structure hierarchique (Arbre)‏ Spécification W3C : www.w3c.org/dom API Manip. dynamique de doc HTML / XML Plusieurs implémentations : Java, PHP, Python... Noeuds (enfant, parent) types : Element, Text Document racine (root) : document www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 34

Vue d'ensemble API DOM Point d'entrée : objet 'document' Javascript : document est une variable globale A partir de l'objet document, navigation récursive en utilisant propriétés des noeuds : firstChild, lastChild, childNodes, parentNode... Accès direct : GetElementById() : accès à partir d'un 'id' GetElementByTagName() : accès via nom de baline www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 35

Vue d'ensemble API DOM Noeuds : types Element et Text Création de noeuds: CreateElement()‏ CreateTextNode()‏ AppendChild(), insertBefore(), replaceChild() Suppression de noeuds: RemoveChild() ‏ Attention interprétations IE et Firefox ! Attention manipulation HTML et XHTML ! XHTML : premier enfant 'doctype', et non 'html' www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 36

Exemple DOM / HTML <html> <head> <title>Formation web 2.0 - HTML</title> </head> <body> <h1>Titre de la page</h1> <p> Vous allez <i>créer</i> des applications web 2. </p> <script type="text/javascript"> function doIt() { unimportantText = document.getElementsByTagName("p")[0]; pleaseNote = document.createElement("p"); pleaseNote.appendChild(document.createTextNode("SVP notez ceci :")); unimportantText.parentNode.insertBefore(pleaseNote, unimportantText); } </script> <button onclick='doIt()'>Fais-le !</button> </body> </html> www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 37

Exemple DOM / HTML <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formation web 2.0 - HTML</title> </head> <body> <h1>Titre de la page</h1> <p> Vous allez <i>créer</i> des applications web 2. </p> <button>Fais-le !</button> </body> </html> document.getElementsByTagName("p"); // retourne une liste avec 1 noeud document.getElementsByTagName("p").length; // retourne 1 document.getElementsByTagName("p")[0]; // retourne l'élement p document.getElementsByTagName("P"); // retourne une liste vide sous Firefox www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING

CSS Présentation / Mise en forme HTML / XML Police, couleurs, arrière plan, marges Externe (conseillé) <link rel="stylesheet" type="text/css" href="mon_fichier.css" /> Interne : balises <style> dans <head> Outil : www.quirksmode.org Compatibilité des navigateurs avec styles www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 39

Démo CSS <body> <div class="rounded"> <head> <style type="text/css"> body { font-family: verdana, sans-serif; font-size: 12px; } .rounded { text-align: center; background: #ffcc66; margin-top: 1em; </style> </head> Démo CSS 1 <body> <div class="rounded"> <h3>Formation web 2.0</h3> <p> Le web 2.0 rassemble un ensemble... </p> </div> </body> 2 3 www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 40

Firefox : plug-in Firebug Firebug est un extension de Firefox qui permet de déboguer le javascript, le css, la structure HTML et les requêtes AJAX d’une page. download : https://addons.mozilla.org/fr/firefox/addon/1843 Point d'arrêts & debogage pas à pas ( 'debugger' ) Piles d'erreurs (stack) : pour connaître chemin exécution Niveaux de logs console (log, info, warn, error) Calcul durée d'un script (console.time) Après installation, lancer nouvelle session Firefox et Cliquez ici (coin inférieur droit du navigateur ) pour voir la console 41

Firebug & Javascript 3 2 4 1 1 – Ligne où il y a l’erreur. 2 – Fichier et numéro de ligne où il y a l’erreur. 3 – Détail de l’erreur. 4 – Stack Trace (Chemin qu’il y a eu avant de se rendre jusqu’à l’erreur). 42

Firebug & AJAX URL Requête 5 NET 6 5 8 Paramètres GET/POST envoyés Réponse reçue 43

Firebug & HTML 9 - Inspection visuelle du HTML (en appuyant sur btn 'inspect') 10 – Indique où dans le DOM l’élément sélectionné se trouve. 11 - Layout dans la page (margin, border, padding) 10 9 11 44

Firebug & CSS 12 - Indique le code CSS qui affecte l’élément choisi 13 – Quand un attribut est rayé, cela signifie qu’il n’a plus d’effet. 14 - Indique de quel fichier css le code provient 14 12 13 45

Firebug : debogage 15 - L'ajout de l'instruction 'debugger;' dans vos scripts implique point d'arrêt et possibilité de debogage pas à pas 16 – Navigation pas à pas (ligne suivante, entrer ds code, ligne précédente) 17 - Possibilité de voir les variables ici, pas à pas 18 – Boutons 'breakpoints' : Voir tous les points d'arret (points rouges début de ligne. Par double-click)‏ 16 18 15 1 46

Démo Firefox DevBOI : Recommandations W3C‏ Choisir sujet de recherche Recherche d'informations méthode getAttribute d'un objet DOM Core Element 47

Proposition du W3C pour le futur balises navigateurs Basé sur XML XHTML 2 Proposition du W3C pour le futur balises navigateurs Objectif : préparer prochaine génération clients web Riches ! Basé sur XML Les balises de mise en forme supprimé <big, small, font...> Rupture forte avec HTML 4 Tous les formulaires remplaces par XFORMS Plus compliqué pour développeurs. Les navigateurs vont'ils suivre ? Accessibilité (disparition de iframe)‏ Risque manque de compatibilité avec pages HTML 4 PB : les spécifications trainent... 48

Groupe WHATWG (www.whatwg.org)‏ Evolution incrémentale du HTML 4 Web Hypertext Application Working Group 20% navigateurs : Firefox, Opera, Safari... Evolution incrémentale du HTML 4 Pas de rupture forte! (comme avec XHTML 2.0)‏ Ajouter nouveaux éléments de disposition <header>, <footer>, <section>, <article>, <nav>... Supprimer éléments <frame>,<frameset>,<noframes>.,<font>, <center> Nouveaux éléments dynamiques <datagrid>, <Canvas>,<progress>,... Rapprochement du W3C. Working draft. Peut être sortie fin 2008 ! 49

Rq : D'autres formats d'échange possibles : Technologies Ajax XMLHTTPRequest : objet du navigateur utilis pour des appels asynchrones coté serveur (X)HTML / DOM : Représentation de la page et API DOM pour modifier dynamiquement la page Javascript : Utilisé pour Apeller XMLHTTPRequest et modifier la page via DOM XML : format de données que l'on peut utiliser pour échanger des informations entre le navigateur et le serveur Rq : D'autres formats d'échange possibles : JSON, CSV, (X)HTML, texte... 50

Ajax : pour le confort de l'utilisateur Avec applications Web 1.0 , l'utilisateur : 1) Demande une page (lien, URL, formulaire)‏ 2) Attend cycle Requête/Réponse du navigateur Temps d'attente potentiellement long (secondes)‏ 3) Lis la page (ou remplit formulaire) puis 1)‏ Avec Applications Ajax / Web 2.0 Applications rapides, confortables ! Comparaison Applications Cartographie en ligne Web 1.0 :Mapquest Web 2.0 : Google Maps 51

Historique Objet XMLHTTPRequest (XHR)‏ 1995 : Créé par Microsoft Mars 1999 : Disponible dans Internet Explorer 5 Juin 2002 : Adopté par Mozilla 1.0 Février 2004 : Adopté par Safari 1.2 Avril 2005 : Adopté par Opéra 8.0 Tous les éléments d'ajax étaient donc déjà présents 52

+ Démo XMLHTTPRequest Doc XML (famillesimpson.xml)‏ Formulaire HTML Zone chargée dynamiquement avec données du fichier XML Action utilisateur 53

Code HTML 1 Zone marquée (id= 'membres') dans laquelle les données seront affichées dynamiquement, sans chargement de toute la page 54

Script Javascript Ici on s'interesse au cas ou l'état de l'objet HTTPRequest chargé 5 Fonctions principales 2 Extraction de données + création éléments HTML 'li' Création objet XMLHTTPRequest 6 3 Callback : Que faire lorsque l'état de l'objet XMLHTTPRequest change ? INFO : 4 états possibles : 0 : non initialisé 1 : ouvert 2 : envoyé 3 : en reception 4 : chargé Chargement asynchrone (true) du document XML famillesimpson.xml. Le javascript de la page ne sera pas bloqué suite au 'send' 4 55

Objet XMLHTTPRequest (XHR)‏ Sa création dépend du navigateur Différentes implémentations W3C : création de spécifications en cours CONSEIL : Ne pas l'utiliser directement Passer par des librairies qui rendent transparent le type de navigateur Ex : Librairies Yahoo! User Intercace (YUI)‏ Ex : Librairie Google Web Toolkit (GWT)‏ 56

Inconvénients AJAX Si Javascript désactivé dans navigateur, AJAX ne fonctionne pas ! Nécessite compétences Javascript / DOM Attention maintenance du code ! Utilisation de librairies javascript externe Pb référencement Seule la première page est vue Pb Favoris 57

Kits de développement AJAX 58

Librairie YUI Yahoo User Interface AVANTAGES INCONVENIENTS Framework Ajax proposé par Yahoo AVANTAGES Très bonne documentation (Composants, API)‏ Open Source (Licence BSD)‏ Distribution simple : 1 fichier zip (Fichiers Javascript + exemples + docs.)‏ Modulaire : ajouter à vos pages uniquement les parties qui vous interessent. Utilisé par Yahoo dans ses propres sites INCONVENIENTS Ne fournit pas tous les composants comme autres librairies. Ex Editeur HTML, Table triée Open Source mais controlé par Yahoo Pas de gestion automatique des dépendences (comme dans Dojo). 59

Composantes YUI Taille / dépendences des composants YUI 60

Exemple Démo YUI Import librairies Yahoo : yahoo.js, Connection.js Success : Gestion événement : chargement xml réussi Rq : Ici pas de gestion de l'échec chargement (failure :)‏ Fonction loadSimpsons, apellée suite à appui du boutton. Ici, le développeur ne se souci pas du navigateur (Géré par YUI)‏ AsyncRequest() :Gestion chargement famillesimpson.xml : callback : que faire suite à tentative chargement xml ? null = 'n'envoyer aucune donnée' 61

Kit Yahoo (YUI) : http://developper.yahoo.com/yui Liens utiles Kit Yahoo (YUI) : http://developper.yahoo.com/yui Kit GWT : http://code.google.com/webtoolkit Kit Open Rico : http://openrico.org/ Mozilla developper : http://developer.mozilla.org/ 62

www.objis.com - Formation SPRING Framework Ajax : DOJO Interfaces riches : Ajax + reverse Ajax (comet) Dojo vous aide à structurer projet et ré-utiliser modules. « Développer en confience » Fondations solides : dojo core (24k),créé par experts internationaux reconnus (depuis 2004) : Centaines de Tests. Millions d'utilisateurs Pas besoin de scripts supplémentaires : Tout est dans : Dojo core, Dojo dijit, DojoX Dojo core : modules RPC, retour arriere, Offline Du prototype à la mise en production ! Internationalisation (100 langages.) Outils test unitaire. Outils d'Optimisation www.objis.com - Formation SPRING 63

www.objis.com - Formation SPRING 64

www.objis.com - Formation SPRING DOJO core 3 1 2 www.objis.com - Formation SPRING 65

DIGIT : interfaces utilisateur http://dojotoolkit.org/projects/dijit Ajout de composants via balises spécifiques (ex : agenda,validateur monnaie,...). Pas besoin de connaître HTML ! Accessibilité : navigation clavier,contrastes, lecteur ecran Thème par défaut : THUNDRA Créez vos thèmes ! (Prototypage rapide) Prêt pour la production www.objis.com - Formation SPRING 66

DojoX : Extensions Dojo http://dojotoolkit.org/projects/dojox Dojox = Laboratoire Ajax (Inventions,innovations) Travail hors ligne : Dojox Offline (+ Google Gears) Dojox Grid : gestion pagination & scrolling intuitif Partage de données entre composants (dojo.data) Visualisation de données (dojox.charting) à la volées Dessiner sur navigateur(dojox.gfx) Dojox Cryptography, XML... www.objis.com - Formation SPRING 67

www.objis.com - Formation SPRING Dojo : Hello World 1 2 3 4 5 6 www.objis.com - Formation SPRING 68

www.objis.com - Formation SPRING Dojo : Hello World www.objis.com - Formation SPRING 69

Dojo : Hello XMLHTTPRequest ! 1 2 www.objis.com - Formation SPRING 70

www.objis.com - Formation SPRING Dojo : Hello Ajax / GET ! 1 2 3 www.objis.com - Formation SPRING 71

www.objis.com - Formation SPRING Deboggage 1 : la console Firefox : utiliser plugin Firebug ! Attribut isDebug:true de djConfig Utile pour navigateurs IE, Safari Hiérarchisation log : debug, info, warn, error Console.dir : affiche contenu variables à l'écran 1 2 www.objis.com - Formation SPRING

www.objis.com - Formation SPRING Deboggage 2 : 'debugger;' Point d'arrêt A utiliser avec Firebug , onglet console Console Firebug en mode ligne de commande 1 2 www.objis.com - Formation SPRING 73

Gestion 'retour arrière' Insertion d'une IFRAME sur les pages URL : http://.../mapage.php#mapage djConfig="preventBackButtonFix: false" dojo.require("dojo.back"); dojo.back.addToHistory({ back: function(){ console.debug(‘back pressed’); }, forward: function(){ console.debug(‘forward pressed’); }, changeUrl: true }); dojo.back.addToHistory(state); Pour que l'url change ds le navigateur www.objis.com - Formation SPRING 74

Utilisation de Composants graphiques Bibliothèque Digit 2 méthodes : balises ou programmation Méthode balises : nécessite parseur DOM ParseOnLoad : True Attribut 'dojoType' du widget Dojo charge objet et insère pour vous code associé Exemple balise : barre de progression <div dojotype="dijit.ProgressBar" progress="20" maximum="50"></div> www.objis.com - Formation SPRING 75

Utilisation de Composants graphiques Méthode programmation (meilleur control !) ParseOnLoad : True C'est vous qui chargez et inserez composant ds page Exemple balise : barre de progression <div id="bar"></div> ...... var bar = new dijit.ProgressBar({progress: 20, maximum: 50}, "bar"); www.objis.com - Formation SPRING 76

www.objis.com - Formation SPRING Développer avec Dojo dojo.addOnLoad : code à exécuter uniquement lorsque toute la page est chargée digit.byId : retrouve objet associé à un 'id' Exemple accès par programmation <div id="bar'' dojotype="dijit.ProgressBar" ></div> ... dijit.byId("bar").update({progress: 10}); www.objis.com - Formation SPRING 77

www.objis.com - Formation SPRING Dojo & Accessibilité ARIA : Accessible Rich internet Applications module dijit.util.wai.js Widgets de Dojo 'accessibles' ! Efforts d'IBM pour rendre Dojo Accessible Widgets fonctionnent avec souris & clavier attribut 'tabindex' pour le focus clavier Fléchage navigation Evènement spécial : onklick() Lecteurs d'écran Implémentation ARIA : 'roles' et 'states' Le lecteur peut connaître le type de widget(ex : tree) et permet (flèches) à l'utilisateur de naviguer et connaître l'état (ex : déroulé ou compacté) www.objis.com - Formation SPRING 78

www.objis.com - Formation SPRING Attributs ARIA Donner attribut ARIA à un Widget: dijit.util.wai.setAttr (DomNode node, String ns, String attr, String|Boolean value) Exemples : dijit.util.wai.setAttr( focusNode, "waiRole", "role", "treeitem"); dijit.util.wai.setAttr( focusNode, "waiState", "expanded", "true"); www.objis.com - Formation SPRING 79

Syndication de contenu Protocoles RSS, ATOM. Framework MagPieRSS 80

Syndication : application forte du Web 2.0 Contexte Syndication : application forte du Web 2.0 1 article --> plusieurs publications Tout le monde peut publier ! Les sites web proposent aujourd'hui syndication de leur contenu Les utilisateurs s'inscrivent à un flux et utilisent aggrégateur ou lecteur de flux pour recevoir infos Qu'est ce qu'un flux de syndication ? Comment produire des flux ? 81

2 différences entre syndication et pages web Notions clés 2 différences entre syndication et pages web L'information vient vers l'utilisateur (PULL)‏ L'Information qui arrive est structurée MicroContenu : En tête, titres, résumé C'est ce qu'on voit dans les blogs MacroContenu : Corps de l'information Echanges réguliers client / server pour MAJ HTTP : Header If-Modified-Since Formats de syndication RSS 1.0, RSS 2.0, ATOM 82

Formats de Syndication RSS 1.0 Descendant format W3C RDF (Resource Description Framework)‏ Fournir description simple d'une ressource. Ne pas fournir toute la ressource Ex : si vous ajoutez ou changez une page dans votre site, vous fournissez uniquement Titre + lien dans le flux Netscape RDF Site Summary 0.9 (Complexe). RSS-DEV RSS 2.0 : 2000 : Netscape RDF Site Summary 0.91. publié par Userland Pas de namespace. Pas de support RDF Dave Winer (Userland)‏ Renomé Really Simple Syndication Atom : Volonté d'un format 100% neutre, implémenté par tous, extensible librement, et bien spécifié. RFC 4287 83

Mise en oeuvre Syndication Solution : Lecture (Ex : en PHP) xml coté serveur AVANTAGE : facile à coder INCONVENIENT : Pb de performances à chaque page affichée, Aller/Retour serveur. Solution 2 : utiliser framework dédié AVANTAGES Gestion Cache (performance). Pas d'A/R systématique Paramétrage délais récupération infos serveur (Ex : 1h)‏ Outil : MagPie http://magpierss.sourceforge.net PHP4 + support xml (expat)‏ PHP5 + support xml (libxml2)‏ Fichier config : rs_cache.inc (MAX_AGE, BASE_CACHE)‏ Classe FeedParser : récupération Flux RSS (XML) IL nous suffit d'ajouter notre fichier PHP spécifique au Flux 84

Syndication avec MagPierss http://www.clubic.com/xml/news.xml 85

Syndication avec MagPierss 86

Syndication avec MagPierss 87

Services Web Problématique : interopérabilité XML sur HTTP Protocole SOAP Interface WSDL Framework nuSOAP 88

EXEMPLE : Concevoir un service qui sera accessible : Services web Solution apportée aux contraintes des architectures actuelles. Besoin d'interopérabilité EXEMPLE : Concevoir un service qui sera accessible : depuis un programme C tournant sur un serveur Linux, depuis un programme J2ME tournant sur un téléphone portable depuis n'importe quel navigateur Internet, voilà le défi que le service Web relève. Le protocole SOAP (Simple Object Access Protocol), utilise XML et transmet des informations sur le réseau via HTTP. 89

Architecture Liens utiles : http://www.w3.org/TR/wsdl http://www.xmethods.net 90

Services web Définition : Tout service sur le web Applications méttant en oeuvre technos REST , XML-RPC, SOAP Application avec interfaces WSDL + Annuaire UDDI 2 groupes Services web 'Lourd' : XML-RPC , SOAP Fonctionne depuis 10 ans. Possibilité transport http, jms, smtp… Services web 'Léger' : REST Récent, uniquement http (GET, POST, DELETE…) Ex : http://www.monappli/listemployes/1 91

fichier WSDL = fichier XML . Plusieurs parties Le savoir-faire du service web est décrit via une interface : fichier WSDL (Web Service Definition Language)‏ fichier WSDL = fichier XML . Plusieurs parties <!-- partie 1 : Definitions --> <!-- partie 2 : Types--> <!-- partie 3 : Message --> <!-- partie 4 : Port Type --> <!-- partie 5 : Operation --> <!-- partie 6 : Binding --> <!-- partie 7 : Service --> 92

WSDL Definitions : contient des informations sur la constitution du fichier WSDL Types : regroupe les définitions des types de données (tableau, Objet...) Message : élément utilisé pour la constitution d'une opération, composé de : nom du message nom du (ou des) paramètre(s)‏ type du (ou des) paramètre(s) Port Type : ensemble des opérations du Web-Service Operation : méthode du Web-Service, elle peut être composée de deux parties : input : Message d'invoquation de la méthode output : Message de retour de la méthode Binding : définit le format des messages ainsi que des détails sur les opérations et les messages Service : Regroupe les différents Ports ainsi que la définition du service Port : point de sortie de l'application (on définit ici l'URL du serveur SOAP 93

Exemple WSDL 94

Création de services web Etape 1 : Création de l'interface WSDL Etape 2 : Création du serveur Etape 3 : Création du client Plusieurs langages : PHP5, JAVA... Exemple de mise en oeuvre : http://jp-clair.developpez.com/articles/Java/J2ME/webServices 95

Exemple Serveur SOAP PHP5 ww.php.net/soap 96

Exemple Client Soap PHP5 ww.php.net/soap 97

Autres Formations Objis Développement EXTJS Développement GWT Développement J2EE Initiation Objet / JAVA Développement JAVA / XML Architecture J2E Architecture SOA Intégration continue ... www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 98

Contact Douglas MBIANDOU responsable formations Objis Tél : 06 60 46 76 45 www.objis.com www.objis.com - Formation AJAX/web2 www.objis.com - Formation SPRING 99