Friday, December 7, 2012 #

Implementing Search for BlogReader Windows 8 Sample

The BlogReader sample is an excellent place to start speeding up your Windows 8 development skills.  The tutorial is available here and the complete source code is available here

Create a project called WindowsBlogReader and create pages for ItemsPage.xaml, SplitPage.xaml and DetailPage.xaml and copy the corresponding code blocks from the sample listed above.

Created a class file FeedData.cs and copy the code.  Finally, create a class DateConverter.cs and copy the code associated with it.

With that you should be able to build and run the project.  There seems to be one issue in the sample feeds listed that the first week (feed1) doesn’t seem to expose it.  So you can skip that and use the second feed as first feed.  You will end up with one feed less but it works.

I had demonstrated this in the recent TechDays at Chennai.  How we can use the Search Contract and implement Search for within the Blog Titles.

First off, we need to declare that the App will be using Search Contract, in the Package.appmanifest file

image

Next, we would need a handle of the Search Contract when user types on the search window in Charms Menu.

If you had completed the code sample from the link above, you would have ItemsPage.xaml and ItemsPage.xaml.cs.  Open the ItemsPage.xaml.cs.

Import the namespaces using System.Collections.ObjectModel and System.Linq.

in the ItemsPage() constructor, right after this.InitializeComponent(); add the following code

Windows.ApplicationModel.Search.SearchPane.GetForCurrentView().QuerySubmitted += ItemsPage_QuerySubmitted;

This event is fired when users open up the Search Panel from Charms Menu, type something and hit enter.

We need to handle this event declared in the delegate.  For that we need to pull the FeedDataSource instantiation to the root of the class to make it global.

So, add the following as the first line within the partial class

FeedDataSource feedDataSource;

Also, modify the LoadState method, as follows:-

protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
       {
           feedDataSource = (FeedDataSource)App.Current.Resources["feedDataSource"];

           if (feedDataSource != null)
           {
               this.DefaultViewModel["Items"] = feedDataSource.Feeds;
           }
       }

Next is to implement the ItemsPage_QuerySubmitted method

void ItemsPage_QuerySubmitted(Windows.ApplicationModel.Search.SearchPane sender, Windows.ApplicationModel.Search.SearchPaneQuerySubmittedEventArgs args)
        {
            this.DefaultViewModel["Items"] = from dynamic item in feedDataSource.Feeds
                                             where
                                             item.Title.Contains(args.QueryText)
                                             select item;
        }

As you can see we are almost using the same defaultviewmodel with the change that we are using a linq query to do a search on feeds which has the Title that matches QueryText.

With this we are ready to run the app.

Run the App.  Hit the Charms Menu with Windows + C key combination and type a text to search within the blog.

You can see that it filters the Blogs which has the matching text.

We can modify the above Linq query to do a search for the Text in other attributes like description, actual blog content etc.,

I have uploaded the complete code since the original WindowsBlogReader Code is not available for download.  You can download it from here

note:  this code is provided as-is without any warranties. 

Cheers!!!

Posted On Friday, December 7, 2012 1:20 PM | Comments (22)