快速入門:識別指標裝置 (HTML)
[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App,請參閱 最新文件 ]
這個快速入門會引導您識別連接到使用者系統的輸入裝置。同時也示範如何抓取影響使用者與應用程式之互動方式的各項裝置功能和屬性。
在 Windows 8 中,指標裝置是指一個提供滑鼠、畫筆/手寫筆或觸控功能的裝置類別。
就這項功能支援下列裝置:
詞彙 | 說明 |
---|---|
滑鼠 |
標準的滑鼠裝置。 如需特定的滑鼠互動相關資訊,請參閱回應滑鼠輸入。 |
畫筆/手寫筆 |
兩種類型:
如需特定的畫筆/手寫筆互動相關資訊,請參閱回應畫筆和手寫筆輸入。 |
觸控 |
單點觸控接觸或多點、同時觸控接觸。 |
目標: 學習如何識別連接的輸入裝置及其功能。
先決條件
我們假設您可以利用 JavaScript,以適用於 JavaScript 的 Windows Library 範本來建立基本的 Windows 市集應用程式。
若要完成這個教學課程,您需要:
- 安裝 Windows 8
- 安裝 Microsoft Visual Studio。
- 取得開發人員授權。如需相關指示,請參閱使用 Visual Studio 2013 開發。
- 使用 JavaScript 建立您的第一個 Windows 市集應用程式。
- 若要了解 WinJS 物件與控制項,請檢閱快速入門:新增 WinJS 控制項與樣式。
指示
1. 抓取滑鼠屬性
Windows.Devices.Input 命名空間包含 MouseCapabilities 類別,這個類別可以用來抓取一或多個連接的滑鼠。做法是建立一個新的 MouseCapabilities 物件並取得您感興趣的屬性。
注意 這裡討論的屬性傳回值是根據所有連接的滑鼠:只要至少有一個滑鼠支援特定的功能,布林值屬性就會傳回 true,而數值屬性會傳回任一滑鼠所公開的最大值。
下列程式碼會使用一系列的 div 元素來顯示個別的滑鼠屬性和值。
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. 抓取鍵盤屬性
Windows.Devices.Input 命名空間包含 KeyboardCapabilities 類別,這個類別可以用來抓取鍵盤是否已連接。做法是建立一個新的 KeyboardCapabilities 物件並取得 KeyboardPresent 屬性。
下列程式碼會使用一個 div 元素來顯示鍵盤屬性和值。
function getKeyboardProperties() {
var keyboardCapabilities = new Windows.Devices.Input.KeyboardCapabilities();
id("keyboardPresent").innerHTML = (keyboardCapabilities.keyboardPresent == true ? "True" : "False");
}
3. 抓取觸控屬性
Windows.Devices.Input 命名空間包含 TouchCapabilities 類別,這個類別可以用來抓取是否有任何觸控數位板已連接。做法是建立一個新的 TouchCapabilities 物件並取得您感興趣的屬性。
注意 這裡討論的屬性傳回值是根據所有連接的觸控數位板:只要至少有一個數位板支援特定的功能,布林值屬性就會傳回 true,而數值屬性會傳回任一數位板所公開的最大值。
下列程式碼會使用一系列的 div 元素來顯示觸控屬性和值。
function getTouchProperties() {
var touchCapabilities = new Windows.Devices.Input.TouchCapabilities();
id("touchPresent").innerHTML = (touchCapabilities.touchPresent == true ? "True" : "False");
id("contacts").innerHTML = touchCapabilities.contacts;
}
4. 抓取指標屬性
Windows.Devices.Input 命名空間包含 PointerDevice 類別,這個類別可以用來抓取是否有任何支援指標輸入的裝置 (觸控、手寫筆或滑鼠) 已連接。做法是建立一個新的 PointerDevice 物件並取得您感興趣的屬性。
注意 這裡討論的屬性傳回值是根據所有連接的指標裝置:只要至少有一個裝置支援特定的功能,布林值屬性就會傳回 true,而數值屬性會傳回任一指標裝置所公開的最大值。
下列程式碼會使用一個資料表來顯示每個指標裝置的屬性和值。
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;
}
如需完整範例,請參閱輸入:裝置功能範例。
摘要
在這個快速入門中,您會建立一系列函式,用來識別應用程式可用的輸入裝置及其屬性。
相關主題
概念
開發 Windows 市集應用程式 (JavaScript 和 HTML)
參考
範例 (DOM)
範例 (Windows 市集應用程式 API)