Category Archives: CodeProject

Can you use Windows 8 WinRT API from .NET Desktop applications?

Over the course of time I received a number of comments on my blog in this area. Many questions were asked like “Can you use WinRT from Desktop applications?”, “Can you use WinRT from .NET applications?”, etc..

Well, the answer is YES. It is possible to use WinRT from Desktop applications. WinRT APIs may be tied to Metro style apps, Desktop apps or potentially available to both. The documentation will list which environments (Desktop, Metro style or both) a given API works in.

Note: Custom WinRT components are only supported in Metro style applications. They are not supported in Desktop applications.

For ex, WinRT has an API for Accelerometer. The Accelerometer class represents an accelerometer sensor which returns G-force values with respect to the x, y, and z axes.

Namespace: Windows.Devices.Sensors namespace
Class: Accelerometer

If we open the API documentation at http://msdn.microsoft.com/en-us/library/windows/apps/windows.devices.sensors.accelerometer.aspx, see the section Applies to: Metro style apps | desktop apps. Which means this class works in Metro Apps as well as desktop apps.

image

Figure 1: MSDN documentation showing WinRT API and it’s applies to section.

Team Foundation Server 2012 RC – Install & Configure

In this post, we will walk through the process of Installing & Configuring Team Foundation Server (TFS)2012 on a Windows 8 machine that has Visual Studio 2012.

If you are using TFS 2010 for the Scrum Process , see the blog post @ http://kishore1021.wordpress.com/2010/08/02/scrum-process-for-software-development-using-microsoft-visual-studio-scrum-1-0-process-template/ to configure TFS for Software Development using Microsoft Visual Studio Scrum 1.0 Process Template.

Following are the steps to Install & Configure Team Foundation Server 2012.

1. Download TFS by clicking on Install Team Foundation Server RC at http://www.microsoft.com/visualstudio/11/en-us/downloads#tfs-group. If you are a MSDN subscriber, go to Subscriber Downloads and search for Visual Studio Team Foundation Server 2012. Click on the Download button next to Visual Studio Team Foundation Server 2012 RC (x86 and x64) – DVD (English) as shown in Fig 1.

image

Figure 1: Visual Studio Team Foundation Server 2012 RC (x86 and x64) – DVD

This will download the ISO file to the download folder on the machine and the file name is en_visual_studio_team_foundation_server_2012_rc_x86_x64_dvd_865710

Note: System Requirements for Team Foundation Server : http://msdn.microsoft.com/en-us/library/tfs/dd578592(v=vs.110)

2. Right Click on en_visual_studio_team_foundation_server_2012_rc_x86_x64_dvd_865710 and click Mount as shown in Fig 2.

image

Figure 2: Mounting the VS TFS ISO File in Windows 8.

3. Click on the tfs_server.exe file to begin the installation as shown in Fig 3.image

Figure 3: TFS 2012 Installation files mounted on Windows 8.

4. This launches the Team Foundation Server Setup as shown in Fig 4.image

Figure 4: Team Foundation Server Setup Wizard

5. In the Team Foundation Server Configuration tool, choose Basic, click on Start Wizard as shown in figure 5.image

Figure 5: Team Foundation Server Configuration Center

Note: If you want to install Team Foundation Server with the least amount of preliminary work, use the basic configuration, which comes with SQL Server Express. This way, the installation wizard configures everything for you. With the basic configuration of Team Foundation Server, you can track bugs, tasks, and other work items. You can put files under version control, and use Team Web Access to log and resolve bugs. However, you will not be able to configure reporting or SharePoint with the basic configuration.

If you want to install Team Foundation Server on a single server with reporting and a team portal, use the standard configuration, which makes installation much simpler. With the standard configuration, you first install SQL Server and the report server, but Team Foundation Server can install SharePoint Foundation 2010 for you.

6. The Basic Configuration wizard appears as shown in Fig 6. Read the Welcome screen, and then choose Next.

image    Fig 6: Team Foundation Server Basic Configuration wizard

7. Team Foundation Server requires SQL Server, but you have many options, including an option to let Team Foundation Server install SQL Server Express for you. Perform one of the following actions:

  • Choose Install SQL Server Express to host the configuration database on an instance of SQL Server Express, and then choose Next.

  • Choose Use an existing SQL Server Instance to host the configuration database on an existing instance of SQL Server, and choose Next. Then, in SQL Server Instance, type the name of the server that is running SQL Server or the named instance that will host the configuration database, and choose Next. Choose Test to test the connectivity to SQL Server.

I selected Choose Install SQL Server Express as shown in Fig 7. Review the information, and then choose Next.

image

Figure 7: Install SQL Server Express selection

8. The wizard validates your configuration as shown in Figure 8. Click Next

image

Figure 8: Validation of TFS configuration

8.1. The validation failed on my machine as shown in Fig 8.1. The good things about this wizard is that it also mentions the reason for validation failure. In my case, I just needed a system restart because I installed some updates earlier that needed a system restart.

image

Figure 8.1: Validation failure

8.2. Restart the system and open the Team Foundation Server Administration Console from the start menu or to open the administration console at a command prompt, Type TFSMgmt.exe, and then press ENTER. The Team Foundation Server Administration Console appears as shown in Fig 8.2. Click on Configure Installed features

image

Figure 8.2: Team Foundation Server Administration Console

9. Click on Next as shown in Fig 9

image

Figure 9: Readiness Checks.

10. Click on Next as shown in Fig 10.

image

Figure 10: TFS Configuration Progress.

11. Click on Close as shown in Fig 11 and Restart the system.

image

Figure 11: Installation status review.

12. Finally, the Team Foundation Server Administration Console appears as shown in Fig 12.

image

Figure 12: Team Foundation Administration Console after successful setup and configuration.

Getting Started With Windows 8 Release Preview & Development Using Visual Studio 2012

I upgraded my machine from Windows 8 Developer preview to Release preview and here is my experience.

Downloaded the Windows 8 Release Preview from http://windows.microsoft.com/en-US/windows-8/release-preview.

