App directory and file structure

Although not required by any means, the following is suggested as a good start for your application's www directory:

+ /www
|     app.js (application bootstrap)
|     index.html (iOS index)
|     index-android.html (Android index)
|     index-wp7.html (WP7 index)
| +   /cordova (cordova versions)
  |       cordova-ios-2.2.0.js
  |       cordova-android-2.2.0.js
  +   /framework (all framework files here)
  +   /style (styles; per-view is optional -- can have it in the html files)
  |       style.css
  |       viewOne.css
  |       viewTwo.css
  +   /models (data models)
  |       dataModel.js
  +   /views (views, re-usable and on-screen)
  |       viewOne.html
  |       viewOne.js
  |       viewTwo.html
  |       viewTwo.js
  +   /plugins (.js files for native plugins)
  | +     /ios
  |   +       /plugin
  |   |           plugin.js
  | +     /android
  |   +       /plugin
  |   |           plugin.js
  +   /images (image assets)

app.js

Consists of the necessary code to "bootstrap" the application. Loads any libraries, sets up localization, loads all views and data models (unless they should be loaded dynamically), and starts the app.

index.html

The file named index.html is iOS-specific. Other platforms should have the platform appended to the filename, as in index-android.html.

The reasoning here is because each platform will need to load a platform-specific cordova.js file, and may need to load the .js files specific to native plugins that are platform-specific. It is easier, then, to alter the name of the index.html file in the Android and other platforms so that the other platforms load their correct libraries. If you are building for one platform, there is no need to do all this.

Note: The primary reason we don't alter the index.html file for iOS is that it is fairly simple to change the starting index file for the other supported platforms. For Android, it is directly in the app's main activity file, while in WP7, it is part of the app's .xaml file.

cordova

This directory should contain all the cordova.js files necessary for each platform. Be sure to add the platform's name into the file, like so: cordova-ios-2.2.0.js

Note: Although not suggested if at all possible to avoid, it is possible to have each platform operate on a different version of Phonegap. Be careful, however, when changing versions -- the native version of Phonegap must exactly match the associated cordova.js file's version.

framework

All the files from this framework are placed in the framework directory.

style

A style.css file can support most of the styles needed by the app. If you want to have styling specific to each view, you can have separate .css files, or you can have all the styles in the style.css file. Alternatively, you can have the styles live in the view's .html file.

models

Any data models can be placed here.

views

Any views can be placed here. Whether you join the styles, HTML, and JavaScript into a file specific to each view, or split them out into separate files. If you wish to split the files, be sure to reference them from the HTML file.

plugins

If any native plugins require JavaScript files, they should be placed in this directory, in a platform-specific directory (such as ios, etc.).

images

Any images needed by the application can be placed here.