Wednesday, May 10, 2017

Membuat fungsi sederhana untuk menghandle backbutton di cordova

Membuat fungsi sederhana untuk menghandle backbutton di cordova

Akhir-akhir ini saya tertarik dengan hybrid programming yang salah satu source-nya adalah cordova, di pembahasan kali ini saya akan membahas cara sederhana membuat fungsi untuk menghandle backbutton di cordova.

Kasus
Kasus yang ingin di pecahkan oleh artikel ini adalah "pada saat aplikasi android pertama kali dibuka, lalu pengguna menekan tombol back, maka buzz aplikasi langsung ke close".

Saya pikir pun awalnya tombol backbutton itu akan ter-set otomatis untuk melakukan back halaman, tapi kenyataannya kita harus menghandlenya secara manual.

Dukungan
Fungsi ini hanya mendukung beberapa device saja, diantaranya :
  • Amazon Fire OS
  • Android
  • BlackBerry 10
  • Windows Phone 8

Struktur kode
Struktur dasar kode untuk menghandle backbutton-nya begini :

document.addEventListener("backbutton", myCallbackFunction, false);

function myCallbackFunction() {
    // Handle the back button
}

Pertama kita membuat sebuah listener dengan nama "backbutton", lalu kemudian untuk aksinya sendiri kita buat di dalam fungsi callback. Sederhana kan :) , kalau begitu mari lihat contuh sederhana fungsi untuk memecahkan kasus yang sudah di sebutkan di atas.

document.addEventListener('backbutton', handleCloseBackbutton, false);

function handleCloseBackbutton(e){
    e.preventDefault();
}

Fungsi di atas berfungsi untuk menghandle backbutton agar pada saat aplikasi di buka tidak langsung ke close pas si pengguna menekan tombol back, Kunci kode pada kasus ini terdapat pada method preventDefault() , simpel kan hehehe

Gaya penulisan
Sebenarnya ini tidaklah penting untuk di bahas, tapi bagian ini hanya sebagai info tambahan aja, dan agar artikel ini terlihat panjang wkwkwkwk. Ada beberapa gaya penulisan fungsi yang ada pada listener diataranya :

var handleCloseBackbutton = function(e){
     e.preventDefault();
};

document.addEventListener('backbutton', handleCloseBackbutton, false);


document.addEventListener('backbutton', function(e){
    e.preventDefault();
}, false);


document.addEventListener('backbutton', handleCloseBackbutton, false);

function handleCloseBackbutton(e){
    e.preventDefault();
}

Peletakan sintak
Untuk peletakan sintak, kamu bisa letakan di halaman yang bersangkutan. Misal kita ingin menghandle backbutton di halaman "home", berarti kita letakan sintak di atas di halaman "home", begitu seterusnya.

Mungkin saya cukupkan sekian saya untuk materi kali ini, semoga bermanfaat yah, amiiin :)

Saya hanya seorang "newbie" yang baru bisa ngoding lohor kemarin.

2 komentar

Itu codingan dibtaruh dmn ya? Di index nya bukan?

Letakan di halaman yang bersangkutan. Misal mau menghandle backbutton di halaman home, berarti sintaknya di letakan halaman home, begitu seterusnya


EmoticonEmoticon