Reading WinRT component embedded resource file in windows 8 store javascript app

A WinRT component can used to include some common code along with embedded resources that can be reused in store app irrespective of language in which it is developed like C#, JavaScript etc.
In this article, I’ll explain how to read a WinRT component embedded resource file from JavaScript app. App reads content from embedded resource and replace your page content with new content.

1. Create a WinRT component

1. Create a new windows store apps class library or WinRT component say with name ‘ExampleLib’.
WinRT component

2. If it is a class library, open its properties and change output to WinRT component.

Class library settings

3. Add a text file say ‘Data.txt’ in the project root folder with some text and change to embedded resource from its properties.

Embedded resource

4. Add a new C# code file ResHelper.cs in the project root folder and add the following code in that

using System;
using System;
using System.IO;
using System.Reflection;
using System.Threading.Tasks;
using Windows.Foundation;

namespace ExampleLib
{
    public  sealed class ResHelper
    {
       static async Task<string> ReadResourceAsync(Assembly assembly, string resource)
        {
            string xml;
            using (var stream = assembly.GetManifestResourceStream(resource))
            {
                    using (var reader = new StreamReader(stream))
                    {
                        xml = await reader.ReadToEndAsync();
                    }
            }
            return xml;
        }
        public static IAsyncOperation GetConfiguration(string fileName)
        {
            return (ReadResourceAsync(typeof(ResHelper).GetTypeInfo().Assembly, fileName)).AsAsyncOperation();
        }

    }
}

}

2. Create a windows store app in javascript

1. Create a new windows store app under language javascript (blank app is fine)
2. Add reference to ExampleLib
3. Open default.js and add the following code in activated.

args.setPromise(WinJS.UI.processAll().then(function () {

//call getConfiguration method with fully qualified
//file name (including dll name, folder path if any and file name)
ExampleLib.ResHelper.getConfiguration("ExampleLib.Data.txt")
.done(function (result) {
document.body.innerText = result;
}, function (err) {
document.body.innerText = err;
});

}));

Complete solution looks like as below

Projects

All done, deploy and run the app, now you’ll see embedded resource content as your main page content. Try with invalid file name; you’ll see an error message

you can download solution from here ExampleApp

Windows 8 store apps using async and await

Using async and await in windows 8 store apps bit tricky sometimes. Here I’m listing below some of the do’s and don’ts when working with async and await.

1) Always use void type for  top level async method. Don’t use return type Task for top level async method i,e. the method called by some app handler  for example click, onnavigatedfrom, onloaded etc.  This may not be same for console apps, where the top level method should always return Task in order to put wait instruction from Main method. Using same Task.Wait() in store apps blocks the UI thread and enters into deadlock.

   void Page_Loaded(object sender, RoutedEventArgs e)
        {
              TopLevelMethod();
	}
  
public static async void TopLevelMethod()
{
     var response = await PostAsync(url, content);
}

Without any top level async method

 async void Button1_Click( object sender, RoutedEventArgs e)
{
 var response = await PostAsync(url, content);
}

2) To update UI before and/or after async operation, include update code in the async method but not in its caller for example showing/hiding progress ring or some alert after receiving response etc.

3) If your top level async method is called by timer event or some other scheduler  event and it is accessing any UI related stuff, then use Dispatcher.RunAsync to run that method uses same thread context.

Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, TopLevelMethod);

4)  Utilize features of newly introduced simplified HttpClient class for all asynchronous get and post methods. You can use httpwebrequest async methods but same can be achieved with lesser code using HttpClient.

HttpClient

Example using httpclient post async (fewer lines )

    
public static async Task PostAsync(string url, string postContent)
        {
            using (var httpClient = new HttpClient())
            {
                var httpContent = new StringContent(postContent, Encoding.UTF8, "text/xml");

                using (var response = await httpClient.PostAsync(url, httpContent))
                {
                    response.EnsureSuccessStatusCode();

                    string content = await response.Content.ReadAsStringAsync();

                    return content;
                }
            }
        }

5)  Use always async and await for all anything that reads/writes from/to media(disk i/o etc.).

Example:

 
var file = await Package.Current.InstalledLocation.GetFileAsync("Data\\Groups.txt");
var result = await  FileIO.ReadTextAsync(file);
var xml = await reader.ReadToEndAsync()

Windows 8 store apps

I love these store apps. The most interesting and promising feature is integration of html, css technologies as well as support for .Net languages like C# etc.

Windows 8 store apps are nothing but those acquired from Windows store and are different from desktop applications. All the store apps runs in a restricted app container.

Html/Jscript based apps mainly aimed at jscript/html developers. These apps uses WinJS toolkit and WinRT(windows run time). WinJS toolkit provides JS classes, helpers, patterns, html implementation of controls etc where as WinRT javascript api provides api to access platform features.

Windows 8 provides WinRT api to access platform core features like networking, storage, media, graphics etc. This api can be accessed from Javascript, C#, C++ and VB.

Example

Windows.ApplicationModel

Windows.UI

I’m a web developer and is flexible with html/jscript, xaml/c# apps. I choose xaml/c# if advanced functionality and behaviour are required in my app. Html/jscript apps are simple and quick to develop(you just need a html and jscript files).