Internet Explorer 8.0 pour les développeurs Pierre-Louis Coll et Daouda Ndiaye 7 Octobre 2009
Agenda Introduction Mode de compatibilité Web Slices Accélérateurs Prise en charge de JSON Recherches simplifiées dans le DOM Prototypes du DOM modifiables URI de données
Agenda Navigations AJAX Stockage DOM Améliorations de connectivité Amélioration de l objet XmlHttpRequest Requêtes inter-domaines (XDR) Messagerie inter-documents (XDM) Conclusion
Mode de compatibilité Une nouvelle icône au niveau de l UI Liste de compatibilité, intranet local: GPO,IEAK Compatibility View ON: Standards mode pages => IE7 Standards Quirks pages => Quirks mode User Agent indique une version 7 Opt-out IE8 Standards mode via <META> C:\Test.htm => IE8 Standards mode (Compatibility View off)
Compatibility View
Web Slices Abonnement à une portion de page Permet de suivre cette portion et ses modifications sans revisiter le site d origine Propriétés basiques: Web Slice (Required) => hslice et id obligatoire Entry Title (Required) => titre du webslice Entry Content (Optional) => uses the class name entry-content as defined in the hatom Microformat
Exemple de code d'un web slice http://msdn.microsoft.com/en-us/library/cc304073%28vs.85%29.aspx <div class="hslice" id="slice1" <p class="entry-title">game System - $66.00</p> <div class="entry-content"> <img src="game.jpg"> <p>auction ends: <abbr class="endtime" title="2008-02-28t12:00:00-05:00">6 hours</abbr></p> </div> <a rel="feedurl" href="www.ebay.com/game.xml">subscribe to Feed</a> <p>this item updates every <span class="ttl">15</span> minutes.</p> </div>
Utilisation de Web Slices
Accélérateurs Augmentation de la productivité Faciliter les tâches quotidiennes Accelerators: De 7 clics pour voir un plan d une adresse on passe à 2 ou 3 Accès instantané à des services contextuels Email Traduction Recherche
Accélérateurs: comment? Accelerator Service Provider: Créer votre Accelerator ou utiliser un existant Ajouter le XML template sur votre server Ajouter un bouton ou un lien d installation de l Accelerator (window.external.addservice) End User: Installation de l Accelerator A partir de votre intranet ou d un site web Microsoft IE8 Add-ons Gallery http://www.ieaddons.com/en/accelerators
Exemple de code d'un accélérateur http://msdn.microsoft.com/en-gb/library/cc289775(vs.85).aspx <os:openservicedescription xmlns:os="http://www.microsoft.com/schemas/openservicedescription/1.0"> <os:homepageurl>http://www.contoso.com</os:homepageurl> <os:display> <os:name>demoie8 SP Search</os:name> <os:icon>http://www.contoso.com/favicon.ico</os:icon> <os:description>search DemoIE8 Sharepoint</os:description> </os:display> <os:activity category="ie8 SP Search"> <os:activityaction context="selection"> <os:execute action="http://www.contoso.com/results.aspx" method="get"> <os:parameter name="k" value="{selection}" type="text" /> </os:execute> </os:activityaction> </os:activity> </os:openservicedescription>
Utilisation d Accelerators
Prise en charge native de JSON JSON (JavaScript Object Notation): format d'échange de données léger basé sur un sousensemble de la notation objet du langage JScript Risque de sécurité avec la méthode eval JavaScript pour «parser» les chaînes JSON dans des objets JavaScript => utilisation de librairies de «parsing» IE8 implémente en NATIF la proposition JSON ECMAScript 3.1 avec un «parsing» sécurisé
Prise en charge native de JSON Appel de JSON.stringify et de JSON.parse var testobj = new Object(); testobj.numval = 4; testobj.strval = "fool"; testobj.dateval = new Date(2008, 3, 1); testobj.arrval = new Array(1,2,"test"); testobj.boolval = true; / / Conversion d'objet en chaîne var stringifiedvalue = JSON.stringify(testObj) ; / / Création d'un nouvel objet à partir de la chaîne var parsedvalue = JSON.parse(stringifiedValue)
Utilisation de JSON
Recherche simplifiée dans le DOM Difficultés de recherche rapide avec les fonctions getelementbyid ou getelementsbytagname? Utilisation de frameworks tiers comme prototype et jquery, par exemple. Avec IE8 => support amélioré des sélecteurs CSS 2.1 queryselector et queryselectorall getelementbyid('id') => queryselector('#id') = même résultat API de sélecteurs utilisables à 2 niveaux différents: document et élément
Recherche simplifiée dans le DOM Récupérer tous les éléments par classe function useselectors(clsname) { // Tout masquer... var unset = document.queryselectorall('h3 ); for (var i = 0; i < unset.length; i++) unset[i].style.display = 'none'; var set = document.queryselectorall("." + clsname); } for (var i = 0; i < set.length; i++) set[i].style.display = 'block';
Recherche DOM
Prototypes du DOM modifiables Base de création d'abstractions compactes et efficaces Découverte et extension par reflection des objets JS typés Custom DOM => getelementsbyclassname JavaScript/DOM integration Getter/Setter => nouveau accesseur pour JS
Prototypes de DOM modifiables Modifier tous les éléments image dans le DOM avec HTMLImageElement // Appliquer le changement au prototype. HTMLImageElement.prototype.grow = function() { this.width *= 1.5; this.height *= 1.5; } // Agrandir toutes les images dans le document. for (var i= 0; i < document.images.length; i++) { document.images[i].grow(); }
Prototypes de DOM modifiables Invocation de getelementsbyclassname <div id="div1" class="xyz">text <div id="div2" class="abc xyz">more</div> </div> <div id="div3" class="xyz abc box">other</div> <script type="text/javascript"> Element.prototype.getElementsByClassName = _MSHTML5_getElementsByClassName_Elem; // Invocation de getelementsbyclassname. var div1 = document.getelementbyid('div1'); div1.getelementsbyclassname('abc xyz'); </script>
Prototypes DOM
URI de données Utilisation d'uri peut aider à éviter de coûteux allers-retours réseau => + perf Données URI <= 32 Ko Données ne peuvent être mise en cache Requiert un processing côté client Supporté pour les éléments suivants: object (images only), img, input type=image, link et les déclarations CSS pour les URL comme background, backgroundimage...
Exemple de données URI URI de données qui représente une icône de type Folder <html> <body> <img src="data:image/gif;base64,r0lgodlheaaoalmaaoaztoehh0tl S/7LZv/0jvb29t/f3//Ub/ /ge8wslf/rhf/3kdbw1mxsbp//mf///yh5baaaaaaalaaaaaaqaa 4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77 ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" width="16" height="14" alt="embedded folder icon"> </body> </html>
Données URI
Navigations AJAX Problème : Navigations AJAX et historique Contenu de la page peut changer sans navigation Historique de navigation inchangé Solution : propriété window.location.hash Changement de l URL quand hash est mise à jour Historique de navigation opérationnel
Navigations AJAX Enregistrement des gestionnaires.. <meta content="ie=8" http-equiv="x-ua-compatible"> <!-- Le tag meta force la page à s'afficher en mode IE8. --> <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6" type="text/javascript"></script> <body onhashchange="hashchangehandler();" onload="getmap();" style="overflow: scroll; height: 100%"> <div id="mymap" style="position: relative; width: 500px; height: 500px; vertical-align: middle"> </div>
Navigations AJAX Gestionnaires } function ZoomHandler(e) { izoomlevel = omap.getzoomlevel(); // La déclararion suivante valorise la propriété hash avec // une variable contenant le fragment d'url à sauvegarder. window.location.hash = izoomlevel; } function HashChangeHandler() { var hash = window.location.hash; var inewzoomlevel = hash.substr(1); if (inewzoomlevel!= izoomlevel) { izoomlevel = inewzoomlevel; omap.setzoomlevel(inewzoomlevel); }
Navigations AJAX
Stockage DOM Limitations des cookies Taille et nombre limités Risque de fuite d informations Envoyés avec chaque requête Stockage DOM (DOM Storage) Capacité de stockage accrue Durée de vie maitrisable (global vs session) Trafic réseau réduit Limité à des recherches simples
Stockage DOM Manipulation de localstorage // Enregistre une paire clé/valeur. localstorage.setitem("sean","purcell"); // Retrouve une valeur pour une clé donnée. var storeditem = localstorage.getitem("sean"); // enlève l'élément du magasin. localstorage.removeitem("sean"); // Vide le magasin. localstorage.clear();
Stockage DOM Extrait de code de la démo <div> Enter Text: <input id="textinput" onclick="clear_text();" size="60" type="text" value="votre message ici"> <input onclick="setvalue();" type="submit" value="envoi vers le magasin"> </div> <button onclick="clearitems();">effacer la sélection enregistrée</button>.. function setvalue() { var itemindex = document.getelementbyid('textinput').value; alert(itemindex); localstorage.setitem(key1,itemindex); }
Stockage DOM
Indication de l état de connectivité Propriété online de window.navigator Evénements offline et online online true->false : évènement offline sur body online false->true : évènement online Gestionnaires onoffline et ononline onoffline appelé sur perte de connexion ononline appelé quand connexion est établie
Augmentation du nombre de connexions Limitations liées à RFC 2616 2 connexions HTTP1.1, 4 pour HTTP1.0 Augmenté à 6 si connexion non dial-up Propriété scriptable HTTP1.1>window.maxConnectionsPerServer >MaxConnectionsPerServer MaxConnectionsPer1_0Server a été supprimée depuis la beta 2
Indication de l état de connectivité Extrait de code de la démo <body onload="start();" onoffline="onof();" ononline="onli();"> <span id="connectivity" style="border: double 5px black; width: 30%; margin: 4px 4px 4px 4px; font-size: 80pt; color: red;"> Online</span><br>.. function onli() { connectivity.innertext = "Online"; connectivity.style.color = "red"; } function Start() { if (window.navigator.online) { onli(); } else.
Indication de connectivité
Amélioration de XmlHttpRequest Ajout d un support de délai d expiration Propriété timeout (défaut: 0,02 secondes) Gestionnaire d évènement ontimeout Propriété readystate LOADING: créé, send() pas appelé LOADED : send() a été appelée INTERACTIVE: données reçue en partie COMPLETED: totalité des données reçue
Amélioration de XmlHttpRequest Extrait de code de la démo function alert_readystate() { alert(xhr.readystate);} function alert_timeout() { alert("timed out");} } function run_test() { // Crée un nouvel objet XMLHttpRequest. xhr = new XMLHttpRequest(); xhr.onreadystatechange = alert_readystate; xhr.ontimeout = alert_timeout; xhr.open("get", "http://www.fourthcoffee.com/index.php", true); // L'expiration est valorisée à.02 seconds. // Il faut valoriser l'expiration après l'appel à open. xhr.timeout = 20; // La requête est envoyée au serveur. xhr.send(null); }
XmlHttpRequest
Requêtes inter-domaines (XDR) Nouvel objet XDomainRequest Nécessite un consentement mutuel En-tête Origin En-tête Access-Control-Allow-Origin Requêtes anonymes Limité à des données non sensibles Contrôler les chaînes de caractères tostatichtml JSON.parse
XDomainRequest L'objet XDomainRequest et ses événements / / crée un nouvel objet XDR. XDR = new XDomainRequest(); / / indique qu'il y a une erreur et que la demande ne peut pas être terminée. XDR.OnError = alert_error; / / la requête a atteint son délai d'expiration. XDR.ontimeout = alert_timeout; / / l'objet a commencé à renvoyer des données. XDR.OnProgress = alert_progress; / / la réponse est arrivée. XDR.OnLoad = alert_loaded ;
XDomainRequest Propriétésde XDomainRequest et ses méthodes / / Définit l'intervalle de temporisation. XDR.timeout = timeout; / / Mets l'en-tête content-type dans la demande. var content_type = xdr.contenttype; / / récupère le corps de la réponse. var response = xdr.responsetext; / / crée une connexion avec un serveur d'un domaine. XDR.Open ("get", url); / / transmet une chaîne de données au serveur. XDR.send(); / / termine un envoi en attente. XDR.Abort() ;
XDomainRequest
Messagerie inter-documents (XDM) Permet à des domaines différents de communiquer de façon bidirectionnelle Nécessite un consentement mutuel Méthode postmessage pour l objet document Evènement onmessage Contrôler les chaînes de caractères tostatichtml JSON.parse
XDM Page émettrice function post_to_frame() { var text_sent = document.getelementbyid('finput').value; if (text_sent!= '' && text_sent!= 'Type text you want to send here') { var target_iframe = document.getelementbyid('remote_iframe'); // Poste le message vers le récepteur de document sécurisé. // Le message sera envoyé seulement si l'iframe cible a // le même protocole et hôte que spécifié dans // l'uri (dns ce cas http://www.fourthcoffee.com). target_iframe.contentwindow.postmessage(text_sent, "http://www.fourthcoffee.com"); } }
XDM Page réceptrice // Exécute la fonction receiver quand l'évènement onmessage // est déclenché (un message est reçu). if (window.attachevent) { window.attachevent("onmessage", receiver); // IE } // L'entrée de la fonction receiver est le message. function receiver(e) { // S'assure que le message n'est pas vide // et que l'origine est attendue (http://www.contoso.com). if (e.data!= '' && e.origin == 'http://www.contoso.com') { // Assigne les valeurs à des spans pour affichage dans la frame.
XDM
Ressources Internet Explorer 8 Developer Series http://msdn.microsoft.com/enus/ie/cc304683.aspx http://www.ie8demos.com Internet Explorer Developer center http://msdn.microsoft.com/enus/ie/dafault.aspx