Эта статья является 6-м днем в серии под названием « 31 день Windows 8» . Каждая из статей этой серии будет опубликована как для HTML5 / JS, так и для XAML / C # . Вы можете найти все ресурсы, инструменты и исходный код на нашем веб-сайте .
Вчера мы представили Контракты, изучив, как добавить Настройки в наши приложения. Сегодня мы будем опираться на это с помощью Search, а завтра — Share. Search и Share — два очень интересных контракта, потому что они оживляют ваше приложение, даже когда оно на самом деле не работает. В контексте поиска это означает, что ваше приложение может потенциально представлять себя пользователю по-новому.
Последние 10 лет «поиск» обычно ассоциируется с поисковыми системами. Несколько лет назад поиск фактически стал мейнстримом в Windows, и если вы похожи на меня, вы очень привыкли нажимать кнопку «Пуск» и просто набирать название вашей программы, а не искать ее. Сегодня в Windows 8 вы можете просто напечатать, и эти результаты хорошо отображаются.
Более того, Windows 8 действительно расширяет наши представления о поиске и вносит его прямо в наши приложения для Магазина Windows. Теперь это на самом деле не волшебство, мы просто подключаем к нескольким событиям и показываем правильные вещи нашим пользователям, но это меняет типичную «точку входа», если вы будете в наших приложениях. Теперь вместо того, чтобы наш пользователь открывал наше приложение, находил вашу команду и затем действовал. Они могут нажать кнопку поиска и попасть прямо к тому, что мы ищем.
Начало настройки
В отличие от нескольких предыдущих статей, где мы начали с пустого приложения, сегодня мы начнем с шаблона Grid App. Моя причина начать здесь, а не с пустого шаблона — это просто жестко закодированные данные. Шаблон сетки включает в себя это из коробки, и вам легко использовать и играть. Создав проект, вы найдете эти «данные» в /js/data.js.
После создания приложения просто запустите его. Первое, что вы должны заметить, это море нового боевого корабля, черные и серые плитки бессмысленных данных. Если вы нажмете на одну из них, вы попадете в детали этого конкретного элемента. Круто, у нас есть работающее приложение с некоторыми данными. Теперь давайте поищем.
Самый простой способ начать работу — добавить новый «Договор поиска». Visual Studio имеет встроенный шаблон, и в зависимости от ваших потребностей это может быть отличным местом для начала. Чтобы добавить новый контракт, давайте сначала создадим папку с именем search в папке наших страниц . Затем добавим новый элемент и выберите «Поиск контракта» в меню Магазина Windows.
Что сейчас произошло?!?! Что ж:
- Добавлен searchResults.html (имя по умолчанию)
- Добавлен searchResult.css
- Добавлен searchResult.js
- Добавлена декларация поиска в package.appxmanifest вашего приложения
После этого у нас еще есть еще один шаг. Нам нужно добавить скрипт searchResult на нашу страницу по умолчанию, в нашем случае default.html.
<script src="/pages/search/searchResults.js"></script>
Подключать
Я надеюсь, что в этот момент вы просто почесали голову и сказали: «Подождите, почему в мире вы добавляете этот файл JavaScript на нашу страницу по умолчанию, а не на страницу seachResults.html». Действительный вопрос. Есть несколько причин, но сначала нам нужно просто подключиться к поисковому контракту. Мы делаем это путем подключения к onquerysubmitted и события активации приложения, которое уже записано для вас (внизу) в файле searchResult.js.
onquerysubmitted запускается, когда пользователь в вашем приложении и попадает в меню поиска. Шаблон контракта поиска Visual Studio уже выполнил эту работу за вас. Ниже вы можете увидеть, что у нас есть функция, которая захватывает поисковый запрос и передает его на страницу searchResults.html с использованием инфраструктуры навигации (подробнее об этом позже).
var search = Windows.ApplicationModel.Search;
search.SearchPane.getForCurrentView().onquerysubmitted = function (args) {
nav.navigate("/pages/search/searchResults.html", args);
};
С другой стороны, что, если ваше приложение не работает? Здесь мы подключаемся к жизненному циклу приложения. Мы хотим подключиться к нашему активированному событию и действовать, когда пользователь активирует нас из контракта на поиск .
WinJS.Application.addEventListener("activated", function (args) {
if (args.detail.kind === appModel.Activation.ActivationKind.search) {
args.setPromise(ui.processAll().then(function () {
if (!nav.location) {
nav.history.current = {
location: Application.navigator.home,
initialState: {}
};
}
return nav.navigate(
"/pages/search/searchResults.html",
{ queryText: args.detail.queryText } );
}));
}
});
Оказавшись там, как и прежде. Возьмите аргументы и передайте их на нашу страницу searchResults.html. Чтобы проверить это событие в отладчике, мы можем просто запустить отладчик, как обычно. Перейдите в другое приложение или что-то вроде рабочего стола и активируйте поиск. После ввода условия поиска и выбора приложения для поиска, вы увидите, что это событие сработало.
Покажите мне товар
На этом мы эффективно закончили и все подключили к поисковому контракту. Остальное — только то, как вы решили отфильтровать данные и отобразить их. Шаблон выбирает использовать элемент управления ListView из WinJS и помечает элементы, по которым выполняется поиск.
Задним числом является 20/20
Честно говоря, я несколько раз спотыкался при написании этого поста, делая вещи честно сложнее, чем они действительно должны были быть. Шаблон предполагает, что вы используете встроенную структуру навигации (navigation.js), включенную в шаблоны Grid и Navigation Visual Studio. Если вы используете что-то вроде шаблона Blank, то вызов WinJS.Navigation.navigate просто завершается тихо, и навигация никогда не происходит. {царапает голову здесь “}
Помните, что это шаблон, а не золотой код.
Вытащите эти обработчики событий из шаблона. Ваша страница default.html уже должна быть подключена к процессу активации, по крайней мере, вы должны поместить туда обработчик активации поиска. Конечно, вы можете подключить другую функцию к этому событию, но почему? Это просто запах кода и приводит к проблемам с ремонтопригодностью в будущем. Я вижу аргументы для обеих сторон истории, но помните, что это всего лишь шаблон. Сделай это своим.
Резюме
Сегодня мы очень быстро взглянули на добавление поиска в ваше приложение. Контракт поиска предоставляет новый способ для вашего приложения, чтобы представить ваше приложение для своих пользователей. Теперь вам просто нужно определить, что именно вы хотите выставить. Если вы предстанете перед своими пользователями, люди будут вовлечены в ваше приложение. Чем больше способов их использовать, тем лучше жизнь.
Вы можете скачать весь пример решения здесь здесь:
Завтра мы перейдем к следующему шагу в разведке наших контрактов, Sharing.
Увидимся позже!