Try It Yourself: Customizing the Split App Project

Let’s create an RSS reader application that pulls down all the posts for a single RSS feed:

1. Create a new Split App project and call it RSSReader.

2. Open default.html and change the home page to this:

data-win-options="{home: '/pages/split/split.html'}"

3. Delete the items folder and all its contents from the pages folder. We won’t be needing the items folder because we are going to connect to only a single RSS feed and display the posts in the split view we just set to the home page.

4. Open the /js/data.js file. We need to find where the Data namespace is defined and remove the last three items (and their corresponding functions). We are whittling down the needed functions that our RSS Reader app will actually use. The new definition should now match:

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

5. Open the /spit/spit.js file. Because we removed resolveGroupReference, we need to change the declaration of this._group in the ready function as follows:

this._group = Data.groups.getAt(0);

6. When we run the app, we should see the split page loaded with "Group Title: 1". Each item that replaced the contents on the right side of the pane can be selected. This simulates each RSS post and the actual selected post contents.

7. Now we can remove the sample data and hook up the RSS feed we want. However, before we actually hook up the RSS feed, let’s remove the excess sample data. To start, we replace the sampleGroups variable and assignment with the following feeds variable and assignment (of only a single feed):

var feeds = [
    {
        key: "group1", title: "Group Title: 1", subtitle: "Group Subtitle: 1",
        backgroundImage: darkGray, description: groupDescription
    }
];

8. We simply renamed the variable and removed all but the first group. We can do the same thing with sampleItems. Let’s replace that variable declaration and assignment with the following code:

var feedPosts = [
    {
        group: feeds[0], title: "Item Title: 1",
        subtitle: "Item Subtitle: 1", description: itemDescription,
        content: itemContent, backgroundImage: lightGray
    },
    {
        group: feeds[0], title: "Item Title: 2",
        subtitle: "Item Subtitle: 2", description: itemDescription,
        content: itemContent, backgroundImage: darkGray
    }

];

9. To save space in the book, we removed items 3–5 for the first group. Instead of having the generateSampleData function return sampleItems, we need to return feedPosts:

return feedPosts;

10. Rename the function generateSampleData to getFeedPosts.

11. Replace the code where generateSampleData was called to the following code:

feedPosts.forEach(function (item) {
    list.push(item);
});

12. We should still be able to run the app, with must less data and with variables that are named closer to what we will be storing. We are still using the sample data, but we have renamed the variables and removed all but the first post placeholder data.

Try It Yourself: Connecting to an RSS Feed

We can create code to connect to an RSS feed and obtain the items from the feed:

1. Let’s start pulling in real data. To begin, let’s replace the single object in the feeds array with this:

key: " http://blogs.msdn.com/b/windowsappdev/rss.aspx",
title: "Windows 8 app dev"

2. We are going to grab all posts from the Windows 8 app developer blog. We actually want to dynamically load the posts in the feed, so let’s replace the feedPosts declaration with this:

var feedPosts = [];

3. Next, we remove the following unneeded code:

var list = new WinJS.Binding.List();
var groupedItems = list.createGrouped(
    function groupKeySelector(item) { return item.group.key; },
    function groupDataSelector(item) { return item.group; }
);

getFeedPosts().forEach(function (item) {
    list.push(item);
});

4. We can now add empty objects for those two variables:

var list = {};
var groupedItems = {};

5. We can replace the entire getFeedPosts function with the following code:

var feeds = [
    {
        key: " http://blogs.msdn.com/b/windowsappdev/rss.aspx",
        title: "Windows 8 app dev"
    }
];

var feedPosts = [];

6. Now that we have removed the sample data and how it is created, we need to populate the feedPosts list with the actual items. To start, we need a way to connect to the RSS feed. Let’s create the following getFeed function:

function getFeed(url) {
    // Call xhr for the URL to get results asynchronously
    return WinJS.xhr({ url: url });
}

7. This simply calls the WinJS xhr function, which just wraps the standard XMLHttpRequest call in a JavaScript promise. We discuss WinJS.xhr in detail during the next section, “Digging into WinJS.xhr.” There we cover the different options xhr takes (besides the mandatory url property).