(You can find ISO files at http://windows.microsoft.com/en-US/windows-8/iso.)

Once you downloaded the file, run it and windows 8 installation will kick in. The setup installed Windows 8 release preview preview on top of Windows 8 developer preview and I ended up having two OS on my system. During startup, I now have two OS to choose from, which is not what I wanted. So I used the Reset feature in Windows 8 and it cleaned all the drives and removed all the old Operating systems. I now have just one Windows 8 release preview on my machine. I really loved the Reset feature in Windows 8.

photo

Fig 1: Screenshot of Upgrade agent

photo

Fig 2: Personalize option during Windows 8 installation

Once I had the Windows 8 Release Preview installed and working, downloaded the VS 2012 to start development using the new OS. This will install the VS 2012 along with the Blend for Visual Studio.

Download the Visual Studio 2012 RC:

http://www.microsoft.com/visualstudio/11/en-us/downloads#professional

Once you install VS 2012 RC, get a  developer license for Windows 8 by opening the visual studio. The following figure shows the developer license dialog.

developer license

Next, downloaded the tools & sdk needed for the development.

Download the Tools & SDK:

http://msdn.microsoft.com/en-us/windows/apps/br229516

Hands-on-labs, presentations, samples and resources from the Windows 8 camps at  Windows 8 Camp in a box.

 

Following are some of the useful links to get started with the Windows 8 development.

Internals (Deep dive) of Metro Application calling WinRT Component DLL

We have created a C++ XAML application that consumes the WinRT C++ DLL in part 1

we have seen the compiler generated components when we compile a WinRT Component DLL.  Part2  discusses how the C# application interacts with the C++ WinRT component.

We have seen the packaging and installation process that happens in the background during building and deploying of the applications here Under the hood Part 3 : WinRT, Windows 8, C++, C#.NET, Metro, WinRT Component DLL

We have seen the C++ XAML application calling the C++ WinRT Component DLL here Under the hood Part 4 : C++ WinRT Component DLL & C++ XAML application – WinRT, Windows 8, C++, Metro

Part5 discusses developing JavaScript application that consumes WinRT Component DLL

Lets dig deeper into how the C++ Application makes  a call across the WinRT Application Binary Interface to access the class methods inside the WinRT DLL. The slide in fig 1 is taken from the build conference which shows the internals of the method calls. We will examine the ABI and how C++ compiler extensions help reference that ABI without exposing the internal details of dealing with COM interfaces and COM activation.

Download the source code from here.

image

Fig 1: Slide showing the flow of the method calls across the boundaries.

A WinRT component implements the IInspectable interface, which is derived from IUnknown. IInspectable is used by the dynamic language bindings from JavaScript. Given a reference to a WinRT component, the JavaScript interpreter can call the IInspectable::GetRuntimeClassName method and obtain the fully-qualified class name of the WinRT component. Using the namespace name the interpreter can ask Windows to load the metadata file (.winmd) describing the component, and from the metadata determine how to use the interfaces implemented by the component.

When WinRT components are accessed from C++ or from .NET languages, there is no need for the IInspectable interface – IUnknown::QueryInterface suffices for all intents and purposes. In fact, .NET “interop” with WinRT relies on simple COM interop – an RCW created by the CLR manages the lifetime of the underlying WinRT component. For C++ language bindings, the story is somewhat more complicated, and the language extensions come into play.

The left side in Fig 1 is the C++ client application code which calls the method in right side WinRT DLL. So here if the method in C++ DLL throws an exception, it should be caught by the C++ application. But it’s not a good practice throw exceptions directly across boundaries.

The left side call (C++ Client App: Consumer) to Add() method causes the compiler to create an inline native to COM wrapper method. Also, on the left hand side, COM HRESULTs are converted to exceptions and COM “retval” arguments are converted to return values. The Add() method makes a call to this wrapper method. This inline methods generated will be something like a COM method that we write in COM components. We can see the source code generated by the compiler using some compiler switch options. we have seen the compiler generated components for making the C# application access the C++ WinRT component here Under the hood Part 2 : C++ WinRT Component DLL & C#.NET Metro application.

From the WinMD file, the C++ application knows the WinRT API signature(shown at the top of the slide) and makes the appropriate call across the WinRT ABI.

HRESULT __stdcall Add(Calculator* this, int i, int j, int * result)

//On the LHS Application, the native to COM Wrapper is as follows (Consumer-side stub pseudo-code) . See the last section of this post to see the compiler generated code. 
inline int Add(int i, int j) {
int res;
HRESULT hr = __cli_Add(this, i, j, &res);
if (hr != 0) {

__throw_hr_as_exception(hr); }
return res;
}

On the right hand side too (C++ Component DLL), C++ compiler generates inline functions. Also, WinRT and C++ exceptions are converted to HRESULTs and return values are converted to “retval” arguments. Note that the only HRESULT, which does not represent an exceptional condition, is S_OK (numeric value 0). No more positive HRESULTs (such as S_FALSE) that need to be checked explicitly by the caller.

//On the RHS C++ Component, COM to Native Wrapper stub pseudo-code is as follows:
HRESULT __stdcall ___cli_Add(Calculator* calc,
int i, int j, int* result) {
try { *result = calc->Add(i, j); }
catch(Platform::Exception^ e) { return e->HResult; }
return S_OK;
}

See the last section of this post to see the compiler generated code.

By the way, the inline wrappers can be called directly, bypassing the C++ language extensions.

image

The C++ language extensions (enabled by the /ZW switch) map WinRT to standard C++ patterns like constructors, destructors, class methods, and exceptions. For example, the language extensions hide the COM-style activation (RoActivateInstance) behind a constructor call (albeit with the ref new keyword), and hide reference counting (IUnknown::AddRef and Release) by automatically managing references. The syntax of these extensions is very similar to C++/CLI

Code Snippet
    CalculatorSample^ calcobj = ref new  CalculatorSample();
    txtAddResult->Text = calcobj->Add(10,20).ToString();

In the above code snippet, you can see we created the object of CalculatorSample class which is present in WinRT C++ Component using ref new. If you know COM, this is something like cocreateinstance() but its more than that. For now, use ref new to create objects of WinRT classes.

Let us see how to skip to exception wrapper and directly calling the Add() method present in WinRT Component. Every function in the class has a low level equivalent inside the class and currently it is prefixed with __cli_ and it takes the output as last parameter. So using ToString() on an integer. So this is another way of calling the methods inside the WinRT components. If we need HResult, we need reference to windows.h. For that include Windows.h in pch.h file as shown below.

Code Snippet
//
// pch.h
// Header for standard system include files.
//

#pragma once

#include <Windows.h>
#include "App.xaml.h"

The complete code to call the WinRT component method is as follows.

Code Snippet
MainPage::MainPage()
{
    InitializeComponent();

    CalculatorSample^ calcobj = ref new  CalculatorSample();
    //txtAddResult->Text = calcobj->Add(10,20).ToString();

    // declare a stack variable to hold the value of the result
    int result;
    //call into  calc object low level __cli_Add() but no intellisense in this preview
    HRESULT hr = calcobj->__cli_Add(10,20,&result);

    //typedef HRESULT (__std

    txtAddResult->Text = result.ToString();
}

 

Another (3rd) way is to use function pointers and call the methods using pointers. Basically, we we can take the calculator^ object, which is a pointer to a pointer to a vtable and reinterpret cast it so that it has a pointer to virtual function, which are vtables. Then we can find out the location of the method we need to call using some compiler switches which I will show below. For the Add function, we are going to specifically pick the sixth function of that and call into it. In the class layout mentioned below, I highlighted the member at 6th location. reinterpret_cast takes the calcobj ^ and cast it to a pointer to a pointer, that’s it. This is how the functions inside the components are called internally at a low level.

Code Snippet
MainPage::MainPage()
{
    InitializeComponent();

    CalculatorSample^ calcobj = ref new  CalculatorSample();
    //txtAddResult->Text = calcobj->Add(10,20).ToString();

    // declare a stack variable to hold the value of the result
    int result;
    //call into  calc object low level __cli_Add() but no intellisense in this preview
    //HRESULT hr = calcobj->__cli_Add(10,20,&result);

    //create a c function that actually represent an ABI call we will be making
    //to add function which takes this pointer, 2 input parameters and an out parameter.
    typedef HRESULT (__stdcall* AddFunc_t) (CalculatorSample^ calc, int i, int j, int * result);
    //now we can take the calculator^ object, which is a pointer to a pointer to a vtable
    //and reinterpret cast it so that it can say ok now i have a pointer of  virtual function
    //which are vtables and i am going to specifically pick the sixth function of that and call into it.
    //reinterpret_cast takes the calcobj ^ and cast it to a pointer to a pointer
    AddFunc_t* addFunc = *reinterpret_cast<AddFunc_t**>(calcobj);
    addFunc[6](calcobj,10,20, &result);

    txtAddResult->Text = result.ToString();
}

Basically a hat is a pointer to a pointer to an array of function pointers, which is Pointer to vptr to vtable. Hat (^) provides automatic reference counting.

To find out the class layout, use the /d1reportSingleClassLayout<class name> compiler switch option. Right click on the WinRTComponent.cpp file in C++ WinRT Component DLL project and select Command Line which is under C/C++. In the Additional Options, mention /d1reportSingleClassLayoutCalculatorSample, click ok and compile the project. See the output window for the magic. There is also another option to see all classes layout by using the option /d1reportAllClassLayout.

image

 

1>—— Rebuild All started: Project: CppWinRTComponentDll, Configuration: Debug Win32 ——
pch.cpp
WinRTComponent.cpp
class __ICalculatorSamplePublicNonVirtuals    size(4):
    +—
    | +— (base class Object)
0    | | {vfptr}
    | +—
    +—

__ICalculatorSamplePublicNonVirtuals::$vftable@:
    | &__ICalculatorSamplePublicNonVirtuals_meta
    |  0
0    | &Object::__cli_QueryInterface
1    | &Object::__cli_AddRef
2    | &Object::__cli_Release
3    | &Object::__cli_GetIids
4    | &Object::__cli_GetRuntimeClassName
5    | &Object::__cli_GetTrustLevel
6    | &__ICalculatorSamplePublicNonVirtuals::__cli_Add
7    | &__ICalculatorSamplePublicNonVirtuals::Add

__ICalculatorSamplePublicNonVirtuals::Add this adjustor: 0
__ICalculatorSamplePublicNonVirtuals::__cli_Add this adjustor: 0

class __CalculatorSampleActivationFactory    size(12):
    +—
    | +— (base class IActivationFactory)
    | | +— (base class Object)
0    | | | {vfptr}
    | | +—
    | +—
    | +— (base class Object)
4    | | {vfptr}
    | +—
8    | __cli_MultiThreadedRefCount __cli_refcount
    +—

__CalculatorSampleActivationFactory::$vftable@Object@:
    | -4
0    | &thunk: this-=4; goto __CalculatorSampleActivationFactory::__cli_QueryInterface
1    | &thunk: this-=4; goto __CalculatorSampleActivationFactory::__cli_AddRef
2    | &thunk: this-=4; goto __CalculatorSampleActivationFactory::__cli_Release
3    | &thunk: this-=4; goto __CalculatorSampleActivationFactory::__cli_GetIids
4    | &thunk: this-=4; goto __CalculatorSampleActivationFactory::__cli_GetRuntimeClassName
5    | &thunk: this-=4; goto __CalculatorSampleActivationFactory::__cli_GetTrustLevel

__CalculatorSampleActivationFactory::$vftable@IActivationFactory@:
    | &__CalculatorSampleActivationFactory_meta
    |  0
0    | &__CalculatorSampleActivationFactory::__cli_QueryInterface
1    | &__CalculatorSampleActivationFactory::__cli_AddRef
2    | &__CalculatorSampleActivationFactory::__cli_Release
3    | &__CalculatorSampleActivationFactory::__cli_GetIids
4    | &__CalculatorSampleActivationFactory::__cli_GetRuntimeClassName
5    | &__CalculatorSampleActivationFactory::__cli_GetTrustLevel
6    | &__CalculatorSampleActivationFactory::__cli_Platform_IActivationFactory____cli_ActivateInstance
7    | &__CalculatorSampleActivationFactory::ActivateInstance

__CalculatorSampleActivationFactory::ActivateInstance this adjustor: 0
__CalculatorSampleActivationFactory::__cli_QueryInterface this adjustor: 0
__CalculatorSampleActivationFactory::__cli_AddRef this adjustor: 0
__CalculatorSampleActivationFactory::__cli_Release this adjustor: 0
__CalculatorSampleActivationFactory::__cli_GetIids this adjustor: 0
__CalculatorSampleActivationFactory::__cli_GetRuntimeClassName this adjustor: 0
__CalculatorSampleActivationFactory::__cli_GetTrustLevel this adjustor: 0
__CalculatorSampleActivationFactory::__cli_Platform_IActivationFactory____cli_ActivateInstance this adjustor: 0

class CalculatorSample    size(12):
    +—
    | +— (base class __ICalculatorSamplePublicNonVirtuals)
    | | +— (base class Object)
0    | | | {vfptr}
    | | +—
    | +—
    | +— (base class Object)
4    | | {vfptr}
    | +—
8    | __cli_MultiThreadedRefCount __cli_refcount
    +—

CalculatorSample::$vftable@__ICalculatorSamplePublicNonVirtuals@:
    | &CalculatorSample_meta
    |  0
0    | &CalculatorSample::__cli_QueryInterface
1    | &CalculatorSample::__cli_AddRef
2    | &CalculatorSample::__cli_Release
3    | &CalculatorSample::__cli_GetIids
4    | &CalculatorSample::__cli_GetRuntimeClassName
5    | &CalculatorSample::__cli_GetTrustLevel
6    | &CalculatorSample::

__cli_CppWinRTComponentDll___ICalculatorSamplePublicNonVirtuals____cli_Add
7    | &CalculatorSample::Add

CalculatorSample::$vftable@Object@:
    | -4
0    | &thunk: this-=4; goto CalculatorSample::__cli_QueryInterface
1    | &thunk: this-=4; goto CalculatorSample::__cli_AddRef
2    | &thunk: this-=4; goto CalculatorSample::__cli_Release
3    | &thunk: this-=4; goto CalculatorSample::__cli_GetIids
4    | &thunk: this-=4; goto CalculatorSample::__cli_GetRuntimeClassName
5    | &thunk: this-=4; goto CalculatorSample::__cli_GetTrustLevel

CalculatorSample::Add this adjustor: 0
CalculatorSample::__cli_QueryInterface this adjustor: 0
CalculatorSample::__cli_AddRef this adjustor: 0
CalculatorSample::__cli_Release this adjustor: 0
CalculatorSample::__cli_GetIids this adjustor: 0
CalculatorSample::__cli_GetRuntimeClassName this adjustor: 0
CalculatorSample::__cli_GetTrustLevel this adjustor: 0
CalculatorSample::__cli_CppWinRTComponentDll___ICalculatorSamplePublicNonVirtuals____cli_Add this adjustor: 0

Analyzing the layout:

Every WinRT object is laid out in the following way. The first 3 methods in the Vtable are from IUnknown and the next 3 interfaces methods are there for dynamic languages. The important one is GetRuntimeClassName and it allows JavaScript to call into .net  obtain the fully-qualified class name of the WinRT component. When JavaScript calls GetRuntimeClassName, it returns  CppWinRTComponentDll. CalculatorSample. JavaScript then goes and finds out which WinMD file in the system has the classname CppWinRTComponentDll.CalculatorSample. so Windows 8 will inform that it is inside CppWinRTComponentDll.DLL. It then loads the WinMD file of CppWinRTComponentDll.DLL and calls the Add function inside it. In C++, we don’t use these methods as we can directly interact with the class. It doesn’t do dynamic dispatch.

0 | &CalculatorSample::__cli_QueryInterface
1 | &CalculatorSample::__cli_AddRef
2 | &CalculatorSample::__cli_Release

3 | &CalculatorSample::__cli_GetIids
4 | &CalculatorSample::__cli_GetRuntimeClassName
5 | &CalculatorSample::__cli_GetTrustLevel

6 | &CalculatorSample::

__cli_CppWinRTComponentDll___ICalculatorSamplePublicNonVirtuals____cli_Add

 

Coming to the calculator class, you notice CalculatorSample is of size 12. The first vprt we have is ICalculatorSamplePublicNonVirtuals and then we have vprt to Object and then the ref count.

class CalculatorSample size(12):
+—
| +— (base class __ICalculatorSamplePublicNonVirtuals)
| | +— (base class Object)
0 | | | {vfptr}
| | +—
| +—
| +— (base class Object)
4 | | {vfptr}
| +—
8 | __cli_MultiThreadedRefCount __cli_refcount
+—

If we analyze the first vptr, it points to ICalculatorSamplePublicNonVirtuals. The layout of the interface is as follows. The first 3 methods are for IUnknown and the other 3 are IInspectable. Notice 6 and 7 are referencing the Add method we wrote in the DLL. There are here for a reason. No 7 is to support compile time inheritance. The C++ can directly call into C++.

CalculatorSample::$vftable@__ICalculatorSamplePublicNonVirtuals@:
| &CalculatorSample_meta
| 0
0 | &CalculatorSample::__cli_QueryInterface
1 | &CalculatorSample::__cli_AddRef
2 | &CalculatorSample::__cli_Release
3 | &CalculatorSample::__cli_GetIids
4 | &CalculatorSample::__cli_GetRuntimeClassName
5 | &CalculatorSample::__cli_GetTrustLevel
6 | &CalculatorSample::__cli_CppWinRTComponentDll___ICalculatorSamplePublicNonVirtuals____cli_Add
7 | &CalculatorSample::Add

To understand more, let us use the compiler option. right click on WinRTComponent.cpp and add /d1ZWtokens as shown below and compile the WinRTComponent.cpp class.

image

In the output window, search for __cli_CppWinRTComponentDll___ICalculatorSamplePublicNonVirtuals____cli_Add and see the inline code generated by the compiler. This gives us a better understanding of the inner workings of calling the WinRT components.

 

1>—— Build started: Project: CppWinRTComponentDll, Configuration: Debug Win32 ——
1>  WinRTComponent.cpp
1>  Declaring Member 2: __ICalculatorSamplePublicNonVirtuals::Add (int __cdecl CppWinRTComponentDll::__ICalculatorSamplePublicNonVirtuals::Add(int,int)). [isVirtual=1 isPure=0 isStatic=0]
1> 
1>  Declaring Member 2: __ICalculatorSamplePublicNonVirtuals::__cli_Add (long __stdcall CppWinRTComponentDll::__ICalculatorSamplePublicNonVirtuals::__cli_Add(int,int,int *)). [isVirtual=1 isPure=1 isStatic=0]
1> 
1>  Declaring Member 4a: CalculatorSample::__cli_refcount
1> 
1>  Declaring Member 2: CalculatorSample::__cli_QueryInterface (long __stdcall CppWinRTComponentDll::CalculatorSample::__cli_QueryInterface(class Platform::Guid %,void **)). [isVirtual=0 isPure=0 isStatic=0]
1> 
1>  Declaring Member 2: CalculatorSample::__cli_AddRef (unsigned long __stdcall CppWinRTComponentDll::CalculatorSample::__cli_AddRef(void)). [isVirtual=0 isPure=0 isStatic=0]
1> 
1>  Declaring Member 2: CalculatorSample::__cli_Release (unsigned long __stdcall CppWinRTComponentDll::CalculatorSample::__cli_Release(void)). [isVirtual=0 isPure=0 isStatic=0]
1> 
1>  Declaring Member 2: CalculatorSample::__cli_GetIids (long __stdcall CppWinRTComponentDll::CalculatorSample::__cli_GetIids(unsigned long *,class Platform::Guid **)). [isVirtual=0 isPure=0 isStatic=0]
1> 
1>  Declaring Member 2: CalculatorSample::__cli_GetRuntimeClassName (long __stdcall CppWinRTComponentDll::CalculatorSample::__cli_GetRuntimeClassName(struct __cli_HSTRING__ **)). [isVirtual=0 isPure=0 isStatic=0]
1> 
1>  Declaring Member 2: CalculatorSample::__cli_GetTrustLevel (long __stdcall CppWinRTComponentDll::CalculatorSample::__cli_GetTrustLevel(enum __cli_TrustLevel *)). [isVirtual=0 isPure=0 isStatic=0]
1> 
1>  Declaring Member 2: CalculatorSample::__cli_CppWinRTComponentDll___ICalculatorSamplePublicNonVirtuals____cli_Add (long __stdcall CppWinRTComponentDll::CalculatorSample::__cli_CppWinRTComponentDll___ICalculatorSamplePublicNonVirtuals____cli_Add(int,int,int *)=long __stdcall CppWinRTComponentDll::__ICalculatorSamplePublicNonVirtuals::__cli_Add(int,int,int *)). [isVirtual=1 isPure=0 isStatic=0]
1> 
1>  Declaring Member 2: IActivationFactory::__cli_ActivateInstance (long __stdcall Platform::IActivationFactory::__cli_ActivateInstance(class Platform::Object ^*)). [isVirtual=1 isPure=1 isStatic=0]
1> 
1>  Declaring Member 2: __CalculatorSampleActivationFactory::ActivateInstance (class Platform::Object ^__thiscall CppWinRTComponentDll::__CalculatorSampleActivationFactory::ActivateInstance(void)). [isVirtual=1 isPure=0 isStatic=0]
1> 
1>  Declaring Member 2: __CalculatorSampleActivationFactory::CreateFactory (long __stdcall CppWinRTComponentDll::__CalculatorSampleActivationFactory::CreateFactory(unsigned int *,struct __cli___classObjectEntry *,class Platform::Guid %,struct __cli_IUnknown **)). [isVirtual=0 isPure=0 isStatic=1]
1> 
1>  Declaring Member 2: __CalculatorSampleActivationFactory::GetTargetClassName (const wchar_t *__stdcall CppWinRTComponentDll::__CalculatorSampleActivationFactory::GetTargetClassName(void)). [isVirtual=0 isPure=0 isStatic=1]
1> 
1>  Declaring Member 4a: __CalculatorSampleActivationFactory::__cli_refcount
1> 
1>  Declaring Member 2: __CalculatorSampleActivationFactory::__cli_QueryInterface (long __stdcall CppWinRTComponentDll::__CalculatorSampleActivationFactory::__cli_QueryInterface(class Platform::Guid %,void **)). [isVirtual=0 isPure=0 isStatic=0]
1> 
1>  Declaring Member 2: __CalculatorSampleActivationFactory::__cli_AddRef (unsigned long __stdcall CppWinRTComponentDll::__CalculatorSampleActivationFactory::__cli_AddRef(void)). [isVirtual=0 isPure=0 isStatic=0]
1> 
1>  Declaring Member 2: __CalculatorSampleActivationFactory::__cli_Release (unsigned long __stdcall CppWinRTComponentDll::__CalculatorSampleActivationFactory::__cli_Release(void)). [isVirtual=0 isPure=0 isStatic=0]
1> 
1>  Declaring Member 2: __CalculatorSampleActivationFactory::__cli_GetIids (long __stdcall CppWinRTComponentDll::__CalculatorSampleActivationFactory::__cli_GetIids(unsigned long *,class Platform::Guid **)). [isVirtual=0 isPure=0 isStatic=0]
1> 
1>  Declaring Member 2: __CalculatorSampleActivationFactory::__cli_GetRuntimeClassName (long __stdcall CppWinRTComponentDll::__CalculatorSampleActivationFactory::__cli_GetRuntimeClassName(struct __cli_HSTRING__ **)). [isVirtual=0 isPure=0 isStatic=0]
1> 
1>  Declaring Member 2: __CalculatorSampleActivationFactory::__cli_GetTrustLevel (long __stdcall CppWinRTComponentDll::__CalculatorSampleActivationFactory::__cli_GetTrustLevel(enum __cli_TrustLevel *)). [isVirtual=0 isPure=0 isStatic=0]
1> 
1>  Declaring Member 2: __CalculatorSampleActivationFactory::__cli_Platform_IActivationFactory____cli_ActivateInstance (long __stdcall CppWinRTComponentDll::__CalculatorSampleActivationFactory::__cli_Platform_IActivationFactory____cli_ActivateInstance(class Platform::Object ^*)=long __stdcall Platform::IActivationFactory::__cli_ActivateInstance(class Platform::Object ^*)). [isVirtual=1 isPure=0 isStatic=0]
1> 
1>  inline function header symbol: {ctor}
1> 
1>  {
1> 
1>   
1> 
1>  }
1> 
1>  inline function header symbol: {ctor}
1> 
1>  {
1> 
1>   
1> 
1>  }
1>  <TokenStream>
1> 
1>  namespace CppWinRTComponentDll
1> 
1>  {
1> 
1>   inline int :: CppWinRTComponentDll :: __ICalculatorSamplePublicNonVirtuals :: Add ( int x , int y )
1> 
1>    {
1> 
1>      int __cli_returnValue ;
1> 
1>      long __hr = __cli_Add ( x , y , & __cli_returnValue ) ;
1> 
1>      __cli_WinRTThrowError ( __hr ) ;
1> 
1>      return __cli_returnValue ;
1> 
1>     
1> 
1>    }
1> 
1>   
1> 
1>  }
1>  </TokenStream>
1> 
1>  <TokenStream>
1> 
1>  namespace CppWinRTComponentDll
1> 
1>  {
1> 
1>    inline long __stdcall :: CppWinRTComponentDll :: CalculatorSample :: __cli_CppWinRTComponentDll___ICalculatorSamplePublicNonVirtuals____cli_Add ( int x , int y , int * __cli_returnValue )
1> 
1>    {
1> 
1>      long __hr = 0 ;
1> 
1>      * __cli_returnValue = 0 ;
1> 
1>      try
1> 
1>      {
1> 
1>        auto __tempValue = Add ( x , y ) ;
1> 
1>        * __cli_returnValue = __tempValue ;
1> 
1>       
1> 
1>      }
1> 
1>      catch ( :: Platform :: Exception ^ __param0 )
1> 
1>      {
1> 
1>        __hr = __param0 -> HResult ;
1> 
1>       
1> 
1>      }
1> 
1>      catch ( … )
1> 
1>      {
1> 
1>        __hr = -2147467259 ;
1> 
1>       
1> 
1>      }
1> 
1>      return __hr ;
1> 
1>     
1> 
1>    }
1>
 
1>   
1> 
1>  }
1>  </TokenStream>
1> 
1>  <TokenStream>
1> 
1>  namespace CppWinRTComponentDll
1> 
1>  {
1> 
1>    long :: CppWinRTComponentDll :: CalculatorSample :: __cli_QueryInterface ( class Platform::Guid % __param0 , void ** __param1 )
1> 
1>    {
1> 
1>      if ( __param0 . Equals ( __uuidof ( __cli_IUnknown ) ) || __param0 . Equals ( __uuidof ( __cli_IInspectable ) ) || __param0 . Equals ( __uuidof ( struct CppWinRTComponentDll::__ICalculatorSamplePublicNonVirtuals ^ ) ) )
1> 
1>      {
1> 
1>        * __param1 = reinterpret_cast < void * > ( static_cast < struct CppWinRTComponentDll::__ICalculatorSamplePublicNonVirtuals ^ > ( this ) ) ;
1> 
1>        __cli_refcount . Increment ( ) ;
1> 
1>        return 0 ;
1> 
1>       
1> 
1>      }
1> 
1>      return -2147467262 ;
1> 
1>     
1> 
1>    }
1> 
1>    unsigned long :: CppWinRTComponentDll :: CalculatorSample :: __cli_AddRef ( )
1> 
1>    {
1> 
1>      long __cli_returnValue = __cli_refcount . Increment ( ) ;
1> 
1>      return ( unsigned long ) __cli_returnValue ;
1> 
1>     
1> 
1>    }
1> 
1>    unsigned long :: CppWinRTComponentDll :: CalculatorSample :: __cli_Release ( )
1> 
1>    {
1> 
1>      long __cli_returnValue = __cli_refcount . Decrement ( ) ;
1> 
1>      if ( ! __cli_returnValue )
1> 
1>      {
1> 
1>        delete this ;
1> 
1>        :: Platform :: Heap :: Free ( reinterpret_cast < void * > ( this ) ) ;
1> 
1>       
1> 
1>      }
1> 
1>      return ( unsigned long ) __cli_returnValue ;
1> 
1>     
1> 
1>    }
1> 
1>    long :: CppWinRTComponentDll :: CalculatorSample :: __cli_GetIids ( unsigned long * __param0 , class Platform::Guid ** __param1 )
1> 
1>    {
1> 
1>      struct __s_GUID __interfaceList [ ] =
1> 
1>      {
1> 
1>       
1> 
1>        {
1> 
1>          -1302793136 , 5274 , 13110 , 160 , 43 , 249 , 241 , 108 , 73 , 159 , 212
1> 
1>        }
1> 
1>       
1> 
1>      } ;
1> 
1>     
1> 
1>      return __winRT :: __winRTRuntime . __getIids ( 1 , __param0 , __interfaceList , __param1 ) ;
1> 
1>     
1> 
1>    }
1> 
1>    long :: CppWinRTComponentDll :: CalculatorSample :: __cli_GetRuntimeClassName ( struct __cli_HSTRING__ ** __param0 )
1> 
1>    {
1> 
1>      return __winRT :: __winRTRuntime . __windowsCreateString ( ( const wchar_t * ) L"CppWinRTComponentDll.CalculatorSample" , 37 , __param0 ) ;
1> 
1>     
1> 
1>    }
1> 
1>    long :: CppWinRTComponentDll :: CalculatorSample :: __cli_GetTrustLevel ( enum __cli_TrustLevel * __param0 )
1> 
1>    {
1> 
1>      * __param0 = __cli_FullTrust ;
1> 
1>      return 0 ;
1> 
1>     
1> 
1>    }
1> 
1>   
1> 
1>  }
1>  </TokenStream>
1> 
1>  <TokenStream>
1> 
1>  namespace Platform
1> 
1>  {
1> 
1>    inline class Platform::Object ^ :: Platform :: IActivationFactory :: ActivateInstance ( )
1> 
1>    {
1> 
1>      class Platform::Object ^ __cli_returnValue ;
1> 
1>      long __hr = __cli_ActivateInstance ( & __cli_returnValue ) ;
1> 
1>      __cli_WinRTThrowError ( __hr ) ;
1> 
1>      return __cli_returnValue ;
1> 
1>     
1> 
1>    }
1> 
1>   
1> 
1>  }
1>  </TokenStream>
1> 
1>  <TokenStream>
1> 
1>  namespace CppWinRTComponentDll
1> 
1>  {
1> 
1>    inline long __stdcall :: CppWinRTComponentDll :: __CalculatorSampleActivationFactory :: __cli_Platform_IActivationFactory____cli_ActivateInstance ( class Platform::Object ^* __cli_returnValue )
1> 
1>    {
1> 
1>      long __hr = 0 ;
1> 
1>      * __cli_returnValue = nullptr ;
1> 
1>      try
1> 
1>      {
1> 
1>        auto __tempValue = ActivateInstance ( ) ;
1> 
1>        * __cli_returnValue = __tempValue ;
1> 
1>       
1> 
1>      }
1> 
1>      catch ( :: Platform :: Exception ^ __param0 )
1> 
1>      {
1> 
1>        __hr = __param0 -> HResult ;
1> 
1>       
1> 
1>      }
1> 
1>      catch ( … )
1> 
1>      {
1> 
1>        __hr = -2147467259 ;
1> 
1>       
1> 
1>      }
1> 
1>      return __hr ;
1> 
1>     
1> 
1>    }
1> 
1>   
1> 
1>  }
1>  </TokenStream>
1> 
1>  <TokenStream>
1> 
1>  namespace CppWinRTComponentDll
1> 
1>  {
1> 
1>    long :: CppWinRTComponentDll :: __CalculatorSampleActivationFactory :: __cli_QueryInterface ( class Platform::Guid % __param0 , void ** __param1 )
1> 
1>    {
1> 
1>      if ( __param0 . Equals ( __uuidof ( __cli_IUnknown ) ) || __param0 . Equals ( __uuidof ( __cli_IInspectable ) ) || __param0 . Equals ( __uuidof ( struct Platform::IActivationFactory ^ ) ) )
1> 
1>      {
1> 
1>        * __param1 = reinterpret_cast < void * > ( static_cast < struct Platform::IActivationFactory ^ > ( this ) ) ;
1> 
1>        __cli_refcount . Increment ( ) ;
1> 
1>        return 0 ;
1> 
1>       
1> 
1>      }
1> 
1>      return -2147467262 ;
1> 
1>     
1> 
1>    }
1> 
1>    unsigned long :: CppWinRTComponentDll :: __CalculatorSampleActivationFactory :: __cli_AddRef ( )
1> 
1>    {
1> 
1>      long __cli_returnValue = __cli_refcount . Increment ( ) ;
1> 
1>      return ( unsigned long ) __cli_returnValue ;
1> 
1>     
1> 
1>    }
1> 
1>    unsigned long :: CppWinRTComponentDll :: __CalculatorSampleActivationFactory :: __cli_Release ( )
1> 
1>    {
1> 
1>      long __cli_returnValue = __cli_refcount . Decrement ( ) ;
1> 
1>      if ( ! __cli_returnValue )
1> 
1>      {
1> 
1>        delete this ;
1> 
1>        :: Platform :: Heap :: Free ( reinterpret_cast < void * > ( this ) ) ;
1> 
1>       
1> 
1>      }
1> 
1>      return ( unsigned long ) __cli_returnValue ;
1> 
1>     
1> 
1>    }
1> 
1>    long :: CppWinRTComponentDll :: __CalculatorSampleActivationFactory :: __cli_GetIids ( unsigned long * __param0 , class Platform::Guid ** __param1 )
1> 
1>    {
1> 
1>      struct __s_GUID __interfaceList [ ] =
1> 
1>      {
1> 
1>       
1> 
1>        {
1> 
1>          53 , 0 , 0 , 192 , 0 , 0 , 0 , 0 , 0 , 0 , 70
1> 
1>        }
1> 
1>       
1> 
1>      } ;
1> 
1>     
1> 
1>      return __winRT :: __winRTRuntime . __getIids ( 1 , __param0 , __interfaceList , __param1 ) ;
1> 
1>     
1> 
1>    }
1> 
1>    long :: CppWinRTComponentDll :: __CalculatorSampleActivationFactory :: __cli_GetRuntimeClassName ( struct __cli_HSTRING__ ** __param0 )
1> 
1>    {
1> 
1>      return __winRT :: __winRTRuntime . __windowsCreateString ( ( const wchar_t * ) L"CppWinRTComponentDll.__CalculatorSampleActivationFactory" , 56 , __param0 ) ;
1> 
1>     
1> 
1>    }
1> 
1>    long :: CppWinRTComponentDll :: __CalculatorSampleActivationFactory :: __cli_GetTrustLevel ( enum __cli_TrustLevel * __param0 )
1> 
1>    {
1> 
1>      * __param0 = __cli_FullTrust ;
1> 
1>      return 0 ;
1> 
1>     
1> 
1>    }
1> 
1>   
1> 
1>  }
1>  </TokenStream>
1> 
1>  <TokenStream>
1> 
1>  namespace CppWinRTComponentDll
1> 
1>  {
1> 
1>    class Platform::Object ^ :: CppWinRTComponentDll :: __CalculatorSampleActivationFactory :: ActivateInstance ( )
1> 
1>    {
1> 
1>      return gcnew class CppWinRTComponentDll::CalculatorSample ( ) ;
1> 
1>     
1> 
1>    }
1> 
1>   
1> 
1>  }
1>  </TokenStream>
1> 
1>  <TokenStream>
1> 
1>  namespace CppWinRTComponentDll
1> 
1>  {
1> 
1>    long __stdcall :: CppWinRTComponentDll :: __CalculatorSampleActivationFactory :: CreateFactory ( unsigned int * , struct __cli___classObjectEntry * , class Platform::Guid % __param2 , struct __cli_IUnknown ** __param3 )
1> 
1>    {
1> 
1>      class CppWinRTComponentDll::__CalculatorSampleActivationFactory ^ __pActivationFactory = gcnew :: CppWinRTComponentDll :: __CalculatorSampleActivationFactory ( ) ;
1> 
1>      return __pActivationFactory -> __cli_QueryInterface ( __param2 , reinterpret_cast < void ** > ( __param3 ) ) ;
1> 
1>     
1> 
1>    }
1> 
1>    const wchar_t * __stdcall :: CppWinRTComponentDll :: __CalculatorSampleActivationFactory :: GetTargetClassName ( )
1> 
1>    {
1> 
1>      return L"CppWinRTComponentDll.CalculatorSample" ;
1> 
1>     
1> 
1>    }
1> 
1>   
1> 
1>  }
1>  </TokenStream>
1> 
1>  <TokenStream>
1> 
1>  namespace CppWinRTComponentDll
1> 
1>  {
1> 
1>    const struct __cli___classObjectEntry __CalculatorSampleActivationFactory_Registration =
1> 
1>    {
1> 
1>      :: CppWinRTComponentDll :: __CalculatorSampleActivationFactory :: CreateFactory , :: CppWinRTComponentDll :: __CalculatorSampleActivationFactory :: GetTargetClassName , nullptr , & __cli_no_factory_cache , nullptr
1> 
1>    } ;
1> 
1>   
1> 
1>    extern "C" __declspec ( allocate ( "minATL$__r" ) ) __declspec ( selectany ) const :: __cli___classObjectEntry * const CppWinRTComponentDll___CalculatorSampleActivationFactory__Entry = & __CalculatorSampleActivationFactory_Registration ;
1> 
1>   
1> 
1>  }
1>  </TokenStream>
1> 
========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========

 

The complete code of MainPage.xaml.cpp is as follows.

Code Snippet
//
// MainPage.xaml.cpp
// Implementation of the MainPage.xaml class.
//

#include "pch.h"
#include "MainPage.xaml.h"

using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Controls;
using namespace Windows::UI::Xaml::Data;
using namespace CPPApplication1;

using namespace CppWinRTComponentDll;

MainPage::MainPage()
{
    InitializeComponent();

    CalculatorSample^ calcobj = ref new  CalculatorSample();
    //txtAddResult->Text = calcobj->Add(10,20).ToString();

    //// declare a stack variable to hold the value of the result
    int result;
    //call into  calc object low level __cli_Add() but no intellisense in this preview
    //HRESULT hr = calcobj->__cli_Add(10,20,&result);

    //create a c function that actually represent an ABI call we will be making
    //to add function which takes this pointer, 2 input parameters and an out parameter.
    typedef HRESULT (__stdcall* AddFunc_t) (CalculatorSample^ calc, int i, int j, int * result);
    //now we can take the calculator^ object, which is a pointer to a pointer to a vtable
    //and reinterpret cast it so that it can say ok now i have a pointer of  virtual function
    //which are vtables and i am going to specifically pick the sixth function of that and call into it.
    //reinterpret_cast takes the calcobj ^ and cast it to a pointer to a pointer
    AddFunc_t* addFunc = *reinterpret_cast<AddFunc_t**>(calcobj);
    addFunc[6](calcobj,10,20, &result);

    ////CalculatorSample^ calcobj = ref new CalculatorSample();
    ////int* vtable_array = (int*)calcobj;
    ////int* icalc_vtable = (int*)vtable_array[0];
    ////int* compute_will_be_fptr = (int*)icalc_vtable[6];
    ////typedef HRESULT (__stdcall *compute_fptr_t)(CalculatorSample^, int, int, int*);
    ////compute_fptr_t compute_fptr = (compute_fptr_t)compute_will_be_fptr;
    ////compute_fptr(calcobj,10,20, &result);

    txtAddResult->Text = result.ToString();
}

MainPage::~MainPage()
{
}

 

Download the source code from here.

"If you limit your choices only to what seems possible or reasonable, you disconnect yourself from what you truly want, and all that is left is a compromise."

HTML5, jQuery Mobile and ASP.NET MVC 4–Using ViewModel between the model and controller

You can download from Windows Store at http://apps.microsoft.com/webpdp/en-US/app/emergency-help-me/477b898a-6781-4b75-a439-44dee5904f14

To get started with the development, we have seen the post Introduction to HTML5 Development Using VS 2010, HTML5, jQuery Mobile and ASP.NET MVC 4.

In an enterprise application development scenario, we might need to aggregate some of the models/data sources and present it as a whole to the controller. For simplicity, let us take a case where we need to enter new student Name, Grade and the State as shown in Fig 1.

The Grades are A, B & C. But it might make much sense if we can show these grades as First Class, Second Class, Third Class instead of A,B & C in the UI. So in the UI, we need to show  First Class, Second Class, Third Class but while saving the data we need to save the corresponding values in the DB. Same holds for the state as well. When the user clicks on state dropdown selection icon, the states list pops up and displays all the states. When a state is selected, it is shown in the UI but when saved to the DB, the code names are saved like CA for California as shown in figure 2.

image

Fig 1: Form for entering new student information

image

Fig 2: When clicked on the State drop down list, the above screen pops up.

The Magic of ViewModel: ViewModels allow you to shape multiple entities from one or more data models or sources into a single object, optimized for consumption and rendering by the view. The below figure 3 illustrates the concept of a ViewModel:

image

Fig 3: StudentViewModel aggregating the different models and data sources and supplying the information to the view as a single entity.

The purpose of a ViewModel is for the view to have a single object to render, alleviating the need for UI logic code in the view that would otherwise be necessary. This means the only responsibility, or concern, of the view is to render that single ViewModel object, aiding in a cleaner separation of concerns (SoC). Concerns are distinct aspects of the application that have a particular purpose (i.e., concern), and keeping these aspects apart means your application is more organized, and the code more focused. Putting data manipulation code in its own location away from the view and controller, enforces SoC. Using ViewModels in MVC  leads to more easily maintainable and testable code.

Let us create our data sources. The first one is the grade and the code is as follows. The Grades class is a simple Dictionary object containing two type parameters of type string. The class also contains the definitions for all the members in the Dictionary (i.e., the grades data). The only property in the Grades class is the GradeSelectList, which is an object that Html Helpers use with to render an HTML <select> element that displays a listing of grades. The type Dictionary<string, string> in the GradeSelectList property maps to the grades abbreviation then grade name, respectively.

public class Grades
{
    public static SelectList GradeSelectList
    {
        get
        {
            return new SelectList(GradeDictionary, "Value", "Key");
        }

    }

    public static readonly IDictionary<string, string>
            GradeDictionary = new Dictionary<string, string>
            {
              {"Choose…",""}
            , { "First Class", "A" }
            , { "Second Class", "B" }
            , { "Third Class", "c" }
            };
}

 

The same login for the states. The code for StatesDictionary is as follows.

public class StatesDictionary
{
    public static SelectList StateSelectList
    {
        get { return new SelectList(StateDictionary, "Value", "Key"); }
    }

    public static readonly IDictionary<string, string>
        StateDictionary = new Dictionary<string, string> {
      {"Choose…",""}
    , { "Alabama", "AL" }
    , { "Alaska", "AK" }
    , { "Arizona", "AZ" }
    , { "Arkansas", "AR" }
    , { "California", "CA" }
    , { "Colorado", "CO" }
    , { "Connecticut", "CT" }
    , { "Delaware", "DE" }
    , { "District of Columbia", "DC" }
    , { "Florida", "FL" }
    , { "Georgia", "GA" }
    , { "Hawaii", "HI" }
    , { "Idaho", "ID" }
    , { "Illinois", "IL" }
    , { "Indiana", "IN" }
    , { "Iowa", "IA" }
    , { "Kansas", "KS" }
    , { "Kentucky", "KY" }
    , { "Louisiana", "LA" }
    , { "Maine", "ME" }
    , { "Maryland", "MD" }
    , { "Massachusetts", "MA" }
    , { "Michigan", "MI" }
    , { "Minnesota", "MN" }
    , { "Mississippi", "MS" }
    , { "Missouri", "MO" }
    , { "Montana", "MT" }
    , { "Nebraska", "NE" }
    , { "Nevada", "NV" }
    , { "New Hampshire", "NH" }
    , { "New Jersey", "NJ" }
    , { "New Mexico", "NM" }
    , { "New York", "NY" }
    , { "North Carolina", "NC" }
    , { "North Dakota", "ND" }
    , { "Ohio", "OH" }
    , { "Oklahoma", "OK" }
    , { "Oregon", "OR" }
    , { "Pennsylvania", "PA" }
    , { "Rhode Island", "RI" }
    , { "South Carolina", "SC" }
    , { "South Dakota", "SD" }
    , { "Tennessee", "TN" }
    , { "Texas", "TX" }
    , { "Utah", "UT" }
    , { "Vermont", "VT" }
    , { "Virginia", "VA" }
    , { "Washington", "WA" }
    , { "West Virginia", "WV" }
    , { "Wisconsin", "WI" }
    , { "Wyoming", "WY" }    
    // more states
    };
}

Data that lives in small lists and infrequently changes, like the Grades, StatesDictionary class, exists in all types of applications.

Creating Model:

Now we need a model that collects the student’s name, the grade, and the state he is from as shown in Figure 1.  The StudentModels class definition captures these features in simple data structure. Let us now create a StudentModels class as shown below. Create a file StudentModels.cs under Models folder and add the following code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace TagStatus.Models
{
    public class StudentModels
    {
        [Display(Name = "Student Name here")]
        [Required()]
        public string StudentName { get; set; }
        public string Grade { get; set; }
        public string State { get; set; }
    }
}

 

Creating ViewModel:

Because of the data coming from different sources that needs to be displayed in the view, coding and maintenance will be easier if you use a ViewModel. ViewModels are a combination of one or more types that together shape data that goes to the view for consumption and rendering. A ViewModel is just a class. To get started, create a new folder named ViewModels and add a new code file StudentViewModel.cs to it. To create the StudentViewModel ViewModel, add the StudentModels, Grades  and StatesDictionary types as properties to form one StudentViewModel class. In the source code below, the StudentViewModel class contains the newly defined properties.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using TagStatus.Models;

namespace TagStatus.ViewModels
{
    public class StudentViewModel
    {
        public StudentModels Student { get; set; }
        public Grades Grades { get; set; }
        public StatesDictionary States { get; set; }

        public StudentViewModel(StudentModels student)
        {
            Student = student;
            Grades = new Grades();
            States = new StatesDictionary();
        }

        public StudentViewModel()
        {
            Student = new StudentModels(); ;
            Grades = new Grades();
            States = new StatesDictionary();
        }
    }
}

 

Creating Controller:

After creating the ViewModel, the next steps are to instantiate it in a controller and return it to the view. I am doing R & D on this new MVC4 and so you will see some messy code.

The following code  creates a Controller Passing the ViewModel to the View and the code of interest for us is public ActionResult StudentInfo() and this gets executed while the application is firing up.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

using TagStatus.Models;
using TagStatus.ViewModels;

namespace TagStatus.Controllers
{
    public class StudentController : Controller
    {
        //public string StudentName { get; set; }
        //public int Grade { get; set; }

        //
        // GET: /Student/

        public ActionResult Index()
        {
            StudentModels stdm = new StudentModels();
            StudentViewModel stdvm = new StudentViewModel(stdm);
            return View(stdvm);
        }

        //[AllowAnonymous]
        //public ActionResult StudentInfo()
        //{
        //    return View();
        //}

        [AllowAnonymous]
        [HttpPost]
        public ActionResult StudentInfo(StudentModels model)
        {
            if (ModelState.IsValid)
            {
                model.StudentName = model.State;
            }

            return View(model);
        }

        [AllowAnonymous]
        public ActionResult StudentInfo()
        {
            StudentViewModel model = new StudentViewModel();

                //model.StudentName = model.State;

            return View(model);
        }

    }
}

Creating HTML5 Mobile Forms in ASP.NET MVC 4 Views:

In Visual Studio 2010, Right click on project and  Add New Item command to create StudentInfo.cshtml, the view that will host your HTML5 form. Inside the view, various ASP.NET MVC 4 Html Helpers present components of the StudentViewModel by rendering HTML elements that best fit the data types they map to in the ViewModel. For example, Grade renders as an HTML drop-down list so that the user can easily select an item rather than manually enter it.

The code for StudentInfo.cshtml is as follows.

@model TagStatus.ViewModels.StudentViewModel;
@{
    ViewBag.Title = "Student Info";
}

<h2> New Student </h2>
@using (Html.BeginForm("Results","Home"))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Enter Student Information!</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.Student.StudentName)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(Model => Model.Student.StudentName)
           @Html.ValidationMessageFor(Model => Model.Student.StudentName)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Student.Grade)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(Model => Model.Student.Grade, Grades.GradeSelectList)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Student.State)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(Model => Model.Student.State, StatesDictionary.StateSelectList)
        </div>
        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

 

