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

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

This post is broken down into 3 exercises.

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.

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.

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

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:
     
     
     

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.

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

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.
   

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

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:
     • http://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.

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.
     

Download for Azure SDK