Data Structures class using Windows 8 and WinRT with JavaScript an introduction

imageTeaser overview:

Arrays are usually the first data structure that we encounter.  They are linear in nature and are easy to implement.

So how do you implement them in WinRT and then show them in JavaScript?

First you should build and make sure you have the project I discussed on the blog:

https://blogs.msdn.com/b/devschool/archive/2012/08/13/using-winrt-with-xaml-c.aspx

Once you have that working, then you can add another project, this time add an HTML5/JavaScript app.

Adding the HTML5/JavaScript app to your solution

image

image

Change the name to something interesting like: ConsumingWinRTinJavascript

Click Ok

Set the JavaScript app as the starting app

Make sure to set the JavaScript app as start up or you will start up the XAML/C# and then it will be C#(<*&@($>@!

image

Add the HTML 5 code

In the default.html cut the <body> tags and paste the following:

 <body>
     <p>WinRT example</p>
     <br />
     <div id="mycontent"></div>
 </body>

Add the JavaScript code

Now switch to the JavaScript component, default.js:

image

Provided you used the same names as I did then you could cut and paste the following otherwise you will need to modify the namespace and class names (in this case that is the Calculator as the namespace and CalculatorRT as the class name, “add” is the method name in the WinRT, [ok, it is really “Add” but Visual Studio modified it]).

app.onactivated = function (args) {

        if (args.detail.kind === activation.ActivationKind.launch) {

            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

                // TODO: This application has been newly launched. Initialize

                // your application here.

                //********** add the code below, the add method in            *********

                //********** WinRT is automatically changed from camel casing *********

                var calc = new Calculator.CalculatorRT; 
                document.getElementById("mycontent").innerText = calc.add(100, 200);

                //********** End of the code additions                        *********

            } else {

                // TODO: This application has been reactivated from suspension.

                // Restore application state here.

            }

            args.setPromise(WinJS.UI.processAll());

        }

    };

//**********************End of code paste ************************************************

Run Your Code:

Run your code you should see the number 300 up in the right part of the screen when you run the code.

 

Conclusion:

 

So there you have the complete use of WinRT with JavaScript without any explanations (which are all over the place) and it might be confusing to you as to why you would use it.  Well more to follow.

Also, this may appear similar to the video on //Build and it is, except that it has been updated to work with most recent release of Visual Studio and Windows 8.  Next we will have to use WinRT to see how to generate random numbers for your HTML5/JavaScript game.