Other articles in the PivotViewer V2 Series:

• Part 1: Intro
• Part 2: Creating a Project
• Part 3: Receiving OData
• Part 4: Tradecards

Connecting To an OData Collection

Lets get some data for PivotViewer to play with.  The easiest protocol for getting data for PivotViewer currently is OData.  This, by far, not the only way to consume data, but PivotViewer is most useful with large data collections and OData is a good way to navigate those feeds (when available). 

A good feed to play with for now is the Netflix OData Catalog API.

Right click on the PivotViewerSeries.Silverlight project and select Add Service Reference:

Connecting ViewModel to Data

To get the data from the ‘cloud’ to our PivotViewer, we need to make a stop at the ViewModel first.  Load up ViewModel\MainViewModel.cs and add the following code:

This block of code create a collection to hold our list of NetFlix titles.  Then, when our ViewModel is created, we asynchronously load our collection of data via LINQ.

Of special note here is that the DataServiceCollection will automatically page the collection in groups of 500.  When that happens, we get a chance to process the current incomplete set, and call LoadNextPartialSetAsync to get the next set of results. 

Connecting PivotViewer to ViewModel

The last step here is to attached our list of titles to our PivotViewer.  This is much easier to do now with PivotViewer 2.0.  We just have to bind to the ItemsSource property:

Conclusion

When we run our new application, we should get something like the following:

What we are seeing is 1000 NetFlix titles.  Pretty impressive huh?  What, you don’t believe me.  Well, join me on the next step to get some visuals.

Part 4: Tradecards

Other articles in the PivotViewer V2 Series:

• Part 1: Intro
• Part 2: Creating a Project
• Part 3: Receiving oData

Getting Started

The first step to using PivotViewer is creating new Silverlight 5 project.  Open Visual Studio and click File –> New –> Project.  Select the Silverlight Application project from under the Visual C# –> Silverlight node:

When the New Silverlight Application dialog appears, select the following options, as well as choosing a name that suits you.  I like to make the change highlighted:

Setting Up an MVVM Framework

While we can move forward without the overhead of an MVVM framework, part of what makes PivotViewer 2.0 so exciting is how easy it is to integrate with ViewModels.  Right click on the PivotViewerSeries.Silverlight project and select Add Library Package Reference.  Click Online on the left and type MVVM Light in the search box in the upper right corner.  Then click Install on the MvvmLight package:

At this point, some magic happens.  Once it is finished you can close the Add Library Package Reference window.  There are really only two bits of magic here that you need to know about. 

App.xaml Locator Resource

The first bit of magic is to know that the NuGet package changed your App.xaml to look something like this:

ViewModelLocator.cs

The second bit of magic is that a ViewModelLocator.cs file gets created in the newly created ViewModel folder.  This Locator object gets created when the application loads up and will be used by our Silverlight controls to load our ViewModels.  For each ViewModel, we will be adding a property pointing to it. 

Connecting MainPage.xaml To MainViewModel.cs

If you open MainPage.xaml and add the bolded DataContext to the UserControl, you have finished setting up our MainPage to use MainViewModel.  Simple huh?

Adding Our PivotViewer Control

The last step to creating a PivotViewer project is to add the pivot viewer.  First we need to add a reference to the Pivot assembly.  Right click on your PivotViewerSeries.Silverlight project and select Add Reference and select the System.Windows.Controls.Pivot assembly:

Add the following to the XAML namespaces in MainPage.xaml:

And finally, inside the LayoutRoot Grid control, add the PivotViewer control:

Now, If you run your application, you should see an empty PivotViewer:

Conclusion

You should now have a Silverlight Project complete with MVVM framework and working PivotViewer.  Attached is a ZIP file containing a copy of my project up to this point.

Up next, Part 3: Receiving oData

As part of being a Program Manager at Microsoft, I am responsible for talk with and helping customers for a few technologies.  Of following set:

• Silverlight Toolkit
• Silverlight Data & Data-Binding
• Silverlight Parser
• Silverlight Line of Business
• PivotViewer (v1 and v2)

I find that 90% of my customer emails want information/help/advice on PivotViewer.  While using the new version is really simple, I find there is still very little good documentation for how to use it and some of the best practices around it.  To correct that, I am kicking off a new series of blog posts all about using PivotViewer. 

Why am I doing this now?  Well I am headed back to Chicago to pack-up my house and move my ‘stuff’ to Redmond and while I am sitting there watching my life get put into boxes and loaded onto a truck, I figured this would be a good time to complete some work on this subject.  Also, I can then just point customers at work to my blog instead of having to type up the same thing 10 times a week =)

What You Will Need

• Visual Studio 2010 (any version should do it)
• Visual Studio 2010 SP1
• Silverlight 5 RC Runtime for Windows
• Silverlight 5 RC Tools for Visual Studio 2010 SP1
• Silverlight 5 RC SDK

Install all of the above (in the order shown is a good idea) and off we go:

PivotViewer V2 Series, Part 2: Creating a Project

Make note that I define a line of business (LOB) application as:

An application needing centrally stored/processed data; using its own networking contracts, where requirements change rapidly.

This given as a counterpoint to some common consumer-focused applications such as:

• Angry Birds, games generally don't have changing requirements, only new levels
• Weather Applications, they do not store and/or process data, only pull data from simple web APIs
• Facebook applications, they process data, but don't have their own data contracts

So, with that in mind, I plan to cover all the points a normal LOB developer would need to cover, but I will use tricks, such as attached databases, that will speed development.  In addition, I will not be covering items that are just good practice, such as using source control, even for yourself. 

I am also not doing this from a clean machine, so if I am missing anything, such as a download link, contact me.

Finally, I am focusing on using ASP.NET MVC 3 and Windows Phone 7.5 (Mango).  In the future I may make additions covering:

• Integrating the phone’s navigation into MVVM Light
• Adding and sharing code with Silverlight 5
• Adding and sharing code with ASP.NET MVC 3
• More complex data relationships (foreign keys, many-to-many, blobs)
• Porting the ASP.NET and database site over to Azure
• Publishing your application on the App Store
• Integration with my Offline (Occasionally Disconnected) Application demo
• Better “Design-Time Data”

Adding the Web Application

Ok, let’s start with the basics, open Visual Studio 2010 and create a new ASP.NET MVC 3 Web Application, I think you may need to download and install this package.

and on the next screen, select “Internet Application”.  I personally don’t create a unit test project at this point, I think it is better to just build it yourself at a later point.

Creating your Database

Now, let's get a database into the mix.  In your Solution Explorer (if you don’t see it, the hotkey is Ctrl + W, S), right click on App_Data and click Add and select New Item… and select SQL Server Database and give it a name like so:

Now, in the Solution Explorer, expand App_Data and double click on LobData.mdf to open it in the Server Explorer.

Now, right click on the Tables folder and select Add New Table:

Now, I am only planning on touching on the core point here, but you will ultimately want to create your schema as needed.  Here is the one I am going to roll with for now:

But, it is a good idea to set a Primary Key, and Row GUID Column.  To set the primary key, right click on your CustomerGuid column and select Set Primary Key.  Now in the Properties window (F4), make sure you don’t have any columns selected and change the Row GUID Column to CustomerGuid:

Click Save, give the table a name, such as “Customer” and you should be done with the database for now.

Creating your Entities

Now I personally love using a more ‘enterprise’ framework, such as CSLA, for the sake of time, we'll just stick with Entity Framework.  So, right click on your project and select Add and New Item… and choose the following:

and make sure to give it a name, such as LobModel.edmx in my case.  Then choose from the following sets of options:

And you should be dropped right into the edmx Model Editor:

