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.

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;
  9. namespace WinRuntimes
  10. {
  11. public sealed class Service
  12. {
  13. #region Asynchronous Interface Methods
  15. public IAsyncOperation<string> CreateFolder(string folderName)
  16. {
  17. return CreateFolderHelper(folderName).AsAsyncOperation();
  18. }
  20. #endregion
  23. #region Helpers
  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. }
  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:

Complete html code snippet for default.html is:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>WinJSAsync</title>
  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>
  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();
  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: