How to: Windows 8 and OData Services in a Metro Style Application

A couple of people have requested that I share how I created my Metro App.

The services I used were created on my SAP Netweaver Gateway system, I have recreated the application to use the ODATA.org Northwind service and use images from the Telerik demo site.

As I said in the original post I used the following  blog as a guideline, recreating the application I found there were a couple of notable differences so I will start from the beginning.

I downloaded Windows 8 Consumer Preview ISO image and then installed it as a WMWare Workstation, then I Installed Visual Studio 11 Premium edition.

Once installed and activated inside VS11  Click File –> Add New Project. Select the Split Application template under JavaScript -> Windows Metro style.

Then install the datajs package, Tools -> Library Package Manager -> Package Manager Console. Type ‘install-package datajs’.

I didn’t install the jquery package

Inside of default.html add a reference to datajs, I found I needed to add it before other references, there are dependencies in data.js to the sequence.

Next create the data.js code. I kept it simple and retained a lot of the code from the template.

In splitPage.html added some of the additional fields

 <h2 class="article-title win-type-ellipsis" data-win-bind="textContent: title"></h2>
 <h3 class="article-subtitle" data-win-bind="textContent: qty">
 <h3 class="article-subtitle" data-win-bind="textContent: price">

And that’s about it.

To get datajs working in Windows 8 with Netweaver Gateway XML OData services I had to make the following change to return window.DOMParser() instead of the ActiveXObject

The end result should look something like this

Windows 8 Metro Style Apps and Gateway

Unfortunately I will have to keep this post brief.  Below are some screen shots from my first Windows 8 Metro Style Application consuming SAP Netweaver Gateway data.

At present there are not many examples of how to consume OData in a Metro Style application, even harder to find an example using javascript.

I used the following blog as a guideline

http://blogs.msdn.com/b/lightswitch/archive/2012/03/13/using-lightswitch-odata-services-in-a-windows-8-metro-style-application-elizabeth-maher.aspx

Once I got started it was actually very easy.

I did however have a slight problem getting Datajs to parse Xml, for which I luckily found a simple work around.

My mind isn’t completely made up about Windows 8 development, I think I will have to code a couple more applications first, I will say it is a completely different experience to the other tools and platforms I have been developing on lately, it is very familiar and very simple, which kind of scares me.

Useful Resources:

Writing code for Metro style apps (JavaScript): http://msdn.microsoft.com/en-US/library/windows/apps/hh770842

Data Model: http://msdn.microsoft.com/en-us/library/windows/apps/hh758329.aspx

Asynchronous programming in JavaScript: http://msdn.microsoft.com/en-US/library/windows/apps/hh700330

Debugging apps: http://msdn.microsoft.com/en-US/library/windows/apps/hh441474