Windows Phone 7 EPiServer Template Foundation App

This blog post is about how to consume the EPiServer Template Foundation (ETF) service with a simple Windows Phone 7 application. How to create the ETF service can be found in part one, part two and part three from the EPiServer Template Foundation WCF REST JSON service blog post series. Please note that the ETF Service is not a part of the framework from Ted & Gustaf.

Introduction

3. Phone with contacts2. Phone with articlesWith the advent of iOS, Android and Windows Phone 7 cross-platform interopability is key. Today and tomorrow the websites we develop will be platforms that extend beyond webbrowsers. This is why REST JSON data services should be considered when you develop a website with EPiServer CMS that should be App integration ready.

While this blog post is a simple sample of how to consume the ETF service the same principles can be applied for any REST JSON service you extend your EPiServer CMS website with.

Getting started

Follow the instructions in the EPiServer Template Foundation WCF REST JSON service blog post on how to get EPiServer CMS with ETF up and running along with the ETF service.

In order to create Windows Phone 7 applications you’ll need to download the free tools from Windows Phone Developer Portal. The tools will integrate with any existing version of Visual Studio 2010. In the absence of Visual Studio it will install an Express version.

Creating the Windows Phone 7 project

With everything installed and configured we’re good to go. Start off by creating a new Windows Phone Pivot Application.

1. CreateWP7Project

With the Pivot Application we get a nice layout with smooth transitions when switching data views.

Consuming REST services

To consume REST services we use HTTP GET. In Windows Phone 7 applications (Silverlight) these calls are made asynchronously. We’re using the WebClient class to download the JSON returned from the service as a string result.

Parsing the result

The data passed to us from the ETF service will in the format of JSON. To parse this we’re using Json.NET which is a third party library. This enables LINQ to JSON which is pretty neat. While .NET does have native support for this using the DataContactJsonSerializer-class I opted for the Json.NET framework after having used some google-fu.

Linq.NET is quite clever. Using reflection it can take the type of T and parse the Json result into this type. In our case we create the class Article with properties that match the fields returned to us in the JSON result.

Looking at the string of JSON returned we create the following article class.

To parse the JSON string into a list of article-objects we use two simple lines of code.

Pivot control

Next we need to bind our list of articles to the pivot control. This is much like you would bind to a repeater control in ASP.NET. Let’s have a look at the XAML first.

There are a few things going on in the XAML. Basically we define two pivot areas which the user can switch between. Either by clicking the headers or using the touchpanel to slide left and right. We define the background by setting an ImageBrush and pointing to our background image.

We also create two listbox-controls which we bind our articles and contacts to. Instead of Eval(“<PropertyName>”) in ASP.NET we use {Binding <PropertyName>}.

Setting the datasource for the listboxes is easy. In the code-behind of the XAML we set the ItemsSource-property.

Demo

Here’s a YouTube-demo of the application in action using ETF contact and article data. The tree structure in EPiServer CMS can be seen to the right.


4. EPiServer Structure

Download

For brevity I’ve left out my service wrapper classes and configuration. You can find everything in the source code which you can download here.

Thank you for reading and Merry Christmas!

Resources

EPiServer World

Windows Phone 7 Development for Absolute Beginners

Windows Phone Developer Portal

daniel
daniel
Developer
Recent Posts
  • Crayleb

    Thanks for that. I am interested though in downloading the source code but it doesn’t appear to be there any longer. Do you still have the zip file? Thanks.

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Not readable? Change text. captcha txt

Start typing and press Enter to search