I am working with phonegap and jquery mobile but am having problems with going back on pages. There are four pages:
Splash
Login
Main
SubMain
So Lets say the flow goes like this always hit the splash screen first. If a user has never logged before, they are shown the login screen, if they have then they are shown the main page. Here's a scenario:
A new user will navigate like this:
Splash
Login
Main
SubMain
Now from Submain screen, if they want to exit they will hit the back button until the they exit. However this route will take them through the Login page and the Splash screen again, when I want them to exit the app when they hit back on the main screen.
Is there anyway to make the user exit when pressing back on Main?
I realize I could avoid this by disabling the back button and adding an exit button.
I'm not sure if this matters or not, but all my pages are in one single html file separated by divs with the data-role="page" attribute
I think navigator.app.exitApp() is what you're looking for. As we keep track of the history manually our helper function looks similar to this:
function backKeyDown(){
if(historyContainsInfo(){
popHistory();
}else{
navigator.app.exitApp();
}
}
and is registered via document.addEventListener("backbutton", backKeyDown, true);
Related
I've got an xamarin forms/prism app, and my hardware back button does nothing on the initial page.
If I navigate to another page, it closes the app as expected. If I navigate to the initial page again, it also closes the app - but not if the app just started.
Is there something I'm missing?
My class App mainly has an OnInitialized that navigates to the initial page:
protected override void OnInitialized()
{
NavigationService.NavigateAsync( "MyMasterDetail/MyNavigationPage/StartPage", animated: false );
}
On MyMasterDetail, there are buttons that navigate to MyNavigationPage/SettingsPage and other pages like that.
It doesn't matter if I use Android 5 in Emulator or Android 6 on a real device, the behaviour is the same.
When using a MasterDetail as your root, you are not actually navigating anywhere else. You are simply changing the Detail property of the MasterDetail to another Page. This is not a navigation action. So you are not really navigating. If you want to fake it, you need to add the INavigationPageOptions to your MyNavigationPage and set the ClearNavigationStackOnNavigation property to false. This will continuously push new pages onto the MasterDetailPage.Detail MyNavigationPage without clearing the stack (PopToRoot). Then this will allow your bac button to behave like you are wanting.
I have built a Meteor app with a mobile app interface (using Ratchet), only designed to be run as an app. On each page, there is a "back" link that takes you back to the parent page. For example, if I go deep inside a hierarchy of page such as this one:
Home > Category > Post
I can use a link in the Post page that will take me back to the Category page. Now, the problem is, if from this Category page I hit the back button, it should have the same behaviour as clicking the back link on the page. (in this case, take me to the Home page) Sadly, this doesn't happen and I get taken back to the Post page.
On iPhone it is not a problem (as far as I know) since there is no actual back button built-in to the device. But on Android it gives me headaches, for example:
Say a user goes to a Post page that he can delete using a button shown on the page. When the post-deletion method finishes, I take the user back to the Category page:
Router.go('categoryPage', {'_id': categoryId});
Problem is: if the user hits the back button after deleting a post, he or she gets taken to a "not found" page, since the previous post has been deleted. Now I can avoid that by adding replaceState: true like this:
Router.go('categoryPage', {'_id': categoryId}, {replaceState: true});
But now when the user hits the back button from the Category page, he or she gets taken to the page that was there before the Post page, which was... the same Category page. So the button just does nothing on the first press.
I also tried to pushState the url of the desired page in each of my template's `rendered̀€ function, to no avail (and what would I put in there for the Home page?):
Template.categoryPage.rendered = function () {
history.pushState(null, null, Router.url('home'));
};
Template.postPage.rendered = function () {
history.pushState(null, null, Router.url('categoryPage', {'_id': this.data.categoryId}));
};
Has anyone tackled this issue and/or would be able to drop some knowledge?
As soon as the back button is pressed, Cordova trigger a "backbutton" event, see there.
By listening to this event you should be able to override the default behavior and do what you want:
document.addEventListener("backbutton", onBackButtonDown, false);
function onBackButtonDown(event) {
event.preventDefault();
event.stopPropagation();
// Do what you want
...
}
I'm developing a app using angularjs and ionic framework. It has a logout option also. When i logout from my app it goes straight to the home page.But if i press the back button it'll go to page that can be accessed only if you are logged in. How can i create a option to close the app if you press the back button from the home page? I use angularjs.
I used this way but did not work
document.addEventListener("backbutton", function(e){
if($.mobile.activePage.is('/templates/playlists')){
/*
Event preventDefault/stopPropagation not required as adding backbutton
listener itself override the default behaviour. Refer below PhoneGap link.
*/
//e.preventDefault();
navigator.app.exitApp();
}
else {
navigator.app.backHistory()
}
}, false);
Your code is good.
But, I'm not sure about the second line : are you sure that the active page id is /templates/playlists ?
Normally, the value you should pass to the $.mobile.activePage.is function should contain a page id (which could be retrieved like this : $.mobile.activePage.attr('id')).
(by the way, I don't know which of jQuery Mobile you are using, but the $.mobile.activePage.is was deprecated).
I have a simple html/javascript app that starts and works up fine on an Android device. However, when the app is put in background by using the 'home button' and then brought back to the foreground by clicking on the app again - it starts with a blank screen (white blank screen on android ) and stays that way until the 'back button' is pressed.
Once the 'back button' is pressed the screen refreshes to the last page displayed by the app.
I am new to PhoneGap and I am sure there is something simple/fundamental that I am missing - in terms of how to handle the 'resume' event/etc.. I have followed the instructions provided on this link by Phil Mitchell http://wiki.phonegap.com/w/page/35501397/Tutorials (which is a great resource btw..)
Thanks.
Update :
After looking at the DroidGap code, I have tried to add the following line :-
super.setBooleanProperty("keepRunning", false);
But this does not seem to help. I am happy for the app to exit every time the home button is entered and then do a full restart when the app is clicked on the mobile.
Any help is much appreciated..
I was having the same problem and I want to share a hack that worked for me.
My app is based on ionic/angular/cordova and the android version was giving me a white screen around 50% the times on pause/resume.
When it happened, tapping anywhere on the screen or hitting the back button would make the screen to render again just fine.
I added a div tied to a scope variable named random, like this:
<body ng-app="starter" id="body">
<div>{{ random }}</div>
<ion-nav-view>
</ion-nav-view>
</body>
Then I added a listener inside my app.js to capture the resume event fired by cordova, to then change the random variable and call $apply(), like this:
document.addEventListener("resume", function() {
angular.element(document.querySelector('#body')).scope().random = Math.random();
angular.element(document.querySelector('#body')).scope().$apply();
})
Since the ion-nav-view takes over the whole screen that div never shows up, but angular doesn't know that and refreshes the page, causing the whole thing to work.
(I tried to tie the variable to an invisible element but then angular doesn't refresh the page)
I hope this helps someone!
There seem to be issues around rendering the pages thru PhoneGap and 'Dialog'ing thru Client side FB authentication flow using the JS SDK. If I disable the client side authentication, then the rendering and display of the page works very well, when the app is brought to foreground from background (pause/resume/etc).
I am assuming that the page will need to sense that it is being displayed over a mobile device and use the IOS or Androi SDK for client side authentication.. (if/when I get around to testing that, I update the answer - if there is anybody who has any more light to shed, please feel free to embellish).
If you still say "I am happy for the app to exit every time the home button is entered and then do a full restart when the app is clicked on the mobile." then go for it.
#Override
protected void onStop(){
super.onStop();
}
Try this from where you create activity or from the class which "extends DroidGap".
Okay, I'm making app with phonegap, and in the app I have a home button which goes to the home screen of the app, but if I click the back key after I touched the home button it goes to the page I was on before I clicked the home button, is it possible to reset the history when you navigate to the homepage? Thanks :)
You can't clear the history.
You can listen for back button event:
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown() {
// Handle the back button
}
and stop the propagation.
The link below recommends using location.replace(url) instead of replacing the history completely, which I'm not sure is possible anyway. However, given that this is a constrained environment (an app) wiping the history might make sense - again, if possible if you're in an app.
Clear browser history
Alternatively, couldn't you just remove the back key and replace it with a custom one?
inside the event handler of the button which takes you to home:
startActivity(activityForHome); //I guess you already have this line
finish(); //now add this line