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 sous- ensemble 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();"