Skip to content

Single code base for multiple platforms

kerrishotts edited this page Nov 15, 2012 · 3 revisions

The promise of Phonegap and YASMF is a single code base across multiple platforms. There will always be cases where one will need to execute certain code that is platform specific, but it can exist in the same code base.

The difficulty is in having a single www directory across the multiple projects that are necessary for each platform. Phonegap has native code, and so that code has to be in an Eclipse project for Android, an Xcode project for iOS, etc.

Each project requires the www directory, where the non-native code lives, to be part of the project. Unfortunately this seems to mean that the www directory has to be copied for each project -- a problem wen trying to maintain a single code base.

It is suggested instead to use symbolic linking, which means that the www directory exists in only one place and is linked to in each native project. Unfortunately none of the IDEs have this capability, so we'll have to do the symbolic linking at the command line.

Suggested Directory Structure

/project
    /www (our real www directory)
    /ios
        project.xcode-project
        /www ==> linked to ../www
    /android
        /project
            /assets
                /www ==> linked to ../../../www

How does one create the desired links? You can follow the following steps, though you may want to collect the platform-specific cordova.js file from each project before executing these steps:

For *nix

cd project/ios
rm -rf www         (delete the directory created by the project create script)
ln -s ../www       (create the link to the www directory)

cd project/android/project/assets
rm -rf www         (again, delete the directory created by the create script)
ln -s ../../../www (create the link to our www directory)

For Windows

cd project\ios
rmdir www
mklink -d www ..\www

cd project\android\project\assets
rmdir www
mklink -d www ..\..\..\www

Setting up each Platform

We still need to load the correct index.html file. For iOS, no changes are necessary, since Phonegap will load index.html by default. For the other platforms, however, we need to make adjustments to the code.

for iOS

Load Cordova.plist and modify these entries:

UIWebViewBounce         ==> NO
ShowSplashScreenSpinner ==> NO

For Android

Load the project's only .java file, and find the line with loadUrl on it. Change it so it reads like this:

super.loadUrl("file:///android_asset/www/index_android.html");

For Windows Phone

Load MainPage.xaml and change StartPageUri to /app/www/index_wp7.html. Also, be sure to change each file in www/images to "Content". If you don't, the images will not be transferred to the device.

Clone this wiki locally