Cómo acceder a una fuente web (HTML)

Artículo
12/12/2015

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

En este tema se muestra cómo recuperar y mostrar una fuente web mediante clases del espacio de nombres Windows.Web.Syndication en la aplicación de Windows en tiempo de ejecución.

Requisitos previos

Los siguientes ejemplos usan JavaScript y se basan en la muestra de redifusión web. Para obtener ayuda sobre cómo crear una aplicación de Windows en tiempo de ejecución con JavaScript, consulta Crear la primera aplicación de Windows en tiempo de ejecución con JavaScript. De forma adicional, en este tema se usan promesas de JavaScript para completar las operaciones asincrónicas. Si quieres obtener más información acerca de este patrón de programación, consulta el tema sobre programación asincrónica en JavaScript con compromisos.

Para asegurarte de que la aplicación de Windows en tiempo de ejecución está lista para la red, debes establecer las funcionalidades necesarias en el archivo Package.appxmanifest del proyecto. Si la aplicación debe conectarse a servicios remotos de Internet como cliente, se necesitará la funcionalidad Internet (cliente). Si la aplicación debe conectarse a servicios remotos de una red doméstica o del trabajo como cliente, se necesitará la funcionalidad Redes domésticas o de trabajo. Para obtener más información, consulta Cómo establecer las funcionalidades de red.

Instrucciones

Recuperación del contenido sindicado de una fuente web

Ahora revisaremos el código que demuestra cómo recuperar una fuente y luego mostraremos cada elemento en particular de la fuente. Para poder configurar y enviar la solicitud, definiremos algunas variables que usaremos durante la operación e inicializaremos una instancia de SyndicationClient, que define los métodos y las propiedades para recuperar y mostrar la fuente.

El constructor Uri inicia una excepción si la uriString que se pasó al constructor no es un URI válido. Así que validamos la uriString mediante un bloque try/catch.

var currentFeed = null;
var currentItemIndex = 0;
        
var client = new Windows.Web.Syndication.SyndicationClient();

// The URI is validated by catching exceptions thrown by the Uri constructor.
var uri = null;
try {
    uri = new Windows.Foundation.Uri(uriString);
} catch (error) {
    WinJS.log && WinJS.log("Error: Invalid URI");
    return;
}

Después, para configurar la solicitud definimos las credenciales del servidor (la propiedad serverCredential), las credenciales de proxy (la propiedad proxyCredential) y los encabezados HTTP (el método setRequestHeader) necesarios. Con los parámetros de solicitud básicos configurados, creamos un objeto Uri válido mediante una cadena de URI de fuente proporcionada por la aplicación. Después, se pasa el objeto Uri a la función retrieveFeedAsync para solicitar la fuente.

Suponiendo que se devolvió el contenido deseado de la fuente, el código itera en cada elemento, llamando a displayCurrentItem (definido a continuación), para mostrar elementos y sus contenidos en lista a través de la UI.

Debes escribir código para controlar las excepciones cuando llamas a la mayoría de los métodos de red asincrónicos. Tu controlador de excepciones puede recuperar información más detallada sobre la causa de la excepción para comprender mejor el error y tomar las decisiones adecuadas. Para obtener más información, consulta Cómo controlar excepciones en aplicaciones de red.

El método retrieveFeedAsync inicia una excepción si no se puede establecer una conexión con el servidor HTTP o si el objeto Uri no señala a una fuente AtomPub o RSS válida. El código de ejemplo usa una función onError para capturar las excepciones e imprimir información más detallada sobre la excepción, si se produce un error.

function onError(err) {
    WinJS.log && WinJS.log(err, "sample", "error");

    // Match error number with a ErrorStatus value.
    // Use Windows.Web.WebErrorStatus.getStatus() to retrieve HTTP error status codes.
    var errorStatus = Windows.Web.Syndication.SyndicationError.getStatus(err.number);
    if (errorStatus === Windows.Web.Syndication.SyndicationErrorStatus.invalidXml) {
        displayLog("An invalid XML exception was thrown. Please make sure to use a URI that points to a RSS or Atom feed.");
    }
}

