Многоточечные жесты

Когда объект MSGesture получает несколько указателей через свое событиет addPointer, он так же запускает события MSGestureStart, MSGestureChange, MSGestureEnd для жестов поворота и масштабирования, вместе с событием MSInertiaStart. В подобных случаях свойства scale, rotation, velocityAngular, expansion, и velocityExpansion в объекте eventArgs приобретают смысл.

Вы можете выборочно просматривать эти свойства для событий MSGestureChange посредством выпадающего списка, который расположен в правом верхнем углу, в упражнении PointerEvents. Вы можете заметить, что, когда вы выполняете многоточечные жесты в имитаторе Visual Studio, вы никогда не видите событие MSGestureTap для отдельных точек касания. Это происходит потому, что распознаватель жестов может видеть подобные множественные события MSPointerDown, которые происходят почти одновременно (здесь играет роль свойство hwTimestamp) и тут же объединяет их в одно событие MSGestureStart (например, начинает жест масштабирования или вращения).

Теперь я уверен, что вы готовы задать несколько важных вопросов. До сих пор я говорил о сенсорных жестах изменения масштаба и вращения, о жестах переноса, как о рахных вещах, но как, на самом деле, различать их, если все они поступют в приложение посредством одного и того же события MSGestureChange? Разве это не запутывает все? Какова стратегия для работы с жестами переноса, вращения и масштабирования?

Хорошо, ответ заключается в том, что вам не нужно их разделять! Что, если вы подумаете немного о том, как вы обрабатываете события MSGestureChange и данные, которые каждое из них содержит в зависимости от вида манипуляции, который вы поддерживаете в пользовательском интерфейсе:

Конечно, если вы хотите поддерживать несколько видов манипуляций, вы можете просто реализовать обработку всех этих свойств, передавая их, например в CSS-трансформацию. Подобное может быть применимо к приложениям, которые реализуют различные манипуляции для экранных объектов, и именно этому посвящен один из примеров Windows SDK, рассматривающий жесты.

Ввод данных и жесты, допускающие создание экземпляров

