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
‘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
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
• 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
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
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
..
…
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
• 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
… Online.. 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/en- us/ie/cc304683.aspx • http://www.ie8demos.com • Internet Explorer Developer center http://msdn.microsoft.com/en- us/ie/dafault.aspx