Download the source code from here and make the following change in the Global.asax file.

routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
               //defaults: new { controller = "Tag", action = "Lookup", id = UrlParameter.Optional }
                defaults: new { controller = "Student", action = "StudentInfo", id = UrlParameter.Optional }
                //defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );

If you don’t go after what you want, you’ll never have it. If you don’t ask, the answer is always no. If you don’t step forward, you’re always in the same place.Nora Roberts

Introduction to HTML5 Development Using VS 2010, HTML5, jQuery Mobile and ASP.NET MVC 4

You can download from Windows Store at http://apps.microsoft.com/webpdp/en-US/app/emergency-help-me/477b898a-6781-4b75-a439-44dee5904f14

Mobile apps and HTML5 are two of the hottest technologies right now, and there’s plenty of overlap. Web apps run in mobile browsers and can also be re-packaged as native apps on the various mobile platforms. Browser adoption for HTML5 features is accelerating rapidly. Many of the modern browsers (Chrome, Safari, Firefox, and Opera) already support between 75% and 90% of the feature set and this number is increasing daily. With the wide range of platforms to support, combined with the sheer power of mobile browsers, HTML5 is the “Write once, run anywhere” (WORA)solution. Modern mobile devices consist of powerful browsers that support many new HTML5 capabilities, CSS3 and advanced JavaScript. To see what features your browser supports, check out sites like html5test.com, caniuse.com. jquerymobile.com and html5please.com

