Time for action – the Hello World example
PhoneGap is an intermediary layer that talks to the mobile device and the application; the app resides inside a browser, and, using the PhoneGap API, you can connect to phone features such as contacts and camera.
The UI layer of a PhoneGap application is a web browser view that takes up 100 percent of the device's width and height; think of the UI layer as a browser. The UI layer is known as WebView. The WebView used by PhoneGap is the same one used by the native operating system.
Having discussed the basics of PhoneGap and the command-line tools, we will now create a simple application. This is not the typical Hello World example. With the already learned commands and configured environment with npm, let's create a new project:
C:\> phonegap create example1 C:\> cd example1 C:\example> phonegap platform add android
With the completion of the preceding commands, we created a new project called example1 and added Android platform support to the project. The directory structure is now this:
example1 ├── config.xml ├── hooks ├── merges ├── platforms ├── plugins └── android ├── www └── css └── img └── js └── index.html
By default, the Cordova create script generates a skeletal web-based application whose home page is the project's www/index.html file. Edit this application however you want, but any initialization should be specified as part of the deviceready event handler, referenced by default from www/js/index.js.
When you open the index.html file present in the www directory, you will see HTML code. The body section will be similar to the code presented here. This is the default body content generated by the CLI tool for the project. It just shows a page with an image and some text:
<body>
<p class="app">
<h1>Apache Cordova</h1>
<p id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</p>
</p>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
The output would be the following:
For a complex application, the page would not be this simple. To start with, let's modify the page to add some text. The modified code is shown here, which is a simple static HTML content:
<body>
<h1>First Project</h1>
<h3>What we have learnt?</h3>
<ul>
<li>PhoneGap Structure</li>
<li>CLI Commands</li>
<li>Developer Tools</li>
<li>Debugging in Browsers</li>
<li>Cordova Events</li>
</ul>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
document.addEventListener('deviceready', deviceready, false);
function deviceready() {
alert("Example Event");
}
</script>
</body>
If any JavaScript external files are included at the top of the HTML head section, the browser stops parsing further until the file is downloaded. So it is recommended to add any JavaScript files or code chunks to the end of the body tag to decrease the wait time.
Today, most modern browsers support the async and defer attributes on scripts. These attributes tell the browser that it's safe to continue parsing while the scripts are being downloaded:
<script type="text/javascript" src="path/to/script1.js" async></script> <script type="text/javascript" src="path/to/script2.js" defer></script>
What just happened?
We removed the code from the default project created and added our own content. Please note that we added the deviceready event listener. When the app gets loaded and ready for action, the event will show an alert box. The deviceready event should be the entry point for all our device-related action.
When we build and emulate the sample project, we will see the following output in the emulator:
