Anatomy of a Cordova Application
This chapter is from the book
This chapter is from the book
This chapter is from the book
In the previous chapter, I provided you with an overview of Apache Cordova; before I start digging into all of the tools, capabilities, APIs, and so on, I want to give you a clear definition of what a Cordova application is. In this chapter, I show you what makes a web application a Cordova application and give you a tour of the sample application the Cordova team provides.
As mentioned at the beginning of the book, a Cordova application can do anything that can be coded in standard, everyday HTML, CSS, and JavaScript. There are web applications and Cordova applications, and the distinctions between them can be minor or can be considerable.
The sections in this chapter highlight different versions of the requisite HelloWorld application found in most any developer book, article, or training class. For the purpose of highlighting aspects of the applications’ web content, rather than how they were created, the steps required to create the applications are omitted here (but covered in subsequent chapters).
Hello World!
As in any developer book, we’re going to start with the default HelloWorld application, then build upon it to highlight different aspects of what makes a web application into a Cordova application. The HTML content shown in Listing 2.1 describes a very simple web page that displays some text; this application could easily run in a desktop or mobile browser.
Listing 2.1 Hello World #1 Application
<!DOCTYPE HTML> <html> <head> <title>Hello World #1</title> </head> <body> <h1>Hello World #1</h1> <p>This is a sample Apache Cordova application.</p> </body> </html>
If you open the web page in the mobile browser on a physical device or on a device emulator or simulator, you will see something similar to what is shown in Figure 2.1 (here it’s running in an Android emulator). The browser simply renders the page the best it knows how to, in this case, trying to render it as if it’s a full web page scaled to fit the smaller screen of the mobile device. Since it’s the browser, the window also displays the browser chrome, the address field, tab controls, and so on from the mobile browser.
)
Figure 2.1 Hello World #1 Application Running in the Mobile Browser on an Android Emulator
This is not a Cordova application; it’s just a web application running in a mobile browser.
If you package that same index.html file into a Cordova application (using the tools I will discuss throughout the book) and run it on a smartphone device or device emulator, the app will display something similar to what is shown in Figure 2.2.
)
Figure 2.2 Hello World #1 Application Running on an Android Emulator
Here, the container seems to understand a bit about the view it’s being rendered within and renders full size, not scaled down, so the whole page fits within the browser window.
In this example, this is a Cordova application because the web application has been packaged into the Cordova native application container. If I hadn’t cropped the image, you would see that the web application consumes the entire screen of the emulated Android device. Even though I’m running a web application, because it’s running within a native application, there’s no browser UI being displayed and no access to browser features. It’s simply a native application rendering web content.
There is, however, nothing Cordova-ish about this application. It’s running in the Cordova native container, but it isn’t leveraging any of the APIs provided with the Cordova framework. Therefore, any web application can be packaged into a Cordova application—there’s nothing forcing you to use the Cordova APIs. If you have a simple web application that simply needs a way to be deployed through a smartphone’s native app store, for example, using Cordova is one way to accomplish that goal.
However, the app’s not very interesting, is it? It’s certainly not very pretty, but I’ll show you how to fix that in Chapter 17, “Using Third-Party UI Frameworks with Cordova.” For me, it needs to do some cool Cordova stuff before it becomes interesting.