In this post we will learn how to create a mobile Web applications that take advantage of HTML5, jQuery Mobile and ASP.NET MVC 4, you can effectively target multiple platforms with a single code base. Any browser, including mobile Web browsers, can render the HTML pages created with these technologies. You’ll still need to consider dealing with different browsers, but overall, Web applications are much easier to develop and maintain than multiple native applications in different languages.

Lets get started with the latest tools for Microsoft Web development: HTML5, jQuery Mobile and ASP.NET MVC 4
 

Tools Needed for development (download and install):

See the Windows Phone getting started guide at http://create.msdn.com/en-us/home/getting_started. After we develop in MVC4, use the Windows Phone Emulator to test the page with something closer to an actual mobile device.

JQuery Mobile is also part of the MVC 4 Mobile Web Application template in Visual Studio 2010. With the MVC 4 template, you can develop mobile Web sites with a consistent look and feel by using prebuilt themes, navigation and widgets. Additional features include built-in accessibility, touch and an API, so you can easily customize your applications. Click here to see a comprehensive list of supported platforms.

Creating a HTML5 application:

To create a new application, Open VS 2010 , select New from the File menu, and then  New Project.  The New Project dialog box pops up as shown in figure 1. Name it as tag status.

The application displays the information related to a bar code tag. So we need a place holder to enter barcode tag number and a button to retrieve the description through the API. And then another read only textblock to display its description.

