Posts Tagged ‘Metro UI’
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
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