Using Windows Runtime Component with Cordova Project

In the CTP3.0 version of Visual Studio Tools for Apache Cordova there is no way to directly reference a WinRT component in the project.

This blog post describe a workaround if you want or need to reference a WinRT component in your project.

1)      Create your Cordova App project

Using “Tools for Apache Cordova CTP3.0”, create a new project. Then manually add a plugins directory in your project, in this directory create another folder called “com.microsoft.nativewwafeatures.library.refs”.

Inside this directory add a file called plugin.xml with similar content as below:

<?xmlversion="1.0"encoding="UTF-8"?>

<pluginxmlns="http://apache.org/cordova/ns/plugins/1.0"

        xmlns:android="http://schemas.android.com/apk/res/android"

        id="com.microsoft.nativewwafeatures.library.refs"

        version="0.0.4">

    <name>All library references go here</name>

    <platformname="windows8">

      <frameworksrc="src/windows8/WindowsRuntimeComponent1.winmd"custom="true"/>

    </platform>

</plugin>

Nb. The src folder will be added later.

2)      Add C# Windows Runtime Component Project to your Solution

Right clik on the solution in the Solution Explorer -> add a new project

In this new project define the Class1 as this:

namespace WindowsRuntimeComponent1

{

    publicsealedclassClass1

    {

        publicstaticstring GetAnswer()

        {

            return"The answer is 42 !";

        }

        publicint SampleProperty { get; set; }

    }

Open your solution property pages

Add the following as Output path, in the build tab:

..\PortableClassLibraryExample\plugins\com.microsoft.nativewwafeatures.library.refs\src\windows8\

Don’t forget to specify in the Project Dependencies to check your WinRT component as a dependency for your Cordova Project. (Right click on the solution in Solution Explorer)

3) Complete the test code

You are ready now to test the application, but first you need to call the component!

Add two buttons in your index.html file

<divid="buttons">

    <buttononclick="basics1();">Basics 1</button>

    <buttononclick="basics2();">Basics 2</button>

</div>

And for example add this code in the click events:

<script>

        function basics1() {

            document.getElementById('output').innerHTML =

                WindowsRuntimeComponent1.Class1.getAnswer();

            ex = new WindowsRuntimeComponent1.Class1();

            document.getElementById('output').innerHTML += "<br/>" +

                ex.sampleProperty;

        }

        function basics2() {

            ex.sampleProperty += 1;

            document.getElementById('output').innerHTML += "<br/>" +

                ex.sampleProperty;

        }

</script>

ð   Be careful, any changes in the WinRT component need a clean build to take effect in the Cordova project.

We hope this article will help you. We are interested in your feedback.

Ali Satter – Program Manager

Eric Mittelette – Technical Evangelist, Microsoft Open Technologies, Inc.