Asynchronous Programming In WinJS Applications With Windows Runtime Component

As we know, WinJS applications are built using HTML/JS/CSS. But 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.

So we have to use Windows Runtime Component to access Native C# methods as discussed in my previous blog: WinJS application with Windows Runtime Component to access Native C# Code.

Please go through these links.

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:

Firstly, create a WinJS project as discussed in my previous blog: Create your first WinJS application

Step 2:

We need to do the following things as discussed in my previous article.

Add a Windows Runtime Component project and nameit ‘WinRuntimes’.
Delete default class ‘Class1.cs’.
Add a new class and name it ‘Service’.
Add WinRuntimesreference 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 for Service class is:

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, lets add two things:

Input field for 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>
<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>
<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 display 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 folder name and click Create Folder button, you will get a success message dialog.

You can see the new folder just created in this directory:

This PC, C, Users, [Your User Name], AppData, Local, Packages > [App package name] > LocalState,

Read more articles on Universal Windows App:

12 Comments

Join the conversation! Your thoughts help the community grow.

Vignesh Mani10y ago
Good one
- Kishor Bikram Oli10y ago
  Thank you sir!
Rahul Kumar Saxena10y ago
Good Show
- Kishor Bikram Oli10y ago
  Thank you sir!
Sr Karthiga10y ago
good one
- Kishor Bikram Oli10y ago
  Thank you sir!
Sr Karthiga10y ago
Nice explanation
- Kishor Bikram Oli10y ago
  Thank you sir!
Kuppurasu Nagaraj10y ago
Nice..
- Kishor Bikram Oli10y ago
  Thank you sir!
Debasis Saha10y ago
Good...
- Kishor Bikram Oli10y ago
  Thank you sir!