Building WinRT components to be consumed from any language (Become an expert)

Exclusive offer: get 50% off this eBook here
Instant Windows 8 C++ Application Development How-to [Instant]

Instant Windows 8 C++ Application Development How-to [Instant] — Save 50%

Discover how to create Windows 8 Store apps using C++ and XAML in no time! with this book and ebook

$12.99    $6.50
by Taruna Verma | May 2013 | Microsoft

In this article by Taruna Verma, the author of the book, Instant Windows 8 C++ Application Development How-to, we will learn to create a WinRT component and call it from JavaScript.

Windows Runtime or WinRT is an application architecture on Windows 8 that supports development in C++/CX, C#, VB.NET, as well as JavaScript.

A WinRT component is a DLL and is designed to be called from any WinRT-compliant language, such as C++, C#, VB.NET, and Javascript.

In case your C++ component uses a third-party library or you want to re-use some of your code written in C# or VB.NET, you can wrap all the functionality in a WinRT component and refer it from JavaScript or any other language of your choice.

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

  7. Open the default.css style file from 5725OT_08_Code\WinRTCalculator\ConsumeWinRTCalculator\css\ 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:


Instant Windows 8 C++ Application Development How-to [Instant] Discover how to create Windows 8 Store apps using C++ and XAML in no time! with this book and ebook
Published: April 2013
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


Taruna Verma

Taruna Verma has performed many challenging roles in various positions, gathering a healthy mix of strong technological orientation to solve business problems, over the past ten and half years or so.

Taruna owns and runs a company called Tarav Technologies Private Limited, based out of Bangalore, India, to provide Microsoft-based development and IT training. Prior to starting her own consulting services, she worked in Siemens Medical Systems, Microsoft R&D, SAP Labs, and Yokogawa Engineering, Singapore. She has many satisfied customers, including Fortune 500 companies, startup companies, and government organizations. Besides her love for different technologies, Taruna has also conducted numerous training sessions in different software firms globally.

Taruna enjoys writing stories, poems, blogging, travelling, and watching movies. Her professional profile is available at http://www.linkedin.com/in/tarunaverma.

Books From Packt


Visual Studio 2012 Cookbook
Visual Studio 2012 Cookbook

Microsoft Visual C++ Windows Applications by Example
Microsoft Visual C++ Windows Applications by Example

Cinder Creative Coding Cookbook
Cinder Creative Coding Cookbook

 Mastering Windows 8 C++ App Development
Mastering Windows 8 C++ App Development

Appcelerator Titanium Application Development by Example Beginner's Guide
Appcelerator Titanium Application Development by Example Beginner's Guide

 Windows Server 2012 Automation with PowerShell Cookbook
Windows Server 2012 Automation with PowerShell Cookbook

 Windows Phone 7.5 Application Development with F#
Windows Phone 7.5 Application Development with F#

PhoneGap Mobile Application Development Cookbook
PhoneGap Mobile Application Development Cookbook


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
x
s
f
u
F
C
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software