RemoteControl

Fernbedienung

Diese Beispiel -App zeigt, wie Benutzereingänge wie Magic Fernbedienung, herkömmliche Fernbedienung und externe Tastatur behandelt werden. Mit dieser Probe können Sie die gesamten Schlüsselcodes der Fernbedienung herausfinden. Weitere Informationen zur Magic Fernbedienung finden Sie unter Magic Remote.

Grundlegendes Fernbedienungsverhalten

Die folgende Liste beschreibt die grundlegenden Verarbeitungsgrundsätze für Benutzereingaben der Fernbedienung.

• Auswahlbare UI-Elemente müssen durch den Bildschirm Cursor und 4-Wege-Navigationsschlüssel (nach oben, unten, links und rechts) vollständig navigierbar sein.
• Auswahlbare UI -Elemente müssen auf die gleiche Weise wirken, wenn sie durch den Bildschirm Cursor gesteuert und von der OK -Taste gesteuert werden.
• Eines der UI -Elemente muss konzentriert sein. Dies ist ein häufiger Fehler, den Entwickler machen. Überprüfen Sie also Folgendes:
  • Wenn der Cursor durch Eingabe der Navigationsschlüssel vom Bildschirm verschwindet, muss der Fokus des Cursors durch die Navigationsschlüssel auf den Fokus umgestellt werden.
  • Im Gegensatz zu dem oben genannten, wenn der Cursor aktiviert ist und sich auf ein UI -Element bewegt, muss der Fokus der Navigationsschlüssel vom Cursor auf der aktuellen Position auf den Fokus umgestellt werden.
• Ein Selektionseffekt ist obligatorisch zu zeigen, welches Element aktiviert ist. Die möglichen Auswahleffekte sind Animation, Highlight, Farbe oder Größenänderung usw.
• Die Seite und die List -Scroll können mit dem Rad der magischen Fernbedienung entsprechend gesteuert werden.

Weitere Informationen zu UI -Richtlinien finden Sie in der UX -Checkliste.

Hinzufügen von Ereignishörern

So finden Sie Schlüsselcodes

Sie können den Schlüsselcode von Schlüsselereignissen erhalten, indem Sie den Listener keydown -Ereignisses hinzufügen.

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

Wie man mit magischer Fernbedienung umgeht

Wenn ein Zeigegerät (magische Fernbedienung oder Maus) verwendet wird, um den Cursor auf ein Element oder eines seiner untergeordneten Elemente zu bewegen, wird das mouseover -Ereignis angehoben. Fügen Sie den Event -Listener zum Dokumentelement hinzu, um das mouseover -Ereignis zu verarbeiten.

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

Führen zum WebOS -Fernseher

Sie können die Beispiel -App installieren und sehen, dass die Beispiel -App wie im folgenden Bild in das WebOS -Fernseher führt.

Do ist und nicht

• Testen Sie diese Beispiel -App auf Ihren WebOS -TV -Geräten oder Ihrem WebOS -TV -Simulator.
• Versuchen Sie nicht, den Schlüsselcode des TV -Power -Schlüssels zu finden. WebOS TV bietet es nicht an.

Referenz

Um den Fokus zwischen UI-Elementen durch 4-Wege-Navigationsschlüssel zu bewegen, wird räumliche Navigation verwendet.