Schnellstart: Erkennen von Zeigergeräten (HTML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

In dieser Schnellstartanleitung wird erläutert, wie Sie die an das System eines Benutzers angeschlossenen Eingabegeräte bestimmen. Außerdem zeigen wir, wie die Funktionen und Attribute der einzelnen Geräte abgerufen werden, die festlegen, wie Benutzer mit Ihrer App interagieren können.

In Windows 8 verweist ein Zeigergerät auf eine Klasse von Geräten, die Maus-, Zeichen-/Eingabestift- oder Toucheingabefunktionalität bereitstellen.

In diesem Zusammenhang werden die folgenden Geräte unterstützt:

Ziel: Erfahren Sie, wie Sie angeschlossene Eingabegeräte und ihre Funktionen erkennen.

Voraussetzungen

Es wird vorausgesetzt, dass Sie eine einfache Windows Store-App mit JavaScript erstellen können, in der die Vorlage der Windows-Bibliothek für JavaScript verwendet wird.

Für dieses Lernprogramm ist Folgendes erforderlich:

• Installieren von Windows 8
• Installieren Sie Microsoft Visual Studio.
• Anfordern einer Entwicklerlizenz Anweisungen finden Sie unter Entwickeln mit Visual Studio 2013.
• Erstellen Ihrer ersten Windows Store-App mit JavaScript
• Informationen zu WinJS-Objekten und -Steuerelementen finden Sie unter Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen.

Anweisungen

1. Abrufen von Mauseigenschaften

Der Windows.Devices.Input-Namespace enthält die MouseCapabilities-Klasse, mit der Sie die von einer oder mehreren Mäusen bereitgestellten Eigenschaften abrufen können. Erstellen Sie einfach ein neues MouseCapabilities-Objekt, und rufen Sie die benötigten Eigenschaften ab.

Hinweis  Die von den hier beschriebenen Eigenschaften zurückgegebenen Werte basieren auf allen angeschlossenen Mäusen: Boolesche Eigenschaften geben den Wert "true" zurück, wenn mindestens eine Maus eine bestimmte Funktion unterstützt, während numerische Eigenschaften den größten Wert einer der Mäuse zurückgeben.

Der folgende Code verwendet eine Reihe von div-Elementen, um die einzelnen Mauseigenschaften und -werte anzuzeigen.

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. Abrufen von Tastatureigenschaften

Der Windows.Devices.Input-Namespace enthält die KeyboardCapabilities-Klasse, mit der Sie ermitteln können, ob eine Tastatur angeschlossen ist. Erstellen Sie einfach ein neues KeyboardCapabilities-Objekt, und rufen Sie die KeyboardPresent-Eigenschaft ab.

Der folgende Code verwendet ein div-Element, um die Tastatureigenschaft und ihren Wert anzuzeigen.

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

3. Abrufen von Berührungseigenschaften

Der Windows.Devices.Input-Namespace enthält die TouchCapabilities-Klasse, mit der Sie ermitteln können, ob Berührungs-Digitalisierungsgeräte angeschlossen sind. Erstellen Sie einfach ein neues TouchCapabilities-Objekt, und rufen Sie die benötigten Eigenschaften ab.

Hinweis  Die von den hier beschriebenen Eigenschaften zurückgegebenen Werte basieren auf allen angeschlossenen Toucheingabe-Digitalisierungsgeräten: Boolesche Eigenschaften geben den Wert "true" zurück, wenn mindestens ein Digitalisierungsgerät eine bestimmte Funktion unterstützt, während numerische Eigenschaften den größten Wert eines der Digitalisierungsgeräte zurückgeben.

Der folgende Code verwendet eine Reihe von div-Elementen, um die Eigenschaften und Werte der einzelnen Berührungs-Digitalisierungsgeräte anzuzeigen.

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

4. Abrufen von Zeigereigenschaften

Der Windows.Devices.Input-Namespace enthält die PointerDevice-Klasse, mit der Sie abrufen können, ob Geräte angeschlossen sind, die Zeigereingaben unterstützen (Berührung, Stift oder Maus). Erstellen Sie einfach ein neues PointerDevice-Objekt, und rufen Sie die benötigten Eigenschaften ab.

Hinweis  Die von den hier beschriebenen Eigenschaften zurückgegebenen Werte basieren auf allen angeschlossenen Zeigegeräten: Boolesche Eigenschaften geben den Wert "true" zurück, wenn mindestens ein Gerät eine bestimmte Funktion unterstützt, während numerische Eigenschaften den größten Wert eines der Zeigegeräte zurückgeben.

Der folgende Code zeigt in einer Tabelle die Eigenschaften und Werte der einzelnen Zeigergeräte an.

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

Das vollständige Beispiel finden Sie unter Eingabe: Beispiel für Gerätefunktionen.

Zusammenfassung

Sie haben in dieser Schnellstartanleitung eine Reihe von Grundfunktionen erstellt, mit denen Sie Eingabegeräte und ihre Eigenschaften ermitteln können, die für Ihre App zur Verfügung stehen.

Verwandte Themen

Konzept

Reaktion auf Benutzerinteraktionen

Entwickeln von Windows Store-Apps (JavaScript und HTML)

Entwicklung von Toucheingabeinteraktionen

Referenz

Windows.Devices.Input

Beispiele (DOM)

Beispiel für HTML-Bildlauf, -Verschiebung und -Zoomen

Eingabe: Beispiel für die Behandlung von DOM-Zeigerereignissen

Eingabe: Beispiel für instanziierbare Gesten

Beispiele (Windows Store-App-APIs)

Eingabe: Beispiel für Gerätefunktionen