{"id":653,"date":"2012-08-23T11:06:00","date_gmt":"2012-08-23T11:06:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/odatateam\/2012\/08\/23\/odata-101-building-our-first-odata-based-windows-store-app-part-2\/"},"modified":"2012-08-23T11:06:00","modified_gmt":"2012-08-23T11:06:00","slug":"odata-101-building-our-first-odata-based-windows-store-app-part-2","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/odata\/odata-101-building-our-first-odata-based-windows-store-app-part-2\/","title":{"rendered":"OData 101: Building our first OData-based Windows Store app (Part 2)"},"content":{"rendered":"

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

In the previous blog post<\/a>, we walked through the steps to build an OData-enabled client using the new Windows UI. In this blog post, we’ll take a look at some of the code that makes it happen.<\/p>\n

ODataBindable, SampleDataItem and SampleDataGroup<\/h3>\n

In the walkthrough, we repurposed SampleDataSource.cs with some code from this gist<\/a>. In that gist, ODataBindable, SampleDataItem and SampleDataGroup were all stock classes from the project template (ODataBindable was renamed from SampleDataCommon, but otherwise the classes are exactly the same).<\/p>\n

ExtensionMethods<\/h3>\n

The extension methods class contains two simple extension methods. Each of these extension methods uses the Task-based Asynchronous Pattern<\/a> (TAP) to allow the SampleDataSource<\/strong> to execute an OData query without blocking the UI.<\/p>\n

For instance, the following code uses the very handy Task.Factory.FromAsync<\/strong> method to implement TAP:<\/p>\n

public static async Task<IEnumerable<T>> ExecuteAsync<T>(this DataServiceQuery<T> query)\n{\n    return await Task.Factory.FromAsync<IEnumerable<T>>(query.BeginExecute(null, null), query.EndExecute);\n}<\/pre>\n
SampleDataSource<\/h3>\n
The SampleDataSource<\/strong> class has a significant amount of overlap with the stock implementation. The changes I made were to bring it just a bit closer to the Singleton pattern<\/a> and the implementation of two important methods.<\/p>\n
Search<\/h4>\n
The Search<\/strong> method is an extremely simplistic implementation of search. In this case it literally just does an in-memory search of the loaded movies. It is very easy to imagine passing the search term through to a .Where()<\/strong> clause, and I encourage you to do so in your own implementation. In this case I was trying to keep the code as simple as possible.<\/p>\n
public static IEnumerable<SampleDataItem> Search(string searchString)\n{\n\tvar regex = new Regex(searchString, RegexOptions.CultureInvariant | RegexOptions.IgnoreCase | RegexOptions.IgnorePatternWhitespace);\n\treturn Instance.AllGroups\n\t    .SelectMany(g => g.Items)\n\t    .Where(m => regex.IsMatch(m.Title) || regex.IsMatch(m.Subtitle))\n\t\t.Distinct(new SampleDataItemComparer());\n}<\/pre>\n
LoadMovies<\/strong><\/p>\n
The LoadMovies<\/strong> method is where the more interesting code exists.<\/p>\n
public static async void LoadMovies()\n{\n    IEnumerable<Title> titles = await ((DataServiceQuery<Title>)Context.Titles\n        .Expand(\"Genres,AudioFormats,AudioFormats\/Language,Awards,Cast\")\n        .Where(t => t.Rating == \"PG\")\n        .OrderByDescending(t => t.ReleaseYear)\n        .Take(300)).ExecuteAsync();\n\n    foreach (Title title in titles)\n    {\n        foreach (Genre netflixGenre in title.Genres)\n        {\n            SampleDataGroup genre = GetGroup(netflixGenre.Name);\n            if (genre == null)\n            {\n                genre = new SampleDataGroup(netflixGenre.Name, netflixGenre.Name, String.Empty, title.BoxArt.LargeUrl, String.Empty);\n                Instance.AllGroups.Add(genre);\n            }\n            var content = new StringBuilder();\n            \/\/ Write additional things to content here if you want them to display in the item detail.\n            genre.Items.Add(new SampleDataItem(title.Id, title.Name, String.Format(\"{0}\\r\\n\\r\\n{1} ({2})\", title.Synopsis, title.Rating, title.ReleaseYear), title.BoxArt.HighDefinitionUrl ?? title.BoxArt.LargeUrl, \"Description\", content.ToString()));\n        }\n    }\n}<\/pre>\n
The first and most interesting thing we do is to use the TAP pattern again to asynchronously get 300 (Take<\/strong>) recent (OrderByDescending<\/strong>) PG-rated (Where<\/strong>) movies back from Netflix. The rest of the code is simply constructing SimpleDataItem<\/strong>s and SimpleDataGroup<\/strong>s from the entities that were returned in the OData feed.<\/p>\n
SearchResultsPage<\/h3>\n
Finally, we have just a bit of calling code in SearchResultsPage<\/strong>. When a user searches from the Win+F<\/strong> experience, the LoadState<\/strong> method is called first, enabling us to intercept what was searched for. In our case, the stock implementation is okay aside from the fact that we don’t any additional quotes embedded, so we’ll modify the line that puts the value into the DefaultViewModel<\/strong> to not append quotes:<\/p>\n
this.DefaultViewModel[\"QueryText\"] = queryText;<\/pre>\n
When the filter actually changes, we want to pass the call through to our implementation of search, which we can do with the stock implementation of Filter_SelectionChanged<\/strong>:<\/p>\n
void Filter_SelectionChanged(object sender, SelectionChangedEventArgs e)\n{\n    \/\/ Determine what filter was selected\n    var selectedFilter = e.AddedItems.FirstOrDefault() as Filter;\n    if (selectedFilter != null)\n    {\n        \/\/ Mirror the results into the corresponding Filter object to allow the\n        \/\/ RadioButton representation used when not snapped to reflect the change\n        selectedFilter.Active = true;\n\n        \/\/ TODO: Respond to the change in active filter by setting this.DefaultViewModel[\"Results\"]\n        \/\/       to a collection of items with bindable Image, Title, Subtitle, and Description properties\n        var searchValue = (string)this.DefaultViewModel[\"QueryText\"];\n        this.DefaultViewModel[\"Results\"] = new List<SampleDataItem>(SampleDataSource.Search(searchValue));\n\n        \/\/ Ensure results are found\n        object results;\n        ICollection resultsCollection;\n        if (this.DefaultViewModel.TryGetValue(\"Results\", out results) &&\n            (resultsCollection = results as ICollection) != null &&\n            resultsCollection.Count != 0)\n        {\n            VisualStateManager.GoToState(this, \"ResultsFound\", true);\n            return;\n        }\n    }\n\n    \/\/ Display informational text when there are no search results.\n    VisualStateManager.GoToState(this, \"NoResultsFound\", true);\n}<\/pre>\n
Item_Clicked<\/h4>\n
Optionally, you can implement an event handler that will cause the page to navigate to the selected item by copying similar code from GroupedItemsPage.xaml.cs<\/strong>. The event binding will also need to be added to the resultsGridView<\/strong> in XAML. You can see this code in the published sample.<\/p>\n","protected":false},"excerpt":{"rendered":"
Download the sample code In the previous blog post, we walked through the steps to build an OData-enabled client using the new Windows UI. In this blog post, we’ll take a look at some of the code that makes it happen. ODataBindable, SampleDataItem and SampleDataGroup In the walkthrough, we repurposed SampleDataSource.cs with some code from […]<\/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-653","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 the previous blog post, we walked through the steps to build an OData-enabled client using the new Windows UI. In this blog post, we’ll take a look at some of the code that makes it happen. ODataBindable, SampleDataItem and SampleDataGroup In the walkthrough, we repurposed SampleDataSource.cs with some code from […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/posts\/653","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=653"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/posts\/653\/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=653"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/categories?post=653"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/tags?post=653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}