Como criar um mashup usando WinJS.xhr (HTML)

Artigo
12/12/2015

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Um mashup é um aplicativo Web que usa dados de duas ou mais fontes para criar algo novo. Este exemplo mostra como você pode usar o XMLHttpRequest (XHR) para recuperar e exibir um feed RSS (Really Simple Syndication) remoto.

O que você precisa saber

Tecnologias

WinJS.xhr

Pré-requisitos

Supomos que você possa criar um aplicativo básico que use o modelo da Biblioteca do Windows para JavaScript. Para obter ajuda na criação do seu primeiro aplicativo, veja Criar seu primeiro aplicativo do Tempo de Execução do Windows em JavaScript.

Este código neste tópico usa o WinJS. Para saber sobre como incluir o WinJS ao seu projeto, veja Guia de início rápido: adicionando controles e e estilos da Biblioteca do Windows para JavaScript.

Instruções

Etapa 1: Configurar seu aplicativo para acessar a Web

Os aplicativos precisam adicionar determinadas funcionalidades explicitamente, como acesso à rede. Para obter mais informações sobre os recursos, consulte Declarações de recursos do aplicativo e Como configurar os recursos de rede.

No Visual Studio, crie um aplicativo em JavaScript em branco.
Abra o arquivo package.appxmanifest e vá para a guia Recursos.
Para a versão do Windows da amostra, a funcionalidade Internet (Cliente) já deverá estar selecionada, mas caso não esteja, selecione-a agora. O aplicativo talvez precise se conectar como um cliente a serviços Web em uma rede doméstica ou corporativa, então, a funcionalidade Redes Privadas (Cliente e Servidor) também é necessária.

Para a versão do Windows Phone da amostra, selecione a funcionalidade Internet (Cliente e Servidor).

Observação No Windows Phone, há somente uma funcionalidade de rede (Internet (Cliente e Servidor) que habilita todo o acesso de rede para o aplicativo.

Etapa 2: Obter um feed RSS

A função WinJS.xhr usa XHR para recuperar os dados de uma URL especificada. O WinJS.xhr é assíncrono e retorna um Promise para os dados solicitados. Para obter o feed RSS, especifique um manipulador cumprido para este Promise. Você também pode especificar um manipulador de erros e um manipulador de progresso.

É possível chamar a função WinJS.xhr de qualquer página no pacote (qualquer página no contexto local).

Observação Observação: a URL de destino de uma solicitação de XHR não é restringida pelas ApplicationContentUriRules do aplicativo (que estão listadas no manifesto do pacote do aplicativo).

Este exemplo usa WinJS.xhr para acessar o feed RSS rss.msnbc.msn.com. Ele passa duas função de retorno de chamada para Promise:

xhrParseXml: o manipulador concluído. Esta função será chamada se a solicitação XHR for bem-sucedida.
xhrError: o manipulador de erro. Esta função será chamada se a solicitação não for bem-sucedida.

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

Você definirá os métodos xhrParseXml e xhrError na próxima etapa.

Etapa 3: Analisar os resultados

Se a solicitação de WinJS.xhr for bem-sucedida, o código no último exemplo chamará o xhrParseXml. A função xhrParseXml itera por meio dos itens RSS E gera um link para cada uma. Ela exibe o link em um div na página principal, 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;
    }
}

O próximo exemplo mostra a declaração HTML da área de saída.

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

Etapa 4: Manipular erros

Sempre há uma chance de você não conseguir acessar os dados remotos; portanto, forneça uma maneira de manipular os erros processando a solicitação de XHR. Este exemplo define um manipulador de erros simples.

Para obter mais informações, veja Manipulando exceções em aplicativos de rede.

function xhrError(result) {

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

Exemplo completo

<!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();
})();

Para obter um exemplo que possa ser baixado e contenha mais recursos, veja o Exemplo de integração de conteúdo e controles a partir dos serviços Web.