Современные приложения

  • Статья

Реализация поиска в приложениях Windows Store и Windows Phone Store

Рэчел Аппель

Rachel AppelПоиск является неотъемлемой часть нашей жизни в цифровом мире. Ежедневно миллионы людей используют сайты вроде Bing и Google для поиска информации. Кроме того, миллионы операций поиска осуществляются по Web, приложениям и внутренним хранилищам данных. Поскольку поиск, несомненно, является самой часто используемой функциональностью, разумно помочь пользователям упростить поиск в ваших приложениях.

Как Windows облегчает поиск

Из-за различий физических форм-факторов ПК, планшетов и лэптопов операционные системы Windows предоставляют UI поиска, которые ведут себя соответственно аппаратной платформе. Например, Windows Phone 8.1 использует Cortana для поиска (подробнее о Cortana см. по ссылке bit.ly/1nFGMxG). Приложения Windows Phone Store могут выполнять собственный поиск с помощью Cortana или без. Устройства с Windows Phone имеют особую аппаратную кнопку для поиска, расположенную в нижней правой части самого смартфона — рядом с кнопками Windows (в центре) и Back (слева).

Вызвать поиск в Windows 8 можно самыми разнообразными способами. Самый простой способ — начать набор какого-то слова в то время, как вы находитесь на экране Windows Start. Это приводит к запуску глобального поиска — на устройстве и в Интернете. Другой способ — жест смахивания, если устройство поддерживает сенсорный ввод. Инициировать поиск можно и так: поместить курсор мыши в правый верхний или правый нижний угол экрана и немного задержать его там.

Наконец, если вы обожаете комбинации клавиш, используйте Windows+S для отображения Windows Search. Менять значки на разных форм-факторах устройств нет нужды. Когда пользователь видит увеличительное стекло, он понимает, что это обозначает функцию поиска.

Microsoft рекомендует применять элемент управления SearchBox, хотя для обратной совместимости не возбраняется использовать чудо-кнопку Search (также называемую Search Contract). Подробнее на эту тему см. по ссылке bit.ly/1xkqwXN. Используя SearchBox, вы можете добавлять его на холст своего приложения или показывать в панели приложения. Если поиск является одним из основных способов взаимодействия с вашим приложением, лучше всего предоставлять доступ к нему единым образом в нужных частях UI.

Хорошим является любое место, которое легко обнаруживается на холсте приложения, обычно в правом верхнем углу. Приложения, которые имеют дело с новостями, фильмами, спортивной хроникой, научными статьями и финансовыми отчетами, — отличные примеры программ, которым требуется хорошо заметное, выделяющееся поле поиска. Иногда пользователи просто бесцельно просматривают разные страницы в Интернете, но гораздо чаще они точно знают, что им нужно, и предпочитают переходить напрямую в соответствующее место через функцию поиска.

Возможно, вас беспокоит, что поле поиска займет слишком много места на экране. Это беспокойство оправданное. Использование репрезентативного значка поиска — один из способов вывода небольшого, но заметного визуального индикатора поиска. Когда пользователь щелкает или касается такого значка, появляется сам элемент управления SearchBox, после чего можно вводить строку поиска и просматривать результаты.

SearchBox позволяет находить данные как локально, так и глобально. Как и следовало ожидать, глобальный поиск происходит, когда ваше приложение обращается к данным за пределами самого приложения. Эти данные могут находиться на съемном устройстве, в сети или Интернете. Если вы ведете поиск в файлах, например ищете музыку или картинки на устройстве, не забудьте указать эти возможности в манифесте программы.

Вы можете включать поля поиска в свои приложения Windows Store и Windows Phone Store, используя XAML или HTML. С концептуальной точки зрения, элементы управления и вызовы API работают одинаково в разных языках, но, естественно, с разным синтаксисом. Кодирование для чудо-кнопки Search тоже примерно одинаковое. Код должен выполнять одинаковые базовые операции, и независимо от языка действуют одни и те же правила создания пользовательской среды (UX).

На рис. 1 демонстрируется XAML-элемент SearchBox. Вы можете поместить этот элемент управления в любой контейнер, такой как StackPanel. Как и в случае других элементов управления, вы должны подключить события, генерируемые в ответ на действия пользователя, которые вызывают функциональность поиска. При использовании SearchBox указывать значок поиска не требуется. Скорее всего вы предпочтете установить FocusOnKeyboardInput в True. Это даст возможность пользователям просто начинать набирать строку и автоматически переключаться на поле ввода элемента SearchBox.