8. Next, we need to turn the resulting XML we get from the feed into JavaScript objects we can work with. We can add the getItemsFromXml function next:

function getItemsFromXml(articleSyndication, feed) {
    // Get the info for each feed post
    var rssPosts = articleSyndication.querySelectorAll("item");
    var atomPosts = articleSyndication.querySelectorAll("entry");

    var posts;
    if (rssPosts.length > 0)
        posts = rssPosts;
    else
        posts = atomPosts;

    // Process each feed post
    for (var postIndex = 0; postIndex < posts.length; postIndex++) {
        var post = posts[postIndex];

        var link = post.querySelector(
            "feed > link[rel=alternate]") || post.querySelector("link");
        var postLink = link.textContent;
        for (var a = 0; a < link.attributes.length; a++)
            if (link.attributes[a].nodeName === "href")
                postLink = link.attributes[a].value

        // Get the title, author and date published
        var postTitle = post.querySelector("title").textContent;
        var author = post.querySelector(
            "author > name") || post.querySelector("author")
            || post.querySelector("creator");
        if (!author) {
            author = {};
            author.textContext = "";
        }
        var postAuthor = author.textContent;
        var published = post.querySelector("published")
            || post.querySelector("pubDate");

        var postPublished = published.textContent;

        var p = postPublished;
        //fix up any dates that include hour offset (negative)
        p = p.substring(0, p.indexOf("+") > 0 ? p.indexOf("+") : p.length);
        p = p.substring(0, p.indexOf("-") > 0 ? p.indexOf("-") : p.length);
        if (p.length > 5)
            postPublished = p;

        var postDate = new Date(postPublished);

        var content = post.querySelector("content")
            || post.querySelector("description");

        // Process the content so it displays nicely
        var staticContent = toStaticHTML(content.textContent);

        // Store the post info we care about in the array
        feedPosts.push({
            group: feed,
            key: feed.key,
            link: postLink,
            title: postTitle,
            author: postAuthor,
            postDate: postDate,
            content: staticContent
        });
    }

    return posts.length;
}

9. This is the core code to turn the XML content we received into a group of articles. Although this code isn’t extremely robust, it does try to account for both RSS and Atom feeds. It checks to see if item is present in the XML document. If so, it assumes it is a RSS document; otherwise, it assumes it to be an Atom document. The code then does similar logic to obtain the permalink (postLink) and author and content. The || sets the variable to the first value if something is present; if nothing is present, it sets the variable to the second value. The post title uses the same XML element for both RSS and Atom format, so it is simply set to the title element.

The date the post was published tries to take into account different formats so that the JavaScript Date object can be used. If a date has a +7:00 or -5:00 in the date (related to time zones), the code strips off that part. However, if it has 2012-08-01, the code leaves it intact. Finally, the content is pulled out. However, because we don’t know how safe the content it contains is, but we do want to keep any markup it does contain, we pass it to the toStaticHTML function.

Finally, we add all the variables we just set to a new feedPost item and push it into the feedPosts array. The feedPost object also includes the actual feed URL (key) and title of the feed that is stored on each post. This enables us to do grouping, as we discussed during Hour 10, “Binding Data to Our Apps.” We also return the number of posts, but we don’t actually use that information in this example.

10. The last change to the JavaScript file that we need to make is to call the previous functions so that ListView has the updated posts to display. Let’s add the following code:

function refreshFeeds() {

    return getFeed(feeds[0].key)
            .then(function (request) {

                return getItemsFromXml(request.responseXML, feeds[0]);

            }).then(function (numberOfPosts) {
                // Now feedPosts is fully populated ...

                list = new WinJS.Binding.List(feedPosts);

                groupedItems = list.createGrouped(
                    function groupKeySelector(item) { return item.group.key; },
                    function groupDataSelector(item) { return item.group; }
                );

                Data.items = groupedItems;
                Data.groups = groupedItems.groups;
            });
};

