I'm working on making an Android app using Phonegap and AngularJS. I'm attempting to create a button to be used as both a "cancel" and a "back" button, that will essentially just hit the browser's 'back' button.
Here's some sample HTML for the cancel button:
cancel
And here is the controller for that page, with the goBack() button:
function NewOccasionCtrl($scope, $window) {
$scope.$window = $window;
$scope.goBack = function() {
$window.history.back();
};
}
This throws no errors, but also doesn't work... the emulator remains on the same page. Without the $scope.$window = $window it throws an error. I was hoping to achieve a functional 'back' button without having to create/use a directive, because as far as I understand those then implement templating and things I don't need/want.
Is there a way to do this? Thanks
I went with using a Directive to make the back functionality reusable. Here is my final code:
HTML:
<a href back-button>back</a>
Javascript:
app.directive('backButton', function(){
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', goBack);
function goBack() {
history.back();
scope.$apply();
}
}
}
});
I had an issue like this using phonegap and angular, $window.history.back() would not work. So I created a workaround.
$scope.urlHistory = [];
$scope.$on('$routeChangeSuccess', function () {
if ($location.$$absUrl.split('#')[1] !== $scope.urlHistory[$scope.urlHistory.length - 1]) {
$scope.urlHistory.push($location.$$absUrl.split('#')[1]);
}
});
$scope.goBack = function () {
$scope.urlHistory.pop();
$location.path($scope.urlHistory[$scope.urlHistory.length - 1]);
};
Hope this help someone else.
Related
i have a problem in my app. (i'm using Ionic v1)
I want to hide the back button if the platform is Android, but if is iOS i want to show it.
I have the following code:
.config(function($ionicConfigProvider, $urlRouterProvider) {
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/login');
if (ionic.Platform.isAndroid()) {
$ionicConfigProvider.tabs.style("tabs-icon-top tabs-striped");
$ionicConfigProvider.tabs.position("top");
$ionicConfigProvider.navBar.alignTitle("center");
}
else if (ionic.Platform.isIOS()) {
$ionicConfigProvider.backButton.text('').icon('ion-arrow-left-c');
$ionicConfigProvider.tabs.style("tabs-icon-top tabs-striped");
$ionicConfigProvider.tabs.position("top");
$ionicConfigProvider.navBar.alignTitle("center");
}
});
Thank you!
Put your code inside $ionicPlatform.ready method:
$ionicPlatform.ready(function(){
if (ionic.Platform.isAndroid()) {
$ionicConfigProvider.tabs.style("tabs-icon-top tabs-striped");
$ionicConfigProvider.tabs.position("top");
$ionicConfigProvider.navBar.alignTitle("center");
}
else if (ionic.Platform.isIOS()) {
$ionicConfigProvider.backButton.text('').icon('ion-arrow-left-c');
$ionicConfigProvider.tabs.style("tabs-icon-top tabs-striped");
$ionicConfigProvider.tabs.position("top");
$ionicConfigProvider.navBar.alignTitle("center");
}
});
Is there any way to know when the 'back' button event on the 'Android phone' is pressed? I'd like to exit the game and add few functionality to it when this button is pressed in Xamarin.Forms.
I googled a bit regarding this, but I got articles regarding Xamarin.Android Back button but not for Xamarin.Forms.
As I am relatively new to Xamarin.Forms, please help me out
public override void OnBackPressed()
{
//base.OnBackPressed();
}
Same thing I want in Xamarin.Forms. Need some assistance, guys.
If you mean Xamarin.Forms by "Xamarin Cross Platform", there is a OnBackButtonPressed event that you can use. As seen on that documentation:
Event that is raised when the hardware back button is pressed. This
event is not raised on iOS.
Simply override this event on your NavigationPage and you're ready to go:
protected override bool OnBackButtonPressed()
{
// Do your magic here
return true;
}
Good luck!
In my xamarin forms app you need to find the NavigationStack of the current Page if you are using master page:
public bool DoBack
{
get
{
MasterDetailPage mainPage = App.Current.MainPage as MasterDetailPage;
if (mainPage != null)
{
bool doBack = mainPage.Detail.Navigation.NavigationStack.Count > 1 || mainPage.IsPresented;
//top level of page and the Master menu isn't showing
if (!doBack)
{
// don't exit the app only show the Master menu page
mainPage.IsPresented = true;
return false;
}
else
{
return true;
}
}
return true;
}
}
When I use plain html5 video/audio on Android, I have my user click a button on startup. In the click handler I kickstart all media:
$('.viewaud').each(function(i,el){
el.load();
el.play();
el.pause();
})
After that I can start videos/sounds programmatically without the user having to click.
Is something similar possible in videogular?
Yes, you can do something similar with Videogular.
HTML template:
<videogular vg-player-ready="vm.onPlayerReady($API)">
<!-- other components -->
</videogular>
<button type="button" ng-click="vm.onClickStart()">Start</button>
JS Controller:
angular.module("myApp").controller("MainCtrl",
function ($sce) {
this.onPlayerReady = function (API) {
this.API = API;
};
this.onClickStart = function (event) {
this.API.play();
this.API.pause();
};
// More code...
}
);
My question is exactly the same as this one but for Android and not iOS.
Get URL from remote URL in webview and open it in safari
Anyone have an idea. I am creating a cross-platform app and I have used the Clayton's answer to get it to work for iOS with some tweaks to open with a controller. But when trying different methods on Android and it is not working. This is as close as I have gotten (which is what Aaron provided on that same page) and it is not quite right as it opens the remote web page in a new browser window as well in the apps webview:
$.floorView.addEventListener('load', function(e) {
if (e.url.indexOf("http") !== -1) {
// stop the event
e.bubble = false;
// stop the url from loading
$.floorView.stopLoading();
// open
Ti.Platform.openURL(e.url);
}
});
Thanks!
I'd listen to the beforeload event, although I'm not 100% sure if you can actually prevent the Webview from still continuing the load as well.
Another way would be to intercept these links via JS you load or inject (evalJS()) in the webpage. Then fire a Ti.App event and respond to it in Titanium.
The Titanium.UI.Webview has a specific property for intercepting links: onlink.
This is not implemented as an event because it is a callback and needs to return a boolean to tell the Webview whether or not to load the URL of the link.
Oddly, setting the onlink callback right away makes the URL immediately load in Safari, so I did it this way:
$.webview.addEventListener('load', function(e) {
$.webview.onlink = function(e) {
Ti.Platform.openURL(e.url);
return false;
};
});
You can of course check the e.url string and decide whether to open it internally or externally.
I think I may have figured it out. Thanks to those whose ideas and suggestions lead to this code.
It appears to be working as I want on iOS and Android. Any suggestions or issues that you guys have I would appreciate the feedback. Thanks!
if ("iOS") {
$.webView.addEventListener('beforeload', function(e) {
if (e.navigationType == Titanium.UI.iOS.WEBVIEW_NAVIGATIONTYPE_LINK_CLICKED) {
// stop the event
e.bubble = false;
// stop the url from loading
$.webView.stopLoading();
//opens up the clicked URL for bill in new webView
var link = e.url;
var args = {url: link,};
// open link in my default webView for iOS
var newWebView=Alloy.createController('defaultWebView', args).getView();
newWebView.open();
}
});
}
else if ("Android") {
$.webView.addEventListener('beforeload', function(e) {
if (e.url.indexOf("http") !== -1) {
function Parser(text) {
var html = text;
var urlRegex = /((http|https):\/\/(\w+:{0,1}\w*#)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%#!\-\/]))?)/gi;
this.getHTML = function() {
return html;
};
} // end Parser
var parser = new Parser(e.url);
html = parser.getHTML();
if (html != "url of $.webView") {
// stop it from loding in current webView
$.webView.stopLoading();
// open link in browser
Ti.Platform.openURL(html);
}
}
});
}
else {
.....................
}
I'm writing a mobile application using cordova 3.6, this app just open an external url corresponding to the mobile version of my website
var ref = window.open('http://www.stackoverflow.com', '_self', 'location=no');
If a use _self as the target, the back button behavior is fine forme as it works correctly within browesed pages but the problem is that the last back in the history stack done go back on my index page and then open once again my url ! Also the events on the window doesn't work. How to exit?
var ref = window.open('http://www.stackoverflow.com', '_blank', 'location=no');
If a use _self as the target, the back button behavior is not the same. There is no back possible within browsed pages, just a back on the index page whatever we are. How can I modify the behavior to have the same as the _self?
I am stuck with these 2 solutions :(
Note: I saw this similar question but the suggested code
dialog.setOnDismissListener(new DialogInterface.OnDismissListener() {
public void onDismiss(DialogInterface dialog) {
closeDialog();
}
});
no more exists in cordova InAppBrowser.java no more exist
I found a working solution for the "_blank" option target using cordova 3.6 thanks to the answer of Kris Erikson on this post
With those modifications the hardware back button works within pages in an InAppBrowser.
I copy hereafter his working solution
Go to src/com/org/apache/corodova/inappbrowser directory and edit the InAppBrowserDialog.java:
Change
public void onBackPressed () {
if (this.inAppBrowser == null) {
this.dismiss();
} else {
// better to go through the in inAppBrowser
// because it does a clean up
this.inAppBrowser.closeDialog();
}
}
to
public void onBackPressed () {
if (this.inAppBrowser == null) {
this.dismiss();
} else {
if (this.inAppBrowser.canGoBack()) {
this.inAppBrowser.goBack();
} else {
this.inAppBrowser.closeDialog();
}
}
}
Then go to InAppBrowser and find the goBack function, change:
/**
* Checks to see if it is possible to go back one page in history, then does so.
*/
private void goBack() {
if (this.inAppWebView.canGoBack()) {
this.inAppWebView.goBack();
}
}
to
/**
* Checks to see if it is possible to go back one page in history, then does so.
*/
public void goBack() {
if (this.inAppWebView.canGoBack()) {
this.inAppWebView.goBack();
}
}
public boolean canGoBack() {
return this.inAppWebView.canGoBack();
}
Please post if you find a better solution avoiding to modify the java code