В то время, как упражнение PointerEvents, включенное в эту лекцию, давало нам низкоуровневый вид событий указателей и жестов, для приложений по-настоящему важно то, как применять эти события для реальной манипуляции экранными объектами, что является реализацией частей языка касаний, такими, как жесты сжатия/растяжения и вращения. Для того, чтобы увидеть это, мы можем обратиться к примеру "Ввод: жесты, допускающие создание экземпляров" (http://code.msdn.microsoft.com/windowsapps/Input-Instantiable-deda69ca).

Этот пример, в основном, показывает, как использовать события жестов одновременно с несколькими элементами. В Сценарии 1 и 2, приложение реализует простой пример головоломки, как упоминалось выше. Каждым закрашенным прямоугольником можно управлять по отдельности, используя перетаскивание для перемещения (с инерцией и без), жест сжатия-растяжения для изменения масштаба, и жест вращения для вращения, как показано на рис. 4.1. (рис 4.1) Пример "Ввод: жесты, допускающие создание экземпляров" после того, как с ним немного поработали. Словосочетание "допускающие создание экземпляров" (instantiable) использовано потому, что нам нужно создать экземпляр (instance) объекта MSGesture для приема событий жестов

В Сценарии 1 (js/instantiableGesture.js) объект MSGesture создается для кажого экранного элемента вместе с еще одним для черного фона, "стола" при инициализации (в функции initialize). Мы уже видели подобное. Похожим бразом, обработчик MSPointerDown (onPointerDown) добавляет указатели к объектам жестов для каждого элемента, уделяя немного больше внимания обработке их положения по оси Z. Это предовращает одновременные касания, указатели мыши и пера работают с тем же самым элементом (что было бы странно!):

function onPointerDown(e) {
if (e.target.gesture.pointerType === null) {  
 // Первый контакт e.target.gesture.addPointer(e.pointerId); 
 // Присоединение указателя к элементу
e.target.gesture.pointerType = e.pointerType;
}
else if (e.target.gesture.pointerType === e.pointerType) 
{ // Контакты сходного типа e.target.gesture.addPointer(e.pointerId);         
   // Присоединение указателя к элементу
}

// ZIndex изменяется при опускании указателя. 
// Элемент, на который опустился указатель, становится самым верхним 
var zOrderCurr = e.target.style.zIndex;
var elts = document.getElementsByClassName("GestureElement");
for (var i = 0; i < elts.length; i++) {
if (elts[i].style.zIndex === 3) {
elts[i].style.zIndex = zOrderCurr;
}
e.target.style.zIndex = 3;
}
}
 

Обработчик MSGestureChange выполняется для каждого отдельного фрагмента (onGestureChange), затем собирает все данные по переносу, вращению, масштабированию в объекте eventArgs и применяет их с помощью CSS. Это показывает, как удобно то, что все эти свойства уже описаны в нужной нам системе координат:

function onGestureChange(e) {
var elt = e.target;
var m = new MSCSSMatrix(elt.style.msTransform);

 elt.style.msTransform = m.	
translate(e.offsetX, e.offsetY).	
translate(e.translationX, e.translationY).
rotate(e.rotation * 180 / Math.PI).	
scale(e.scale).	
translate(-e.offsetX, -e.offsetY);	
}	
 

В коде примера выполняется немного больше всего, но то, что мы показали здесь – это самые важные части. Очевидно, если вам не нужна поддержка манипуляций определенного вида, вы можете просто игнорировать определенные свойства в объекте eventArgs.

Сценарий 2 этого примера формирует такое же изображение, но он реализован несколько иначе. Как вы можете видеть, в его функции initialize (js/gesture.js), изначально регистрируется лишь одно событие, применяющееся к "столу", который имеет черный фон и окружающую его границу.

Объекты жестов для отдельных фрагментов головоломки создаются и прикрепляются к указателям в событии MSPointerDown (onTableTopPointerDown). Этот подход более эффективен и масштабируем для приложения-головоломки, которое может иметь сотни или даже тысячи фрагментов, так как объекты жестов хранятся лишь до тех пор, пока осуществляется манипуляция конкретным фрагментом. Эти манипуляции так же похожи на те, что были в Сценарии 1, где свойства MSGestureChange применялись посредством CSS-трансформаций. Для того чтобы узнать подробности, обратитесь к комментариям к коду в js/gesture.js, так как они весьма обширны.

Сценарий 3 этого примера предоставляет еще одну демонстрацию выполнения жестов переноса, сжатия-расширения и вращения с использованием колеса мыши. Как показано в упражнении PointerEvents, единственное, что нужно для того, чтобы сделать это – это обработать событие wheel, установить eventArgs.pointerId в 1 и передать это в обработчик MSPointerDown, который затем добавит указатель к объекту жеста:

 function onMouseWheel(e) {
e.pointerId = 1; // Фиксированный pointerId для MouseWheel
onPointerDown(e);	
}	
 

Опять же, это все, что нужно. (Мне нравится, когда все так просто!). В качестве упражнения, вы можете попытаться добавить этот код в Сценарии 1 и 2.

Средство распознавания жестов

В случае с инерционными жестами, которые продолжают посылать некоторое количество событий MSGestureChange, когда указатель освобожден, вы можете задаться вопросами: "А что, на самом деле, управляет этими событиями? Очевидно, существует особая модель уменьшения скорости, встроенная в эти события, а именно та, на основе которой построены внешний вид и впечатления от взаимодействия с Windows. Но что, если мне нужно другое поведение? И что, если я хочу совсем иначе интерпретировать события указателя?"

Вспомогательный механизм, который интерпретирует события указателя, превращая их в жесты, называется средством распознавания жестов (gesture recognizer). Его вы можете получить напрямую посредством объекта ). После создания экземпляра этого объекта с помощью команды ) для тех видов манипуляций и жестов, которые вам интересны. Документация по Windows.UI.Input.GestureSettings предоставляет полный набор возможностей, в том числе, такие жесты, как ) (ballineight.js) мы можем видеть, как настраивают средство распознавания жестов для жестов касания (tap), вращения (rotate), переноса (translate) и масштабирования (scale) (с инерцией):

 gr = new Windows.UI.Input.GestureRecognizer();

// Настройка GestureRecognizer для определения манипуляций вращения, переноса, масштабирования,
// с инерцией для данных трех компонентов манипуляции и обработки касания
gr.gestureSettings =
Windows.UI.Input.GestureSettings.manipulationRotate |
Windows.UI.Input.GestureSettings.manipulationTranslateX | Windows.UI.Input.GestureSettings.manipulationTranslateY | 
Windows.UI.Input.GestureSettings.manipulationScale | 
Windows.UI.Input.GestureSettings.manipulationRotateInertia | Windows.UI.Input.GestureSettings.manipulationScaleInertia | 
Windows.UI.Input.GestureSettings.manipulationTranslateInertia |
Windows.UI.Input.GestureSettings.tap;

// Выключение обратной связи пользовательского интерфейса для жестов 
// (обратная связь все еще используется для PointerPoints)
gr.showGestureFeedback = false;

Объект GestureRecognizer так же имеет множество свойств для настройки его специфических событий. Например, для жестов скольжения по диагонали (cross-slides) вы можете задать свойства crossSlideThresholds, crossSlideExact, и crossSlideHorizontally. Вы можете задать быстроту снижения скорости (в пикселях/мс²) посредством свойств inertiaExpansionDeceleration, inertiaRotationDeceleration, и inertiaTranslationDeceleration.

