FeedReader

RSS reader end-to-end (JavaScript) sample

Shows a basic end-to-end implementation of a news feed reader. Uses a ListView 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.

Note: This sample is part of a large collection of UWP feature samples. If you are unfamiliar with Git and GitHub, you can download the entire collection as a ZIP file, but be sure to unzip everything to access shared dependencies. For more info on working with the ZIP file, the samples collection, and GitHub, see Get the UWP samples from GitHub. For more samples, see the Samples portal on the Windows Dev Center.

Specifically, this sample covers these news reader features and Windows Runtime APIs.

• A pannable ListView 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.

• 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.

• A detail page showing the content of the article selected from the ListView or section page.

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

• 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 = ["Engadget", "Windows App Builder Blog"]; 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: 10, maxItems: 15 }); in default.js in the \js folder.

• Data structure representing the available newsfeeds, subscribed newsfeeds, and news articles.

  Sample: See data.js in the \js folder.

• Loading, formatting, and displaying of news reader data.

  Sample: Review io.js and render.js files in the \js folder.

Here are some general 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.

• 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.

• Adaptive layouts to rearrange content when the app is resized.

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

Note The Windows universal samples require Visual Studio 2017 to build and Windows 10 to execute.

To obtain information about Windows 10 development, go to the Windows Dev Center

To obtain information about Microsoft Visual Studio and the tools for developing Windows apps, go to Visual Studio

Related topics

Samples

RSS reader (XAML MVVM) end-to-end sample
Other samples
Older end-to-end sample apps

Conceptual

Adding ListView controls
[Navigation design basics]https://docs.microsoft.com/en-us/windows/uwp/layout/navigation-basics)
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

Operating system requirements

Client: Windows 10

Server: Windows Server 2016 Technical Preview

Phone: Windows 10

Build the sample

1. If you download the samples ZIP, be sure to unzip the entire archive, not just the folder with the sample you want to build.
2. Start Microsoft Visual Studio 2017 and select File > Open > Project/Solution.
3. Starting in the folder where you unzipped the samples, go to the Samples subfolder, then the subfolder for this specific sample, then the subfolder for your preferred language (C++, C#, or JavaScript). Double-click the Visual Studio Solution (.sln) file.
4. Press Ctrl+Shift+B, or select Build > Build Solution.

Run the sample

1. Open the sample's project in Visual Studio 2017.
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.

App highlights:

• 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).