Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Inicio rápido: Identificar dispositivos de puntero (aplicaciones de la Tienda Windows con JavaScript y HTML)

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 dispositivos siguientes:

PeriodoDescripción

Mouse

Dispositivo mouse estándar.

Si deseas información específica sobre interacciones de mouse, consulta el tema sobre cómo 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 el tema sobre cómo responder a la entrada de pluma y lápiz.

Táctil

Punto de contacto táctil único o contactos táctiles múltiples concurrentes.

 

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

Requisitos previos

En este tema, se supone que puedes crear una aplicación de la Tienda Windows básica con JavaScript que use la plantilla de la Biblioteca de Windows para JavaScript.

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.

Temas relacionados

Responder a la entrada de mouse
Responder a la entrada de teclado
Referencia
Windows.Devices.Input
Muestras
Entrada: muestra de funcionalidades del dispositivo

 

 

Mostrar:
© 2018 Microsoft