Wednesday, January 16, 2013

Windows 8 RSS Reader Continued

All I added to the template provided by Visual Studio is here : In the HTML document, I did very little except add a ListView, and a WinJS Binding Template for items in the list. I added an Article element for the Blog entry detail pane. The code was added to the existing JS file provided as below :
    // To get the data from the website
                getFeeds(blogPosts, null); 

    // To expose the data to the page.
                var publicMembers =
                    { blogItems: blogPosts };

                WinJS.Namespace.define("DataRSS", publicMembers);

   // To finish setting up the page for view
    args.setPromise(
                WinJS.UI.processAll()
                .done(function () {

   // Add event handlers for the controls
                    var button1 = document.getElementById("bttnMore");
                    button1.addEventListener("click", buttonMoreClick, false);


                   var myList = document.getElementById("myRSSItems");
                   myList.addEventListener("selectionchanged", _selectionChanged);
                }));

Then there is specific acquire and data parsing code for the blogs. First get the data, saving the most recent post date into a variable:
function getFeeds(blogs, after) {

    // To Get more items need to login.
    // // http://www.google.ca/reader/atom/feed/http://forums.corvetteforum.com/external.php?type=RSS2&n=50

    var urlString =
        "http://forums.corvetteforum.com/external.php?type=RSS2";

    var today = new Date();

    today.setDate(today.getDate() - 1);

    var dataPromise = acquireSyndication(urlString, today.toLocaleString());
    
    dataPromise.done(
        function completed(articlesResponse) {

            var lastDate = null;

            lastDate = getPostsAfter(articlesResponse, blogs, after);

            var lastToday = new Date(lastDate);

            // populate a SPAN on the page with the recent date.
            spLastPub.innerText = lastToday.toLocaleString();
        });

}

The RSS feed won't give but the most recent 15 items unless you login to Google
function getPostsAfter(xmlDoc, blogs, afterDate) {

    var articleSyndication = xmlDoc.responseXML;

    if (afterDate != null) {
        var aftDate = new Date(afterDate);
    }

    var posts = articleSyndication.querySelectorAll("item");

    var lastPublished = null;

    for (var postIndex = 0; postIndex < posts.length; postIndex++) {
        // debugger;

        var postTitle = posts[postIndex].querySelector("title").textContent;
        var postLink = posts[postIndex].querySelector("link").textContent;
        var description = posts[postIndex].querySelector("description").textContent;
        var published = posts[postIndex].querySelector("pubDate").textContent;
        var contentEncoded = posts[postIndex].querySelector("encoded").textContent;

        if (postIndex == 0) {
            lastPublished = published;
        }

        var compareDate = new Date(published);

        if (afterDate == null ||
            compareDate > aftDate) {
            blogs.push({
                title: postTitle,
                subtitle: postLink,
                desc: description,
                pubDate: published,
                content: contentEncoded
            });
        }

    }

    return lastPublished;
}
The function for acquiring the feed asynchronously was generously provided in the tutorial, so I used it verbatim :
function acquireSyndication(url, modified) {

    return WinJS.xhr(
        {
            url: url,
            headers: { "If-Modified-Since": modified }
        });

}
The only way to get full coverage of the blog without the login overhead, was to provide a button which would update the list with any new entries since the original opening of the page :
 function buttonMoreClick(arg) {

        getFeeds(blogPosts, spLastPub.innerText);
    }
The Microsoft article is here - http://msdn.microsoft.com/en-us/library/windows/apps/jj663506.aspx

No comments: