RemoteControl

Kendali jarak jauh

Aplikasi sampel ini menunjukkan cara menangani input pengguna seperti remote control ajaib, remote control konvensional, dan keyboard eksternal. Anda dapat mengetahui seluruh kode kunci dari remote control dengan sampel ini. Untuk informasi lebih lanjut tentang remote control ajaib, lihat Magic Remote.

Perilaku remote control dasar

Daftar berikut menjelaskan prinsip pemrosesan dasar untuk input pengguna dari remote control.

• Elemen UI yang dapat dipilih harus sepenuhnya dapat dilayari dengan kursor layar dan tombol navigasi 4 arah (atas, bawah, kiri, dan kanan)
• Elemen UI yang dapat dipilih harus bertindak dengan cara yang sama ketika dikendalikan oleh kursor layar dan ketika dikendalikan oleh tombol OK.
• Salah satu elemen UI harus difokuskan. Ini adalah kesalahan umum yang dilakukan pengembang, jadi periksa yang berikut:
  • Ketika kursor menghilang dari layar dengan memasukkan kunci navigasi, fokus oleh kursor harus dialihkan ke fokus oleh tombol navigasi.
  • Bertentangan dengan hal di atas, ketika kursor diaktifkan dan bergerak ke elemen UI, fokus oleh tombol navigasi harus dialihkan ke fokus oleh kursor pada posisi saat ini.
• Efek seleksi wajib untuk menunjukkan elemen mana yang diaktifkan. Efek seleksi yang mungkin adalah animasi, highlight, warna, atau perubahan ukuran, dll.
• Halaman dan daftar gulir dapat dikontrol dengan tepat menggunakan roda remote ajaib.

Untuk informasi lebih lanjut tentang pedoman UI, lihat daftar periksa UX.

Menambahkan pendengar acara

Bagaimana menemukan kode kunci

Anda bisa mendapatkan kode kunci dari peristiwa utama dengan menambahkan pendengar acara keydown .

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

Cara menangani remote ajaib

Ketika perangkat penunjuk (Magic Remote atau Mouse) digunakan untuk memindahkan kursor ke elemen atau salah satu elemen anaknya, acara mouseover dinaikkan. Untuk menangani acara mouseover , tambahkan pendengar acara ke elemen dokumen.

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

Menghasilkan tv webos

Anda dapat menginstal aplikasi sampel dan melihat hasil aplikasi sampel di TV WebOS seperti pada gambar berikut.

Lakukan dan tidak

• Lakukan uji aplikasi sampel ini di perangkat TV WebOS Anda atau simulator TV WebOS.
• Jangan mencoba menemukan kode kunci dari kunci daya TV. TV WebOS tidak menyediakannya.

Referensi

Untuk memindahkan fokus antara elemen UI dengan tombol navigasi 4 arah, navigasi spasial digunakan.