Windows 8 Contracts and Extensions: Search Part- 2

• GET CODE DOWNLOAD

[Click on image for larger view.]Figure 4. The search screen with a dropdown filter added.

Optimizing your Search Results
When providing data for your search queries, performance is a key factor. Searching data can be time-consuming, especially when your app pulls the search result from a remote data source. While optimizing searches can be a domain-specific function, there are a few things to consider when architecting your solution.

The first approach is to cache searches. It's not uncommon for users to search for the same thing multiple times. If the remote data hasn't changed, caching recent search results can improve the experience for your users.

Setting a maximum number of results to return is crucial when working with large data sets. When the user runs a search that returns hundreds of individual items, he can quickly become lost looking through the data. Setting a maximum number of items to return has a couple of benefits. The first and most obvious is that it speeds up the query. More items returned means more data to be downloaded and displayed. The other benefit, as previously stated, is that hitting the maximum result set informs the user he needs to focus his search more.

Searching cached result sets is another approach to increase performance. If you have a result set for the search term "windows," it might be feasible to search that result set for "windows phone" instead of making an additional remote call. Of course, this approach runs into some limitations depending on how you're handling your search algorithm.

Regardless of your techniques, it's important to spend some time focusing on optimizing the search process. In today's world of immediate responses from search engines such as Bing and Google, users aren't very patient when it comes to waiting for their search results.

Customizing the Search Experience
In addition to the Search contract calling your app when a user enters a query, the contract exposes an API that allows your app to customize the search experience for the user. These features allow you to bridge the gap between your app and the search screen, and help the user find what he's looking for. After all, the purpose of search is to find something, and the more effective your app is at that, the better the UX will be.

The API is exposed through the SearchPane class, located in the Windows.ApplicationModel.Search namespace. The SearchPane class includes a static method, GetForCurrentView, that returns an instance of the current SearchPane:

// Need to add reference to Search namespace.
using Windows.ApplicationModel.Search;
// Call reference of current SearchPane.
var mySearchPage = SearchPane.GetForCurrentView();

Setting the Placeholder Text
When the user launches the Search charm from within your app, the search box is an empty text box. By adding some placeholder text in that box, you can remind the user of what he's searching for. The placeholder text is set by the PlaceHolderText property of the SearchPane. The first time you can set the placeholder text is during the activation of your app. Because your app can be activated in multiple ways, it's important to handle the initialization in each case. For instance, the demo app initializes the app in the OnLaunched and OnSearchActivated override methods by calling the ConfigureSearchContract method in the App class:

public SearchPane AppSearchPane { get; set; }

private void ConfigureSearchContract()
{
  AppSearchPane = SearchPane.GetForCurrentView();

  // Set initial place holder text.
  AppSearchPane.PlaceholderText = "Enter something great!";
}

Figure 5 shows the search pane after setting the placeholder text. The search pane is exposed through a property of the App class. This allows you to change the experience based on the current screen. In the case of a line-of-business (LOB) app, you might want to prompt the user to search for a specific type of object depending on the screen the user is currently using.

[Click on image for larger view.]Figure 5. The search pane after setting the placeholder text.

Launching Search from Code
The SearchPane object allows you to open the search pane from code. This is useful if your UI includes a search icon. There are two overrides to the Show method that will launch the Search contract. One of the overrides allows you to enter an initial string on which to search. This is a great way to pre-filter the results or search items related to the data with which the user is currently working. The following is an example of using the Show method when the user clicks the search icon at the top of the MainPage of the demo app:

private void btnSearch_Click(object sender, RoutedEventArgs e)
{
  App.AppSearchPane.Show("azure");
}

Automatically Searching from App
The Windows 8 Start screen doesn't include any type of search icon or any other indication that search is supported. However, if the user begins to type while on the Start screen, the search pane automatically opens and begins searching on what's entered. This is a great feature to add to any type of hub or data listing page within your app.

To enable this feature on a page, set the ShowOnKeyboardInput property of the SearchPane class to true. In the provided example, the ShowOnKeyboardInput is enabled on the MainPage and CategoryPage:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
  App.AppSearchPane.ShowOnKeyboardInput = true;
}

As with most features, there's a time and place to use this feature. As previously stated, hub-type pages or pages that display a collection of data are great examples. In addition, you should always enable this on your search pages. The user is already searching your app, so this allows him to continue searching for other queries without having to switch focus back to the search pane.

In most other circumstances, you'll find that this feature provides a confusing experience for users. If you have any other input controls on the screen, like a data-entry screen, typing on the keyboard will switch focus away from your controls and to the search pane. This is most likely not what the user will expect, so it's important to only use this feature where it makes sense.

Suggestions and Results
By default, the search pane will remember the user's search history and use it for search suggestions in a dropdown box as the user enters a new search query. The SearchPane class allows you to override these suggestions by supplying two types of suggestions: query suggestions and result suggestions.

A query suggestion is a common or frequently used search term. You see examples of this on every search engine out there. This provides the users some guidance on what the acceptable term might be. When the user selects a query suggestion, he's shown the search results for that query.

A result suggestion is a strong or exact match to the query text. If the user selects one of these suggestions, he should be taken directly to that detail page and not a search results page. Result suggestions contain more information than a query suggestion. A result suggestion is made up of a title, a brief description and a thumbnail.

Adding Suggestions
Each time the user changes the query text in the search pane, the SearchPane class raises the SuggestionsRequested event. The event handler for this event has a SearchPaneSuggestionsRequestedEventArgs passed as the second parameter, which has a Request property that's an instance of the SearchPaneSuggestionsRequest class.

SearchPaneSuggestionsRequest has a SearchSuggestionCollection, which returns the collection of suggestions. The search pane will show a maximum of five suggestions, so it's important to surface the most relevant suggestion at the beginning of the list.

There are two methods available for adding query suggestions to the results. The first is the AppendQuerySuggestions method, which adds a single string to the results stack. The AppendQuerySuggestions method will add a collection of results passed in as an IEnumerable<string> collection. Listing 2 shows adding up to three matching category names as query suggestions to the search results.

Listing 2. Adding up to three matching category names as query suggestions. 

void AppSearchPane_SuggestionsRequested(SearchPane sender, SearchPaneSuggestionsRequestedEventArgs args)
{
  if (ViewModel != null)
  {
    var cats = ViewModel.Categories
                        .Where(c => c.Name.ToLower().Contains(args.QueryText.ToLower()))
                        .Select(c=> c.Name)
                        .Take(3);

    if (cats.Count() > 0)
    {
      args.Request.SearchSuggestionCollection.AppendQuerySuggestions(cats);
    }
  }
}

Result suggestions can be added using the AppendResultSuggestion method; it has several parameters including a name, description, tag and thumbnail source. Listing 3 shows an example of adding matching sessions to the query. The tag should be a unique identifier that can be used to reference the specific result object.

Listing 3. Adding matching sessions to the query. 

// Define an image source.
var imageUri = new Uri("ms-appx:///Assets/search40.png");
var imageSource = 
  Windows.Storage.Streams.RandomAccessStreamReference.CreateFromUri(imageUri);

var sessions = ViewModel.Sessions
                        .Where(s => s.Name.ToLower().Contains(args.QueryText.ToLower()))
                        .Take(2);

if (sessions.Count() > 0)
{
  foreach (var session in sessions)
  {
    args.Request.SearchSuggestionCollection.AppendResultSuggestion(session.Name, 
      session.Description, 
      session.Id.ToString(), 
      imageSource, "");

  }
}

windows 8 windows 8 development windows development 19:43