Welcome to the Blend team blog.  This post is about creating a WWA (Windows Web Application) hybrid app with C++ and C#.  With this type of Blend project, it is possible to have JavaScript code use functions and libraries from both C++ and C#.  This post will walk you through how to create a basic hybrid app with both C# and C++.

Getting started: Create a New WWA app

The first thing you need to do is launch Blend for Visual Studio 11 Beta and create a new HTML app.

1. Choose File > New Project and select HTML (Windows Metro Style) in the left pane.
2. In the right pane, select the default template Blank Application.
3. To follow along with this post, name your project WwaHybridProject.

Add a C# project to the solution

At this point you will see Blend open with a mostly blank art board, with just the text “Content goes here.”  We are now going to add the C# project to this solution.

1. Open the Projects pane in Blend and right-click your solution.  It will be labeled Solution: ‘WwaHybridProject’.
2. From the context menu, select Add New Project… The window that opens will look identical to the one that was used to create the WWA project.
3. Select XAML (Windows Metro style) in the left pane, and select Class Library in the right pane.  Make sure that the Language drop down is set to Visual C#.
4. Name this project CsharpLibrary.  The default view is now updated to be an empty C# class file.  Also, in the project pane, this new project will be displayed.

Add a C++ project to the solution

You will follow nearly the same steps to add a C++ project to this solution.

1. Open the Projects pane in Blend and right-click your solution.  It will be labeled Solution: ‘WwaHybridProject’.
2. From the context menu, select Add New Project… .
3. Select XAML (Windows Metro style) from the left hand pane.  This time, in the right hand pane, select WinRT Component DLL.  Make sure the Language drop down is set to Visual C++.
4. Name this project CPlusPlusLibrary.  Again, the default view will be updated to display the empty C++ class file, and the project pane will now display all three projects.

Add the C# and C++ References to your WWA app

Now it is time to add the project references so that the WWA application can use code from the C# and C++ libraries that were just created.  This is done in Visual Studio.

1. Right click your solution in the Projects pane and select Edit in Visual Studio from the context menu.  It will be labeled Solution: ‘WwaHybridProject’.
2. After Visual Studio finishes loading the project, make sure the “Solution Explorer” panel is visible and that the three projects inside the solution are all displayed.

Configure C# projects to generate WinMD files

By default, C++ projects automatically output the WinMD (Windows Meta Data) files that JavaScript needs for the project references.  C# projects, however, need to be configured to do this.

1. In Visual Studio’s Solution Explorer, right click the CsharpLibrary project and select Properties from the context menu.  This will bring up tabs to set the project’s properties.
2. On the Application tab, update the Output type of the project to WinMD File.
3. After doing this, select File > Save All.  Then you can close the CsharpLibrary Properties tab.

Set up project references

Even though the projects are in the same solution, they do not reference each other by default.  Now that C# is correctly outputting WinMD files, the project references can be added.

1. In Visual Studio’s Solution Explorer, right click the WwaHybridProject and select Add Reference… from the context menu.  Make sure you are selecting the project itself, not the overall solution.
2. The type of reference to be added is Solution, so select that from the tabs on the left.
3. In the middle pane both the C# and the C++ projects will now be displayed.  Check the box next to both projects in the first column and then click Ok to close the window.

4. After doing this, select File > Save All.  Then you can close Visual Studio.
5. Blend will prompt asking if the projects should be reloaded since they have been updated outside of Blend.  Select Yes for all of these prompts.
6. To make sure the projects linked up correctly, go to the Projects pane under the WwaHybridProject  and expand  References.   In this list, there should be a reference to both CSharpLibrary and CplusPlusLibrary.

Update the code

Next we will update the C#, C++, and JavaScript code.

Update the C# project

First, we will update the C# project.

1. The default name for the class that was created, Class1.cs is not very descriptive.  Right click that file in the Project pane and rename it to RedClass.cs.
2. Open this file by double-clicking it and update the class name to RedClass.
3. In addition to changing the class name, it is necessary to update the class as “sealed” so that it can be exported.  The final class declaration statement will look like this:

public sealed class RedClass

4. In order to make sure our reference is working, we need to add a method to the class that will be called by the JavaScript code.  This method will return a string, the color that one of the html elements will turn.  After updating the class with the method, save the file and close it.  Here is the method to add:

public string GetRed()
{
    return “red”;
}

Update the C++ project

The C++ default class name of WinRTComponent.cpp is just as non-descriptive as the C#’s default class name.

1. Rename both the header file and the cpp file in the C++ project to GreenClass.h and GreenClass.cpp respectively.
2. Open the GreenClass.cpp file and update all instances of WinRTComponent to GreenClass.
3. Then add the method to return “Green.”  Here is the method to add:

Platform::String^ GreenClass::GetGreen()
{
    return “green”;
}

4. After adding the method, we need to update the header file with the new method.  Don’t forget to update the references to “ WinRTComponent” to “GreenClass” as well.  The public declaration section of the file should now look like this:

public:
    GreenClass();
    Platform::String^ GetGreen();

Build the updated project

After adding all of this code to the C# and C++ projects, it’s best to make sure everything builds correctly.

1. Under the Project menu in Blend, select Build Project.
2. Before moving on from this point, make sure to resolve any build errors that are displayed.

Update the HTML and JavaScript to use the C# and C++ methods

The HTML and JavaScript code now need to be updated to use the methods that we have just created in the C# and C++ code.  First the HTML will be updated.

Update the HTML

1. Open the default.html file from the Projects pane by double clicking on it.
2. Then switch to either Split view or Code view so the markup of the page is visible.
3. Replace the existing content of the <body> tag with two <div> tags, assigning one the id top and the other the id bottom.
4. Then update the code so each <div> fills up half the screen.  The content of the <div> tags can also be changed to show which tag is being set by which code.  Here is the final result:

<body>
    <div id=”top” style=”height: 50%;”>This is a Red box set by C#.</div>
    <div id=”bottom” style=”height: 50%;”>This is Green box set by C++.</div>
</body>

Update the JavaScript

Almost done!  The JavaScript code needs to be finished so it calls the two projects.

1. In the Projects pane, expand the js folder under the WwaHybridProject and open default.js.  This code should be run as soon as the application loads, so it is put in the onactivated method.
2. The code to add is noted in inline comments below.  It first creates an instance of the CsharpLibrary project’s RedClass then uses a JavaScript document query to find the tag to update.  The background-color property of the tag’s style object is updated to the color “Red” which is returned from the C# code.  After that, an identical process is used for the C++ code.

app.onactivated = function (eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        if (eventObject.detail.previousExecutionState
!==     Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
        // TODO: This application has been newly launched. Initialize
        // your application here.
        } else {
        // TODO: This application has been reactivated from suspension.
        // Restore application state here.
        }
        WinJS.UI.processAll();
 
 
//THIS IS THE CODE  YOU NEED TO ADD
        var top = new CsharpLibrary.RedClass();
        document.querySelector(“#top”).style.backgroundColor = top.getRed();
 
        var bottom = CplusPlusLibrary.GreenClass();
        document.querySelector(“#bottom”).style.backgroundColor = bottom.getGreen();
//END OF CODE YOU NEED TO ADD
 
    }
};

Test the project

It’s time to test the project.

1. Select Projects > Run Project.  If everything worked out as planned, the display will show two large rectangles, the top of which is red, and the bottom of which is green.  JavaScript code using C# and C++ code. Wow.

That’s it for this blog post.  In this blog was a walkthrough on how to create a WWA project that uses code from C# and C++.  This was obviously a very trivial example, but by following this example, many more interesting WWA projects can be created that leverage code from C# and C++.  Now go start writing some great WWA Windows 8 apps with native JavaScript code!

Steven Yackel
Software Developer in Test, Blend