Asynchronous Programming with Windows Runtime Component in WinJS Apps

by Kishor Bikram Oli · October 25, 2016

Let Us Tweak

In this blog, you will learn how to do asynchronous programming in WinJS application built on HTML/JS/CSS with the help of Windows Runtime Component.

As we know, WinJS applications are built using HTML/JS/CSS. However, for a complete application, we will need async operations like SQLite database operations, web-service calls, and other native XML read-write, File read-write which cannot be done directly in WinJS applications.

Firstly, we have to use Windows Runtime Component to access Native C# methods. Apart from that, I will show you how to pass a string as a parameter from our HTML page to Runtime Component and create a folder with the same name using IAsyncOperation.

Step 1:

First of all, Create Your First WinJS Windows Application.

Step 2:

We need to do following things as discussed in my previous blog. Please have a look in my previous blog:

Add a Windows Runtime Component project and name it ‘WinRuntimes’.
Delete default class ‘Class1.cs’.
Add a new class and name it ‘Service’.
Add WinRuntimes reference in WinJS project.
Build the project.

Step 3:

In Service class, we have to create IAsyncOperation with the return type string as:

public IAsyncOperation<string> CreateFolder(string folderName)

{

  return CreateFolderHelper(folderName).AsAsyncOperation();

}

# and its helper class as..

private async Task<string> CreateFolderHelper(string folderName)

        {

            try

            {

                StorageFolder folder = ApplicationData.Current.LocalFolder;

                await folder.CreateFolderAsync(folderName);

                return "success";

            }

            catch(Exception ex)

            {

                return "fail";

            }

        }

Complete code snippet in Service class..

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Windows.Foundation;

using Windows.Storage;

namespace WinRuntimes

{

    public sealed class Service

    {

        #region Asynchronous Interface Methods

        public IAsyncOperation<string> CreateFolder(string folderName)

        {

            return CreateFolderHelper(folderName).AsAsyncOperation();

        }

        #endregion

        #region Helpers

        private async Task<string> CreateFolderHelper(string folderName)

        {

            try

            {

                StorageFolder folder = ApplicationData.Current.LocalFolder;

                await folder.CreateFolderAsync(folderName);

                return "success";

            }

            catch(Exception ex)

            {

                return "fail";

            }

        }

        #endregion

    }

}

Step 4:

Add a script.js file and reference it in default.html ..

Now in default.html, let’s add two things as follows.

The input field for a folder name.
Button with click event.

Complete HTML code snippet for default.html is:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>WinJSAsync</title>

    <!-- WinJS references -->

    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />

    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>

    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- WinJSAsync references -->

    <link href="/css/default.css" rel="stylesheet" />

    <script src="/js/default.js"></script>

    <script src="js/script.js"></script>

</head>

<body>

    <p>Hello WinJS Async Operations</p>

    <input id="txtFolderName" placeholder="Enter folder name"/>

    <button onclick="createFolder()">Create Folder</button>

</body>

</html>

Step 5:

In script.js, we create a service object of Service class and call the createFolder function. Here we have used then function to achieve asynchronous programming. From the native part, we will get response either ‘success’ or ‘fail’. If ‘success’, we displayed a success message else displays a failure message:

Complete code snippet for script.js is.

var service = new WinRuntimes.Service();

function createFolder() {

    var folderName = document.getElementById("txtFolderName").value;

    service.createFolder(folderName).then(function (response) {

        if (response == "success") {

            var msg = new Windows.UI.Popups.MessageDialog("Folder created successfully.", "Success");

            msg.showAsync();

        }

        else {

            var msg = new Windows.UI.Popups.MessageDialog("Failed creating folder.", "Fail");

            msg.showAsync();

        }

    });

}

Step 6:

Run the application and enter the folder name and click Create Folder button, you will see a success message dialog.

You can see the new folder just created in, as follows.
This PC > C > Users > [Your User Name] > AppData > Local > Packages > [App package name] > LocalState.