Use android back button on device to return to main view in Framework7 app?
I have recently built an app using framework7 and cordova. My app consists of a single html file which has all the views in it. To navigate between the views, a back button is present at the top on each child view.
If a person presses the back button on the device, the app will be closed.
How can I use the back button to get to the main page when I'm in the child pages?
I have read the router API on the framework7 website but it is really confusing and does not seem to work. Here is what I'm trying:
<html>
<head>...</head>
<body>
...
<!-- Views -->
<div class="views">
<!-- View -->
<div class="view view-main">
<!-- Pages -->
<div class="pages">
<!-- Home page -->
<div class="page" data-page="index">
<div class="page-content">
<p>Home page</p>
</div>
</div>
<!-- About page -->
<div class="page cached" data-page="about">
<div class="page-content">
<p>About page</p>
</div>
</div>
<!-- Services page -->
<div class="page cached" data-page="services">
<div class="page-content">
<p>Services page</p>
</div>
</div>
</div>
</div>
</div>
...
</body>
</html>
// Initialize App
var myApp = new Framework7();
// Initialize View
var mainView = myApp.addView('.view-main')
// Load about page:
mainView.router.load({pageName: 'about'});
Please note that I want to use the physical button found on the device to navigate to the main view when I'm in another div.
Please help.
Answer
Hello fellow developers,
I know everyone is so annoyed with the Android hardware back button issue in framework7, and finding a solution is also very tedious as I have struggled myself. So here I have code snippet which will help you manage all hardware back button issue (popup, modals, popovers, side panel and app exit) on android devices. please go through the code and drop query if any confusion.
Device Ready Function
function onDeviceReady() {
document.addEventListener('backbutton', onBackKeyDown, false);
}
function onBackKeyDown() {
var cpage = mainView.activePage;
var cpagename = cpage.name;
console.log(cpagename);
if (($$('#leftpanel').hasClass('active')) || ($$('#rightpanel').hasClass('active'))) { // #leftpanel and #rightpanel are id of both panels.
myApp.closePanel();
return false;
} else if ($$('.modal-in').length > 0) {
myApp.closeModal();
return false;
} else if (cpagename == 'index') {
myApp.confirm('Are you sure you want to exit?', function() {
// var deviceType = device.platform;
// if(deviceType == “Android” || deviceType == “android”){
navigator.app.exitApp();
// }
},
function() {
});
} else {
mainView.router.back();
}
}