Windows Store Apps Using HTML5–Asynchronous Data Template Functions

April 28, 2015 // By Caleb McElrath

By embracing the power and flexibility of JavaScript, a developer can create data templates that adapt to changing data structures and criteria by using data template functions. This was described in part two of this series. Taking the concept of data template functions a step further, part three will discuss asynchronous data template functions. By combining the power of JavaScript and the asynchronous capabilities provided by WinRT, apps can be created that perform well under heavy data usage.

In the following sections, each topic will be described along with code snippets and screen captures of the resultant display. For a more interactive experience, please download the usable solution available at the end of this article. This solution contains a functional version of the code snippets provided. Please note the solution will only work in a Windows 8 development environment.

Asynchronous Data Template Functions

The nature of Windows Store apps is asynchronous. To follow along with this asynchronous nature (as Windows Store app developers should), this article will detail asynchronous template functions. Asynchronous template functions provide enhanced usability by allowing a user to interact with the app during information retrieval while keeping the user aware of incoming information. This is essential in providing the user with an optimal experience.

The common components of data templates will be explained in the following sections beginning with the markup.

The Markup

All that is needed in markup for this scenario is a WinJS.UI.ListView control. This is shown below.

<div id="listView" data-win-control="WinJS.UI.ListView"></div>

With the ListView control, the collection of data can be presented in a common format that is easy for a user to interpret. The data source for this ListView control is described in the next section.

The Data Source

This scenario needs multiple data objects. A new WinJS.Binding.List object is created with multiple entries representing a few of Magenic’s “Portfolio” items as they were at the time of this writing.

var portfolio = new WinJS.Binding.List( [
  {type: "Case Studies", details: "Payment Solution Organization" },
  {type: "White Papers", details: "SQL 2012: Bringing \"Big Data\" to the Desktop" },
  {type: "Videos", details: "Choosing a Development Partner" }
] );
WinJS.Namespace.define( "Data", {
  Portfolio: portfolio,
} );

A bindable portfolio object is created with the given collection of data objects as its items. A namespace is then created to provide access to the object in the form of Data.Portfolio.

The markup and data source have been created. The last component is the binding mechanism. The next section will explore in detail the necessary code needed to complete this data-binding scenario.

The Binding

The binding process for asynchronous data template functions is quite similar to average data template functions. The main difference lies with the returned value of the function. The below code snippet shows the implementation of an asynchronous template function.

var listView = element.querySelector( ".win-listview" ).winControl;
listView.itemDataSource = Data.Portfolio.dataSource;
listView.itemTemplate = function ( itemPromise ) {
    //<div class="box list-item">
    // <h3 class="column-one row-one" data-win-bind="innerText: type;"></h3>
    // <em class="column-one row-two space" data-win-bind="innerText: details;"></em>
    //</div>
    //create elements
    var container = document.createElement( "div" );
    var heading = document.createElement( "h3" );
    var details = document.createElement( "div" );
    //add classes for styling
    WinJS.Utilities.addClass( container, "box list-item" );
    WinJS.Utilities.addClass( heading, "column-one row-one" );
    WinJS.Utilities.addClass( details, "column-one row-two space" );
    //assign default content while data is loading
    heading.innerText = "Please Wait";
    details.innerText = "Loading....";
    //add elements to parent element
    container.appendChild( heading );
    container.appendChild( details );
    return {
        element: container,
        renderComplete: itemPromise.then( function ( dataItem ) {
            //use timeout to mock long-running data retrieval
            return WinJS.Promise.timeout( 2000 ).then( function () {
                //get item data
                var data = dataItem.data;
                //get elements to populate
                var heading = container.querySelector( "h3" );
                var details = container.querySelector( "div" );
                //set HTML/Text to data values
                heading.innerText = data.type;
                details.innerText = data.details;
            } );
        } )
    };
};
- See more at: http:

Like the average template function, the ListView control is retrieved, the data source set, and the data template is created and filled. For asynchronous data template functions, there is a bit of a twist. The main difference is that the function returns an object containing a reference to the root element of the created template and a Promise object. This can be seen below:

return {
    element: container,
    renderComplete: itemPromise.then( function ( dataItem ) {
        //use timeout to mock long-running data retrieval
        return WinJS.Promise.timeout( 2000 ).then( function () {
            //get item data
            var data = dataItem.data;
            //get elements to populate
            var heading = container.querySelector( "h3" );
            var details = container.querySelector( "div" );
            //set HTML/Text to data values
            heading.innerText = data.type;
            details.innerText = data.details;
        } );
    } )
};

- See more at: http:

The data template function is still dependent on the itemPromise parameter but it uses it in a different way. Breaking down the above code snippet, the return value is an object. The first member of this object is the template element. This element is the container previously created to contain the various elements of the data template. The next member of the returned object is the “renderComplete” Promise as shown below.

renderComplete: itemPromise.then( function ( dataItem ) { - See more at: http:

Again, like simple template functions, the itemPromise’s “then” method is used to obtain the data item. Within this method a timeout Promise is used to simulate long-running data retrieval.

return WinJS.Promise.timeout( 2000 ).then( function () { - See more at: http:

The timeout is created and then the data is stored locally. This local data variable is used to populate the template elements of the container created previously.

var data = dataItem.data;
var heading = container.querySelector( "h3" );
var details = container.querySelector( "div" );
heading.innerText = data.type;
details.innerText = data.details;
- See more at: http:

Notice that the container is not returned directly. This is because the return object contains the container as the “element” member.

The necessary components of the asynchronous template function have been created. The next section will describe the output when running the app.

The Outcome

With all the pieces in place, running the app would produce results similar to what is shown in the figures below depending on the chosen styling and ListView settings.

Figure 1 – Styled outcome while retrieving data

Figure 1 shows the “waiting” state of the ListView items. When creating the container and template elements, default data was set. This data is shown to keep the user informed that meaningful information is still being retrieved.

Once the data has been retrieved, the renderComplete promise is used to update the list item with the up to date information. This can be seen in Figure 2 below.

Figure 2 – Styled outcome of using asynchronous data template functions

The final results do not appear to be any different than average usage of a ListView but by embracing the asynchronous nature of Windows 8 and Windows Store app development, the performance of the app has been greatly improved.

Conclusion

User experience needs to be the number one priority when developing Windows Store apps. A part of this experience is giving the user the most up to date information and reacting to change quickly to keep the user informed and therefore, engaged. Using the power of JavaScript and asynchronous data template functions, Windows Store apps can be developed to allow greater performance. By taking this into account when designing Windows Store apps, the app will have the potential for a very powerful and performant presentation layer capable of keeping the attention of its intended audience.

Download the source code

Categories // Custom Application Development
Tags // Asynchronous Data Template Functions, HTML5, Windows 8, Windows Store Apps