Im getting this error.
ReferenceError: Can't find variable: cordova at file:///android_asset/www/childbrowser.js:87
I have done all of this:
To install the plugin, move www/childbrowser.js to your project's www folder and include a reference to it in your html file after phonegap.js.
Copy the image files folder www/childbrowser to your project's www folder. Note you need the entire folder not just the images.
Create a directory within your project called "src/com/phonegap/plugins/childBrowser" and move ChildBrowser.java into it.
In your res/xml/plugins.xml file add the following line:
I had this same problem working in Eclipse off the demo from phonegap. They have use add this line in the "hello world":
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
But when you download the new phonegap it should be:
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
Now it works for me :)
Related
I am adding plugins to my cordova android application but I am unable to reference cordova.js file in the index.html page. Image of Structure of my application is : [App structure Image][1]. I have highlight both files in the image index.html and cordova.js. The solution I though was to copy the plugin JS files from platform_www folder to inside www folder. But as the plugins keeps on adding its seems not a good solution to copy paste js files.
the cordova.js file gets copied into the www directory structure when the app is compiled, you don't need to manually copy it - you just add a link:
<script src="cordova.js"></script>
I installed paypal cordova plugin in my phone-gap app.
For paypal integration in my app, I have download the zip file of paypal-android-sdk from the source given https://github.com/paypal/PayPal-Android-SDK.
Now I just want to know how do I add PayPal-Android-SDK in my phone-gap's project's libs folder so that paypal plugin works perfectly.
Please suggest me for this.
Thanks.
Refer https://github.com/paypal/PayPal-Cordova-Plugin
Create cordova app with same name as that of app created in paypal developer account.
Include the paypal plugin in config.xml
<plugin name="com.paypal.cordova.mobilesdk" spec="3.1.23" />
Add the paypal-mobile-js-helper.js file to the app using script tag in index.html
<script type="text/javascript" src="js/paypal-mobile-js-helper.js"></script>
Follow the guidelines from documentation https://github.com/paypal/PayPal-Cordova-Plugin
I have cordova latest version installed on my system and I created the basic app with command
cordova create
and I added the platform using
cordova add platform android
and I replaced the default index.html in the www directory with my own index.html
but whenever i tried to generate apk, and tried to run it on my mobile. It was the apk generate with default index.html
the screen of my app will be
How to resolve this issue ?
This is a normal behaviour.
Cordova is going to take the index.html from your projects root folder, everytime you run cordova build, prepare or serve without attribues, which is located directly inside your projects www folder.
Root www folder inside your cordova project contains the index.html which is taken and "thrown" into all platform folders when you run those commands.
projectName -> www -> index.html
Solution
You work in your projects root folder, and run cordova prepare everytime after you did a change to your index.html file.
You work directly inside your android project folder and the index.html which is located inside the assets -> www folder
You can change default index.html file to your own .html file
Simply open config.xml file in your project folder and edit its src attribute in <content> tag:
like:
default:
content src="index.html"
edited:
content src="helloCounterApp.html"
(Then it will load helloCounterApp.html not index.html(default))
I have an existing native Android app to which I'm adding a cordova webview.
This is in the new gradle project format with Intellij.
I've successfully gotten the cordova activity loaded, and opens as expected.
I added the webview by following the cordova docs.
Now I'd like to use some of the plugins available but can't find a way to add them to the project.
Since this isn't a cordova generated project, plugman doesn't work. I've tried copying the JS and Java files for the plugins I'm interested in to my source dir but that results in various errors.
e.g. require is undefined, when this happened, I added requirejs to the webview's index.html
and it moved on to
Uncaught Error: Module name "cordova/exec" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded cordova.js:8
Failed to load resource file:///android_asset/www/scripts/cordova_plugins.js
deviceready has not fired after 5 seconds. cordova.js:1191
Channel not fired: onDOMContentLoaded
How do I get a plugin working with this?
EDIT:
I am manually moving stuff around.
This has to be put into an existing project which uses gradle for building.
Using cordova create generates a project in the old ANT format.
I followed the docs on embedding a WebView in an existing project (see the link above), but it doesn't mention any of the JavaScript files. So I just copied cordova.js from the android platform directory.
Like wise, I download the plugins I wanted, copied their JavaScript files, added the feature to build.xml and copied their Java files to my src directory.
I didn't know about cordova_plugins.js or that cordova prepare generates them.
You have to use Plugman to manage your plugins in the custom built Cordova WebView.
Please remove all your existing plugins and read them using plugman.
plugman install --platform android --project <proj> --plugin org.apache.cordova.battery-status --www <proj>/assets/www/scripts
where the <proj> is the folder where you main project is created,
Alternatively you could use --www parameter which allows you to specify where root of web application is stored. Example:
plugman install --platform android --project <proj> --plugin org.apache.cordova.battery-status --www <proj>/assets/www/scripts
Plugman reference
EDIT
If you have highly customized project, you could create empty Cordova project where you add
plugins, and copy cordova_plugins.js from this project to assets\www\scripts, Cordova should pickup these files. If you have your plugins JS files not in the assets\www\scripts\plugins\ folder, but instead of that in assets\www\plugins you have to modify content of cordova_plugins.js like that
module.exports = [
.....
{
"file": "../plugins/org.apache.cordova.inappbrowser/www/InAppBrowser.js",
"id": "org.apache.cordova.inappbrowser.InAppBrowser",
"clobbers": [
"window.open"
]
},
...
]
Here is some input on how I came though,
I am in a similar position like the OP, embedding a Cordova Web View in my Native Android Application.
After executing
plugman install --platform android --project <proj> --plugin org.apache.cordova.battery-status --www <proj>/assets/www/scripts
What happens is you get a new 'Cordova' folder in your original 'main' Folder, (Where your AndroidManifest.xml is). Besides that, there is the 'src' folder with the code you actually need generated.
What I did, was copying the org folder from src to the 'java' folder. And everything worked.
I understand that by doing :
phonegap build android
a copy of the files in www is made in platforms/android/assets/www
I can then import the platforms/android folder in my IDE as a Android project and run it from there in an emulator or my phone.
But I would like to have only 1 code base that I can use to build for different platforms, so ideally I would like to be able to make changes to the app in the www in the root only.
I guess I need some kind of file-copying builder, that is started before running the project, but I have no experience with this. I read about Ant, Maven and Gradle....is this the way to go ?
Could anybody tell me how everybody is doing this? Or is it really not common to use 1 single code base for all platforms? (I thought that was the whole point of Phonegap!)
See PhoneGap 3 project structure for details. Basically you have folders like:
/merges - for merging/overriding www folder
/android/cordova.js
/ios/cordova.js
/platforms - contain native codes
/android
/ios
/plugins - plugin codes
... plugin native and stuff
/www
/www - primary folder web app folder
cordojva.js
index.htm
etc...
Personally, we have not upgraded to PG3, but we follow this same structure. We use Jenkins on OSX to checkout our files in TFS. Then we use gruntjs override the www stuff in platforms folder. Then again, override stuff in platforms folder from merges folder. Finally, because it is required, we use ant to compile android and xcode to compile iOS.
There are different ways each developer follows to have a single code base. In my case, i create two folders Android and Iphone with iphone's www folder being a symlink to the Android's www folder. If i want to have separate script files to be used for iphone and android, i have this code in the index.html file
<!--iPhone
<script src="iphone/cordova-2.5.0.js"></script>
<script src="iphone/DatePicker.js"></script>
-->
<!-- android -->
<script src="android/cordova-2.5.0.js"></script>
<script src="android/datePickerPlugin.js"></script>
if i want to run for iphone, i change the comment tags to un comment iphone and comment android
There is exactly need of 1 codebase common for all platforms. Phonegap wraps contents in /www folder to make android and iPhone builds out of it.
To copy files from one location to second (if that shows up as a requirement), do give gruntjs a try. Its an excellent tool to accomplish such tasks.
In my opinion, since phonegap makes its own build, other build tools like ant, maven, gradle can be avoided.
They now have the command line tool that is supposed to solve this problem.
It seems to be a reasonable solution for us.
cordova command line tool
What we used to do is use SVN and checkout the same folder to
assets/www for android
and
www for iOS
depending on your file structure you may need to have conditional javascript
<script type="text/javascript" charset="utf-8">
var ua = navigator.userAgent;
var platform = {
ios: ua.match(/(iPhone|iPod|iPad)/),
android: ua.match(/Android/)
};
if (platform.android) {
document.write('<script src="android/cordova-2.2.0.js" type="text/javascript" charset="utf-8"><\/script>');
document.write('<script src="android/childbrowser.js" type="text/javascript" charset="utf-8"><\/script>');
} else if (platform.ios) {
document.write('<script src="ios/cordova-2.2.0.js" type="text/javascript" charset="utf-8"><\/script>');
document.write('<script src="ios/ChildBrowser.js" type="text/javascript" charset="utf-8"><\/script>');
}
</script>