RemoteControl

원격 제어

이 샘플 앱은 Magic Remote Control, 기존 원격 제어 및 외부 키보드와 같은 사용자 입력을 처리하는 방법을 보여줍니다. 이 샘플로 리모컨의 전체 키 코드를 파악할 수 있습니다. Magic Remote Control에 대한 자세한 내용은 Magic Remote를 참조하십시오.

기본 원격 제어 동작

다음 목록은 원격 제어의 사용자 입력에 대한 기본 처리 원리를 설명합니다.

• 선택 가능한 UI 요소는 화면 커서와 4 방향 내비게이션 키 (위, 아래, 왼쪽 및 오른쪽)로 완전히 탐색 할 수 있어야합니다.
• 선택 가능한 UI 요소는 화면 커서에 의해 제어 될 때와 OK 버튼으로 제어 할 때 동일한 방식으로 작동해야합니다.
• UI 요소 중 하나는 집중해야합니다. 이것은 개발자가 저지르는 일반적인 실수이므로 다음을 확인하십시오.
  • 내비게이션 키를 입력하여 커서가 화면에서 사라지면 커서의 초점은 내비게이션 키에 의해 초점으로 전환되어야합니다.
  • 위와 달리 커서가 활성화되고 UI 요소로 이동하면 내비게이션 키에 의한 초점을 현재 위치의 커서에 의해 초점으로 전환해야합니다.
• 어떤 요소가 활성화되는지 보여주기 위해서는 선택 효과가 필수입니다. 가능한 선택 효과는 애니메이션, 하이라이트, 색상 또는 크기 변경 등입니다.
• 페이지 및 목록 스크롤은 Magic Remote의 휠을 사용하여 적절하게 제어 할 수 있습니다.

UI 지침에 대한 자세한 내용은 UX 체크리스트를 참조하십시오.

이벤트 리스너 추가

주요 코드를 찾는 방법

keydown 이벤트 리스너를 추가하여 키 이벤트의 키 코드를 얻을 수 있습니다.

 document . addEventListener (
  "keydown" ,
  function ( event ) {
    console . log ( "keydown" , event . keyCode ) ;
  } ,
  false
) ;

매직 리모컨을 처리하는 방법

포인팅 장치 (Magic Remote 또는 Mouse)를 사용하여 커서를 요소 또는 하위 요소 중 하나로 옮기면 mouseover 이벤트가 제기됩니다. mouseover 이벤트를 처리하려면 이벤트 리스너를 문서 요소에 추가하십시오.

 document . addEventListener (
  "mouseover" ,
  function ( event ) {
    console . log ( "mouseover" , event . target . id ) ;
  } ,
  false
) ; 

WebOS TV가 발생합니다

샘플 앱을 설치하고 다음 이미지와 같이 WebOS TV에서 샘플 앱 결과를 볼 수 있습니다.

할 일과 그렇지 않습니다

• WebOS TV 장치 또는 WebOS TV 시뮬레이터 에서이 샘플 앱을 테스트 하십시오 .
• TV 전원 키의 키 코드를 찾으려고 하지 마십시오 . Webos TV는 그것을 제공하지 않습니다.

참조

4 방향 내비게이션 키로 UI 요소 사이의 초점을 이동하려면 공간 탐색이 사용됩니다.