In order to create the Cordova Exhibition app from the Command-line Interface (CLI), we run the following cordova create command:
> cordova create cordova-exhibition com.jsmobile.cordovaexhibition CordovaExhibition
In order to add Android, iOS, and Windows Phone 8 support from the CLI, we run the usual cordova platform add commands from the app directory as follows:
> cd cordova-exhibition > cordova platform add android > cordova platform add ios > cordova platform add wp8
In order to add the different plugins to our Cordova Exhibition app, we use the usual cordova plugin add command (we will show the details of every plugin URL in its corresponding section).
To build and run the Cordova Exhibition app in your emulators and devices, you can follow the same steps that we used in Chapter 3, Apache Cordova Development Tools, to build and run the Sound Recorder application.
Tip
The complete source code of our Cordova Exhibition app with all of the three supported platforms can be downloaded from the book's web page, or you can access the code directly from GitHub at https://github.com/hazems/cordova-exhibition.
Now, let's understand the structure of our Cordova Exhibition code. The following screenshot shows our Cordova Exhibition app's hierarchy:
The Cordova Exhibition application's structure
The www directory contains the following files and subdirectories:
css: This directory contains the custom app's Cascading Style Sheet (CSS).img: This directory contains the custom app's images.jqueryMobile: This directory contains the files of the jQuery Mobile framework and used plugins (the jQuery Mobile page params plugin and jQuery validation plugin).js: This directory contains all the custom app's JavaScript code. It has the following two subdirectories:api: This directory contains the app managers that interact with the Apache Cordova API in order to decouple the Cordova API from the app event handlers. This gives us the ability to change the implementation of our app API without changing our app event handlers and, at the same time, the ability to keep our app event handlers small.vc: This directory contains the app view controllers that register and implement the event handlers of every page and their user interface components. Event handlers usually call the app managers (the app API) in order to access the device's native features and, finally, they display the results in the app page.
The js directory also includes common.js file, which has common utilities. Finally, under the www directory, the index.html file contains all the app pages. The index.html file will be illustrated in Finalizing the Cordova Exhibition app section in Chapter 5, Diving Deeper into the Cordova API.
Tip
It is important to note that not all Cordova features are supported across all platforms. In order to know the unsupported features, check out the last part in the Overview of Cordova API section in Chapter 1, Introduction to Apache Cordova.