image

Fig 1: New Project dialog box – ASP.NET MVC4 Web application

The Mobile Application template contains the necessary jQuery and jQuery Mobile scripts as well as other necessary markup, such as semantic elements and the data-* attributes.

Figure 2 shows the application in windows phone 7. As you can see, we have a textbox so that the user can enter a barcode tag number and click on submit. Then we display the description in the textbox below the button. For simplicity, when the user clicks on the submit button, I am displaying the information entered by the user in tag number as the description.

imageimage

Fig 2: HTML5 mobile application

Adding Model Class:
  • In the Solution Explorer, expand the solution files
  • Right Click on Models –> Add –> Class. Name it as TagModels (TagModels.cs) and add the following code. Regardless of whether the target is mobile or desktop, HTML5 form elements map to a property of an entity in a model. Because models expose varied data and data types, their representation in the user interface requires varied visual elements, such as text boxes, drop-down lists, check boxes and buttons.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace TagStatus.Models
{
    public class TagModel
    {
        [Display(Name = “Enter Tag Number”)]
        [Required(ErrorMessage = “The Tag Number field is required.”)]
        public string Name { get; set; }
        public string Description { get; set; }
    }
}

 

In the above model code, you can see the Data Annotations Display and Required. Before the form submission process sends the HTTP Request to the server, client-side validation needs to happen. Annotating the data model accomplishes this task nicely. In addition to validation, data annotations provide a way for the Html.Label and Html.LabelFor helpers to produce customized property labels. The figure 3 shows the data annotation after the search button is clicked without entering data in the Windows Phone 7 Emulator.

