Back Button Cordova Menggunakan Framework7 VueJs

EKSYAM.COM – Cara Setting Back Button Cordova Menggunakan Framework7 VueJs. Framework7 merupakan open source framework untuk mengembangkan aplikasi seluler, desktop atau web dengan tampilan seperti native. Ini juga merupakan alat prototyping yang sangat diperlukan untuk menunjukkan prototype aplikasi yang berfungsi sesegera mungkin jika Anda perlu.

Ketika mengembangkan aplikasi menggunakan Cordova dan Framework7 salah satu fitur yang harus ada yaitu handle back button (tombol kembali). Berikut merupaka script untuk menghandle tombol back button. Silahkan pasang script berikut di file app.vue (Tutorial ini menggunakan Cordova + Framework7 Vuejs).

methods: { onBackKeyDown: function() { const self = this, app = self.$f7, $ = self.$$; var mainView = self.$f7.views.main; var leftp = app.panel.left && app.panel.left.opened; var rightp = app.panel.right && app.panel.right.opened; if (leftp || rightp) { app.panel.close(); return false; } else if ($('.modal-in').length > 0) { app.dialog.close(); app.popup.close(); return false; } else if (mainView.router.url == '/') { app.dialog.confirm('Yakin ingin keluar Aplikasi?', 'Keluar Aplikasi', function() { navigator.app.exitApp(); }, (event) => {}); }else{ mainView.router.back(); } } }, mounted() { document.addEventListener("backbutton", self.onBackKeyDown, false); }

methods: {

onBackKeyDown: function() {

const self = this, app = self.$f7, $ = self.$$;

var mainView = self.$f7.views.main;

var leftp = app.panel.left && app.panel.left.opened;

var rightp = app.panel.right && app.panel.right.opened;

if (leftp || rightp) {

app.panel.close();

return false;

} else if ($('.modal-in').length > ) {

app.dialog.close();

app.popup.close();

return false;

} else if (mainView.router.url == '/') {

app.dialog.confirm('Yakin ingin keluar Aplikasi?', 'Keluar Aplikasi', function() {

navigator.app.exitApp();

}, (event) => {});

}else{

mainView.router.back();

}

mounted() {

document.addEventListener("backbutton", self.onBackKeyDown, false);

}

Demikianlah catatan singkat tentang cara setting back button Cordova menggunakan Framework7 VueJs.

Definisi dan Sejarah Cordova

Apache Cordova (sebelumnya PhoneGap ) adalah kerangka kerja pengembangan aplikasi seluler yang awalnya dibuat oleh Nitobi . Adobe Systems membeli Nitobi pada tahun 2011, mengganti namanya menjadi PhoneGap, dan kemudian merilis versi open source dari perangkat lunak yang disebut Apache Cordova.Apache Cordova memungkinkan pemrogram perangkat lunak untuk membangun aplikasi untuk perangkat seluler menggunakan CSS3 , HTML5 , dan JavaScript alih-alih mengandalkan API khusus platform seperti yang ada di Android , iOS , atau Windows Phone. Ini memungkinkan pembungkus kode CSS, HTML, dan JavaScript tergantung pada platform perangkat. Itu memperluas fitur HTML dan JavaScript untuk bekerja dengan perangkat.

Aplikasi yang dihasilkan adalah hybrid, yang berarti bahwa mereka bukan aplikasi mobile yang benar-benar asli (karena semua rendering tata letak dilakukan melalui tampilan Web alih-alih kerangka UI asli platform) atau murni berbasis web (karena mereka bukan hanya aplikasi Web, tetapi dikemas sebagai aplikasi untuk distribusi dan memiliki akses ke API perangkat asli). Mencampur snipet kode asli dan hybrid telah dimungkinkan sejak versi 1.9.

Perangkat lunak itu sebelumnya disebut hanya “PhoneGap”, lalu “Apache Callback”. Sebagai perangkat lunak sumber terbuka , Apache Cordova memungkinkan pembungkus di sekitarnya, seperti Appery.io atau Intel XDK.

Pada versi 9, Apache Cordova saat ini mendukung pengembangan untuk sistem operasi Apple iOS , Google Android , Windows 8.1 , Windows Phone 8.1 , Windows 10 dan Electron (kerangka kerja perangkat lunak) (yang pada gilirannya berjalan pada Windows , Linux dan macOS ).

Eksyam

Developer Website & Mobile Apps

Cara Setting Back Button Cordova Menggunakan Framework7 VueJs

Definisi dan Sejarah Cordova