Краткое руководство: распознавание указывающих устройств (HTML)
[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]
Это краткое руководство поможет вам идентифицировать устройства ввода, подключенные к системам ваших пользователей. Мы также покажем, как получить данные о возможностях и атрибуты каждого устройства, влияющие на характер взаимодействия пользователя с вашим приложением.
В Windows 8 указывающее устройство относится к классу устройств, которые обеспечивают функцию мыши, пера или сенсорного ввода.
В этом контексте поддерживаются следующие устройства:
Термин | Описание |
---|---|
Мышь |
Стандартная мышь. Подробнее о взаимодействии с мышью см. в разделе Реакция на взаимодействия с помощью мыши. |
Перо |
Различаются два типа.
Подробнее о взаимодействиях с помощью пера см. в разделе Реакция на взаимодействия с помощью пера. |
Устройство сенсорного ввода |
Одно касание или несколько одновременных касаний. |
Цель: Способы опознавания подключенных устройств ввода и их возможностей.
Необходимые условия
Предполагается, что вы умеете создавать простые приложения Магазина Windows на JavaScript с помощью шаблона библиотеки Windows для JavaScript.
Для выполнения этого руководства вам необходимо:
- Установить Windows 8
- Установить Microsoft Visual Studio.
- Получить лицензию разработчика. Инструкции см. в разделе о разработке с помощью Visual Studio 2013.
- Создание первого приложения Магазина Windows на JavaScript.
- Сведения об объектах и элементах управления WinJS см. в документе Краткое руководство: добавление элементов управления и стилей WinJS.
Инструкции
1. Загрузка свойств мыши
В пространстве имен Windows.Devices.Input содержится класс MouseCapabilities, который используется для получения свойств одной подключенной мыши или нескольких. Просто создайте новый объект MouseCapabilities и получите необходимые вам свойства.
Примечание Значения, возвращаемые данными свойствами, основываются на всех подключенных мышах: логические свойства возвращают значение "истина", если хотя бы одна мышь поддерживает специальную возможность, а числовые свойства возвращают максимальное значение, выраженное одной мышью.
В следующем коде для отображения свойств и значений отдельной мыши используются последовательности элементов DIV.
function getMouseProperties() {
var mouseCapabilities = new Windows.Devices.Input.MouseCapabilities();
id("mousePresent").innerHTML = (mouseCapabilities.mousePresent == true ? "True" : "False");
id("verticalWheelPresent").innerHTML = (mouseCapabilities.verticalWheelPresent == true ? "True" : "False");
id("horizontalWheelPresent").innerHTML = (mouseCapabilities.horizontalWheelPresent == true ? "True" : "False");
id("swapButtons").innerHTML = (mouseCapabilities.swapButtons == true ? "True" : "False");
id("numberOfButtons").innerHTML = mouseCapabilities.numberOfButtons;
}
2. Загрузка свойств клавиатуры
В пространстве имен Windows.Devices.Input содержится класс KeyboardCapabilities, используемый для загрузки данных о том, подключена ли клавиатура. Просто создайте новый объект KeyboardCapabilities и получите свойство KeyboardPresent.
В следующем коде для отображения свойства и значения клавиатуры используется элемент DIV.
function getKeyboardProperties() {
var keyboardCapabilities = new Windows.Devices.Input.KeyboardCapabilities();
id("keyboardPresent").innerHTML = (keyboardCapabilities.keyboardPresent == true ? "True" : "False");
}
3. Загрузка свойств устройства сенсорного ввода
В пространстве имен Windows.Devices.Input содержится класс TouchCapabilities, используемый для получения данных о том, подключены ли сенсорные дигитайзеры. Просто создайте новый объект TouchCapabilities и получите свойства, которые вам необходимы.
Примечание Значения, возвращаемые данными свойствами, основаны на всех подключенных сенсорных дигитайзерах: логические свойства возвращают значение "истина", если хотя бы один дигитайзер поддерживает специальную возможность, а числовые свойства возвращают максимальное значение, выраженное одним дигитайзером.
В следующем коде для отображения свойств и значений отдельного устройства сенсорного ввода используются последовательности элементов DIV.
function getTouchProperties() {
var touchCapabilities = new Windows.Devices.Input.TouchCapabilities();
id("touchPresent").innerHTML = (touchCapabilities.touchPresent == true ? "True" : "False");
id("contacts").innerHTML = touchCapabilities.contacts;
}
4. Загрузка свойств указателя
В пространстве имен Windows.Devices.Input содержится класс PointerDevice, используемый для получения данных о том, подключены ли устройства, поддерживающие ввод с указателя (устройство сенсорного ввода, перо или мышь). Просто создайте новый объект PointerDevice и получите необходимые вам свойства.
Примечание Значения, возвращаемые данными свойствами, основаны на всех подключенных указателях: логические свойства возвращают значение "истина", если по крайней мере один указатель поддерживает специальную возможность, а числовые свойства возвращают максимальное значение, выраженное одним указателем.
В следующем коде для отображения свойств и значений для каждого указателя используется таблица.
function getPointerDeviceProperties()
{
var pointerDevices = Windows.Devices.Input.PointerDevice.getPointerDevices();
var htmlWrite = "";
for (i = 0; i < pointerDevices.size; i++)
{
var displayIndex = i + 1;
htmlWrite += "<tr><td>(" + displayIndex + ") Pointer Device Type</td> <td>" +
getPointerDeviceType(pointerDevices[i].pointerDeviceType) + "</td></tr>";
htmlWrite += "<tr><td>(" + displayIndex + ") Is External</td><td>" +
(pointerDevices[i].isIntegrated == true ? "False" : "True") + "</td></tr>";
htmlWrite += "<tr><td>(" + displayIndex + ") Max Contacts</td><td>" +
pointerDevices[i].maxContacts + "</td></tr>";
htmlWrite += "<tr><td>(" + displayIndex + ") Physical Device Rect</td><td>" +
pointerDevices[i].physicalDeviceRect.x + "," +
pointerDevices[i].physicalDeviceRect.y + "," +
pointerDevices[i].physicalDeviceRect.width + "," +
pointerDevices[i].physicalDeviceRect.height + "</td></tr>";
htmlWrite += "<tr><td>(" + displayIndex + ") Screen Rect</td><td>" +
pointerDevices[i].screenRect.x + "," +
pointerDevices[i].screenRect.y + "," +
pointerDevices[i].screenRect.width + "," +
pointerDevices[i].screenRect.height + "</td></tr>";
}
id("pointerDevices").innerHTML = htmlWrite;
}
Полный пример см. в разделе Ввод: образец возможностей устройства.
Сводка
В этом кратком руководстве вы создали несколько основных функций, идентифицирующих устройства ввода и их свойства, доступные для вашего приложения.
Связанные разделы
Понятия
Реакция на взаимодействие с пользователем
Разработка приложений Магазина Windows (JavaScript и HTML)
Взаимодействие с помощью сенсорного ввода
Справочные материалы
Примеры (DOM)
Пример прокрутки, сдвига и масштабирования на HTML
Ввод: пример обработки событий указателя DOM
Ввод: пример пользовательских жестов
Примеры (API приложения Магазина Windows)