Post
Ask Question

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:

  1. public IAsyncOperation<string> CreateFolder(string folderName)  
  2. {  
  3.    return CreateFolderHelper(folderName).AsAsyncOperation();  
  4. }  

And its helper class as:

  1. private async Task<string> CreateFolderHelper(string folderName)  
  2. {  
  3.   try  
  4.   {  
  5.     StorageFolder folder = ApplicationData.Current.LocalFolder;  
  6.     await folder.CreateFolderAsync(folderName);  
  7.     return "success";  
  8.   }  
  9.   catch (Exception ex)  
  10.   {  
  11.     return "fail";  
  12.    }  
  13.  }  

Complete code snippet for Service class is: 

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6. using Windows.Foundation;  
  7. using Windows.Storage;  
  8.   
  9. namespace WinRuntimes  
  10. {  
  11.     public sealed class Service  
  12.     {  
  13.         #region Asynchronous Interface Methods  
  14.   
  15.         public IAsyncOperation<string> CreateFolder(string folderName)  
  16.         {  
  17.             return CreateFolderHelper(folderName).AsAsyncOperation();  
  18.         }  
  19.  
  20.         #endregion  
  21.  
  22.  
  23.         #region Helpers  
  24.   
  25.         private async Task<string> CreateFolderHelper(string folderName)  
  26.         {  
  27.             try  
  28.             {  
  29.                 StorageFolder folder = ApplicationData.Current.LocalFolder;  
  30.                 await folder.CreateFolderAsync(folderName);  
  31.                 return "success";  
  32.             }  
  33.             catch (Exception ex)  
  34.             {  
  35.                 return "fail";  
  36.             }  
  37.         }  
  38.  
  39.         #endregion  
  40.     }  
  41. }  

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:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>WinJSAsync</title>  
  6.   
  7.     <!-- WinJS references -->  
  8.     <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />  
  9.     <script src="//Microsoft.WinJS.2.0/js/base.js"></script>  
  10.     <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>  
  11.   
  12.     <!-- WinJSAsync references -->  
  13.     <link href="/css/default.css" rel="stylesheet" />  
  14.     <script src="/js/default.js"></script>  
  15.     <script src="js/script.js"></script>  
  16. </head>  
  17. <body>  
  18.     <p>Hello WinJS Async Operations</p>  
  19.     <input id="txtFolderName" placeholder="Enter folder name"/>  
  20.     <button onclick="createFolder()">Create Folder</button>  
  21. </body>  
  22. </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:

  1. var service = new WinRuntimes.Service();  
  2.   
  3. function createFolder() {  
  4.     var folderName = document.getElementById("txtFolderName").value;  
  5.     service.createFolder(folderName).then(function (response) {  
  6.         if (response == "success") {  
  7.             var msg = new Windows.UI.Popups.MessageDialog("Folder created successfully.", "Success");  
  8.             msg.showAsync();  
  9.         }  
  10.         else {  
  11.             var msg = new Windows.UI.Popups.MessageDialog("Failed creating folder.", "Fail");  
  12.             msg.showAsync();  
  13.         }  
  14.     });  
  15. }  

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:


Similar Articles