Многоточечные жесты
Ввод данных с клавиатуры и программная клавиатура
После всего, что мы узнали о сенсорном вводе данных и о других способах ввода, может показаться, что рассмотрение скромной клавиатуры нас разочарует. Но, все же, клавиатура остается крайне важной для ввода текста, будь это физическая клавиатура или экранная "программная" клавиатура. Она особенно важна для обеспечения специальных возможностей, так как некоторые пользователи физически не могут использовать мышь или другие устройства. На самом деле, раздел 3.5. "Сертификационных требований к приложениям для Windows 8" (http://msdn.microsoft.com/library/windows/apps/hh694083.aspx) говорит об обязательной поддержке приложениями ввода с клавиатуры.
К счастью, в приложениях для Магазина Windows нет ничего особенного в обработке ввода с клавиатуры, но длинный путь можно пройти короткими шагами. Вот общие положения, взятые из материала "Реализация специальных возможностей клавиатуры" (http://msdn.microsoft.com/library/windows/apps/hh700327.aspx):
- Обрабатывайте события keydown, keyup и keypress так, как вы уже знаете, особенно для реализации специальных сочетаний клавиш. Смотрите раздел "Стандартные сочетания клавиш" далее в этом разделе для того, чтобы взглянуть на типичные сопоставления команд.
- Задавайте атрибут tabindex интерактивным элементам, которые должны поддерживать возможность переключения на них с помощью клавиши табуляции. Старайтесь не добавлять tabindex к неинтерактивным элементам, так как это может помешать программам чтения с экрана.
- Задавайте атрибут accesskey для тех элементов, которым следует иметь клавиатурные сокращения.
- Вызывайте DOM API для задания фокуса для элементов, которые должны быть элементами по умолчанию
- Используйте преимущества клавиатурных сокращений, которые уже присутствуют во встроенных элементах управления, в таких, как панель приложения.
В приложении "Here My Am!", над которым мы работаем в этом курсе, обновленный вариант которого содержится в дополнительных материалах к этой лекции, добавлена полная поддержка клавиатуры. Это, в основном, коснулось добавления tabindex нескольким элементам, установки фокуса на область изображения и перехват событий keydown элемента img для клавиш Enter и Пробел, где мы уже обрабатываем событие click. В случае с этими событиями keydown, обратите внимания на полезность использования перечисления WinJS.Utilities.Key (http://msdn.microsoft.com/library/windows/apps/br211775.aspx) для сравнения кодов клавиш:
var Key = WinJS.Utilities.Key;
var image = document.getElementById("photo");
image.addEventListener("keydown", function (e) {
if (e.keyCode == Key.enter || e.keyCode==Key.space) {
image.click();
}
});
Все это работает и для физической клавиатуры, и для программной. Дело закрыто? Не вполне. Есть две особенности, касающиеся экранной клавиатуры: первая – это как показать ее, вторая – как ее появление подействует на макет приложения. В конце этого раздела мы так же взглянем на стандартные клавиатурные сокращения для команд приложения.
Показ программной клавиатуры происходит по одной и только одной причине: пользователь касается элемента управления для ввода текста с атрибутом contenteditable="true" (такого, как div или canvas). Нет API, которое отображает клавиатуру, она не появляется и тогда, когда вы щелкаете по подобному элементу управления мышью или пером, или перемещаетесь к нему, нажимая клавишу табуляции на физической клавиатуры.
Конфигурация клавиатуры зависит от типа элемента управления для ввода текста. Мы можем увидеть это в Сценарии 2 примера "Ввод: сенсорная клавиатура для ввода текста" (http://code.msdn.microsoft.com/windowsapps/Input-Touch-keyboard-text-f86e9bd9), где в файле html/ScopedView.html содержится несколько элементов управления input (окружающая разметка опущена), которые выглядят так, как показано на рис. 4.2.
<input type="url" name="url" id="url" size="50" /> <input type="email" name="email" id="email" size="50" /> <input type="password" name="password" id="password" size="50" /> <input type="text" name="text" id="text" size="50" /> <input type="number" name="number" id="number" /> <input type="search" name="search" id="search" size="50" /> <input type="tel" name="tel" id="tel" size="50" />
То, что показано на рис. 4.2. – это клавиатура по умолчанию. Если вы прикоснетесь к полю Search (Поиск), вы получите практически то же самое, за исключением того, что клавиша Enter превратится в клавишу Search (Поиск). Для поля Email клавиатура тоже похожа на стандартную, за исключением того, что появятся кнопки @ и .com у клавиши пробела:
Клавиатура для ввода URL выглядит так же, но клавиши @ нет, а Enter превращается в Go (Перейти):
Для поля ввода пароля на клавиатуре появляется клавиша Hide keypresses (Скрыть нажатия клавиш), которая отключает видимую анимацию нажатий клавиш – очень полезная функция, если вы записываете видео!
И, наконец, поля Number (Число) и Telephone (Телефон) вызывают клавиатуру, ориентированную на ввод чисел:
Во всех этих случаях кнопка в нижнем правом углу (значок которой очень похож на клавиатуру) позволяет вам переключаться в другие режимы отображения клавиатуры:
Доступные возможности здесь – это нормальная (широкая) клавиатура, разделенная клавиатура, панель распознавания рукописного ввода, и кнопка для того, чтобы полностью скрыть клавиатуру. Вот как выглядят разделеная клавиатура и панель для ввода рукописного текста:
Панель для рукописного ввода, это просто еще один режим программной клавиатуры: вы можете переключаться между режимами, и ваш выбор сохраняется между вызовами. (По этой причине, Windows не активирует автоматически панель рукописного ввода для указателя ручки, так как пользователь может предпочитать использование программной клавиатуры даже с пером).
Так же клавиатура настроаивает свой внешний вид при работе с элементами управления для ввода текста для предоставления подсказок и выделения появляющейся кнопки Insert (Вставить). Это показано в Сценарии 1 примера:
Настройка макета для работы с программной клавиатурой
Вторая задача, касающаяся программной клавиатуры (да, я не забыл!) заключается в поддержке макета, когда клавиатура может перекрыть поле для ввода, имеющее фокус.
Когда появляется программная клавиатура или панель для ввода рукописного текста, система пытается убедиться в том, что поле ввода видимо, прокручивая содержимое, если это возможно. Это значает просто установку отрицательного вертикального смещения для всей вашей страницы в соответствии с высотой программной клавиатуры. Например, если я добавлю (в качестве радикального решения!) кучу элементов </br> в верхнюю часть страницы html/ScopedView.html в примере, так, чтобы элементы управления для ввода текста оказались внизу страницы, и затем коснусь одного из них, вся страница сдвинется вверх, как показано на рис. 4.3.:
увеличить изображение
Рис. 4.3. Когда появляется программная клавиатура, Windows автоматически смещает страницу приложения вверх для того, чтобы поле ввода не оказалось перекрытым
Хотя такой подход может быть самым простым решением этой задачи, он не всегда идеален. К счастью, вы можете сделать кое-что более интеллектуальное, если хотите, прослушивая события hiding и showing объекта Windows.UI.ViewManagement.InputPane (http://msdn.microsoft.com/library/windows/apps/windows.ui.viewmanagement.inputpane.aspx) и непосредственно подстраивая макет. Код для того, чтобы это сделать, можно найти (вы готовы к этому?) в примере "Реагирование на отображение экранной клавиатуры" (http://code.msdn.microsoft.com/windowsapps/Keyboard-Events-Sample-866ba41c) 1И пока вы думаете, что это второе самое длинное название JavaScript-примера в Windows SDK, оно, на самом деле, может получить лишь бронзовую медаль. Пример "Невыделяемые области содержимого с CSS-атрибутом –ms-user-select" (http://code.msdn.microsoft.com/windowsapps/Unselectable-content-areas-963eccd9), который мы уже видели, получает золото, а пример "Использование requestAnimationFrame для анимации, эффективно расходующей электроэнергию" (http://code.msdn.microsoft.com/windowsapps/Using-requestAnimationFrame-924b039a) получает серебро. Однако, я не против таких длинных названий – я очень доволен тем, что у нас есть столь обширный набор отличных примеров, из которых мы можем взять много полезного!. К этим событиям очень просто добавить прослушиватели (смотрите в нижней части в js/keyboardPage.js, который, так же, соответствующим образом удаляет прослушиватели):
var inputPane = Windows.UI.ViewManagement.InputPane.getForCurrentView();
inputPane.addEventListener("showing", showingHandler, false);
inputPane.addEventListener("hiding", hidingHandler, false);
В обработчике события showing объект eventArgs.occludedRect (имеющий тип Windows.Foundation.Rect) дает вам координаты и размеры обрасти, которую перекроет экранная клавиатура. В ответ на это мы можете настроить любые необходимые параметры макета и установить свойство eventArgs.ensuredFocusedElementInView в true. Это сообщит Windows, что автоматический сдвиг выполнять не нужно:
function showingHandler(e) {
if (document.activeElement.id === "customHandling") {
keyboardShowing(e.occludedRect);
// Будьте осторожны с этим свойством. Как только оно установлено, система
// не будет делать ничего для того, чтобы элемент, имеющий фокус, был видимым.
e.ensuredFocusedElementInView = true;
}
}
В примере показаны оба случая. Если вы коснетесь расположенного в нижней левой части приложения элемента defaultHandling, который имеет цвет морской волны, как показано на рис. 4.4, его showingHandler ничего не будет делать, и мы увидим поведение по умолчанию
увеличить изображение
Рис. 4.4. Прикосновение к левому элементу defaultHandling в нижней части приведет к стандартному поведению при появлении клавиатуры, при котором содержимое страницы сдвигается вертикально
Если вы коснетесь элемента customHandling (справа), он вызовет функцию keyboardShowing для настройки макета:
function keyboardShowing(keyboardRect) {
// Часть кода опущена...
var elementToAnimate = document.getElementById("middleContainer");
var elementToResize = document.getElementById("appView");
var elementToScroll = document.getElementById("middleList");
// Записываем расстояние перемещения. Это упрощает расчеты
displacement = keyboardRect.height;
var displacementString = -displacement + "px";
// Находим последний видимый элемент в списке
var bottomOfList = elementToScroll.scrollTop + elementToScroll.clientHeight;
// Анимируем
showingAnimation = KeyboardEventsSample.Animations.inputPaneShowing(elementToAnimate,
{ top: displacementString, left: "0px" }).then(function () {
// После анимации макет занимает меньшее окно просмотра над клавиатурой
elementToResize.style.height = keyboardRect.y + "px";
// Прокручиваем список в нужное место, так чтобы прокрутка не была заметна
elementToScroll.scrollTop = bottomOfList - elementToScroll.clientHeight;
showingAnimation = null;
});
}
Этот код немного сложный, так как он анимирует перемещение различных элементов страницы. В результате макет задействованных элементов, а именно, того, к которому вы прикоснулись – подстраивается для того, чтобы дать место для клавиатуры. Другие элементы на странице, в противном случае, не затрагиваются. Результат показан на рис. 4.5.