После настройки, вы начинаете передавать событий MSPointer* к объекту средсва распознавания жестов, в частности, его методам, которые называются processDownEvent, processMoveEvents, и processUpEvent (так же, если нужно, processMouseWheelEvent, и processInertia). В ответ, в зависимости от конфигурации, средство распознавания жестов запустит некоторое количество собственных событий. Во-первых, это дискретные события, наподобие crossSliding, dragging, holding, rightTapped, и tapped. Для остальных он запустит серию событий manipuationStarted, manipulationUpdated, manipulationInertiaStarting, и manipulationCompleted. Обратите внимание на то, что все эти события исходят из WinRT, поэтому убедитесь, что вызвали, когда нужно, removeEventListener.

Когда вы используете средство распознавания жестов напрямую, другими совами, прослушиваете события MSPointer*, передаете их средству распознавания жестов и затем прослушиваете его специфические события и действуете, опираясь на них, как в вышеприведенном примере, вместо работы с событиями MSGesture*, которые исходят от средства распознавания жестов по умолчанию, сконфигурированного с помощью объекта MSGesture.

Обратитесь к документации ) для того, чтобы узнать подробности и к примерам, чтобы посмотреть на образцы кода. В качестве дополнительного примера, вот фрагмент кода, который перехватывает небольшие горизонтальные перемещения с использованием установки manipulationTranslateX:

var recognizer = new Windows.UI.Input.GestureRecognizer();
recognizer.gestureSettings = Windows.UI.Input.GestureSettings.manipulationTranslateX;
var DELTA = 10;

myElement.addEventListener('MSPointerDown', function (e) {
recognizer.processDownEvent(e.getCurrentPoint(e.pointerId));
});
myElement.addEventListener('MSPointerUp', function (e) {
recognizer.processUpEvent(e.getCurrentPoint(e.pointerId));
});
myElement.addEventListener('MSPointerMove', function (e) {
recognizer.processMoveEvents(e.getIntermediatePoints(e.pointerId));
});

// Помните, что при работе с этими событиями нужен removeEventListener 
recognizer.addEventListener('manipulationcompleted', function (args) {
var pt = args.cumulative.translation;
if (pt.x < -DELTA) {
// переместить вправо
}
else if (pt.x > DELTA) {
// переместить влево
}
});
 

Помимо использования средства распознавания жестов, помните, что вы всегда можете перейти на более низкий уровень и выполнить собственную обработку событий MSPointer* , если вам это нужно, и, таким образом, полностью обойти средство распознавания жестов. Это может быть нужно, если конфигурации, допустимые в средстве распознавания жестов, не соответствуют вашим особенным нуждам. В то же время, сейчас неплохая возможность для того, чтобы перечитать врезку "Создание совершенно новых жестов?" в конце раздела о языке касаний. Она посвящена некоторым вопросам о том, когда действительно нужны пользовательские жесты.

Ввод данных с клавиатуры и программная клавиатура

После всего, что мы узнали о сенсорном вводе данных и о других способах ввода, может показаться, что рассмотрение скромной клавиатуры нас разочарует. Но, все же, клавиатура остается крайне важной для ввода текста, будь это физическая клавиатура или экранная "программная" клавиатура. Она особенно важна для обеспечения специальных возможностей, так как некоторые пользователи физически не могут использовать мышь или другие устройства. На самом деле, раздел 3.5. "Сертификационных требований к приложениям для Windows 8" (http://msdn.microsoft.com/library/windows/apps/hh694083.aspx) говорит об обязательной поддержке приложениями ввода с клавиатуры.

К счастью, в приложениях для Магазина Windows нет ничего особенного в обработке ввода с клавиатуры, но длинный путь можно пройти короткими шагами. Вот общие положения, взятые из материала "Реализация специальных возможностей клавиатуры" (http://msdn.microsoft.com/library/windows/apps/hh700327.aspx):

В приложении "Here My Am!", над которым мы работаем в этом курсе, обновленный вариант которого содержится в дополнительных материалах к этой лекции, добавлена полная поддержка клавиатуры. Это, в основном, коснулось добавления ) для сравнения кодов клавиш:

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) Программная клавиатура появляется, когда вы касаетесь поля ввода, как показано в примере

То, что показано на рис. 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 автоматически смещает страницу приложения вверх для того, чтобы поле ввода не оказалось перекрытым

Хотя такой подход может быть самым простым решением этой задачи, он не всегда идеален. К счастью, вы можете сделать кое-что более интеллектуальное, если хотите, прослушивая события ) и непосредственно подстраивая макет. Код для того, чтобы это сделать, можно найти (вы готовы к этому?) в примере "Реагирование на отображение экранной клавиатуры" (http://code.msdn.microsoft.com/windowsapps/Keyboard-Events-Sample-866ba41c) И пока вы думаете, что это второе самое длинное название 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. (рис 4.5) Прикосновение к серому элементу customHandling справа демонстрирует пользовательскую обработку отображения клавиатуры