Im searching the web for hours now, tried probably all of the million answers out there regarding this topic... but unfortunately there wasnt a solution among them. So...
Update:
Is there a proper way to open external urls in Phonegap Version 2.3 without using a plugin?
There are a lot of solutions for lower versions than 2.3 out there, but non of them actually did the trick.
Thx.
It seems that Cordova is already providing a solution for my problem in version 2.3.
This makes plugins like ChildBrowser obsolete.
The answer is InAppBrowser
check the following links:
stackoverflow
and the doku:
official doku
Make sure to implement this at the right spot. In my case it was a element of a listview. I implemented it like this:
$(document).bind("mobileinit", function(){
...
$('.listviewmain').delegate('li', 'tap', function(event, ui, e) {
var index = $(this).closest('li').index();
if(result.news[index].id == "ads") {
var ref = window.open('http://google.com', '_blank', 'location=no');
// attach listener to loadstart
ref.addEventListener('loadstart', function(event) {
var urlSuccessPage = "http://myloginapp/success/";
if (event.url == urlSuccessPage) {
ref.close();
}
});
}
...
}
Hope this helps :)
Related
I'm trying to implement a camera to my Ionic 1 project.
But I can't find any reliable examples of how to do that.
I found:
https://www.thepolyglotdeveloper.com/2014/09/use-android-ios-camera-ionic-framework/
and
https://github.com/apache/cordova-plugin-camera
and some older Stack Overflow entries.
Still, I haven't got it running myself.
You're on the right track already! What you found is the most popular camera plugin for Cordova:
https://github.com/apache/cordova-plugin-camera
This is a pure Cordova plugin though, meaning that it's not adjusted in any way for Ionic. This means, you just add it to your project and can use it as soon as Ionic is ready:
ionic.Platform.ready( function() {
navigator.camera.getPicture(onSuccess, onFail, options);
});
But passing callbacks as params is indeed not the angular way to do this. So on top of the basic Cordova camera plugin you can add ngCordova to enhance the handling.
To install and add ngCordova to your project follow these instructions:
http://ngcordova.com/docs/install/
To wrap it up:
Install ngCordova via bower
Add js reference to your index.html
Add the ngCordova module as a dependency to your app.js
In case you've added everything correctly, inject $cordovaCamera in your controller, directive or service to use it.
This allows you to access the camera the angular way, more about it you can find here:
http://ngcordova.com/docs/plugins/camera/
/**
* taken from the docs linked above
* you can now make use of promises here!
*/
$cordovaCamera.getPicture(options).then(function(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}, function(err) {
// error
});
Hope this helps integrating the camera successfully in your project. ;)
I am trying to integrate Branch.io to my app and I get this error message:
"Uncaught ReferenceError: DeepLinkHandler is not defined"
I followed their instructions here and added their SDK:
https://dev.branch.io/getting-started/sdk-integration-guide/guide/cordova/#start-a-branch-session
In specific I'm supposed to do this:
"Then add the method DeepLinkHandler which will act as our callback when the session beings. The deep link data will be included here:"
function DeepLinkHandler(data) {
alert('Data from initSession: ' + data.data);
}
Which is EXACTLY what I did.
I talked with their support, and got to the conclusion that we need to define that function as global, so it will be possible to call it from everywhere.
Did anyone that is using Ionic with Branch.io plugin can help me fix it?
How can I define a global function in Ionic?
Thanks!
It is easy to define a global method:
in your app.js at the top of the page, simply add the method:
function DeepLinkHandler(data) {
console.log("inside DeepLinkHandler");
if (data) {
alert('Data from deep link: ' + JSON.stringify(data));
} else {
alert('No data found');
}
}
Thanks for your help, it actually solved my problem and i got the console.log :)
Edit: It indeed calls it, but now i need to figure out a different problem - how do i call my Services from the global function. Im not sure what the answer is yet.
Edit2:
The idea of solving this is firing an event. Here is the inspiration, a bit of changes and it worked.
https://github.com/BranchMetrics/Cordova-Ionic-PhoneGap-Deferred-Deep-Linking-SDK/issues/128
I am looking for an example about combining the four technologies in the title :) I have a working ReactJS application using Play, Scala and WebJars, it's here on GitHub.
Now I would like to add RequireJS, but I'm not sure how to go, especially because it seems to require a different JSXTransformer? If anybody has a pointer (or even a PR) it would be very appreciated.
This is not the easiest thing to do, but I was able to pull it off. I will give you some tips here. I also uploaded my own project to github. This is a very simple snake game built using React and RequireJs. It based on Webjars and Play Framework.
Remember that RequireJs is part of Play Framework. Here's a step by step guide to create React/RequireJs/WebJars/Play integration:
In your plugins.sbt add addSbtPlugin("com.github.ddispaltro" % "sbt-reactjs" % "0.5.2"). This is a plugin which transforms JSXes into JSes and also strips flow types if you want that.
In your main scala.html file add #helper.requireJs(core = routes.WebJarAssets.at(WebJarAssets.locate("require.js")).url, module = routes.Assets.at("javascripts/main").url). This will add add a script tag with data-main and src attributes that are used to bootstrap your RequireJs app.
Create react.js file in your assets/javascripts folder:
define(['../lib/react/react-with-addons'], function(React) {
window.React = React;
return React;
});
Create main.jsx file in your assets/javascripts folder:
require.config({
// standard requirejs config here
});
require(['react', 'components/YourComponent'], function(React, YourComponent) {
'use strict';
$(document).ready(function() {
React.render(<YourComponent />, document.getElementById('container'));
});
});
Your standard React component goes to assets/javascripts/components/YourComponent.jsx and is defined like standard RequireJs module. Remember to return a React class:
define(function(require) {
var React = require('react');
var AnotherComponent = require('components/AnotherComponent');
return React.createClass({ ... });
}
I hope that helps. If you have any questions, please let me know.
Someone said to have got the text plugin working with sbt-rjs: https://groups.google.com/forum/#!topic/play-framework/F789ZzTOthc
I would attempt with the text plugin first, as it's the simplest plugin of all, right? Once this is successful, move on to the JSX plugin:
https://github.com/philix/jsx-requirejs-plugin
Have a look at: https://github.com/nemoo/democratizer
This is an example project that uses play framework, scala, slick, mysql as a restful backend.
The client is a javascript single page application (SPA) written in react. It uses react router for client site routing and ES6 javascript.
The build process combines webpack and play activator which enables simple automatic browser refresh for server and client side code.
Can any expert here please point me to some valid walkthrough on how to make the ChildBrowser work with Cordova 1.7 in iPhone? I have found lots of documents and blogs out there that tell you how to do it, but none of them have worked for me. It is not a whitelist issue for sure, as for the time being I have set it to the wildcard *, so whitelisting problems can be safely ruled out I guess. In some cases, ChildBrowser was successfully installed, but when I called the showwebpage function, it just would not show up (there wouldn't be any errors either!). Other times, it just won't even install. I have already spent 2 days on it, and am still clueless. Just hoping if you could help me out. Any help would be appreciated.
I could finally get the ChildBrowser to open up following what Dhawal has suggested below. But the onLocationChange event never seems to fire. Again, this seems to be a common problem with Cordova 1.7. Any workarounds apart from rolling back to some older Cordova version? Any help would be appreciated.
Here's what I am trying to do:
window.plugins.childBrowser.showWebPage(url, { showLocationBar: true });
window.plugins.childBrowser.onLocationChange = function(loc){ alert("In index.html new loc = " + loc); };
Ok, got it to work. Seems like ChildBrowser is still compatible with older versions of Cordova only. Had to delve into Objective-C and make changes in the plugin to make it work.
I have a basic application which has childbrowser integration with Cordova 1.7. I have put the steps also to generate build same application.
ios-cordova-childbrowser
Edit
Childbrowser events were not getting called properly so I added this fix in ChildBrowser.js file to resolve it.
if (cordovaRef && cordovaRef.addConstructor) {
cordovaRef.addConstructor(ChildBrowser.install);
// Make ChildBrowser global
window.ChildBrowser = ChildBrowser;
} else {
console.log("ChildBrowser Cordova Plugin could not be installed.");
return null;
}
I'm working on my first PhoneGap/Cordova app and using jQueryMobile as well. I'm trying to get the ChildBrowser plugin working but getting the error in the title when trying to call
ChildBrowser.install()
Its in my onDeviceReady function which is being called correctly and I've even verified that the ChildBrowser.js file is being called by adding an alert and wrapping the anonymous function that file in a try/catch and it does not seem to be throwing any errors during its execution. However the var does not seem to be valid within my index.html file.
Presumably there is some 'gotcha' here I am not aware of. Any thoughts?
Thanks in advance.
Combining info from http://blog.digitalbackcountry.com/2012/03/installing-the-childbrowser-plugin-for-ios-with-phonegapcordova-1-5/ and his linked post https://github.com/phonegap-starter/ChildBrowserPlugin it appears that the
ChildBrowswer.install();
step is no longer necessary. I am now using jQueryMobile 1.1 as well. Example function used to launch google in the ChildBrowser included below. I followed the .plist setup from the first link.
function onLinkClick() {
window.plugins.childBrowser.onLocationChange = function(loc){ alert("In index.html new loc = " + loc); };
window.plugins.childBrowser.onClose = function(){alert("In index.html child browser closed");};
window.plugins.childBrowser.onOpenExternal = function(){alert("In index.html onOpenExternal");};
window.plugins.childBrowser.showWebPage('http://www.google.com',
{ showLocationBar: true });
console.log(window.plugins.childBrowser);
}
and the link itself for completeness
<p>Click here to open a child browser window to Google</p>
Hopes this helps someone else as this question went unanswered for a couple of days.