image

Fig 3: Data Annotations in HTML5

Adding controller Class:

The idea here is that the controller must pass the model to the view for rendering.

  • In the Solution Explorer, expand the solution files
  • Right Click on Controllers–> Add –> Controller. Name it as TagController(TagController.cs) and add the following code. The names are very important. You can see that the class is derived from Controller class. Here we added two methods for Lookup() action.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TagStatus.Models;
using System.Net;
using System.IO;
using System.Text;
using System.Net.Http;
using System.Dynamic;
using System.Data;
using System.Json;

namespace TagStatus.Controllers
{
    
    public class TagController : Controller
    {
        //
        // GET: /Tag/

        public ActionResult Index()
        {
            return View();
        }

        [AllowAnonymous]
        public ActionResult Lookup()
        {
            return View();
        }

        [AllowAnonymous]
        [HttpPost]
        public ActionResult Lookup(TagModel model)
        {
            if (ModelState.IsValid)
            {
            //    //string url = “https://myapicom/svc1/v2/tags?project=usax&format=JSON&#8221;;

                model.Description = model.Name;

            //   /* CallApi apiPOItems = new CallApi()
            //    {
            //        ApiUrl = ConfigurationManager.AppSettings[“Url_PO_LineItems”].Replace(“{PO_NUMBER}”, PONumber),
            //        Format = “xml”,
            //        PageSize = intPageSize.ToString(),
            //        Page = mintCurPage.ToString(),
            //        Filter = getFilterString(),
            //        OrderBy = ((hdnPOLNSortOrder.Value != “”) ? hdnPOLNSortOrder.Value : “poln_lineno asc”)
            //    };

            //    ds = apiPOItems.RetrieveData(ref strErrorMsg, ref intRecordCount);*/

            //    string strErrorMsg = “”;
            //    int intRecordCount = -1;
            //    DataSet ds;

            //    CallApi apiPOItems = new CallApi()
            //    {
                    
            //        //ApiUrl = “https://myapicom/svc1/v2/tags/00-RIE-FF-03?project=usax&#8221;,
            //        ApiUrl = sApiUrl,
            //       // Format = “xml”,
            //        Format = “”,
            //        PageSize = “10”,
            //        Page = “1”,
            //        Filter = “”,
            //        OrderBy = “”
            //    };

            //    CallApi.ConnectCallComplete = true;

            //   // ds = apiPOItems.RetrieveData(ref strErrorMsg, ref intRecordCount);
            //    string strjsonres = apiPOItems.RetrieveJSON();
            //    JsonObject jsonObject = (JsonObject)JsonValue.Parse(strjsonres);

            //    var strvar = JsonValue.Parse(strjsonres);

            //    var t1 = strvar[“tags”];
            //    var t2 = t1[“tags”];

            //    var t3 = t2[“tags_delivery_status”];

            //    String strdeliverystatus = t3.ToString();
            //    strdeliverystatus = strdeliverystatus.Replace(“\””,””);
            //    strdeliverystatus = strdeliverystatus.Replace(“\\u000a”, “<bR>”);
            //    strdeliverystatus = “<b>” + strdeliverystatus + “<b>”;

            //   // var v = jsonObject[“tags”];
            //   //// JsonArray items = (JsonArray)jsonObject[“tags”];
            //   // var vv = v[1];
            //   // JsonValue jsval;
            //   // bool b = jsonObject.TryGetValue(“tags_delivery_status”, out jsval);

            //    if (strErrorMsg != “”)
            //    {
            //        // There was an ERROR
            //    }

            //    //model.Description = ds.Tables[2].Rows[0][“tags_description”].ToString();
               

            }

            // If we got this far, something failed, redisplay form
            return View(model);
        }

    }
}

 
Adding View:
  • In the Solution Explorer, expand the solution files
  • Right Click on Views–> Add –> New Folder. Name it as Tag as shown in fig 4.
  • Right Click on Tag Folder –>Add  New Item to create Lookup.cshtml as shown in figure 5.

