Guida introduttiva: Identificazione dei dispositivi di puntamento (HTML)

Articolo
12/11/2015

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

In questa guida introduttiva viene descritto come identificare i dispositivi di input connessi ai sistemi degli utenti. Verrà inoltre mostrato come recuperare le funzionalità e gli attributi dei dispositivi che influiscono sul modo in cui un utente può interagire con la tua applicazione.

In Windows 8, con dispositivo di puntamento ci si riferisce a una classe di dispositivi che offrono funzionalità di mouse, penna/stilo o tocco.

In questo contesto sono supportati i dispositivi seguenti:

Termine	Descrizione
Mouse	Dispositivo mouse standard. Per informazioni specifiche sulle interazioni tramite mouse, vedi Risposta all'input mouse.
Penna/stilo	Due tipi: Un input tramite stilo attivo con un singolo punto di contatto (ad esempio la penna di un Tablet PC che supporta il passaggio del puntatore) per digitalizzatori resistivi. Un input tramite stilo passivo con un singolo punto di contato per digitalizzatori capacitivi. Riconosciuto come dispositivo di input tocco. Per informazioni specifiche sulle interazioni tramite penna/stilo, vedi Risposta all'input stilo e penna.
Tocco	Contatto di tocco singolo o più contatti di tocco simultanei.

Mouse

Dispositivo mouse standard.

Per informazioni specifiche sulle interazioni tramite mouse, vedi Risposta all'input mouse.

Penna/stilo

Due tipi:

Un input tramite stilo attivo con un singolo punto di contatto (ad esempio la penna di un Tablet PC che supporta il passaggio del puntatore) per digitalizzatori resistivi.
Un input tramite stilo passivo con un singolo punto di contato per digitalizzatori capacitivi. Riconosciuto come dispositivo di input tocco.

Per informazioni specifiche sulle interazioni tramite penna/stilo, vedi Risposta all'input stilo e penna.

Tocco

Contatto di tocco singolo o più contatti di tocco simultanei.

Obiettivo: Come identificare i dispositivi di input connessi e le relative funzionalità.

Prerequisiti

Diamo per scontato che tu sappia creare un'app di Windows Store di base scritta in JavaScript in cui viene usato il modello Libreria Windows per JavaScript.

Per completare questa esercitazione, devi:

Installare Windows 8
Installare Microsoft Visual Studio.
Ottenere una licenza per sviluppatori. Per le istruzioni, vedi Sviluppare con Visual Studio 2013.
Creare la prima app di Windows Store in JavaScript.
Per altre informazioni su oggetti e controlli WinJS, vedi Guida introduttiva: Aggiunta di controlli e stili WinJS.

Istruzioni

1. Recuperare le proprietà del mouse

Lo spazio dei nomi Windows.Devices.Input contiene la classe MouseCapabilities che viene usata per recuperare le proprietà esposte da uno o più mouse connessi. Crea un nuovo oggetto MouseCapabilities e recupera le proprietà che ti interessano.

Nota I valori restituiti dalle proprietà descritte qui sono basati su tutti i mouse connessi: le proprietà booleane restituiscono true se almeno un mouse supporta una funzionalità specifica e le proprietà numeriche restituiscono il valore massimo esposto da qualsiasi mouse.

Il codice seguente usa una serie di elementi div per visualizzare le proprietà e i valori dei singoli mouse.

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. Recuperare le proprietà della tastiera

Lo spazio dei nomi Windows.Devices.Input contiene la classe KeyboardCapabilities che viene usata per recuperare le eventuali tastiere connesse. Crea un nuovo oggetto KeyboardCapabilities e recupera la proprietà KeyboardPresent.

Il codice seguente usa un elemento div per visualizzare la proprietà e il valore della tastiera.

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

3. Recuperare le proprietà del tocco

Lo spazio dei nomi Windows.Devices.Input contiene la classe TouchCapabilities che viene usata per recuperare gli eventuali digitalizzatori a tocco connessi. Crea un nuovo oggetto TouchCapabilities e recupera le proprietà che ti interessano.

Nota I valori restituiti dalle proprietà descritte qui, sono basati su tutti i digitalizzatori a tocco connessi: le proprietà booleane restituiscono true se almeno un digitalizzatore supporta una funzionalità specifica e le proprietà numeriche restituiscono il valore massimo esposto da qualsiasi digitalizzatore.

Il codice seguente usa una serie di elementi div per visualizzare le proprietà e i valori del tocco.

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

4. Recuperare le proprietà del puntatore

Lo spazio dei nomi Windows.Devices.Input contiene la classe PointerDevice che viene usata per recuperare gli eventuali dispositivi connessi che supportano l'input del puntatore (tocco, penna o mouse). Crea un nuovo oggetto PointerDevice e recupera le proprietà che ti interessano.

Nota I valori restituiti dalle proprietà descritte qui sono basati su tutti i dispositivi di puntamento connessi: le proprietà booleane restituiscono true se almeno un dispositivo supporta una funzionalità specifica e le proprietà numeriche restituiscono il valore massimo esposto da qualsiasi dispositivo di puntamento.

Il codice seguente usa una tabella per visualizzare le proprietà e i valori per ogni dispositivo di puntamento.

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

Per l'esempio completo vedi Input: Esempio delle funzionalità del dispositivo.

Riepilogo

In questa guida introduttiva hai creato una serie di funzioni di base che identificano i dispositivi di input e le relative proprietà disponibili per la tua app.