Рис. 1. SearchBox с предложениями (при использовании XAML и C#)

<SearchBox x:Name="SearchBox" Height="35"
  HorizontalAlignment="Stretch" VerticalAlignment="Bottom"
  SuggestionsRequested="SearchBoxEventsSuggestionsRequested"  
  QuerySubmitted="SearchBoxEventsQuerySubmitted"
  FocusOnKeyboardInput="True"/>
public sealed partial class SearchBoxWithSuggestions :
  SDKTemplate.Common.LayoutAwarePage
{
  public SearchBoxWithSuggestions()
  {
    this.InitializeComponent();
  }
  private static readonly string[] suggestionList =
  {
    "ActionScript", "Ada", "Basic", "C", "C#", "C++", "Clipper",
      "Clojure", "COBOL", "ColdFusion", "Dart", "Delphi", "Erlang",
      "F#", "Haskell", "HTML", "Java", "JavaScript", "LISP",
      "Objective-C", "Pascal", "Perl", "PowerShell", "R", "Ruby",
      "Rust", "RPG", "SQL", "SmallTalk", "Small Basic", "Swift",
      "TypeScript", "Turbo C", "Visual Basic"
  };
  private void SearchBoxEventsSuggestionsRequested(
    object sender, SearchBoxSuggestionsRequestedEventArgs e)
  {
    string queryText = e.QueryText;
    if (!string.IsNullOrEmpty(queryText))
    {
      Windows.ApplicationModel.Search.
        SearchSuggestionCollection suggestionCollection =
        e.Request.SearchSuggestionCollection;
      int n = 0;
      foreach (string suggestion in suggestionList)
      {
        if (suggestion.StartsWith(queryText,
          StringComparison.CurrentCultureIgnoreCase))
        {
          Uri uri = new Uri("ms-appx:///Assets/laptop1.png");
          RandomAccessStreamReference imageSource =
            RandomAccessStreamReference.CreateFromUri(uri);
          suggestionCollection.AppendResultSuggestion(
            suggestion, "", n.ToString(), imageSource, suggestion);
        }
      }
    }
  }
  private void SearchBoxEventsQuerySubmitted(
    object sender, SearchBoxQuerySubmittedEventArgs e)
  {
    SearchListView.Items.Add(e.QueryText);
  }
}

В XAML два основных события, которые вам нужно подключить: SearchBoxEventsSuggestionsRequested и SearchBoxEventsQuerySubmitted. Первое срабатывает один раз при каждом нажатии клавиши, чтобы в реальном времени захватывать каждую нажимаемую клавишу. Второе, как предполагает его имя, генерируется, когда пользователь нажимает Enter, щелкает, касается значка поиска или как-то иначе инициирует поиск. Обработчик события SearchBoxEventsQuerySubmitted — то место, куда вы добавляете код, выполняющий сам поиск. Рис. 1 показывает оба события в действии.

В C# первым делом нужно предоставить список строк поиска, которые будут использоваться как предложения (suggestions). На рис. 1 показан массив строк с именем suggestionList. Этот список содержит названия нескольких языков программирования. Код на рис. 1 демонстрирует реализацию поиска с помощью SearchSuggestionCollection. При генерации события SearchBoxEventsSuggestionsRequested его аргумент с именем «e» содержит SearchSuggestionCollection, в который вы можете дописывать запросы. Это отражено на рис. 1, где объявляется и задается переменная suggestionCollection.

Вы можете дописывать запросы в SearchSuggestionCollection вызовом метода AppendQuerySuggestion, AppendQuerySuggestions, AppendSearchSuggestion или AppendResultSuggestion. Полученные предложения появляются в том же списке как предложения запроса, но они позволяют передавать дополнительные данные, например изображение, в SearchBox.

Если в XAML есть концепция Resource, которая позволяет задавать стили и другие эстетические средства, то HTML использует CSS для выполнения тех же задач. В качестве примера: поскольку элемент <div> на рис. 2 не содержит ссылок на какие-либо стили, он задействует по умолчанию класс .win-searchbox из Windows Library for JavaScript (WinJS), который является частью базовой CSS в WinJS.

Рис. 2. SearchBox с предложениями (при использовании HTML и JavaScript)

<div id="searchBox" data-win-control="WinJS.UI.SearchBox"></div>
(function () {
"use strict";
var suggestionList = ["ActionScript", "Ada", "Basic", "C", "C#", "C++", "Clipper",
  "Clojure", "COBOL", "ColdFusion", "Dart", "Delphi", "Erlang", "F#", "Haskell",
  "HTML", "Java", "JavaScript", "LISP", "Objective-C", "Pascal", "Perl",
  "PowerShell", "R", "Ruby", "Rust", "RPG", "SQL", "SmallTalk",
  "Small Basic", "Swift", "TypeScript", "Turbo C", "Visual Basic"];
var page = WinJS.UI.Pages.define("/html/S1-SearchBoxWithSuggestions.html", {
    ready: function (element, options) {
      var searchBox = document.getElementById("searchBox");
      searchBox.addEventListener("suggestionsrequested",
        suggestionsRequestedHandler);
      searchBox.addEventListener("querysubmitted", querySubmittedHandler);
      searchBox.winControl.focusOnKeyboardInput = true;
    }
  });
function suggestionsRequestedHandler(eventObject) {
    var queryText = eventObject.detail.queryText,
      query = queryText.toLowerCase(),
      suggestionCollection = eventObject.detail.searchSuggestionCollection;
    if (queryText.length > 0) {
      for (var i = 0, len = suggestionList.length; i < len; i++) {
        if (suggestionList[i].substr(0, query.length).toLowerCase() === query) {
          suggestionCollection.appendQuerySuggestion(suggestionList[i]);
        }
      }
    }
  }
function querySubmittedHandler(eventObject) {
    var queryText = eventObject.detail.queryText;
    WinJS.log && WinJS.log(queryText, "sample", "status");
  }
})();

На рис. 3 показано, что получится в период выполнения кода с рис. 1 или 2.

Три SearchBox с запросами и полученными предложениями
Рис. 3. Три SearchBox с запросами и полученными предложениями

Заметьте, что элементы SearchBox на рис. 3 выводят предложения, фильтруемые на основе того, что вводится пользователем. Это очень удобный функционал. К счастью, это как раз то, что элемент управления SearchBox делает за вас автоматически в XAML или HTML. Однако вы должны сами выполнять реальный поиск в обработчике события передачи запроса. То есть чтение файлов, доступ к базам данных и веб-сервисам или поиск в Web возлагается на вас.

Когда вы дописываете элементы в SuggestionCollection, метод AppendResultSuggestion позволяет вам предоставлять больше информации, чем метод AppendQuerySuggestion. Вы можете передавать текст, описание, изображение и альтернативный текст, которые применяются к элементам в списке, как видно в коде на рис. 4. Результаты работы кода с рис. 4 показаны на экранном снимке на рис. 5.

Рис. 4. Код для добавления изображений к предложениям

private void SearchBoxEventsSuggestionsRequested(object sender,
  SearchBoxSuggestionsRequestedEventArgs e)
{
  string queryText = e.QueryText;
  if (!string.IsNullOrEmpty(queryText))
  {
    Windows.ApplicationModel.
      Search.SearchSuggestionCollection suggestionCollection =
      e.Request.SearchSuggestionCollection;
    int n = 0;
    foreach (string suggestion in suggestionList)
    {
      if (suggestion.StartsWith(queryText,
        StringComparison.CurrentCultureIgnoreCase))
      {
        Uri uri = new Uri("ms-appx:///Assets/laptop.png");
        RandomAccessStreamReference imageSource =
          RandomAccessStreamReference.CreateFromUri(uri);
        suggestionCollection.AppendResultSuggestion(
          suggestion, "", n.ToString(), imageSource, suggestion);
      }
    }
  }

SearchBox с полученными предложениями и изображениями
Рис. 5. SearchBox с полученными предложениями и изображениями

Аргумент, относящийся к изображению и передаваемый классу AppendResultSuggestions, имеет тип IRandomAccessStreamReference из пространства имен Windows.Storage.Streams. Если вы используете JavaScript, вам придется создать Uri с помощью того же метода CreateFromUri. Это отличается от обычного способа задания изображения в HTML через атрибут src.

К этому моменту у вас есть работающий SearchBox и предложения с текстом и изображениями. Следующий шаг — вывод результатов поиска. И в XAML, и в HTML вы можете добавить предопределенную страницу результатов поиска для отображения результатов и взаимодействия с ними. Visual Studio предоставляет шаблоны страниц с кодом, который показывает результаты поиска с фильтрацией списка по предоставленным вами данным. Поскольку эти страницы можно настраивать, у вас есть возможность выводить результаты именно так, как вы хотите.

Когда вы добавляете SearchResultsPage из диалога New File в Visual Studio, он создает страницу с ListView для отображения результатов поиска. Подробнее об использовании ListView см. мою рубрику за декабрь 2013 г. «Everything You Need to Know About the ListView Control» (msdn.microsoft.com/magazine/dn532209). Конечно, вовсе не обязательно использовать шаблон страницы результатов поиска — вы можете включать результаты поиска в любые части UI, где это имеет смысл и удобнее для пользователя. Но в таком случае сначала прочитайте правила по созданию UX для поиска.

Правила по созданию UX для поиска

Если пользователю никогда не будет удаваться что-либо находить или у него будут трудности в поиске, он будет более склонен выставить вашему приложению в магазине низкую оценку. Еще хуже, если пользователь не станет покупать ваше приложение из-за того, что в пробной версии поиск не работает.

Поскольку поиск — столь часто используемый функционал, не пожалейте времени на то, чтобы сделать его правильно как в платной, так и в пробной версии. Ниже перечислены некоторые предложения по поводу того, как реализовать поиск в ваших приложениях и повысить их рейтинги.

  • Если поиск часто используется в приложении, размещайте соответствующий функционал там, где пользователи смогут моментально находить его и работать с ним.
  • Помогайте пользователям предложениями запросов. Пользователи полагаются на эти предложения, чтобы быстро переходить между страницами в приложении и выполнять различные операции.
  • Отображайте результаты так, чтобы их было легко просматривать. Агрегация сходной информации полезна и вам, и пользователю. Смысл поиска — представить информацию так, чтобы можно было сделать выбор, какие детали стоит изучить глубже.
  • Поле поиска должно работать с сенсорной клавиатурой, а также с физическими клавиатурами.
  • Поддерживайте комбинацию клавиш Ctrl+F для быстрого поиска текста в приложении (только в Windows).

Многие из этих положений вкусовые по своей природе. Пожалуй, правила Windows UX нацелены на вывод меньших, но более важных частей информации. У пользователя должна быть возможность вернуться в предыдущее место из результатов поиска нажатием кнопки Back. Чтобы освежить свое понимание навигации в приложениях Windows Store, прочитайте мою рубрику за август 2013 г. «Navigation Essentials in Windows Store Apps» (msdn.microsoft.com/magazine/dn342878).

Всегда предоставляйте предложения поиска, особенно на смартфонах. Никто не захочет вводить запрос поиска безо всякой помощи. Кроме того, на малых устройствах гораздо труднее быстро и правильно набирать текст. И еще пользователи смартфонов ограничены в выборе методов ввода. Если вы вынудите их набирать полные слова на сенсорной клавиатуре, это затруднит использование вашего приложения и вызовет негативное отношение к нему.

Заключение

Как видите, реализовать удобную среду поиска в приложениях Windows Store и Windows Phone Store несложно. Добавление средств поиска не только сделает ваше приложение более функциональным, но и обеспечит пользователям простой доступ к важной и часто применяемой функциональности. Учитывайте, что поиск может быть как глобальным, так и локальным.

Не забудьте следовать правилам, обрисованным в этой статье, и правилам, описанным Microsoft по ссылке bit.ly/1BQ5fGZ, при реализации поиска в своем приложении.

Рэчел Аппель (Rachel Appel) — консультант, автор, преподаватель и бывший сотрудник Microsoft более чем с 20-летним опытом работы в ИТ-индустрии. Она выступает на важнейших отраслевых конференциях, в частности Visual Studio Live!, DevConnections, MIX и др. Эксперт в области разработки приложений для бизнеса на основе стека технологий Microsoft и открытых стандартов Web. Если вы хотите узнать о ней больше, посетите ее сайт rachelappel.com.

Выражаю благодарность за рецензирование статьи эксперту Microsoft Фрэнку ла Вини (Frank La Vigne).