Wednesday, February 12, 2014

How to create a mashup (Windows Store apps using JavaScript and HTML)

A mashup is a web application that uses data from two or more sources to create something new. This example shows you how to use XHR to retrieve and display a remote rss feed.

What you need to know

Technologies

Prerequisites

Instructions

Step 1: Obtain an RSS feed

The WinJS.xhr function uses XHR to retrieve data from a specified URL. The WinJS.xhr is asynchronous and returns aPromise for the requested data. To obtain the RSS feed, you specify a fulfilled handler for this Promise. (You can also specify an error handler and a progress handler.)
You can call the WinJS.xhr function from any page in your package (any page in the local context).
Note  Note: The target URL for an XHR request is not restricted by the app's ApplicationContentUriRules (which are listed in the app's package manifest).
This example uses WinJS.xhr to access the rss.msnbc.msn.com RSS feed. It passes two callback functions to the Promise:
  • xhrParseXml: The fulfilled handler. This function is called if the XHR request was successful.
  • xhrError: The error handler. This function is called if the request was not successful.
JavaScript
WinJS.xhr({ url: "http://rss.msnbc.msn.com/id/3032127/device/rss/rss.xml" }).then(
    xhrParseXml, xhrError
    );
You'll define the xhrParseXml and xhrError methods in the next step.

Step 2: Parse the results

If the WinJS.xhr request is successful, the code in the last example calls the xhrParseXml. The xhrParseXml function iterates through the RSS items and generates a link to each one. It displays the link in a div on the main page, xhrOutput.
JavaScript
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;
    }
}
The next example shows the HTML declaration for the output area.
HTML
<div id="xhrOutput">
</div>

Step 3: Handle errors

There's always a chance that you won't be able to access the remote data, so provide a way to handle errors processing your XHR request. This example defines a simple error handler.
JavaScript
function xhrError(result) {

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

Complete example

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

    
    <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>

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

    <div id="xhrOutput">
    </div>
</body>
</html>
JavaScript
// 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) {
            // TODO: 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();
})();
For a downloadable sample that contains more features, see the Integrating content and controls from web services sample.

Related topics

Integrating content and controls from web services sample

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)