And that’s all you need for that step, but first, let's add some sample data.  I like to plan my sample data to work two ways: Create it when I need it, or setup new sample data every time.  To make this happen I like to add an AddSampleData method to my Global.asax.cs; let’s do that now:

Now, if you want to have clean data every time, just remove the if statement.

Adding Your Windows Phone 7.5 (Mango) Project

First, I think you need to install this package.  Once you have that (and restarted Visual Studio), right click on your solution and select Add and select New Project… and select the following:

And select Windows Phone 7.1 from the New Windows Phone Application dialog.  Now, if I have learned anything from being a Program Manager at Microsoft, it is that when you create new applications all the time (I am up to “SilverlightApplication52” on this computer), learn to LOVE NuGet.  Let me show you how…  Come on, don’t fight it.

Right click on your Silverlight project and select Manage NuGet Packages… and enter MVVM Light into the “Search Online” box in the upper right hand corner and click the Install button on the first item that shows up:

Now, there are a lot of MVVM frameworks, and trust me, I have tried them all (or at least it feels like it).  I can say I am impressed with MVVM Light, BxF, and Caliburn Micro, but for the purpose of creating an application in 5 minutes or less and avoiding as much magic as possible, MVVM Light by Laurent Bugnion is awesome.

While we are at it, let’s get the Silverlight Toolkit for Windows Phone.  Search for “windows phone toolkit” and click Install:

Building the Solution

Right click on your solution and select Build Solution. Yup, not joking, this is a step.  If you skip this step, Entity Framework will not generate the code that we will need for the next step.  Please don’t skip it. 

Connecting Your Client And Server

To get the data from the web server to the phone and back again, we are going to use oData.

Getting the Server Ready

This might be a good time to talk about your options, but if you want to do this fast and easy, you really don’t have any.  The first step is to wrap our entities as a DataService<T>. 

First, add a reference to System.Data.Services, System.Data.Services.Client and System.ServiceModel DLLs that should be in your GAC.  Then create a new folder in the root of you web project called Services and create a new WCF Data Service like so:

And replace the contents of the LobEntities.svc.cs file with the following:

and if you F5 your web application and go to the following address:

http://localhost:[WhateverYourPortIsGoesHere]/Services/LobEntities.svc/

you should see the following:

Ok, I know, not that impressive, but we will get there. 

Silverlight (or WP7) and oData, Friends Forever!

If you want to get data back and forth in a modern application, I can’t see myself going with anything other than oData for all but the most hard-core enterprise applications.  It seems to be supported on everything, pretty much everywhere, and works great with Azure. 

Hell, did you know that SQL Server 2008 R2 can host a database as oData without any other tools?  Spin up SQL Server Management Studio, right click on a database, select Tasks and Register as Data-tier Application… and you will get a nice wizard walking you though the process.  More data can be found here.

Ok, back to the walkthrough:

Go to your Windows Phone project, right click on Service References and select Add Service Reference.

Click Discover and it should automatically find your service.  Give it a name and click OK.

You're done, the data is there. 

Don’t trust me?  Do we need to prove it to you.  Ok, fine, but I want to let you know that that hurts.

Making Your First ViewModel

On the Windows Phone project, the MVVM Light NuGet package creates a ViewModel\MainViewModel.cs class for you.  Let's go there, it looks something like this (with the comments removed).

So, let’s get our data into the mix. 

Connecting Your ViewModel to XAML

In our MainPage.xaml, we connect our ViewModel to our page’s DataContext, using MVVM Light’s ViewModelLocator to help make this easy.  To do this, put the following attribute into your PhoneApplicationPage element, and then just bind a list box to your ViewModel’s Customer property. 

Finally, Results��

And when you run your Silverlight application, you should get results like this:

And that, I think a good place to stop for now.  If you followed the steps, you have a great framework that combines ASP.NET MVC 3, WCF Data Services (oData), Windows Phone Mango, MVVM, and SQL Server Express. 

That’s not a bad place to start your Silverlight journey.