11. The first thing we do inside refreshFeeds is call the getFeed function we set up. Because we have only a single feed in this example, we just passed in the first (only) item in the feeds array. After that, the actual request that contains the XML document is returned to the promise. At this point, the getItemsFromXml is called and creates the array of posts for the feed. When the last promise is kicked off, we bind the array of feedPosts to a WinJS.Binding.List and then create a grouping from that list (based off group key). We then set the Data.items and Data.groups properties to the newly generated data.

12. We need to call this newly created refreshFeeds method to kick off all this code we wrote. We have a couple of options. One is to kick it off here and, when it gets all the data, refresh the split page’s list view with the updated feed information. To do that, we need to add code to the end of refreshFeeds to reference the ListView control and set the group and item data source to the Data.items and Data.groups we just set. Then we need to call the Split page’s ready event so the entire page would be refreshed.

13. Instead of going that route, we expect the data to load within the 15-second window we have in which to load our app before Windows shuts it down. We thus simply make sure we have the data before we actually navigate to the split page. Inside the default.js page, we need to add the call into the promise chain:

args.setPromise(WinJS.UI.processAll().then(function () {
    return Data.refreshFeeds();
}).then(function () {
    if (nav.location) {
        nav.history.current.initialPlaceholder = true;
        return nav.navigate(nav.location, nav.state);
    } else {
        return nav.navigate(Application.navigator.home);
    }
}));

14. We had refreshFeeds return a promise because the next promise won’t get kicked off until this one is done. We are effectively blocking the app from loading the home page (Split) until we retrieve the data. This might not be desirable in most apps, though. If the feed can’t be brought down within the 15-second window while Windows displays the splash screen, Windows terminates the app. In addition, the app fails certification if it doesn’t load the screen in 5 seconds. A better approach is to load static data first and bring in the dynamic data later. We explore how to do this when we build out the RSS Aggregator app during Hour 19.

15. For the default.js code to see the refreshFeeds function we created, we need to return it when we define the Data namespace in data.js. Let’s modify the namespace definition as follows:

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

Try It Yourself: Wrapping Up the RSS Reader App

We need to modify the templates and the style sheet to get the data to look the way we want:

1. We need to modify the WinJS style sheet to be ui-light.css instead of ui-dark.css on the split.html page.

2. We need to get rid of the pictures on the list, so we modify our style by removing the first column (value 110px) from the -ms-grid-columns property in the CSS rule of the split.css file on line 40:

.splitpage .itemlistsection .itemlist .item

3. We also remove the property -ms-grid-column (with value of 2) from the CSS rule:

.splitpage .itemlistsection .itemlist .item .item-info

4. Next, we fix up the itemtemplate. We replace the existing template inside split.html with the following code, which removes the image and binds the content to the innerHTML of the description. The following code also replaces the subtitle with two elements for author and postDate:

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <div class="item">
        <div class="item-info">
            <h3 class="item-title win-type-ellipsis"
                data-win-bind="textContent: title"></h3>
            <h6 class="item-subtitle win-type-ellipsis"
                data-win-bind="textContent: author"></h6>
            <h6 class="item-subtitle win-type-ellipsis"
                data-win-bind="textContent: postDate"></h6>
            <h4 class="item-description"
                data-win-bind="innerHTML: content"></h4>
        </div>
    </div>
</div>

5. We replace the header element under the articlesection div with the following code:

<header class="header">
    <div class="text">
        <h2 class="article-title win-type-ellipsis"
            data-win-bind="textContent: title"></h2>
        <h4 class="article-subtitle"
            data-win-bind="textContent: author"></h4>
        <h6 class="article-subtitle win-type-ellipsis"
                data-win-bind="textContent: postDate"></h6>
    </div>
</header>

6. We need to replace the following two CSS Rules inside split.css:

.splitpage .articlesection header {
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 80px;
    display: -ms-grid;
    margin-bottom: 5px;
    margin-top: 60px;
}

.splitpage .articlesection header .text {
    -ms-grid-column: 1;
}

7. We style the h6 tags so that they will be inline by adding the following CSS rule:

.splitpage h6 {
    display: inline;
}

8. In case the content has images in it, we can scale them down and float them to the left so that the image doesn’t take up the entire item entry:

.item-description img {
    width: 64px;
    height: 64px;
    float: left;
    margin-right: 8px;
}