{"id":663,"date":"2012-08-23T10:59:00","date_gmt":"2012-08-23T10:59:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/odatateam\/2012\/08\/23\/odata-101-building-our-first-odata-based-windows-store-app-part-1\/"},"modified":"2024-02-12T16:26:47","modified_gmt":"2024-02-12T23:26:47","slug":"odata-101-building-our-first-odata-based-windows-store-app-part-1","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/odata\/odata-101-building-our-first-odata-based-windows-store-app-part-1\/","title":{"rendered":"OData 101: Building our first OData-based Windows Store app (Part 1)"},"content":{"rendered":"

Download the sample code<\/a><\/p>\n

In this OData 101 we will build a Windows Store app that consumes and displays movies from the Netflix OData feed. Specifically, we will focus on getting data, displaying it in the default grid layout, and enabling search functionality.<\/p>\n

Because there’s a lot of details to talk about in this blog post, we’ll walk through the actual steps to get the application functional first, and we’ll walk through some of the code in a subsequent post<\/a>.<\/p>\n

Before you get started, you should ensure that you have an RTM version of Visual Studio<\/a> 2012 and have downloaded and installed the WCF Data Services Tools for Windows Store Apps<\/a>.<\/p>\n

1. Let’s start by creating a new Windows Store Grid App<\/strong> using C#\/XAML. Name the application OData.WindowsStore.NetflixDemo<\/strong>:<\/p>\n

\"image\"<\/a><\/p>\n

2. [Optional]: Open the Package.appxmanifest<\/strong> and assign a friendly name to the Display name<\/strong>. This will make an impact when we get around to adding the search contract:<\/p>\n

\"image\"<\/a><\/p>\n

3. [Optional]: Update the AppName<\/strong> in App.xaml<\/strong> to a friendly name. This value will be displayed when the application is launched.<\/p>\n

\"image\"<\/a><\/p>\n

 <\/p>\n

3. [Optional]: Replace the images in the Assets folder with the images from the sample project.<\/p>\n

4. Build and launch your project. You should see something like the following:<\/p>\n

\"image\"<\/a><\/p>\n

 <\/p>\n

\"image\"<\/a><\/p>\n

5. Now it’s time to add the OData part of the application. Right-click on your project in the Solution Explorer<\/strong> and select Add Service Reference…<\/strong>:<\/p>\n

\"image\"<\/a><\/p>\n

6. Enter the URL for the Netflix OData service in the Address<\/strong> bar and click Go<\/strong>. Set the Namespace<\/strong> of the service reference to Netflix<\/strong>:<\/p>\n

\"image\"<\/a><\/p>\n

(Note: If you have not yet installed the tooling for consuming OData services in Windows Store apps, you will be prompted with a message such as the one above. You will need to download and install the tools referenced in the link to continue.)<\/em><\/p>\n

7. Replace the contents of SampleDataSource.cs<\/strong> from the DataModel<\/strong> folder. This data source provides sample data for bootstrapping Windows Store apps; we will replace it with a data source that gets real data from Netflix. This is the code that we will walk through in the subsequent blog post<\/a>. For now, let’s just copy and paste the code from this gist<\/a>.<\/p>\n

8. Add a Search Contract<\/strong> to the application. This will allows us to integrate with the Win+F<\/strong> experience. Name the Search Contract SearchResultsPage.xaml<\/strong>:<\/p>\n

\"image\"<\/a><\/p>\n

9. Modify line 58 of SearchResultsPage.xaml.cs<\/strong> so that it doesn’t embed quotes around the queryText<\/strong>:<\/p>\n

\"image\"<\/a><\/p>\n

10. Insert the following two lines at line 81 of SearchResultsPage.xaml.cs<\/strong> to retrieve search results:<\/p>\n

\"image\"<\/a><\/p>\n

(Note: The gist<\/a> also includes the code for SearchResultsPage.xaml.cs if you would rather replace the entire contents of the file.)<\/em><\/p>\n

11. Launch the application and try it out. Note that it will take a few seconds to load the images upon application launch. Also, your first search attempt may not return any results. Obviously if this were a real-world application, you would want to deal with both of these issues.<\/p>\n

So that’s it – we have now built an application that consumes and displays movies from the Netflix OData feed in the new Windows UI. In the next blog post<\/a>, we’ll dig into the code to see how it works.<\/p>\n","protected":false},"excerpt":{"rendered":"

Download the sample code In this OData 101 we will build a Windows Store app that consumes and displays movies from the Netflix OData feed. Specifically, we will focus on getting data, displaying it in the default grid layout, and enabling search functionality. Because there’s a lot of details to talk about in this blog […]<\/p>\n","protected":false},"author":512,"featured_media":3253,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[48,65,86],"class_list":["post-663","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-odata","tag-odata","tag-samples","tag-windows-8"],"acf":[],"blog_post_summary":"

Download the sample code In this OData 101 we will build a Windows Store app that consumes and displays movies from the Netflix OData feed. Specifically, we will focus on getting data, displaying it in the default grid layout, and enabling search functionality. Because there’s a lot of details to talk about in this blog […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/posts\/663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/users\/512"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/comments?post=663"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/posts\/663\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/media\/3253"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/media?parent=663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/categories?post=663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/tags?post=663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}