How to provide cloud-based, JSON data to Windows 8 Metro Grid Applications – Part 3

Exercise 1: Modifying our Windows 8 Metro Grid application to consume JSON data across http

Download the Windows Azure SDK and Tools - To do these posts, absolutely necessary

This post is broken down into 3 exercises.

Exercise 1: Add a new class, called MySampleDataSource.
This will replace SampleDataSource. SampleDataSource has hard-code values to supply data to the user interface. MySampleDataSource will make asynchronous http calls and parse JSON data for the user interface. We will also add MyStack.cs to help with assigning items to groups.

Exercise 1: Task 1 - Introducing MySampleDataSource.cs and MyStack.cs

The next step is to add MySampleDataSource.cs module below.

This is a re-write of SampleDataSource.cs (provided by VS 2012 RC). Not many changes. I changed some of the base data elements very slightly. I also added a method to do the asynchronous http request for JSON data.

I have also added a MyStack.cs module. This is used to group items into groups. The code expects that the JSON data is ordered correctly when it is sent by the server (Windows Azure Cloud back-end).

It should be sorted by group, then by item.

There are two source files we will add.

1. Go back to Visual Studio 2012 RC.
2. If not visible, view "Solution Explorer."
   • Click on the "View" menu and select "Solution Explorer."
3. Right mouse click on the "DataModel" folder and add a new class.
   
   • Call that new class "MySampleDataSource.cs."
4. Paste in the code from the snippet below. See "Code snippet 1 - MySampleDataSource.cs."
5. Right mouse click on the "DataModel" folder and add a new class.
   • Call that new class "MyStack.cs."
6. Paste in the code from the snippet below. See "Code snippet 2 - MyStack.cs."
7. Solution Explorer should look like this:
   
8. After you’ve pasted the code in for MyStack.cs and MySampleDataSource.cs, you can try compiling your application.
   1. Go to the Build menu and choose Build Solution.
      
   2. Hopefully, you’ll receive 0 errors on the “output window.”
      

1. Notice that the 3 new classes replicate the structure and behavior of the built in types.
2. You can see these objects after you’ve added the two modules.
3. You will then rebuild your solution and switch to “Class View.”
   • The red box is what we will add.
     • MySampleDataCommon, MySampleDataGroup, MySampleDataItem
   • The objects in the green box were provided by Visual Studio.
     • SampleDataCommon, SampleDataGroup, SampleDataItem
4. We will add MySampleSource.cs.
   • MySampleSource.cs will include the follow key classes that allow us to asynchronous call into a JSON data store using http.
5. We will also add MyStack.cs
   1. This class will help manage individual items and their groups.

Some additional notes regarding the code

1. We added some using statements.
   • using System.Net.Http;
     • Supports http web requests
   • using Windows.Data.Json;
     • Provides useful parsing functions
   • using System.Threading.Tasks;
     • Support for threads
2. I slightly changed the name conventions.
   • From SampleData to MySampleData
     • Not a good idea for production code, but good for a quick hack.
3. You should easily be able to see parallels between the new MySampleDataSource.cs versus the old SampleDataSource.cs.
   • Changes to the base class (MySampleDataCommon)
4. We parse JsonObjects in the code.

   • You will see code like currGroup.TryGetValue("_subTitle", out val).
     ?

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

     public MySampleDataGroup(JsonObject currGroup) {     //     //  Extract attributes from the JsonObject     //     IJsonValue val;     if (currGroup.TryGetValue("_uniqueId", out val))         this.UniqueId = val.GetString();        if (currGroup.TryGetValue("_title", out val))         this.Title = val.GetString();        if (currGroup.TryGetValue("_subTitle", out val))         this.Subtitle = val.GetString();        if (currGroup.TryGetValue("_imagePath", out val))         this.SetImage(val.GetString());        if (currGroup.TryGetValue("_description", out val))         this.Description = val.GetString();        if (currGroup.TryGetValue("_content", out val))         this.Content = val.GetString();

     • This code allows you to extract strings from JSON data
     • It is how we populate MySampleDataItem, and MySampleDataGroup.
5. We implement a Stack object to help us group items together.
6. Items belong to a group so a Stack mechanism is used to track this relationship.

Code snippet 1 - MySampleDataSource.cs

?

Code snippet 2 - MyStack.cs

?

Exercise 2: Modify App.config.cs to invoke code in MySampleDataSource

There is code in MySampleDataSource that needs to be called. This code will make an asynchronous http request to retrieve JSON data.

1. Open the file App.xaml.cs
   
2. Add the code highlighted below
   
   • Take note that we've added two lines of code here.
     • We declared an object of type MySampleDataSource
     • We have called LoadRemoteDataAsync() on that object

Code Snippet 3 - App.xaml.cs

?

Exercise 3: Modify the user interface (XAML) code to bind correctly to the new data source.
Remember, we have 3 files for the user interface:

Modify the GroupDetailPage.xaml

1. We will modify GroupDetailPage.xaml
2. We'd like to bind to the "Content" property for a group.
   • That is just an extra data element that we've added.
   • We will add 2 lines of XAML Code
     
   • The updated file should look like this:
     

Modify the GroupDetailPage.xaml.cs

1. Open GroupDetailPage.xaml.cs
2. Navigate to the method LoadState()
   • Change the following line:
     • var group = SampleDataSource.GetGroup((String)navigationParameter);
3. Navigate to the method ItemView_ItemClick()()
   • Change the following line:
     • var itemId = ((SampleDataItem)e.ClickedItem).UniqueId;
4. See line 42 and 57 in the code below.

GroupDetailPage.xaml.cs

?

GroupedItemsPage.xaml.cs

1. Modify GroupedItemsPage.xaml.cs. You will add “My” to the appropriate lines. Take note of the following lines.
   1. Line 41
   2. Line 59
   3. Line 72

?

Code Snippet - ItemDetailPage.xaml.

1. Open ItemDetailPage.xaml.
2. We want to add a binding for Description
3. Insert the following 3 lines on line 62, 63, 64, as seen in the code below.
   

?

Code Snippet ItemDetailPage.xaml.cs

1. Open ItemDetailPage.xaml.cs
2. Modify the code on lines 50 and 64, similar to what we've been doing previously.

?

Conclusions – Next Steps
Note a few closing facts. First, we are not done. We need to create the cloud back end.

1. You will not be able to run this code yet.
2. We still need to create the Windows Azure Clod-based back end that will serve up JSON data.
   • That is the next post - creating the cloud project using Windows Azure
3. The key code happens in LoadRemoteDataAsync().
   
4. Let's reveiw this piece of code.
5. It creates an HttpClient object
   • This allows us to connect to an http endpoint using http
6. The code then performs and asynchronous call to the cloud service
   • Starts by navigating to the address:
     • https://127.0.0.1:81/FastMotorcycleListService.svc/list/SampleData/1
     • Later, when we migrate to Azure, this url will change
7. The next piece of code, loops through all the MySampleDataItem objects.
8. We parse the JSON array and they extract all the attributes, one by one.
   
9. The remainder of the code, as previously explained, uses a stack to manage the relationship between groups and items. We essentially add all the items to a group. Next, the groups are added to the application.
   
10. Next stop, the cloud, we will code up the Azure side of the equation.

The Next Post is about the Cloud
Although I haven't shown you how to build the cloud project, here is what it looks like from a few angles.

1. Here is the running web server, ready to take http requests and return JSON data.
   
2. Here is what the Visual Studio 2010 Azure project looks like. In the next post, we will build it from scratch. 
   '

   • ** Important Note **
     Just to be clear, we cannot run the cloud project yet. So trying to run our Windows 8 Metro Grid client yet isn’t possible. Step 1 – Create the cloud project (not done) Step 2 – Run the cloud project (not done) Step 3 – Run the Windows 8 Metro Data Grid Client Application (pending Step 1 & 2)

   • Once you start your Windows Azure Cloud Project, you are ready to run the Windows 8 Metro Grid client.
     
     If we are lucky, here is what we will see.
     

See you soon !

Download for Azure SDK