Краткое руководство: распознавание указывающих устройств (HTML)

Статья
12/12/2015

[ Эта статья адресована разработчикам приложений среды выполнения 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;
}

Полный пример см. в разделе Ввод: образец возможностей устройства.