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>
Related
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))
While creating my app I issues the command:
phonegap create appdir com.site.myapp myapp
so now the appdir folder has the following.
-.cordova
-hooks
-platforms
-plugins
-www
-config.xml-----(config.xml is generated at top level)
In my www folder i have one index.html and one image that I want to use as my icon
www
-index.html
-icon.png
1)so which do I give the path for the tag in the config.xml file?
2)where do I put the config file do i need to move the config file inside the www folder like in phonegapbuild
I have tried various path combinations but none is working
Using Android, The application icon is located here: res/drawable/
So replace icon.png there.
Same thing for splash screen, replacing res/drawable/screen.png.
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>
I just created an Android Project in Eclipse with all the phonegap and cordova files as expected. However, I have no such directory, and thus, no config.xml. According to the Apache Cordova documentation, it is supposed to be located at: app/res/xml/config.xml.
My folder structure is as follows, for the /res directory:
/res/drawable-hdpi
/res/drawable-ldpi
/res/drawable-mdpi
/res/drawable-mdpi
/res/layout
- /res/layout/main.xml
/res/values
- /res/layout/strings.xml
What have I done wrong or what step am I missing? I hope I have provided enough information.
Just create the /res/xml/ folder manually. Then create config.xml using a text editor and use this as a template: https://github.com/phonegap/phonegap/blob/master/lib/android/xml/config.xml
Whenever we create a cordova project, config.xml gets created automatically. We need to check if there is any folder in excluded list.
Go to Build path -> Resources -> Check for excluded resources.
Remove them from the project and build the project. You will be able to view the config.xml and www folder in the Project/Package Explorer.
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 :)