Feed reader sample

Applies to Windows only

This Windows Store app sample demonstrates a basic end-to-end 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 page of the news reader app

    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 page of the news reader app

    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 (article) page of the news reader app

    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.
    Subscription page of the news reader app

    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 of the news reader app

    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.

    App bar and nav bar of the news reader app

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

    App bar and nav bar of the news reader app

    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

  1. Open the sample's project in Microsoft Visual Studio 2013.
  2. 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.
  3. When the app starts for the first time, the main page displays two default feed subscriptions with articles.
  4. 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).
  5. 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.
  6. Use the Refresh command on the App bar to sync the subscriptions.
  7. 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.
  8. 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).

Related topics

Samples
Feed reader sample
Conceptual
Adding ListView controls
Navigation design for Windows Store apps
Connecting to networks and web services (JavaScript)
Developing connected applications
Tasks
Quickstart: Adding a splash screen
Quickstart: Using single-page navigation
Quickstart: adding an app bar with commands
Quickstart: adding a SemanticZoom
Quickstart: Defining app layouts
Reference (feeds)
JSON Object
Uri
SyndicationClient
NetworkInformation
ReadTextAsync
readText
Reference (general)
WinJS.Application Namespace
WinJS.Class Namespace
WinJS.Utilities Namespace
WinJS.Namespace Namespace
WinJS.Navigation Namespace
Windows.ApplicationModel.Activation Namespace
WinJS.Binding Namespace
WinJS.Promise
ListView
Template
SemanticZoom

 

 

Show:
© 2014 Microsoft