Tag Archives: WinRT

Using JSON and C++ in Windows 8 Apps

The LiveSDK team has a bunch of exciting samples demonstrating using JavaScript along with HTML, C# with XAML to build apps that integrate Live services. Sadly however, a full blown C++ sample is missing from the lot as I write this today. Last week I built a proof of concept sample PhotoViewer app as part of writing samples for my upcoming book on building Windows 8 Apps using C++ and XAML. What follows below is a summary post on how to consume JSON APIs in C++.

Windows Runtime has built in APIs to support JSON APIs: both building objects based on responses from web services like the Live service in our case and then parse the object collection to build desired features. The namespace Windows::Data::Json namespace contains a list of APIs that make JSON consumption a breeze. The various classes and types that form part of this namespace are listed below:

  1. IJsonValue
  2. JsonArray
  3. JsonError
  4. JsonErrorStatus enumeration
  5. JsonObject
  6. JsonValue
  7. JsonValueType enumeration.

In order to make successful requests to Live services, it is recommended to have users sign in using “Microsoft Accounts”. Purchasing and downloading apps from the Windows Store needs users to sign in with Microsoft Account. Having such an account also enables single sign on for all Microsoft services. We will explore the process of triggering a sign in operation in a later blog post. For today, we focus on making requests to the skydrive APIs.

Fetching Album data from Skydrive

The Live Services team built a great “test” portal for testing various Live APIs here.  The first web request to fetch a list of album data is to make a GET request to the base API url at http://apis.live.net/v5.0/me/albums and append an authentication token. This token is initially obtained when the user signs in to the Live OAuth authentication API. For our C++ code to make a successful web request, we rely on XHR (Xml Http Request). The LiveSDK samples on GitHub have a helper class called XHREvent and we will rely on the same. Our code to make a web request looks like this:

 1: std::wstring url = PhotoSkyCpp::BaseApiUrl + L"/me/albums" + SampleDataSource::GetAccessTokenParameter();

 2: SendRequest(

 3:     ref new Uri(ref new String(url.c_str())),

 4:     "GET",

 5:     ref new XHRDataReceivedHandler(this, &SampleDataSource::OnDataAvailable),

 6:     ref new XHRCompletedHandler(this, &SampleDataSource::OnGetAlbumDataCompleted),

 7:     ref new XHRFailedHandler(this, &SampleDataSource::OnSendRequestFailed));

The SendRequest function accepts a URL, an action verb, which in our case is “GET” and three callback functions, one for notifying if data is available, one for the data fetch completion status and finally a callback to handle request send failures.

For the case of our discussion, we will ignore both the OnDataAvailable and OnSendRequestFailed functions. When the Live API sends a response to our “/me/albums” request, it does so in JSON format. This response is passed back to the OnGetAlbumDataCompleted handler and we will build our JSON objects here.

In order to build a Json Object successfully from a web response such as Live service, we first need to initialize the Json object as follows:


 1: JsonObject^ tokenResponse = ref new JsonObject();


The JsonObject class listed above has a static function named TryParse that accepts a string and a reference to a JsonObject type that can be initialized with the said response string.


 1: if (JsonObject::TryParse(responseString, &tokenResponse))

 2: {

 3:     ... use the JsonObject tokenResponse

 4: }


Once the JsonObject is initialized successfully, we obtain a read-only collection of the Json Objects. The next step is parsing this collection for the data key. For a valid Json object view, a data key must be present. The Lookup method on the IMapView collection returns a IJsonValue^ associated with the data key. The next step is to obtain a string representation of the series of Jsonvalues by calling the Stringify method on the IJsonValue^ obtained from the previous step.


 1: auto map = tokenResponse->GetView();

 2: IJsonValue^ value = map->Lookup("data");

 3: String^ s = value->Stringify();


The final step is to iterate over the collection of items present in this string and do whatever is needed for your app.


 1: JsonArray^ mapValue = ref new JsonArray();

 2: if (JsonArray::TryParse(s, &mapValue))

 3: {

 4:     auto vec = mapValue->GetView();

 5:     std::for_each(begin(vec), end(vec), [this](IJsonValue^ M)

 6:     {

 7:         Name = M->GetObject()->GetNamedString("name");

 8:         ID = M->GetObject()->GetNamedString("id");

 9:         //Do specific operations using the Name and ID properties

 10:     });

 11: }


This is a very simplified introduction to using the JSON APIs in Windows Runtime and consume the same from C++.



Announcement: Book on C++ /Cx and Metro style app development


I am happy to announce an upcoming book on C++ /Cx and Metro style app development. This book is currently in the works and will be published by Microsoft Press. I present a brief list of topics that are covered in the book.

1. Windows Runtime, WRL and writing apps using WRL.

2. C++ /Cx and C++ 11 features.

3. XAML and C++ /Cx (includes discussion on XAML plus DirectX)

4. Incorporating C++ AMP in Metro style apps.

5. Building WinRT components using C++ /Cx

6. Unit Testing support for C++ in VS 2011.

C++ 11 is new; C++ /Cx is new and so is WinRT. I am super excited to work on these technologies and author a book. Stay tuned for more!!


Implementing an IValueConverter in C++ /Cx for Data Binding

To create a value converter, we create a class that implements the IValueConverter interface and then implement the Convert and (optionally) the ConvertBack methods. Converters can change data from one type to another, translate data based on cultural info, or modify other aspects of the presentation.

In our sample today, we create a basic two way grade converter based on the DataBinding Metro SDK Sample App. Unlike most samples, this example shows a Two Way implementation of the IValueConverter interface and binding.

Our XAML markup is fairly simple and straight forward.

This is the MainPage.xaml


    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        <Grid x:Name="Input" Grid.Row="0">
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <TextBlock Style="{StaticResource BasicTextStyle}" TextWrapping="Wrap" Text="The demonstration below shows how a custom value converter (an IValueConverter implementation) is used to control how data is displayed." />                
        <Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1">
                <Border BorderBrush="LightBlue" BorderThickness="4" CornerRadius="20" Margin="5">
                    <StackPanel Margin="5">
                        <!-- Add converter as a resource to reference it from a Binding. -->
                            <local:DataConverter x:Key="GradeConverter"/>
                        <TextBlock Style="{StaticResource BasicTextStyle}" Text="Percent grade:" Margin="5" />
                        <Slider x:Name="sliderValueConverter" Minimum="1" Maximum="100" Value="70" Margin="5"/>
                        <TextBlock Style="{StaticResource BasicTextStyle}" Text="Letter grade:" Margin="5"/>
                        <TextBox x:Name="tbValueConverterDataBound" 
                                Text="{Binding ElementName=sliderValueConverter, Path=Value, Mode=TwoWay, 
                                              Converter={StaticResource GradeConverter}}" 
                                 Margin="5" Width="150"/>

Next, we create a local C++ class, named DataConverter. This is the class that implements the IValueConverter interface. The IValueConverter interface is found in the Windows::UI::Xaml::Data namespace.

Here is the full listing of the DataConverter.h

// This class provides a simple IValueConverter implementation
#pragma once

#include "pch.h"

using namespace Platform;
using namespace Windows::UI::Xaml::Data;
using namespace Windows::UI::Xaml::Interop;

namespace DataBinding
    public ref class DataConverter sealed : Windows::UI::Xaml::Data::IValueConverter
        virtual Object^ Convert(Object^ value, TypeName targetType, Object^ parameter, String^ language);
        virtual Object^ ConvertBack(Object^ value, TypeName targetType, Object^ parameter, String^ language);

Next, we provide the implementation of DataConverter class.

Here is the full listing of DataConverter.cpp

#include "pch.h"
#include "DataConverter.h"

using namespace DataBinding;

using namespace Platform;
using namespace Windows::Foundation;
using namespace Windows::Foundation::Collections;
using namespace Windows::Globalization::NumberFormatting;



Object^ DataConverter::Convert(Object^ value, TypeName targetType, Object^ parameter, String^ language)
    String^ _grade = "";
    String^ _valueString = "";
    //try parsing the value to int
    int _value = ((Windows::Foundation::IPropertyValue^)value)->GetInt32();
    if (_value < 50)
        _grade = "F";
    else if (_value < 60)
        _grade = "D";
    else if (_value < 70)
        _grade = "C";
    else if (_value < 80)
        _grade = "B";
    else if (_value < 90)
        _grade = "A";
    else if (_value < 100)
        _grade = "A+";
    else if (_value == 100)
        _grade = "SUPER STAR!";
    return _grade;

Object^ DataConverter::ConvertBack(Object^ value, TypeName targetType, Object^ parameter, String^ language)
    int _value = 0;
    String^ _grade = ((Windows::Foundation::IPropertyValue^)value)->GetString();
    if (_grade == "SUPER STAR!")
        _value = 100;
    else if (_grade == "A+")
        _value = 95;
    else if (_grade == "A")
        _value = 85;
    else if (_grade == "B")
        _value = 75;
    else if (_grade == "C")
        _value = 65;
    else if (_grade == "D")
        _value = 55;
    else if (_grade == "F")
        _value = 45;

    return _value; 

That’s it. Our sample is now ready.


Reflection in the native Windows Runtime

If the Windows Runtime has all sorts of metadata information on classes, types, interfaces etc, could a developer implement Reflection for native types? James McNellis has done just that. He has coded up a reflection library for native types. Just shows how cool native really is!!

Head over to his blog for more details.


Programming Windows Sixth Edition is coming!!!

Charles Petzold is back with “Programming Windows Sixth Edition”, updated for Windows 8. The book focuses on programming Windows 8 Apps using C# and XAML. Microsoft Press is offering an amazing deal on the upcoming book. Head over to http://blogs.msdn.com/b/microsoft_press/archive/2012/04/21/mark-your-calendars-programming-windows-sixth-edition-is-coming.aspx and learn more about the offer. Please read the terms and conditions of the offer carefully and purchase the book.


[Updated URL]:Live Streaming of the Developing Windows 8 Metro apps on Channel 9

Live Streaming link at http://channel9.msdn.com/Events/Windows-Camp/Developing-Windows-8-Metro-style-apps-in-Cpp

I will be tuned in for the entire event. I would encourage all C++ developers to watch the event online, if you cannot make it to Redmond. These are exciting times for C++ developers with Windows 8, XAML and Metro style apps.

Developing Metro style apps using C++: Free event in Redmond, live streaming on Channel 9 starting shortly


From the page, http://channel9.msdn.com/posts/Announcing-Building-Windows-8-Metro-Style-Apps-with-C-A-Free-Event , the Visual C++ team is conducting a free, day long, event in Redmond, on May 18, 2012. The registration is currently full, but the team intends to stream the event Live!!!

Herb Sutter is doing the keynote and the day is full of deep technical training on all things Metro: C++, C++ /CX, WinRT, XAML, DirectX and much more.

This is not an event for C# or VB.net or JS developers.