Windows 8 Grid application data.js sample to get data asynchronously from multiple sources

by sunil ravulapalli /20. March 2012 19:58 /windows8 /Comments (0)

This code was tested on Windows 8 consumer preview and may be outdated by the time future versions are released.

(function () {
    "use strict";

    var lightGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY7h4+cp/AAhpA3h+ANDKAAAAAElFTkSuQmCC";
    var mediumGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY5g8dcZ/AAY/AsAlWFQ+AAAAAElFTkSuQmCC";
    var darkGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY3B0cPoPAANMAcOba1BlAAAAAElFTkSuQmCC";

    var groups = [
        { key: "group1", title: "Featured products", subtitle: "Featured", backgroundImage: lightGray, description: "Bedding products" },
        { key: "group2", title: "Towel", subtitle: "Featured", backgroundImage: lightGray, description: "Towel products" },
        { key: "group3", title: "Knife", subtitle: "Featured", backgroundImage: lightGray, description: "Knife products" }
    ];

    function groupKeySelector(item) {
        return item.group.key;
    }

    function groupDataSelector(item) {
        return item.group;
    }

    function getItemsFromGroup(group) {
        return list.createFiltered(function (item) { return item.group.key === group.key; });
    }

    var list = new WinJS.Binding.List();
    var groupedItems = list.createGrouped(groupKeySelector, groupDataSelector);

    function downloadError() {

    }

    function processProducts(requests) {

        for (var i = 0; i < requests.length; i++) {
            var xml = requests[i].responseXML;
            var records = xml.selectNodes("//SearchRecord");

            for (var postIndex = 0; postIndex < records.length; postIndex++) {
                var record = records[postIndex];

                var description = record.selectSingleNode("description").text;
                var priceRange = record.selectSingleNode("priceRange").text;
                var itemImage = record.selectSingleNode("itemImage").text.replace("/130/", "/230/");
                var sku = record.selectSingleNode("sku").text;
                var collection = record.selectSingleNode("collection").text;

                list.push({
                    group: groups[i],
                    title: description,
                    subtitle: priceRange,
                    description: description,
                    itemDescription: description,
                    content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
                    backgroundImage: itemImage
                });
            }
        }
    }

    var dataPromises = [];

    var promise1 = WinJS.xhr({ url: "http://www.samplesite.com/search/searchservice.asmx/Search?searchString=bedding&from=0&blockSize=10" });
    dataPromises.push(promise1);

    var promise2 = WinJS.xhr({ url: "http://www.samplesite.com/search/searchservice.asmx/Search?searchString=towel&from=0&blockSize=6" });
    dataPromises.push(promise2);

    var promise3 = WinJS.xhr({ url: "http://www.samplesite.com/search/searchservice.asmx/Search?searchString=knife&from=0&blockSize=6" });
    dataPromises.push(promise3);

    WinJS.Promise.join(dataPromises).then(processProducts, downloadError);

    WinJS.Namespace.define("data", {
        items: groupedItems,
        groups: groupedItems.groups,
        getItemsFromGroup: getItemsFromGroup
    });
})();

blog comments powered by Disqus