image

Fig 4: Solution Explorer folder layout

image

Fig 5: Selecting a new View

  • Add the following code to the Lookup.cshtml
@model TagStatus.Models.TagModel

@{
    ViewBag.Title = “Tag Status Application”;
}

<h2>Tag Status Lookup</h2>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)    
    //style=”background-color: #C0C0C0″
    
    <fieldset>
        <legend></legend>
        <div class=”editor-label”>
            @Html.LabelFor(m => m.Name)
        </div>

      <div class=”editor-field”>
            @Html.TextBoxFor(Model => Model.Name)
           @Html.ValidationMessageFor(Model => Model.Name)
        </div>
        <p>
            <input type=”submit” value=”Search” />
        </p>
     <div class=”editor-label”>
            @Html.DisplayTextFor(m => m.Description)
        </div>
    </fieldset>
}

@*@using (Html.BeginForm())
{
    //style=”background-color: #C0C0C0″
        
    <p>Enter tag number to get tag status:</p>
    @Html.TextBoxFor(m => m.Name)
           
    <input type=”submit” value=”Search” />
    
    @Html.DisplayTextFor(m => m.Description)

   
}
*@

 

The view is the one that will host your HTML5 form. ASP.NET MVC 4 favors a development technique named convention over configuration, and the convention is to match the name of the action method (Lookup) in the controller with the name of the view, that is, Lookup.cshtml.

Inside the view, various ASP.NET MVC 4 Html Helpers present components of the ViewModel by rendering HTML elements that best fit the data types they map to in the ViewModel.

Final step (Global.asax):

To get the Tag status page displayed when the application is run, change the RegisterRoute and add the Tag Controller and the action Lookup as shown below in Global.asax file.

public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute(“{resource}.axd/{*pathInfo}”);

            routes.MapHttpRoute(
                name: “DefaultApi”,
                routeTemplate: “api/{controller}/{id}”,
                defaults: new { id = RouteParameter.Optional }
            );

            routes.MapRoute(
                name: “Default”,
                url: “{controller}/{action}/{id}”,
               defaults: new { controller = “Tag”, action = “Lookup”, id = UrlParameter.Optional }
                //defaults: new { controller = “Student”, action = “StudentInfo”, id = UrlParameter.Optional }
                //defaults: new { controller = “Home”, action = “Index”, id = UrlParameter.Optional }
            );
        }

With the Model, View and Controller in place, let us execute the project.

Testing the HTML Form on the Windows Phone 7 Emulator:

Running the app from Visual Studio through browser is the easiest way to test the form, but the look and feel doesn’t behave in a very mobile-like way. For viewing the output and testing the form, the Windows Phone 7 Emulator works perfectly.

The HTML5 form displays in the Windows Phone 7 Emulator, as shown in figure 2 . You can enter a tag number and submit the form. Submitting the form directs the browser to send the form information to the Tag controller because of the call to the Html Helper, Html.BeginForm( ). The BeginForm method directs the HTTP request to the TagController controller and then runs the Lookup action method when the submit button is pressed.

Once the user taps the submit button on the phone—and assuming the form passes validation—an HTTP POST Request is initiated and the data travels to the controller and to the Lookup action method. The controller code that lives in the TagController and processes the data that the HTTP Request sends. Because of the power of ASP.NET MVC 4 model binding, you can access the HTML form values with the same strongly typed object used to create the form – your Model.

You can immediately examine the modifications the jQuery Mobile library made by taking the following steps:

  1. Launch a Web page from within Visual Studio (F5/Ctrl).
  2. Open the browser’s developer tools to expose the runtime source (F12 in most browsers).
  3. Use the View Source command to expose the originally rendered source.

You can see the html returned to the client is different from our source.

Software development is shifting toward the mobile space. Businesses want to carve their niche in the mobile marketplace with native mobile applications and mobile Web sites – the two types of applications available for mobile devices. Creating native applications with native code means developing separate software that targets each platform of interest (e.g., one XAML app for Windows Phone 7 and one Objective-C app for iOS). Maintaining and supporting multiple code bases is challenging, in part because most software developer teams don’t have the resources to do so, especially across a large number of customers. Independent contractors often have to focus on only one or two platforms, limiting their prospects.

Download source code here.

“The future belongs to those who see possibilities before they become obvious.” — John Scully

Under the hood Part 5 : JavaScript application & C++ WinRT Component DLL – WinRT, Windows 8, C++, Metro

JavaScript application calling WinRT Component DLL

In this part, we will create a C++ WinRT Component DLL and access it from a JavaScript application.

We have developed a C++ WinRT Component DLL & C#.NET application in the post here Under the hood Part 1 : C++ WinRT Component DLL & C#.NET Metro application

we have seen the compiler generated components for making the C# application access the C++ WinRT component here Under the hood Part 2 : C++ WinRT Component DLL & C#.NET Metro application

