(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:

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

4. 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);

5. 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;
   }

6. 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:

1. Right-click on Solution Explorer and go to Add | New Project.
2. Expand JavaScript from the left pane, and choose Blank App.
3. Name the project as ConsumeWinRTCalculator.
4. Right-click on ConsumeWinRTCalculator and set it as Startup Project .
5. 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.

   3. Select WinRTCalculator from the center pane and then click on the OK button.

6. 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" >

7. Open the default.css style file from 5725OT_08_CodeWinRTCalculatorConsumeWinRTCalculatorcss default.css and copy-paste the styles to your default.css style file.
8. 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;
   }
   }

9. Now press the F5 key to run the application.
10. 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.

Summary

In this article, we learned how to reate a WinRT component and call it from JavaScript.

Resources for Article :

Further resources on this subject:

• Installation and basic features of EnterpriseDB [Article]
• Editing DataGrids with Popup Windows in Flex [Article]
• Monitoring Windows with Zabbix 1.8 [Article]