빠른 시작: 포인터 장치 식별(HTML)

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

이 빠른 시작에서는 사용자의 시스템에 연결되어 있는 입력 장치를 식별하는 과정을 안내합니다. 뿐만 아니라 응용 프로그램과의 상호 작용 방식에 영향을 미치는 각 장치의 접근 권한 값과 특성을 검색하는 방법도 소개합니다.

Windows 8에서 포인터 장치는 마우스, 펜/스타일러스 또는 터치 기능을 제공하는 장치 클래스를 나타냅니다.

이 컨텍스트에서는 다음 장치가 지원됩니다.

목표: 연결된 입력 장치 및 해당 접근 권한 값을 식별하려면

사전 요구 사항

사용자가 JavaScript용 Windows 라이브러리 템플릿을 사용하고 JavaScript로 작성된 기본 Windows 스토어 앱을 만들 수 있다고 가정합니다.

이 자습서를 완료하려면 다음을 수행해야 합니다.

• Windows 8을 설치합니다.
• Microsoft Visual Studio를 설치합니다.
• 개발자 라이선스를 얻습니다. 자세한 내용은 Visual Studio 2013을 사용하여 개발을 참조하세요.
• JavaScript를 사용하여 첫 번째 Windows 스토어 앱을 만듭니다.
• 빠른 시작: WinJS 컨트롤 및 스타일 추가를 검토하여 WinJS 개체 및 컨트롤에 대해 알아봅니다.

지침

1. 마우스 속성 검색

Windows.Devices.Input 네임스페이스에는 하나 이상의 연결된 마우스가 제공하는 속성을 검색하는 데 사용되는 MouseCapabilities 클래스가 포함되어 있습니다. 새 MouseCapabilities 개체를 만들고 관심 있는 속성을 가져옵니다.

참고  여기에 설명된 속성에 의해 반환되는 값은 연결된 모든 마우스를 기반으로 합니다. 하나 이상의 마우스가 특정 접근 권한 값을 지원하는 경우에는 부울 속성이 true를 반환하고 숫자 속성이 마우스 하나가 제공하는 최대값을 반환합니다.

다음 코드에서는 여러 요소를 사용하여 개별 마우스 속성 및 값을 표시합니다.

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)

터치 상호 작용 디자인

참조

Windows.Devices.Input

샘플(DOM)

HTML 스크롤, 이동 및 확대/축소 샘플

입력: DOM 포인터 이벤트 처리 샘플

입력: 인스턴스화 가능한 제스처 샘플

샘플(Windows 스토어 앱 API)

입력: 장치 접근 권한 값 샘플