In Sencha touch if I use navigation view i can get back button. This is pretty fine.
But what if user hit device backbutton? it is direct exiting the applicaiton. In my requirement it should not exit the application it has to go back to previous screen.How can i do this?.
You can handle hardware back button like this:
if (Ext.os.is('Android')) {
document.addEventListener("backbutton", Ext.bind(onBackKeyDown, this), false);
function onBackKeyDown(eve) {
eve.preventDefault();
//do something
alert('back button pressed');
}
}
I didn't find the instructions on the history support page that useful when trying to do this; I couldn't see anyway to use routes when dealing with a navigation view which can have a large stack of views on it at anytime.
If you just want the back button to work though, you can use the popstate and pushstate functions (see https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history for a reference). The idea is that you push a state when adding a view and pop it off when removing one. The physical back button on an Android phone, or the back button on a desktop browser effectively calls history.back(); so all you need to do is ensure that pressing the back button on the titlebar does the same, and it is that which triggers the nav view to pop.
To make use it work in Sencha Touch, I add the following to the main controller:
In refs I have references to the main view (an instance of Ext.navigation.View) and to its titlebar, from which you can hook onto the event of the back button e.g.:
refs: {
main: 'mainview',
mainTitleBar: 'mainview titlebar',
}...
I attach the following functions via the control config object..
control: {
main: {
push: 'onMainPush'
},
mainTitleBar: {
back: 'onBack'
},
...
These are defined as:
onMainPush: function(view, item) {
//do what ever logic you need then..
history.pushState();
},
onBack: function() {
history.back(); //will cause the onpopstate event to fire on window..
//prevent back button popping main view directly..
return false;
},
I then attach a function to execute when the state is popped via the init function of..
init: function() {
/* pop a view when the back button is pressed
note: if it's already at the root it's a noop */
var that = this;
window.addEventListener('popstate', function() {
that.getMain().pop();
}, false);
},
Now, pressing back on the titlebar, executes history.back(), this in turn fires the popstate event which then causes the main view to pop.
If you want to see this working on a real application, there is a (v. basic!) property finder app using this technique on github here.
Related
I want to integrate an android back button functionality in appcelerator for a parent window and its subsequent child views. I have just a single window in the entire project. Other screens are the children of this parent window. Any suggestions?
There are 2 cases you might be interested in:
Over-ride the default behaviour of the back button press.
$.window.onBack = function () {
// run your code like change views or whatever you like
};
Use Window's onBack property to attach back button callback.
It will have you take control of what should happen when back button is pressed on that window.
If you just want to listen to back button press along with default behaviour of back button press, use Window's androidback event.
$.window.addEventListener('androidback', function (e){});
Note that this method will still close the window you are on, but will allow you to run some code on back button press.
I believe you are looking for method 1.
Note: Method 1 is only available after or > SDK 5.5.1.GA. It was a breaking change in 6.0.0.GA. So do read docs properly & put some tests on their functionality.
Added Code sample to simulate back button feature.
Alloy.Globals.trackingArray = [];
function addNewView(_controllerName, _args) {
var newView = Alloy.createController(_controllerName, _args).getView();
$.window.add(newView);
// add new view in tracking array.
Alloy.Globals.trackingArray.push(_controllerName);
}
// now use something like this whenever you remove any view using backpress
function onBackPress() {
// remove lastly added view
Alloy.Globals.trackingArray.pop(_controllerName);
// add last opened view to simulate back button feature
var lastAddedView = Alloy.Globals.trackingArray[Alloy.Globals.trackingArray.length - 1];
var tempView = Alloy.createController(lastAddedView).getView();
$.window.add(tempView);
}
This is the basis of how you can manage this feature. But do note a point here that you will need to take care of managing arguments passed to while creating a new view or controller. There are multiple ways to do it & it depends on your coding style. :)
I am new to iOS. I have a very similar requirement like my working Android project. The requirement is that in my LoginActivity onCreate(), I am checking for some condition and if it is true then I am launching my next Activity using an Intent.
I am trying to perform the same functionality form my iOS app. In my LoginViewController viewDidLoad(), after checking for some condition, I am calling [self performSegueWithIdentifier:#"myNextControllerSegue" sender:nil];.
But, my ViewController is not changing to next view controller. Any help would be appreciated.
Need to perform segue at right place.you are tried to loading another view before first one in hierarchy.So viewDidAppear is called you have a fully loaded view to modify.
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
[self performSegueWithIdentifier:#"myNextControllerSegue" sender:nil];
}
To remove that flickering, just hide the view in your viewWillApear method.
otherwise as quick search you can do that into main thread also like below
dispatch_async(dispatch_get_main_queue(), { () -> Void in
//perform segue
})
viewDidLoad: is not used for segue performing. You should call the segue in viewDidAppear:, where the view structure is already established.
On your Storyboard, click on your view controller, go to the "Connections inspector" part, and in "Triggered segues", drag the "+" button to the controller you want to reach.
Now click on your segue and go on "Attributes inspector" part, and set "myNextControllerSegue" for identifier.
I have a React Native app that is on 0.18, and am trying to implement back button functionality for Android. I have the following code in my index.android.js:
let navigator;
BackAndroid.addEventListener('hardwareBackPress', () => {
if (navigator && navigator.getCurrentRoutes().length > 1) {
navigator.pop();
return true;
}
return false;
});
And in my render:
<Navigator
ref={(nav) => { navigator = nav; }}
...
The back button works if I go forward any number of routes, and I can then go back any number of routes to the initial route. However, after going back to the initial route, the back button stops working until I reload JS or otherwise restart the app.
Has anyone else encountered this and what is the solution?
Edit: I've tested on 0.21, 0.22, and 0.23-rc3 and am still having this issue in the latest release.
It appears the issue was that, in other components of the app, we had added event handlers to handle changing layouts on opening the keyboard, and on unmounting these components, we were calling DeviceEventEmitter.removeAllListeners(). Contrary to intuition, this call removes all listeners globally, regardless of the instantiating component, and applies even to listeners instantiated on BackAndroid instead of on DeviceEventEmitter. So, after going back from a component that had a keyboard-toggled layout, the hardwareBackPress listener was also removed and the back button stopped working.
Making the removeAllListeners calls more specific e.g. DeviceEventEmitter.removeAllListeners('keyboardWillShow'); resolved this issue.
I am developing an app which will run firstly on Android. However, I have an issue with back button: each time it is tapped the application quits. I don't want this behaviour. I have checked a lot of approaches and I've tried to implement some code but nothing worked.
Here is my code:
Item {
id: student_home_page;
focus: true
// ///////////////////////////////////////////////////////////////
Keys.onReleased: {
console.log("TEST for Back ");
if (event.key == Qt.Key_Back) {
console.log("BAck Button HAndled");
event.accepted = true;
}
}
}
When I click back button after reaching this page, it does not print anything on console as it is not going inside
I only get this message on console of Qt Creator:
/uniActivity(15431): onStop
I/AndroidRuntime(15431): VM exiting with result code 0, cleanup skipped.
Any idea why it is not handling this key event or not any at all inside?
You should handle the back button inside the StackView itself, not a child page, see my answer here
Maybe this could be useful for you. Try to override the activity onBackPressed() method:
#Override
public void onBackPressed() {
// Do something or call finish()
}
I'm creating a jQuery Mobile app which is contained within a Titanium app's webview. When the Android back button is pressed, it exits the app rather than going to the previous page (not the best default behavior in my opinion.) I'm trying to get around this by executing the following code on app load:
document.addEventListener("deviceready", function () {
alert("adding back button event");
document.addEventListener("backbutton", function (e) {
alert("in back button event");
if ($.mobile.activePage.is('#homepage')) {
alert("exit app");
e.preventDefault();
navigator.app.exitApp();
}
else {
alert("go back");
navigator.app.backHistory()
}
}, false);
}, false);
Everywhere I see threads about this issue, they say to use the backbutton event, however it's not being fired at all. If I wrap it in a deviceready event, like above, then deviceready isn't called either. Is the webview somehow suppressing these events, or is there another way to do this with jQuery Mobile?
Your example will not work because you are trying to use Phonegap API call for backbutton handling.
You need to use something appropriate to Appcelerator. First you should check out the canGoBack, canGoForward, goBack and goForward functions for webViews.More info can be found here.
Basically you will need to create function that will handle a backbutton in your webview. Something like this:
detailContainerWindow.addEventListener('android:back', function(e){
if (detailView.canGoBack()) {
detailView.goBack();
} else {
detailContainerWindow.close();
}
});