Access a Web service using the Hub template (Windows 8.1)

Visual Studio 2013 Preview includes a new project template for Windows 8.1 apps, the Hub App project template. Out of the box, the Hub template demonstrates an implementation of a hierarchical navigation pattern for Windows Store apps. To populate <img> elements, ListView controls, and text elements in the UI, the template uses two data models: (1) static sample data used to populate ListView controls (in data.js), and (2) static string resources to support globalization, which are stored in .resjson files. Declarative functions in the HTML obtain the sample data from data.js. To make the declarative functions work with asynchronous data requires some code modifications.

The Hub template sample app (JavaScript only, at present) demonstrates how to customize the data model in the Hub template to support asynchronous data (the app grabs images and text from a public Web service).

Here's a few other things that the sample app shows:

  • How to implement data binding for the template's <img> elements and ListView controls.

  • How to handle user-initiated requests for new data.

  • How to process JSON data obtained from a Web service.

  • How to add a progress indicator.

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. The grouping of data is for demonstration purposes, and is somewhat arbitrary (the first five images are used for Hub template <img> elements, the rest are used ListView controls), but this can be easily modified to support data that is inherently group-based.

Note: Because the globalized string resources can be easily replaced, the sample app leaves these strings unmodified.

Link:

Hub template sample with asynchronous data