// Retrieve and display feed at given feed address.
function retreiveFeed(uri) {

    // Although most HTTP servers do not require User-Agent header, 
    // others will reject the request or return a different response if this header is missing.
    // Use the setRequestHeader() method to add custom headers.
    client.setRequestHeader("User-Agent", "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)");

    client.retrieveFeedAsync(uri).done(function (feed) {
        currentFeed = feed;

        WinJS.log && WinJS.log("Feed download complete.", "sample", "status");

        var title = "(no title)";
        if (currentFeed.title) {
            title = currentFeed.title.text;
        }
        document.getElementById("CurrentFeedTitle").innerText = title;

        currentItemIndex = 0;
        if (currentFeed.items.size > 0) {
            displayCurrentItem();
        }

        // List the items.
        displayLog("Items: " + currentFeed.items.size);
     }, onError);
}

En el paso anterior, retrieveFeedAsync devolvió el contenido de la fuente solicitada y el código de ejemplo tuvo que procesar iteraciones en los elementos disponibles de la fuente. Cada uno de estos elementos se representa con un objeto SyndicationItem que contiene todo el contenido y las propiedades de los elementos contemplados en el estándar de redifusión web correspondiente (RSS o Atom). En el siguiente ejemplo, vemos la función displayCurrentItem trabajando en cada elemento y mostrando su contenido mediante elementos de UI denominados.

function displayCurrentItem() {
    var item = currentFeed.items[currentItemIndex];

    // Display item number.
    document.getElementById("Index").innerText = (currentItemIndex + 1) + " of " + currentFeed.items.size;

    // Display title.
    var title = "(no title)";
    if (item.title) {
        title = item.title.text;
    }
    document.getElementById("ItemTitle").innerText = title;

    // Display the main link.
    var link = "";
    if (item.links.size > 0) {
        link = item.links[0].uri.absoluteUri;
    }

    var link = document.getElementById("Link");
    link.innerText = link;
    link.href = link;

    // Display the body as HTML.
    var content = "(no content)";
    if (item.content) {
        content = item.content.text;
    }
    else if (item.summary) {
        content = item.summary.text;
    }
    document.getElementById("WebView").innerHTML = window.toStaticHTML(content);

Como se sugirió anteriormente, el tipo de contenido representado por un objeto SyndicationItem diferirá según el estándar de fuente (RSS o Atom) empleado para publicar la fuente. Por ejemplo, una fuente Atom puede proporcionar una lista de contributors, mientras que la fuente RSS no puede hacerlo. Sin embargo, se puede acceder a los elementos de extensión de la fuente que no sean compatibles con ninguno de los estándares (por ejemplo, elementos de extensión Dublin Core), por medio de la propiedad SyndicationItem.elementExtensions. Luego es posible mostrarlos como en el siguiente código de ejemplo:


    // displayCurrentItem function continued
    var bindableNodes = [];
    for (var i = 0; i < item.elementExtensions.size; i++) {
        var bindableNode = {
            nodeName: item.elementExtensions[i].nodeName,
             nodeNamespace: item.elementExtensions[i].nodeNamespace,
             nodeValue: item.elementExtensions[i].nodeValue,
        };
        bindableNodes.push(bindableNode);
    }

    var dataList = new WinJS.Binding.List(bindableNodes);
    var listView = document.getElementById("extensionsListView").winControl;
    WinJS.UI.setOptions(listView, {
        itemDataSource: dataList.dataSource

    });
}

Resumen y siguientes pasos

En este tema, hemos recuperado una fuente asociada con un URI suministrado y hemos mostrado el contenido de la fuente elemento por elemento.

Para conocer características más avanzadas, como agregar, editar y eliminar entradas en una fuente web, consulta Cómo administrar entradas de fuentes web.