Démarrage rapide : identification des périphériques de pointage (HTML)

  • Article

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Ce guide de Démarrage rapide vous aide à identifier les périphériques d’entrée qui sont connectés aux systèmes de vos utilisateurs. Nous vous montrerons également comment récupérer les fonctionnalités et les attributs de chaque périphérique, qui influencent la manière dont un utilisateur peut interagir avec votre application.

Dans Windows 8, un périphérique de pointage désigne une classe de périphérique qui offre la fonctionnalité de souris, de stylo/stylet ou d’interaction tactile.

Dans ce contexte, les périphériques suivants sont pris en charge :

Terme Description

Souris

Périphérique souris standard.

Pour obtenir des informations spécifiques sur les interactions à l’aide de la souris, voir Réponse aux entrées de la souris.

Stylo/stylet

Deux types :

  • Une entrée de stylet active, à point de contact unique (par exemple le stylo d’une tablette prenant en charge le pointage) pour les digitaliseurs résistifs.
  • Une entrée de stylet passive, à point de contact unique pour les digitaliseurs capacitifs. Reconnue comme périphérique d’entrée tactile.

Pour obtenir des informations spécifiques sur les interactions effectuées à l’aide du stylo/stylet, voir Réponse aux entrées effectuées à l’aide du stylo et du stylet.

Action tactile

Un contact tactile unique ou plusieurs contacts tactiles simultanés.

 

Objectif: Pour en savoir plus sur l’identification des périphériques d’entrée et leurs fonctionnalités

Prérequis

Nous partons du principe que vous savez créer une application élémentaire du Windows Store en JavaScript qui utilise le modèle Bibliothèque Windows pour JavaScript.

Pour suivre ce didacticiel, vous devez :

Instructions

1. Récupérer les propriétés de la souris

L’espace de noms Windows.Devices.Input contient la classe MouseCapabilities qui est utilisée pour récupérer les propriétés exposées par une ou plusieurs souris connectées. Créez simplement un nouvel objet MouseCapabilities et obtenez les propriétés qui vous intéressent.

Remarque  Les valeurs retournées par les propriétés décrites ici sont basées sur l’ensemble des souris connectées : les propriétés booléennes retournent true si au moins une souris prend en charge une fonctionnalité spécifique, tandis que les propriétés numériques retournent la valeur maximale exposée par n’importe quelle souris.

 

Le code suivant utilise une série d’éléments div permettant d’afficher les propriétés et valeurs individuelles de la souris.

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. Récupérer les propriétés du clavier

L’espace de noms Windows.Devices.Input contient la classe KeyboardCapabilities qui est utilisée pour savoir si un clavier est connecté. Créez simplement un nouvel objet KeyboardCapabilities et obtenez la propriété KeyboardPresent.

Le code suivant utilise un élément div permettant d’afficher la propriété et la valeur du clavier.

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

3. Récupérer les propriétés de l’entrée tactile

L’espace de noms Windows.Devices.Input contient la classe TouchCapabilities qui est utilisée pour savoir si un numériseur d’entrée tactile quelconque est connecté. Créez simplement un nouvel objet TouchCapabilities et obtenez les propriétés qui vous intéressent.

Remarque  Les valeurs retournées par les propriétés décrites ici sont basées sur l’ensemble des numériseurs d’entrée tactile connectés : les propriétés booléennes retournent true si au moins un numériseur prend en charge une fonctionnalité spécifique, tandis que les propriétés numériques retournent la valeur maximale exposée par n’importe quel numériseur.

 

Le code suivant utilise une série d’éléments div permettant d’afficher les propriétés et valeurs de l’entrée tactile.

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

4. Récupérer les propriétés du pointeur

L’espace de noms Windows.Devices.Input contient la classe PointerDevice qui est utilisée pour savoir si un périphérique quelconque est connecté et prend en charge l’entrée tactile (périphérique tactile, stylet ou souris). Créez simplement un nouvel objet PointerDevice et obtenez les propriétés qui vous intéressent.

Remarque  Les valeurs retournées par les propriétés décrites ici sont basées sur l’ensemble des périphériques de pointage connectés : les propriétés booléennes retournent true si au moins un périphérique prend en charge une fonctionnalité spécifique, tandis que les propriétés numériques retournent la valeur maximale exposée par n’importe quel périphérique de pointage.

 

Le code suivant utilise un tableau permettant d’afficher les propriétés et valeurs de chaque périphérique de pointage.

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

Pour obtenir l’exemple complet, voir Entrée : exemple de fonctionnalités de périphériques.

Récapitulatif

Dans ce guide de Démarrage rapide, vous avez créé une série de fonctions de base permettant d’identifier les périphériques d’entrée et leurs propriétés qui sont disponibles pour votre application.

Rubriques associées

Conceptuel

Réponse à l’interaction utilisateur

Développement d’applications du Windows Store (JavaScript et HTML)

Conception de l’interaction tactile

Référence

Windows.Devices.Input

Exemples (DOM)

Exemple de zoom, de panoramique et de défilement HTML

Entrée : exemple de gestion d’événement de pointeur DOM

Entrée : exemple de mouvements instanciables

Exemples (API d’applications du Windows Store)

Entrée : exemple de fonctionnalités de périphériques