This chapter is from the book
This chapter is from the book
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. The itemsPage.html page from the Split App project template, showing groups of things
)
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...varlist =newWinJS.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);//});varfeeds = [ { 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 feedvarsyn =newWindows.Web.Syndication.SyndicationClient();varurl =newWindows.Foundation.Uri(feed.url); syn.retrieveFeedAsync(url).done(processPosts.bind(feed)); });functionprocessPosts(request) {varfeed =this; request.items.forEach(function(item) {// create a post for each itemvarpost = { 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 postlist.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. The itemsPage.html page from the Split App project template, showing real data
)
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).
){kind=link}
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.”