We have seen the packaging and installation process that happens in the background during building and deploying of the applications here Under the hood Part 3 : WinRT, Windows 8, C++, C#.NET, Metro, WinRT Component DLL

We have seen the C++ XAML application calling the C++ WinRT Component DLL here Under the hood Part 4 : C++ WinRT Component DLL & C++ XAML application – WinRT, Windows 8, C++, Metro

Generally, in a LOB application, we might have to build a C++ Component DLL to take advantage of the performance of C++ in complex or computationally-intensive operations. The C++ component can access Windows operating system services that are not accessible through the Windows Runtime in the current version. Mostly, to reuse existing code that is already written and tested.

Download the source code here.

Step 1:

Create a Windows Runtime C++ Component DLL:

Open Visual Studio 2011 –> File –> New Project –> Go to Installed Templates section –> Visual C++ –>Select WinRT Component DLL and name it as CPPWinRTComponentDll as shown in the following figure.

image

Fig 1: CPPWinRTComponentDll project

Open WinRTComponent.h file and create an Employee class as shown in the following code snippet. The Platform namespace is where C++ defines its classes that are specific Windows Runtime types.

Create a private variables address_ and employeeid_. These are used as backing store to hold the values. We will use get() & set() properties to set or get these values.

    private:
            // Backing store for property address_ & employeeid_.
            Platform::String^ address_;
            int employeeid_;

 

In the public section, add the following code which are properties for the above backing store.

        property Platform::String^ Address
        {
            Platform::String^ get()
            {
                return  (address_);
            }
        }

        // Property with custom setter/getter
        property int EmployeeId
        {
            int get()
            {
                return employeeid_;
            }

            //    ‘set’ accessor is missing its value parameter
            void set(int value)
            {
                if(value <= 0)
                {
                    throw ref new Platform::InvalidArgumentException();
                    employeeid_ = value;
                }
            }
        }

 

We can also add some trivial get/set property with the compiler generating the backing store.

    public:
        // Trivial get/set property with compiler-generated backing store.
        property Platform::String^ Name;

 

Following is the complete code of the Employee class.

Code Snippet
public ref class Employee sealed
    {
    private:
            Platform::String^ address_;
            int employeeid_;
           
            //If i use a stack syntax, i get compilation error
            //Platform::String address2_;
            //Error    1    error C3149: ‘Platform::String’ : cannot use this type here without a top-level ‘^’   
            //c:\projects\cppwinrtcomponentdll with cpp app string\cppwinrtcomponentdll\winrtcomponent.h   

    public:

        property Platform::String^ Name;
        property Platform::String^ Address
        {
            Platform::String^ get()
            {
                return  (address_);
            }
        }

        property int EmployeeId
        {
            int get()
            {
                return employeeid_;
            }

            //    ‘set’ accessor is missing its value parameter
            void set(int value)
            {
                if(value <= 0)
                {
                    throw ref new Platform::InvalidArgumentException();
                    employeeid_ = value;
                }
            }
        }

    public:
        Platform::String^ SayHello()
        {
            return "Hello World";
        }

    public:
        int Add(int x, int y)
        {
            return x+y;
        }

    };

 

When you code your C++ component, if needed, you can use the regular C++ library and built-in types inside the class code except at the abstract binary interface (ABI) boundary where you are passing data to and from JavaScript. There, use Windows Runtime types and the special syntax that Visual C++ supports for creating and manipulating those types.

You have to make the Employee class as activatable class so that it can instantiated from another language such as JavaScript. To be consumable from another language such as JavaScript, a component must contain at least one activatable class. If needed, a Windows Runtime component can contain multiple activatable classes as well as additional classes known only internally to the component. Client code creates an instance of the component by using the new keyword just as for any class.

The Employee class must be declared as public ref class sealed. The ref class keywords tell the compiler to create the class as a Windows Runtime compatible type, and the sealed keyword specifies that the class cannot be inherited. A class must be sealed to be consumed by JavaScript.

In the Platform::String^ address_, the ^ operator signifies a handle to a Windows Runtime string type that under the covers is reference-counted and deleted when the count reaches zero. Instances of these types are created by using the ref new keywords. Do not explicitly call delete on these instances.

Types must be passed to and from the public methods as Windows Runtime types. If you use the C++ built-in types such as int, double and so on, the compiler will automatically convert them to the appropriate Windows Runtime type. No such conversion occurs unless you are passing the type across the ABI. Complex types such as Platform::String^ must be specified explicitly.

Step 2:

Creating a JavaScript Windows Metro style Application project:

To create a project in this solution, right-click the solution node in Solution Explorer. and select Add Project > Blank Application. Name it as WinWebApp1.

image

Fig 2: creating the JavaScript project
Add a reference to the component project

After you have compiled the C++ project for the first time, you can add it as a project reference in the JavaScript project. Right-click the References node in the JavaScript project, and select Add. When the Add References Manager dialog box appears, click “Solution” to display the available references in the solution. Select  “CPPWinRTComponentDll ” in this solution and click on Add button as shown in figure 3; The namespace and all public types and methods are now available to your JavaScript code. You can verify this by experimenting with the Member List or Statement Completion feature in the JavaScript file.

image

Fig 3: Adding reference to the C++ WinRT Component DLL.
Add the HTML markup that invokes JavaScript.

Add the following HTML into the <body> node of the default.html page

<body>
    <button id="callwinrt" onclick="CallWinRT()">Call WinRT</button>
<p></p>
    <label id ="Label1" style="background-color: grey;">Activation Object Result ->  </label><label id ="loaded" style="background-color: #51B65A;"></label>
    <p></p>
     <label id ="Label2" style="background-color: grey;">Calling Employee::SayHello() method     </label><label id ="callmethod" style="background-color: #51B65A;"></label>
    <p></p>
     <label id ="Label3" style="background-color: grey;" >Getting  Employee.Name Property value    </label><label id ="retrievedproperty" style="background-color: #51B65A;"></label>
    <p></p>

</body>

 

The default.html page appears as following.

Code Snippet
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>WinWebApp1</title>
    <!– WinJS references –>
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script src="/winjs/js/base.js"></script>
    <script src="/winjs/js/wwaapp.js"></script>
    <!– WinWebApp1 references –>
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/default.js"></script>
</head>
<body>
    <button id="callwinrt" onclick="CallWinRT()">Call WinRT</button>
<p></p>
    <label id ="Label1" style="background-color: grey;">Activation Object Result ->  </label><label id ="loaded" style="background-color: #51B65A;"></label>
    <p></p>
     <label id ="Label2" style="background-color: grey;">Calling Employee::SayHello() method     </label><label id ="callmethod" style="background-color: #51B65A;"></label>
    <p></p>
     <label id ="Label3" style="background-color: grey;" >Getting  Employee.Name Property value    </label><label id ="retrievedproperty" style="background-color: #51B65A;"></label>
    <p></p>

</body>
</html>

 

Add the JavaScript event handlers that call into the component DLL

Add the following function CallWinRT() at the end of the default.js file. This function is called when you click the button “Call WinRT” on the main page. Notice how JavaScript activates the C++ class, and then calls its methods and populates the HTML labels with the return values.

function CallWinRT() {
    // activate the native Windows Runtime component
    var nativeObject = new CppWinRTComponentDll.Employee();
    document.getElementById(‘loaded’).innerHTML = nativeObject;

    //call a method
    var num = nativeObject.sayHello();
    document.getElementById(‘callmethod’).innerHTML = num;

    nativeObject.name = "Kishore Babu";

    // get the value of the string property
    var propValue = nativeObject.name;
    document.getElementById(‘retrievedproperty’).innerHTML = propValue;
}

 

The complete code of default.js file is as follows.

Code Snippet
(function () {
    ‘use strict’;
    // Uncomment the following line to enable first chance exceptions.
    // Debug.enableFirstChanceException(true);

    WinJS.Application.onmainwindowactivated = function (e) {
        if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // TODO: startup code here
        }
    }

    WinJS.Application.start();
})();

function CallWinRT() {
    // activate the native Windows Runtime component
    var nativeObject = new CppWinRTComponentDll.Employee();
    document.getElementById(‘loaded’).innerHTML = nativeObject;

    //call a method
    var num = nativeObject.sayHello();
    document.getElementById(‘callmethod’).innerHTML = num;

    nativeObject.name = "Kishore Babu";

    // get the value of the string property
    var propValue = nativeObject.name;
    document.getElementById(‘retrievedproperty’).innerHTML = propValue;
}

 

Build the solution & deploy the application. If you go to start window, you will find an application WinWebApp1. Click on it.

image

Click on call WinRT button. The values from the C++ DLL are returned and set in the JavaScript application as shown in the following figure.

image

When you build a solution that contains a JavaScript project and a Windows Runtime Component DLL project, the JavaScript project files and the compiled DLL are merged into one package, which you can then deploy locally or remotely for testing or submit to the Windows Store. You can also distribute just the component project as an Extension SDK.

Debugging: When you debug a JavaScript solution that has a component DLL, you can set the debugger to enable either stepping through script, or stepping through native code in the component, but not both at the same time. To change the setting, right-click the JavaScript project node in Solution Explorer, then select Properties > Debugging > Debugger Type.

Be sure to select appropriate capabilities in the package designer. For example, if you are attempting to open a file using the Windows Runtime APIs, be sure to select the Document Library Access checkbox in the Capabilities pane of the package designer.

Download the source code here.

As a C++ developer, I find this useful. If you are a C++ developer and new to JavaScript, you sometimes make the mistake of not using the camel-casing in JS. If your JavaScript code does not seem to be recognizing the public properties or methods in the component, make sure that in JavaScript you are using camel-casing. For example, the Platform::String^ SayHello() C++ method must be referenced as sayHello() in JavaScript.

"The task of the leader is to get his people from where they are to where they have not been." — Henry Kissinger