(For more resources related to this topic, see here.)

Getting ready

Please refer to the WinRTCalculator project for the full working code to create a WinRT component and consume it in Javascript.

How to do it...

Perform the following steps to create a WinRT component and consume it in Javascript:

Launch Visual Studio 2012 and create a new project.
Expand Visual C++ from the left pane and then select the node for Windows Store apps.
Select the Windows Runtime component and then name the project as WinRTCalculator.

Open Class1.h and add the following method declarations:

double ComputeAddition(double num1, double num2);
double ComputeSubstraction(double num1, double num2);
double ComputeMultiplication(double num1, double num2);
double ComputeDivision(double num1, double num2);

Open Class1.cpp and add the following method implementations:

double Class1::ComputeAddition(double num1, double num2)
{
return num1+num2;
}
double Class1::ComputeSubstraction(double num1, double num2)
{
if(num1>num2)
return num1-num2;
else return num2-num1;
}
double Class1::ComputeMultiplication(double num1, double num2)
{
return num1*num2;
}
double Class1::ComputeDivision(double num1, double num2)
{
if (num2 !=0)
{
return num1/num2;
}
else return 0;
}

Now save the project and build it.

Now we need to create a Javascript project where the preceding WinRTCalculator component will be consumed. To create the Javascript project, follow these steps:

Right-click on Solution Explorer and go to Add | New Project.
Expand JavaScript from the left pane, and choose Blank App.
Name the project as ConsumeWinRTCalculator.
Right-click on ConsumeWinRTCalculator and set it as Startup Project .
Add a project reference to WinRTCalculator, as follows:
1. Right-click on the ConsumeWinRTCalculator project and choose Add Reference.
2. Go to Solution | Projects from the left pane of the References Manager dialog box.
  
  Unlock access to the largest independent learning library in Tech for FREE!
  
  Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.
  
  Renews at ₹800/month. Cancel anytime
3. Select WinRTCalculator from the center pane and then click on the OK button.

Open the default.html file and add the following HTML code in the body:

<p>Calculator from javascript</p>
<div id="inputDiv">
<br /><br />
<span id="inputNum1Div">Input Number - 1 : </span>
<input id="num1" />
<br /><br />
<span id="inputNum2Div">Input Number - 2 : </span>
<input id="num2" />
<br /><br />
<p id="status"></p>
</div>
<br /><br />
<div id="addButtonDiv">
<button id="addButton" onclick=
"AdditionButton_Click()">Addition of Two Numbers
</button>
</div>
<div id="addResultDiv">
<p id="addResult"></p>
</div>
<br /><br />
<div id="subButtonDiv">
<button id=
"subButton" onclick="SubsctractionButton_Click()">
Substraction of two numbers</button>
</div>
<div id="subResultDiv">
<p id="subResult"></p>
</div>
<br /><br />
<div id="mulButtonDiv">
<button id=
"mulButton" onclick="MultiplicationButton_Click()">
Multiplcation of two numbers</button>
</div>
<div id="mulResultDiv">
<p id="mulResult"></p>
</div>
<br /><br />
<div id="divButtonDiv">
<button id=
"divButton" onclick="DivisionButton_Click()">
Division of two numbers</button>
</div>
<div id="divResultDiv">
<p id="divResult"></p>
</div>

Open the default.css style file from 5725OT_08_CodeWinRTCalculatorConsumeWinRTCalculatorcss default.css and copy-paste the styles to your default.css style file.

Add JavaScript event handlers that will call the WinRTCalculator component DLL. Add the following code at the end of the default.js file:

var nativeObject = new WinRTCalculator.Class1();
function AdditionButton_Click() {
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
if (num1 == '' || num2 == '') {
document.getElementById('status').innerHTML =
'Enter input numbers to continue';
}
else {
var result = nativeObject.computeAddition(num1, num2);
document.getElementById('status').innerHTML = '';
document.getElementById('addResult').innerHTML =
result;
}
}
function SubsctractionButton_Click() {
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
if (num1 == '' || num2 == '') {
document.getElementById('status').innerHTML =
'Enter input numbers to continue';
}
else {
var result = nativeObject.computeSubstraction
(num1, num2);
document.getElementById('status').innerHTML = '';
document.getElementById('subResult').innerHTML =
result;
}
}
function MultiplicationButton_Click() {
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
if (num1 == '' || num2 == '') {
document.getElementById('status').innerHTML =
'Enter input numbers to continue';
}
else {
var result = nativeObject.computeMultiplication
(num1, num2);
document.getElementById('status').innerHTML = '';
document.getElementById('mulResult').innerHTML =
result;
}
}

Now press the F5 key to run the application.
Enter the two numbers and click on the Addition of Two Numbers button or on any of the shown buttons to display the computation.

How it works...

The Class1.h and Class1.cpp files have a public ref class. It's an Activatable class that JavaScript can create by using a new expression. JavaScript activates the C++ class Class1 and then calls its methods and the returned values are populated to the HTML Div.

There's more...

While debugging a JavaScript project that has a reference to a WinRT component DLL, the debugger is set to enable either stepping through the script or through the component native code. To change this setting, right-click on the JavaScript project and go to Properties | Debugging | Debugger Type.

If a C++ Windows Runtime component project is removed from a solution, the corresponding project reference from the JavaScript project must also be removed manually.