Customising default cordova/phoneGap app

←Building hybrid apps with cordova or phonegap

In my previous blog I explained how to install cordova, and create an application using cordova command line tool. We ran this app on the device which displays default cordova app.

This app right now is pretty boring, lets add some functionality to it.

Before that let's explore the folder structure of cordova app, in previous blog we created cordova app in the folder barcodeScanner which has created the folder structure as in the below screen shot
folder structure

At the root of the application folder we have config.xml file which stores the basic information about the app such as application id, version, app name and source(src) of the app.Here src is pointed to index.html that means app searches index.html by default in a www folder, if you want to have some other file as your default source file then change it here, for example

<content src="default.html" />  

config.xml file is as below :
config

"WWW" folder

This is the most important folder in cordova app development as all of the app resources such as html, javascript, images and CSS files goes here, these resources will later be copied into the specific platform (android, iOS) to create cordova app. So any modification to the app functionality will be done here.
wwwfolder

Other folders:

Platforms :

All the platform specific files goes in here, If you have added android platform to the cordova app using "cordova platform add android" command, then you can see a android folder in the platforms folder.

Plugins :

All the plugins that are added using cordova add plugin commmand or using plugman goes here, in this blog series will add a barcode scanner plugin to the cordova app, all barcode scanner related files can be seen here.

Hooks :

Hooks helps in creating a script which could be fired before and/or after running a command such as cordova prepare, cordova run or cordova emulate etc. This script could be written in javascript or shell script.

Merges :

In this folder you can place a platform specific files. example, may be the user interface or styling of the app is different for different platforms in that case you can create a platform specific style files and place them in the specific folders such as merges/android.

Lets start coding :

Navigate to "www" folder in the root folder of cordova app(i.e.,in my case it is barcodeScanner folder), you should find index.html in this folder. Lets make some changes to the app. Open index.html in your favourite editor, I will be using sublimeText for this tutorial. You can download sublimeText from this link, you can use this editor in trial mode for 30 days and later you can buy the license.

content of index.html is :

This is a basic HTML5 file, content below doctype is a license for Apache cordova, we can ignore this part, essentially it says cordova has been licensed under apache license 2.0 and other warnings like warranty and other stuffs.
In this index.html, two most important line of code are

 <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>

These lines are refernces to the cordova.js and index.js. Without cordova.js reference, app cannot leverage the cordova features so make sure that in your html file cordova.js is referenced properly, and index.js takes care of instantiating the app.

Under "head" tag we can see various "meta" tags, fisrt meta tag indicates character encoding used for the HTML document that is UTF-8 and following meta tag disables automatic detection of possible phone numbers in a webpage in Safari on iOS

<meta name="format-detection" content="telephone=no">  

Below meta tag disables zooming in feature of an web page and sets viewport to the device height and device width.

 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

we can load external CSS files using link tags.This code below searches for a index.css file in "CSS" folder and applies css style present in index.css to index.html file.

<link rel="stylesheet" type="text/css" href="css/index.css" />  

lets remove next few lines from the index.html file and add our button to it so that we can add some action to our app.
Delete following lines of code :

<h1>Apache Cordova</h1>  
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>

Add this line to div tag i.e.,

 <div class="app">
<input type="button" value="scan" onclick="scan()"></input>  
</div>  

Above code adds a button to the app and calls a "scan()" function as soon as we click on the button, as of now scan function is not defined so even if we build the app, it throws an error so lets add a scan function to the index file

<script type="text/javascript">  
            function scan(){
       alert("hello world!!!");
            }
        </script>

New index.html would look like this

Let's build the app, in a cordova root folder (i.e., barcodeScanner ) execute

cordova run --device  
-or-
cordova run --emulator  

depending on the device connected or not, remember before this step we need to execute "cordova platform add android" we discussed about this in my previous blog.

You should see the app as in the following screen shot
appScreen

The background image and button position and other aesthetics are coming from index.css file, you can modify the look and feel by modifying index.css file.
Click on the "scan" button, the alert message will popup

alertScreen

So we have successfully customised the default cordova app. In my next blog I will show you how to add a barcode scanner plugin to the app.

                                          Adding barcode scanner functionality to the hybrid app→