To illustrate the entire process we can develop a new app. This will be a simple app called Onepad and will record a single text note on an Android device. The note will be stored in local storage.
We start from the CLI and create a new project in the Web folder, called Onepad, with
cordova create Onepad com.example.onepad Onepad
then we open the html, css and js files in our text editor and back in the CLI, enter
cd onepad
cordova platform add android
cordova run -device
To do the editing we exit the command prompt and find the Onepad folder in our Windows files. You will find that it contains several subfolders, such as hooks, nbproject, platforms, plugins, test and www. There are also several files of which the most important is config.xml which is an xml file that defines the app. You should have a look at the contents of these folders but the one that concerns us most is www which contains the index.html, index.css and index.js files that we have to edit to create our app.
We can choose any convenient text editor to edit the text files. A popular choice is Notepad++ which can be downloaded from https://notepad-plus-plus.org/. Or you can use one of the text editors already present in your operating system. The only requirement is that it must produce pure text with no built in control codes. You can also use a heavyweight application such as NetBeans, Android Studio or Eclipse or you can purchase one, such as Dreamweaver.
You have to be careful to save all your files every time you edit them or they will not be seen by the CLI. And you must always go back to the CLI and run the project from there.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>Onepad</title>
<link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<h2>One Pad</h2>
<textarea name="textarea" id="pad">note</textarea>
<input id="save" type="button" value="save" onClick="app.save()">
<input id="open" type="button" value="open" onClick="app.open()">
<input id="wipe" type="button" value="wipe" onClick="app.wipe()">
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
We have used a viewport meta tag to create a responsive user interface that should adjust to different device sizes. Then we reference the stylesheet in the css folder.
The main user interface consists of a text input for the note, pre-seeded with the word “note” with the id "pad". Then there are three buttons – a “save” to save the contents of the textarea, an "open" to open and display the note, and a "wipe" to erase the display.
The code ends with two script tags. The first calls cordova.js and loads it into the app in the same folder as index.html. The second calls js/index.js which is our app.
The stylesheet file, index.css, is located at Web\Onepad\css\index.css. It is a little longer than the HTML file because it styles five buttons separately but still quite simple.
body {
background-color: #068;
}
h2 {
color:#fff;
}
#pad {
position:absolute;
left:8.5%;
top:10%;
padding:0.3em;
width:80%;
height:70%;
font-family:arial;
font-size:1.2em;
}
#save {
position:absolute;
left:4%;
top:82%;
width:15%;
height:2em;
padding:0.2em;
margin:1em;
font-family: arial;
font-size:1.2em;
font-weight: bold;
background-color: #ddd;
}
#open {
position:absolute;
left:38%;
top:82%;
width:15%;
height: 2em;
padding:0.2em;
margin:1em;
font-family: arial;
font-size:1.2em;
font-weight: bold;
background-color: #ddd;
}
#wipe {
position:absolute;
left:72%;
top:82%;
width:15%;
height: 2em;
padding:0.2em;
margin:1em;
font-family: arial;
font-size:1.2em;
font-weight: bold;
background-color: #ddd;
}
The JavaScript file is located at Web\Onepad\js\index.js and the final code is
app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function(){
var topic=document.getElementById("pad");
topic.value="ready";
var note=localStorage.getItem("title");
document.getElementById("note").value=note;
},
save: function(){
var title="title";
var note=document.getElementById("pad").value;
if(note!="") localStorage.setItem(title,note);
//else localStorage.getItem(title).clear();
},
open: function(){
document.getElementById("pad").value="";
var note=localStorage.getItem("title");
document.getElementById("pad").value=note;
},
wipe: function(){
document.getElementById("pad").value="";
}
};
app.initialize();
So it is in the form of a JavaScript object called app, and defines five short methods, initialize(), onDeviceReady() and the three button callbacks, save(), open() and wipe(). It is a simplified version of the default CLI code.
The JavaScript is called from the HTML file via the second script tag which runs index.js. This runs the app.initialize() method which starts the app
However there is a potential timing problem. We do not want to run the app code until the cordova.js code has been loaded and is available. So initialize() adds a devicelistener which calls the onDeviceReady function which allows the app to start after the API has loaded. This is also after the HTML has loaded so the remaining button functions will not be run until the DOM and Cordova are available.
So, the deviceready listener executes the onDeviceReady() method when all the Cordova code is available. This runs the app.received Event() method which finally starts the app. In this case it just writes the word “ready” into the title text input to show that everything is working. Note the specific reference to the app method due to the fact that the event response will be from outside the app.
Then the app simply awaits user interaction with the buttons.The HTML5 local storage object stores text as a series of name-value pairs. In this case the name is the fixed " title" and the value is the variable "note".