Guia de início rápido: identificando dispositivos de ponteiro
Idioma: HTML | XAML

Guia de início rápido: identificando dispositivos de ponteiro (HTML)

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Este início rápido o conduz pela identificação de dispositivos de entrada que estão conectados aos sistemas de seus usuários. Também mostramos como recuperar as capacidades e atributos de cada dispositivo que afeta como um usuário pode interagir com o seu aplicativo.

No Windows 8, um dispositivo de ponteiro se refere a uma classe de dispositivo que fornece funcionalidade de mouse, caneta/caneta digitalizadora ou toque.

Nesse contexto, os dispositivos a seguir têm suporte:

TermoDescrição

Mouse

Dispositivo de mouse padrão.

Para obter informações específicas sobre as interações do mouse, consulte Respondendo à entrada por mouse.

Caneta

Dois tipos:

  • Um único ponto de contato, entrada de caneta ativa (como uma caneta de tablet que suporte focalização) para digitalizadores resistivos.
  • Um único ponto de contato, entrada de caneta passiva para digitalizadores capacitativos. Reconhecido com um dispositivo de entrada de toque.

Para obter informações específicas de interações de caneta, consulte Respondendo à entrada de caneta.

Toque

Um único contato de toque ou vários contatos de toque simultâneos.

 

Objetivo: Para saber como identificar dispositivos de entrada conectados e suas capacidades.

Pré-requisitos

Nós supomos que você possa criar um aplicativo básico da Windows Store em JavaScript que use o modelo da Biblioteca do Windows para JavaScript.

Para completar este tutorial, você precisa:

Instruções

1. Recuperar as propriedades do mouse

O namespace Windows.Devices.Input contém a classe MouseCapabilities que é usada para recuperar as propriedades expostas por um ou mais mouses conectados. Crie um novo objeto MouseCapabilities e obtenha as propriedades que lhe interessam.

Observação  Os valores retornados pelas propriedades discutidas aqui são baseados em todos os mouses conectados: As propriedades booleanas retornam não zero (verdadeiro) se pelo menos um mouse suportar um recurso específico e as propriedades numéricas retornam o valor máximo exposto por qualquer mouse.
 

O código a seguir usa uma série de elementos div para exibir as propriedades e valores do 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 propriedades do teclado

O namespace Windows.Devices.Input contém a classe KeyboardCapabilities que é usada para recuperar se um teclado estiver conectado. Crie um novo objeto KeyboardCapabilities e obtenha a propriedade KeyboardPresent.

O código a seguir usa um elemento div para exibir a propriedade teclado e o valor adequadamente.


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


3. Recuperar as propriedades de toque

O namespace Windows.Devices.Input contém a classe TouchCapabilities que é usada para recuperar se qualquer digitalizador de toque estiver conectado. Crie um novo objeto TouchCapabilities e obtenha as propriedades que lhe interessam .

Observação  Os valores retornados pelas propriedades discutidas aqui são baseados em todos os mouses conectados: as propriedades booleanas retornam não zero (verdadeiro) se pelo menos um digitalizador suportar um recurso específico e as propriedades numéricas retornam o valor máximo exposto por qualquer digitalizador.
 

O código a seguir usa uma série de elementos div para exibir as propriedades de toque e valores.


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


4. Recuperar as propriedades de ponteiro

O namespace Windows.Devices.Input contém a classe PointerDevice que é usada para recuperar se algum dispositivo que suporte entrada de ponteiro (toque, caneta ou mouse) estiver conectado. Crie um novo objeto PointerDevice e obtenha as propriedades que lhe interessam.

Observação  Os valores retornados pelas propriedades discutidas aqui são baseados em todos os dispositivos de ponteiro conectados: as propriedades booleanas retornam não zero (verdadeiro) se pelo menos um dispositivo suportar um recurso específico e as propriedades numéricas retornam o valor máximo exposto por qualquer dispositivos de ponteiro.
 

O código a seguir usa uma tabela para exibir as propriedades e valores para cada dispositivo de ponteiro.


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 obter o exemplo completo, veja Entrada: Amostra de recursos de dispositivo.

Resumo

Neste início rápido, você criou uma série de funções básicas que identificam os dispositivos de entrada e suas propriedades que estão disponíveis em seu aplicativo.

Tópicos relacionados

Conceitual
Respondendo à interação do usuário
Desenvolvendo aplicativos da Windows Store (JavaScript e HTML)
Design de interação por toque
Referência
Windows.Devices.Input
Amostras (DOM)
Amostra de rolagem, movimento panorâmico e aplicação de zoom em HTML
Entrada: amostra de manipulação de eventos de ponteiros DOM
Entrada: amostra de gestos instanciáveis
Amostras (APIs de aplicativos da Windows Store )
Entrada: Amostra de recursos de dispositivo

 

 

Mostrar:
© 2017 Microsoft