programmation ajax/web2.0 - formation ajax/web2 1
TRANSCRIPT
Programmation Ajax/web2.0
www.objis.com - Formation AJAX/web2 1
www.objis.com - Formation SPRING
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
2www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
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
3www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
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)
4www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
Le Web 2.0
Origine
Principes clés
5www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
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
6www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
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, Napster7www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
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…)
8www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
Principe 2 : tirer parti de l'intelligence collective
9
www.objis.com - Formation SPRING
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
10www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
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)
11www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
Autres principes
12
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
Présentation AJAX et technologies associées
AJAX
XML
CSS
Javascript
DOM
13www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
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
14www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
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 ?
15www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
Comparaison
16www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
Comparaison
17www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
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
18www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
Exemple framework Ajax : Open Rico
19www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
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,...
20www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
De HTML à XML
1997 : HTML 4.01
1999 : XHTML 1.0 ( www.w3.org/xml )
2001 : XHTML 1.1
21www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
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 :
...
22www.objis.com - Formation AJAX/web2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
www.objis.com - Formation SPRING
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.
23www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
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
24www.objis.com - Formation AJAX/web2
<?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">
<?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 SPRING
Exemple document HTML
25www.objis.com - Formation AJAX/web2
<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>
<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 SPRING
version XHTML
26www.objis.com - Formation AJAX/web2
<?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>
<?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 SPRING
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>)
27www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
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
28www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
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,
29www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
Démo XSLT coté client
30www.objis.com - Formation AJAX/web2
XSLT
+
+
www.objis.com - Formation SPRING
Démo XSLT coté client
31www.objis.com - Formation AJAX/web2
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);}
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 SPRING
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.
32www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
Manipulation XML avec Javascript/DOM
33www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
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 34www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
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
35www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
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'
36www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
Exemple DOM / HTML
37www.objis.com - Formation AJAX/web2
<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>
<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 SPRING
Exemple DOM / HTML
www.objis.com - Formation AJAX/web2
<?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>
<?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 noeuddocument.getElementsByTagName("p").length; // retourne 1document.getElementsByTagName("p")[0]; // retourne l'élement pdocument.getElementsByTagName("P"); // retourne une liste vide sous Firefox
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
39www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
Démo CSS
40www.objis.com - Formation AJAX/web2
<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>
<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> <body>
<div class="rounded"> <h3>Formation web 2.0</h3> <p> Le web 2.0 rassemble un ensemble... </p> </div> </body>
<body> <div class="rounded"> <h3>Formation web 2.0</h3> <p> Le web 2.0 rassemble un ensemble... </p> </div> </body>
1
3
2
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
1
2
4
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
56
5
8Réponse reçueParamètres
GET/POSTenvoyés
URL Requête
NET
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)
9
10
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
13
1214
45
Firebug : debogage
1
15 - L'ajout de l'instruction 'debugger;' dans vos scripts implique point d'arrêt et possibilité de debogage pas à pas16 – 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)
15
18
16
46
Démo Firefox DevBOI : Recommandations W3C
Recherche d'informations méthode getAttribute d'un objet DOM Core Element
Choisir sujet de recherche
47
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
HTML 5
• Groupe WHATWG (www.whatwg.org)– 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
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ésents52
Démo XMLHTTPRequest
+
Doc XML (famillesimpson.xml)
Action utilisateur
Formulaire HTML
Zone chargée dynamiquement avec données du fichier XML
53
Code HTML
Zone marquée (id= 'membres') dans laquelle les données seront affichées dynamiquement, sans chargement de toute la page
Zone marquée (id= 'membres') dans laquelle les données seront affichées dynamiquement, sans chargement de toute la page
1
54
Script Javascript
Création objet XMLHTTPRequest
Fonctions principales
Chargement asynchrone (true) du document XML famillesimpson.xml.Le javascript de la page ne sera pas bloqué suite au 'send'
Callback : Que faire lorsque l'état de l'objet XMLHTTPRequestchange ? INFO : 4 états possibles : 0 : non initialisé1 : ouvert2 : envoyé3 : en reception4 : chargé
Ici on s'interesse au cas ou l'état de l'objet HTTPRequest chargé
Extraction de données + création éléments HTML 'li'
6
5
4
3
2
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– Seule la première page est vue
57
Kits de développement AJAX
58
Librairie YUI
• Yahoo User Interface– 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
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'
Success : Gestion événement : chargement xml réussiRq : Ici pas de gestion de l'échec chargement (failure :)
61
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 63
www.objis.com - Formation SPRING
64
www.objis.com - Formation SPRING
DOJO core
1
2
3
65
www.objis.com - Formation SPRING
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
66
www.objis.com - Formation SPRING
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...
67
www.objis.com - Formation SPRING
Dojo : Hello World
1
4
3
2
5
6
68
www.objis.com - Formation SPRING
Dojo : Hello World
69
www.objis.com - Formation SPRING
Dojo : Hello XMLHTTPRequest !
11
22
70
www.objis.com - Formation SPRING
Dojo : Hello Ajax / GET !
1
2
3
71
www.objis.com - Formation SPRING
Deboggage 1 : la console
1
2
– 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
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
12
73
www.objis.com - Formation SPRING
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
74
www.objis.com - Formation SPRING
Utilisation deComposants 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><div dojotype="dijit.ProgressBar" progress="20" maximum="50"></div>
75
www.objis.com - Formation SPRING
Utilisation deComposants 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");
<div id="bar"></div> ......var bar = new dijit.ProgressBar({progress: 20, maximum: 50}, "bar");
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});
<div id="bar'' dojotype="dijit.ProgressBar" ></div>
...
dijit.byId("bar").update({progress: 10});
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é)
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");
79
Syndication de contenu
– Syndication.
– Protocoles RSS, ATOM.
– Framework MagPieRSS
80
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
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
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.net90
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
WSDL
• 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 lesopé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
96
ww.php.net/soapww.php.net/soap
Exemple Client Soap PHP5
97
ww.php.net/soapww.php.net/soap
www.objis.com - Formation SPRING
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 ...
98www.objis.com - Formation AJAX/web2
www.objis.com - Formation SPRING
Douglas MBIANDOU
responsable formations Objis
Tél : 06 60 46 76 45
www.objis.com
Contact
www.objis.com - Formation AJAX/web2 99