Feed reader sample

Article
08/31/2015

The Feed reader sample sample demonstrates a basic end-to-end Windows Store app implementation of a news feed reader. It uses a hub navigation pattern to organize and display articles from various subscriptions specified in a JSON-formatted data file. The data is obtained over a network connection or from a local cache.

The following video shows how to use the sample app and highlights the code that provides most of the functionality.

Key features

The Feed reader sample app includes these news reader features and Windows Store app APIs.

A pannable hub page showing the subscribed news feeds and up to 15 articles per subscription.

Sample: Look at the news.css, news.html, and news.js files in the \pages\news\ folder.

Hub - all subscriptions
A section page showing all available articles in the selected subscription.

Sample: See feed.css, feed.html, and feed.js files in the \pages\feed\ folder.

Section - single subscription
A detail page showing the content of the article selected from the hub or section page.

Sample: Examine article.css, article.html, and article.js files in the \pages\article\ folder.

Detail - subscription article
A subscription page showing all available news feeds. Users can subscribe to a news feed by selecting it.

Sample:
- Look at the subscriptions.css, subscriptions.html, and subscriptions.js files in the \pages\subscriptions\ folder and the feedCollection.json file in the Project folder.
- For default subscriptions, see var defaultSubscriptions = ["AutoBlog", "Engadget"]; in io.js in the \js folder.
- Maximum subscriptions and articles are specified by // Constants defining limits of the ListView. WinJS.Namespace.define("ListViewLimits", { subLimit: 20, maxItems: 15 }); in default.js in the \js folder.
Subscriptions
Data structure representing the available newsfeeds, subscribed newsfeeds, and news articles.

Sample: Look at the _updateConnectionInfo() function of default.js and the _downloadArticlesAsync() function of data.js in the \js folder.
Formatting and rendering of news feed data.

Sample: Look at the render.js file in the \js folder.
Feeds retrieved from local cache based on the data transfer limitations set by the carrier. Using the cache helps protect the user from accumulating monetary charges if they're on a metered network.

Sample: See data.js in the \js folder.
Loading and saving news feed data.

Sample: Review the saveSelectionIndicesAsync and loadFeedCollectionAsync functions in io.js in the \js folder.

Here are some general Windows Store app features demonstrated by this app.

Splash screen on start up.

Sample: Check SplashScreen in the package.appxmanifest file in the Project folder and splashscreen.png in the \images folder.
Single page architecture.

Sample: Inspect the <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/news/news.html'}"></div> element in default.html, and navigator.js in the \js folder.
App bar with Refresh command and Nav bar with a link to a Subscriptions page.

Sample: Examine the <div id="appbar" data-win-control="WinJS.UI.AppBar"> node in default.html.

App bar and Nav bar
Semantic Zoom to view the subscribed news feeds or individual articles for the selected news feed.

Sample: View the <div id="articlesListViewArea" data-win-control="WinJS.UI.SemanticZoom"> and <div id="articlesListView-out" aria-label="List of feeds" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none', tapBehavior: 'invokeOnly', swipeBehavior: 'none' }"> nodes in news.html and the initializeLayout function in news.js, both of which are in the \pages\news folder.

Semantic Zoom - zoomed in, showing individual articles grouped by subscription

Semantic Zoom - zoomed out, showing subscriptions
Layouts that rearrange content when the app is resized.

Sample: Review article.css in the \pages\article folder and feed.css in the \pages\feed folder.

Feed reading

Open the sample's project in Microsoft Visual Studio 2013.
To debug the app and then run it, press F5 or use Debug > Start Debugging. To run the app without debugging, press Ctrl+F5 or use Debug > Start Without Debugging.
When the app starts for the first time, the main page displays two default feed subscriptions with articles.
Use Semantic Zoom to switch between subscription views. Zoom out by pinching (click the Minus button in the lower right corner with the mouse, Ctrl+Minus key with a keyboard) and zoom in by stretching (click a subscription with the mouse, Ctrl+Plus key with a keyboard).
Swipe from the top edge of the display (or right-click with a mouse, Windows Logo Key+Z or menu key with a keyboard) to display the Nav bar and the App bar.
Use the Refresh command on the App bar to sync the subscriptions.
Use the Subscriptions page link on the Nav bar to view the Subscriptions page. Select feeds to subscribe to and display on the main page. Tap Done when finished.
Use Semantic Zoom to switch between feed views on the Subscriptions page. Zoom out by pinching (click the Minus button in the lower right corner with the mouse, Ctrl+Minus key with a keyboard) and zoom in by stretching (click a feed with the mouse, Ctrl+Plus key with a keyboard).