Inicio rápido: identificación de dispositivos de puntero (HTML)

Artículo
12/12/2015

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

Este artículo de inicio rápido te guiará en el proceso de identificar los dispositivos de entrada que están conectados a los sistemas de los usuarios. También te mostrará cómo recuperar las funcionalidades y atributos de cada dispositivo que afectan el modo en que el usuario puede interactuar con tu aplicación.

En Windows 8, un dispositivo señalador remite a una clase de dispositivo que ofrece funcionalidad de mouse, pluma/lápiz o táctil.

En este contexto se admiten los siguientes dispositivos:

Periodo	Descripción
Mouse	Dispositivo de mouse estándar. Para obtener información específica sobre las interacciones del mouse, consulta Responder a la entrada de mouse.
Pluma/lápiz	Dos tipos: Punto de contacto único, entrada de lápiz activo (como un lápiz de tableta que admite el estado mantener) para digitalizadores resistivos. Punto de contacto único, entrada de lápiz pasivo para digitalizadores capacitivos. Reconocido como dispositivo de entrada táctil. Si deseas información específica sobre interacciones con pluma/lápiz, consulta Responder a la entrada de pluma y lápiz.
Función táctil	Un solo contacto táctil o varios contactos táctiles simultáneos.

Mouse

Dispositivo de mouse estándar.

Para obtener información específica sobre las interacciones del mouse, consulta Responder a la entrada de mouse.

Pluma/lápiz

Dos tipos:

Punto de contacto único, entrada de lápiz activo (como un lápiz de tableta que admite el estado mantener) para digitalizadores resistivos.
Punto de contacto único, entrada de lápiz pasivo para digitalizadores capacitivos. Reconocido como dispositivo de entrada táctil.

Si deseas información específica sobre interacciones con pluma/lápiz, consulta Responder a la entrada de pluma y lápiz.

Función táctil

Un solo contacto táctil o varios contactos táctiles simultáneos.

Objetivo: Aprender a identificar dispositivos de entrada conectados y sus funcionalidades.

Requisitos previos

Damos por sentado que Puedes crear una aplicación básica de la Tienda Windows desarrollada para Windows con JavaScript que use la plantilla de la Biblioteca de Windows para JavaScript.

Para completar este tutorial, necesitas:

Instalar Windows 8
Instalar Microsoft Visual Studio.
Obtener una licencia de desarrollador. Para obtener instrucciones, consulta Desarrollar con Visual Studio 2013.
Crear la primera aplicación de la Tienda Windows con JavaScript
Consulta Inicio rápido: Agregar estilos y controles de WinJS para obtener información sobre los objetos y controles de WinJS.

Instrucciones

1. Recuperar las propiedades del mouse

El espacio de nombres Windows.Devices.Input contiene la clase MouseCapabilities que sirve para recuperar las propiedades expuestas por uno o varios mouse conectados. Solo tienes que crear un objeto MouseCapabilities nuevo y obtener las propiedades que te interesan.

Nota Los valores que devuelven las propiedades que describimos aquí se basan en todos los mouse conectados: las propiedades booleanas devuelven un valor distinto de cero si hay al menos un mouse que es compatible con una funcionalidad específica. Por otro lado, las propiedades numéricas devuelven el valor máximo expuesto por cualquiera de los mouse.

El código siguiente usa una serie de elementos div para mostrar las propiedades y los valores de un mouse individual.

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. Recuperar las propiedades del teclado

El espacio de nombres Windows.Devices.Input contiene la clase KeyboardCapabilities que se usa para recuperar si hay algún teclado conectado. Solo tienes que crear un objeto KeyboardCapabilities nuevo y obtener la propiedad KeyboardPresent .

El código siguiente usa un elemento div para mostrar las propiedades y valores del teclado.

function getKeyboardProperties() {
  var keyboardCapabilities = new Windows.Devices.Input.KeyboardCapabilities();
  id("keyboardPresent").innerHTML = (keyboardCapabilities.keyboardPresent == true ? "True" : "False");
}

3. Recuperar las propiedades táctiles

El espacio de nombres Windows.Devices.Input contiene la clase TouchCapabilities que se usa para recuperar si hay algún digitalizador táctil conectado. Solo tienes que crear un objeto TouchCapabilities nuevo y obtener las propiedades que te interesan.

Nota Los valores que devuelven las propiedades que describimos aquí se basan en todos los digitalizadores táctiles conectados: las propiedades booleanas devuelven un valor distinto de cero si hay al menos un digitalizador que es compatible con una funcionalidad específica. Por otro lado, las propiedades numéricas devuelven el valor máximo expuesto por cualquiera de los digitalizadores.

El código siguiente usa una serie de elementos div para mostrar las propiedades y valores táctiles.

function getTouchProperties() {
  var touchCapabilities = new Windows.Devices.Input.TouchCapabilities();
  id("touchPresent").innerHTML = (touchCapabilities.touchPresent == true ? "True" : "False");
  id("contacts").innerHTML = touchCapabilities.contacts;
}

4. Recuperar las propiedades del puntero

El espacio de nombres Windows.Devices.Input contiene la clase PointerDevice que se usa para recuperar si hay dispositivos conectados compatibles con entrada de puntero (táctil, pluma o mouse). Solo tienes que crear un objeto PointerDevice nuevo y obtener las propiedades que te interesan.

Nota Los valores que devuelven las propiedades que describimos aquí se basan en todos los dispositivos de puntero conectados: las propiedades booleanas devuelven un valor true si hay al menos un digitalizador que es compatible con una funcionalidad específica. Por otro lado, las propiedades numéricas devuelven el valor máximo expuesto por cualquiera de los dispositivos de puntero.

El siguiente código usa una tabla para mostrar las propiedades y valores correspondientes a cada dispositivo señalador.

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;
}

Para ver el ejemplo completo, consulta el tema sobre entrada: muestra de funcionalidades del dispositivo.

Resumen

En este Inicio rápido, creaste una serie de funciones básicas que identifican los dispositivos de entrada y las propiedades disponibles para tu aplicación.