This Windows Store app sample demonstrates a basic end-to-end implementation of a news feed reader.It 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.
Specifically, this sample covers these news reader features and Windows Store app APIs.
This app includes these news reader features and Windows Store app 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 Windows Store app features demonstrated by this app.
-
Splash screen on start up.
Sample: Check
SplashScreenin 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 2015 to build and Windows 10 to execute.
To obtain information about Windows 10, go to Windows 10
To obtain information about Microsoft Visual Studio 2015 and the tools for developing Windows apps, go to Visual Studio 2015
Samples
Conceptual
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)
Reference (general)
Windows.ApplicationModel.Activation Namespace
Client: Windows 10
Server: Windows Server 2016 Technical Preview
Phone: Windows 10
- If you download the samples ZIP, be sure to unzip the entire archive, not just the folder with the sample you want to build.
- Start Microsoft Visual Studio 2015 and select File > Open > Project/Solution.
- 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 2015 Solution (.sln) file.
- Press Ctrl+Shift+B, or select Build > Build Solution.
- Open the sample's project in Visual Studio 2015.
- 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).