RemoteControl

Télécommande

Cet exemple d'application montre comment gérer les entrées utilisateur telles que la télécommande magique, la télécommande conventionnelle et le clavier externe. Vous pouvez déterminer l'ensemble des cocodes de la télécommande avec cet échantillon. Pour plus d'informations sur la télécommande magique, consultez la télécommande magique.

Comportement de télécommande de base

La liste suivante décrit les principes de traitement de base pour les entrées utilisateur de la télécommande.

• Les éléments d'interface utilisateur sélectionnables doivent être entièrement navigables par le curseur d'écran et les touches de navigation à 4 voies (en haut, en bas, à gauche et à droite)
• Les éléments d'interface utilisateur sélectionnables doivent agir de la même manière lorsqu'ils sont contrôlés par le curseur d'écran et lorsqu'ils sont contrôlés par le bouton OK.
• L'un des éléments d'interface utilisateur doit être concentré. C'est une erreur courante que les développeurs font, alors vérifiez ce qui suit:
  • Lorsque le curseur disparaît de l'écran en entrant dans les touches de navigation, la focalisation par le curseur doit être basée à l'orientation par les touches de navigation.
  • Contrairement à ce qui précède, lorsque le curseur est activé et se déplace sur un élément d'interface utilisateur, la focalisation par les touches de navigation doit être basée à la focalisation par le curseur sur la position actuelle.
• Un effet de sélection est obligatoire pour montrer quel élément est activé. Les effets de sélection possibles sont l'animation, la surbrillance, la couleur ou le changement de taille, etc.
• Le défilement de la page et de la liste peut être contrôlé de manière appropriée à l'aide de la roue de la télécommande magique.

Pour plus d'informations sur les directives d'interface utilisateur, consultez la liste de contrôle UX.

Ajouter des auditeurs d'événements

Comment trouver des codes clés

Vous pouvez obtenir le code clé des événements clés en ajoutant l'écouteur des événements keydown .

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

Comment gérer la télécommande magique

Lorsqu'un dispositif de pointage (télécommande magique ou souris) est utilisé pour déplacer le curseur sur un élément ou l'un de ses éléments enfants, l'événement mouseover est augmenté. Pour gérer l'événement mouseover , ajoutez l'écouteur d'événements à l'élément de document.

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

Entraîner le téléviseur WebOS

Vous pouvez installer l'exemple d'application et voir l'exemple d'application Résultat dans le TV WebOS comme dans l'image suivante.

Faire et faire

• Testez cet exemple d'application sur vos appareils TV WebOS ou simulateur TV WebOS.
• N'essayez pas de trouver le keycode de la clé de puissance TV. WebOS TV ne le fournit pas.

Référence

Pour déplacer la focalisation entre les éléments d'interface utilisateur par des clés de navigation à 4 voies, la navigation spatiale est utilisée.