Introduction

This sample demonstrates how to create a Windows Store 8.1 Preview app using Visual Studio's Hub project template to retrieve data asynchronously.


Here's a few things that you'll learn:

The app retrieves public photos and data available on Flickr using the Flickr public Web feed. You can replace this easily with another JSON, RSS, or Atom feed.

Out of the box, the Hub template demonstrates an implementation of a hierarchical navigation pattern for Windows Store apps. By default, Visual Studio's Hub project template connects to sample data in data.js, which represents the data model. In the Hub template, the data model is synchronous and depends on declarative functions in the HTML; the sample app updates the data model to work with asynchronous data. For more info on the data model, see Adding data to a project template.

Note: The Hub project template also demonstrates how to use globalized synchronous data stored in .resjson resource files. Because this data is easily replaced, the sample app leaves these resource files unmodified.

To obtain an evaluation copy of Windows 8.1 Preview, go to Windows 8 .

To obtain an evaluation copy of Microsoft Visual Studio 2013 Preview, go to Visual Studio 2013
Preview
.

Updates, March 2014

After testing the app recently using the JavaScript Memory Analyzer (http://msdn.microsoft.com/en-us/library/windows/apps/jj819176.aspx) we found a memory leak. This version of the app has the memory leak fixed. The fix involved adding code that disconnects a filtered list from it's underlying WinJS.Binding.List, which you need to call when you navigate away from the page. Here's the new code (in hub.js):

        unload: function () {
            this._items.dispose();
            this._imgItems.dispose();
        },

Operating System Requirements

Prerequisites

Before you can create a Windows Store app for
your Windows 8.1 devices, you need tools
such as Visual Studio. Once you have installed the required tools you must
obtain a developer license.

Building the Sample

 

  1. Start Visual Studio 2013 Preview and select File > Open > Project/Solution.
  2. Go to the directory in which you unzipped the sample. Go to the directory named for the sample, and double-click the Visual Studio Express 2013 Preview solution (.sln) file.
  3. Press F7 or use Build > Build Solution to build the sample.

Running the Sample    

 

  1. 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.
  2. Type search terms (tags) into the input box and press Enter.

    Note: The app makes an initial request using the default keyword, "ocean".