Comment créer une application Web hybride avec WinJS.xhr (HTML)

Article
12/11/2015

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Une application Web hybride est une application qui utilise les données en provenance de deux sources ou plus pour créer quelque chose de nouveau. Cet exemple vous montre comment utiliser XMLHttpRequest (XHR) pour récupérer et afficher un flux RSS (Really Simple Syndication) distant.

Ce que vous devez savoir

Technologies

WinJS.xhr

Prérequis

Nous partons du principe que vous savez créer une application élémentaire qui utilise le modèle Bibliothèque Windows pour JavaScript. Pour obtenir de l’aide sur la création de votre première application, voir Créer votre première application Windows Runtime en JavaScript.

Le code contenu dans cette rubrique utilise WinJS. Pour plus d’informations sur la manière d’inclure WinJS dans votre projet, voir Démarrage rapide : ajout de contrôles et de styles de la bibliothèque Windows pour JavaScript.

Instructions

Étape 1: Configurer l’application pour accéder au Web

Les applications doivent ajouter certaines fonctionnalités de manière explicite, comme l’accès au réseau. Pour plus d’informations sur ces fonctionnalités, voir Déclarations des fonctionnalités d’application et Comment configurer les fonctionnalités réseau.

Dans Visual Studio, créez une application JavaScript vide.
Ouvrez le fichier package.appxmanifest, puis accédez à l’onglet Capacités.
Pour la version Windows de cet exemple, si la fonctionnalité Internet (Client) n’a pas encore été sélectionnée, faites-le maintenant. Si l’application doit pouvoir se connecter en qualité de client à des services Web sur un réseau domestique privé ou un réseau professionnel, la fonctionnalité Réseaux privés (client et serveur) est également nécessaire.

Pour la version Windows Phone de cet exemple, sélectionnez la fonctionnalité Internet (client et serveur).

Remarque Sur Windows Phone, il existe une seule fonctionnalité réseau (Internet (client et serveur), qui active tout l’accès réseau pour l’application.

Étape 2: Obtenir un flux RSS

La fonction WinJS.xhr utilise XHR pour récupérer des données d’une URL spécifiée. La méthode WinJS.xhr est asynchrone et retourne un objet Promise pour les données demandées. Pour obtenir le flux RSS, vous devez spécifier un gestionnaire traité pour cet objet Promise. (Vous pouvez également spécifier un gestionnaire d’erreurs et un gestionnaire de progression.)

Vous pouvez appeler la fonction WinJS.xhr à partir de n’importe quelle page dans votre package (toute page figurant dans le contexte local).

Remarque Remarque : l’URL cible pour une demande XHR n’est pas limitée par l’élément ApplicationContentUriRules de l’application (ces règles sont répertoriées dans le manifeste du package de l’application).

Cet exemple utilise la méthode WinJS.xhr pour accéder au flux RSS rss.msnbc.msn.com. Il passe deux fonctions de rappel à l’objet Promise :

xhrParseXml : il s’agit du gestionnaire traité. Cette fonction est appelée si la demande XHR a abouti.
xhrError : il s’agit du gestionnaire d’erreurs. Cette fonction est appelée si la demande XHR n’a pas abouti.

WinJS.xhr({ url: "http://rss.msnbc.msn.com/id/3032127/device/rss/rss.xml" }).then(
    xhrParseXml, xhrError
    );

Nous allons définir les méthodes xhrParseXml et xhrError à l’étape suivante.

Étape 3: Analyser les résultats

Si la demande WinJS.xhr aboutit, le code dans le dernier exemple appelle la fonction xhrParseXml. La fonction xhrParseXml itère les éléments RSS et génère un lien vers chacun d’eux. Elle affiche le lien dans un div sur la page principale, xhrOutput.

function xhrParseXml(result) {

    var outputArea = document.getElementById("xhrOutput");
    var xml = result.responseXML;


    if (xml) {
        var items = xml.querySelectorAll("rss > channel > item");
        if (items) {
            var length = Math.min(10, items.length);
            for (var i = 0; i < length; i++) {
                var link = document.createElement("a");
                var newLine = document.createElement("br")
                link.setAttribute("href", items[i].querySelector("link").textContent);
                link.innerText = (i + 1) + ") " + items[i].querySelector("title").textContent;
                outputArea.appendChild(link);
                outputArea.appendChild(newLine);
            }
        } else {
            outputArea.innerHTML = "There are no items available at this time";
        }
    } else {
        outputArea.innerHTML = 
            "Unable to retrieve data at this time. Status code: " + statusCode;
    }
}

L’exemple suivant présente la déclaration HTML pour la zone de sortie.

<div id="xhrOutput">
</div>

Étape 4: Gérer les erreurs

Comme il peut arriver que vous n’ayez pas accès aux données distantes, vous devez fournir un moyen de gérer les erreurs susceptibles de se produire lors du traitement de votre demande XHR. Cet exemple définit un gestionnaire d’erreurs simple.

Pour plus d’informations, voir Gestion des exceptions dans les applications réseau.

function xhrError(result) {

    var statusCode = result.status; 
    var outputArea = document.getElementById("xhrOutput");
    outputArea.innerHTML = 
        "Unable to retrieve data at this time. Status code: " + statusCode;
}

Terminer l’exemple

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mashup</title>

    <!-- WinJS references - Windows -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- WinJS references - Phone -->
    <link href="/css/ui-themed.css" rel="stylesheet" />
    <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
    <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

    <!-- Mashup references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
</head>
<body>

    <div id="xhrOutput">
    </div>
</body>
</html>

// default.js
(function () {
    "use strict";

    var app = WinJS.Application;

    // This function responds to all application activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // Initialize your application here.
            WinJS.UI.processAll();
            loadRemoteXhr();
        }
    };

    function loadRemoteXhr() {

        document.getElementById("xhrOutput").innerHTML = "";
        WinJS.xhr({ url: "http://rss.msnbc.msn.com/id/3032127/device/rss/rss.xml" }).then(
            xhrParseXml, xhrError
            );

    }

    function xhrParseXml(result) {

        var outputArea = document.getElementById("xhrOutput");
        var xml = result.responseXML;

        if (xml) {
            var items = xml.querySelectorAll("rss > channel > item");
            if (items) {
                var length = Math.min(10, items.length);
                for (var i = 0; i < length; i++) {
                    var link = document.createElement("a");
                    var newLine = document.createElement("br")
                    link.setAttribute("href", items[i].querySelector("link").textContent);
                    link.innerText = (i + 1) + ") " + items[i].querySelector("title").textContent;
                    outputArea.appendChild(link);
                    outputArea.appendChild(newLine);
                }
            } else {
                outputArea.innerHTML = "There are no items available at this time";
            }
        } else {
            outputArea.innerHTML = 
                "Unable to retrieve data at this time. Status code: " + statusCode;
        }
    }

    function xhrError(result) {

        var statusCode = result.status;
        var outputArea = document.getElementById("xhrOutput");
        outputArea.innerHTML = "Unable to retrieve data at this time. Status code: " + statusCode;
    }


    app.start();
})();

Pour obtenir un exemple téléchargeable qui contient davantage de fonctionnalités, voir l’ exemple d’intégration de contenu et de contrôles à partir de services Web.