Christian Engvall

This post provides an example of how to work with phonegap and multiple platforms. What folder structure to use and how to share the www folder between projects. Platforms used are iOS and Android. This example project can be downloaded at github but i recommend reading the post first.

Folder structure

The www folder is located in the top folder and linked in under android and iOS folders (windows phone and blackberry too if you’d like, but thats not covered here) -www
-Android
-IOS
(–WP)
(–Blackberry)

Starting with iOS

Start with creating a new Cordova-Based Application following these instructions on the phonegap wiki. But stop when the instruction tells you to copy the www folder and continue here. Save this application in your IOS folder.

You’re back? Good! let’s continue. Open Finder and navigate to your application. You should see a folder called www in the folder where you created the cordova based application. After copying it to the root folder your folderstructure should look like this:

Folderstructure

Now drop the www folder into the xcode project(images borrowed from phonegap wiki):

Cordova project

Choose the following options and click finish:

Cordova project options

Now click on run and your cordova application is working!

Cordova project in iOS simulator

Now we’re done with the IOS part, Let’s continue to Android and Eclipse.

Continuing with Android

Follow this guide to set up your Phonegap project with Eclipse for android. Skip the part with creating the www folder and continue here when you’re done.

Now our folder structure should look like this:

Folderstructure - Android

Now if you try to run the project in the simulator you get the following error, which we will deal with next:

Folderstructure - Android

Now let’s link the www folder in the assets folder. Open a terminal and navigate to your assets folder and create a symbolic link to the www folder:

ln -s ../../www/ www

Or if you are working with the Android project on windows you have to open a console and create a link with this command:

mklink /D c:\pathtoproject\Android\assets\www c:\pathtoproject\www

Note: If you’ll be using git you want to add assets/www to your .gitignore file to avoid having trouble with commits on Windows. You can get my phonegap gitignore file here.

And we are almost done, but first we must add a reference to the cordova.js file for android. In the phonegap archive you downloaded when you first installed it, you got a folder called lib. And inside that folder you another one called Android/example. If you go navigate to the www folder for that example project you see a file called cordova-1.5.0.js.

Copy that file to your own www folder and rename it to cordova-1.5.0-android.js

Open up index.html and go to the line that now contains this:

<script charset="utf-8" type="text/javascript" src="cordova-1.5.0.js">// <![CDATA[

// ]]></script>

and replace it with this:

<script type="text/javascript">// <![CDATA[
if (navigator.userAgent.toLowerCase().match(/android/)) {
document.write('<script charset="utf-8" src="cordova/cordova-1.5.0-android.js"><\/script>');
}
else if (navigator.userAgent.toLowerCase().match(/iphone/) || navigator.userAgent.toLowerCase().match(/ipad/)) {
document.write('<script charset="utf-8" src="cordova/cordova-1.5.0-ios.js"><\/script>');
}
// ]]></script>

And now you are ready to run the project on your emulator or android phone. As i wrote at the top of this post you can download the example project from github to see how i have done it if you’re having trouble.