Home > Articles > Programming > Windows Programming

  • Print
  • + Share This
This chapter is from the book

Split App Template

Further, not only does Visual Studio 2012 know about the WinRT namespaces and types, but also it has been built to know about the Windows 8 user experience style guidelines themselves. As I mentioned, the Blank App, Fixed Layout App, and Navigation App project templates all produce apps that are essentially blank, making for a good base from which to build up. However, the Grid and Split App project templates are meant to be living, breathing Windows Store apps that follow the UX guidelines to the letter, helping you make sure that you’ll build great Windows 8 apps as easily as possible.

For example, if you run the Split App project template and run the app without any changes, you’ll have an app with two pages, as shown in Figure 1.26 and Figure 1.27.

Figure 1.26

Figure 1.26. The itemsPage.html page from the Split App project template, showing groups of things

Figure 1.27

Figure 1.27. The itemsPage.html page from the Split App project template, showing a list of items

The home page shown in Figure 1.26 is meant to act as a group of things, such as teams of players, groups of people, or, as in our case, feeds of news items. The page you get when you click on one of the groups is shown in Figure 1.27. It represents a list of items in a group; for example, players in a team, people in a group, or news items from a particular feed. In short, the Split App is perfect for our RSS Reader app. The data is all static sample data hardcoded in data.js, but replacing the static data with dynamic data is a pretty easy thing to do:

// data.js
...
var list = new WinJS.Binding.List();
...
// TODO: Replace the data with your real data.
// You can add data from asynchronous sources whenever it becomes available.
//generateSampleData().forEach(function (item) {
//    list.push(item);
//});

var feeds = [
{ key:  "feed1", title:  "Brandon Satrom", subtitle:  "blog",
  backgroundImage: darkGray,
  description:  "blog",
  url:  "http://feeds.feedburner.com/userinexperience/tYGT"
},
{ key:  "feed2", title:  "Chris Sells", subtitle:  "blog",
  backgroundImage: lightGray,
  description:  "blog",
  url:  "http://sellsbrothers.com/posts/?format=rss"
},
{ key:  "feed3", title:  "Channel 9", subtitle:  "blog",
  backgroundImage: mediumGray,
  description:  "blog",
  url:  "http://channel9.msdn.com/Feeds/RSS"
}];

feeds.forEach(function (feed) {
  // download the feed
  var syn = new Windows.Web.Syndication.SyndicationClient();
  var url = new Windows.Foundation.Uri(feed.url);
  syn.retrieveFeedAsync(url).done(processPosts.bind(feed));
});

function processPosts(request) {
  var feed = this;
  request.items.forEach(function (item) {
    // create a post for each item
    var post = {
      group: feed,
      title: item.title.text,
      subtitle: item.publishedDate,
      description:  "post",
      content: toStaticHTML(item.summary.text),
      backgroundImage: feed.backgroundImage,
    };

    // let the list know about each post
    list.push(post);
  });
}
...

Toward the top of data.js is a comment that begs us to replace the use of the sample data with our real data. Here we’ve dropped in our array of feeds to iterate over, pulling in our posts asynchronously, just as we did earlier in the chapter. The code to pull in our data and matching it to the shape of the group and item data assumed in the rest of the app is all that’s required to build the complete RSS Reader built up manually throughout this chapter (and shown in Figure 1.28 and Figure 1.29).

Figure 1.28

Figure 1.28. The itemsPage.html page from the Split App project template, showing real data

Figure 1.29

Figure 1.29. The splitPage.html page from the Split App project template, showing real data

As you can see in Figure 1.29, the second page of the Split App (the splitPage page control) is fancier than what we built: It uses the CSS Grid for layout, changing the content the user is viewing on the right based on the item he chose on the left. The other major feature that the built-in Split and Grid App project templates have is support for view state changes as the user moves between landscape, portrait, filled, and snapped modes. Figure 1.30 shows our shiny new RSS Reader in snapped mode (which you can get to most easily by pressing Win+period).

Figure 1.30

Figure 1.30. The snapped mode support built into the Split App project template

You can read all about the view states in Chapter 3, “Layout.”

  • + Share This
  • 🔖 Save To Your Account