Now let’s take the previous example application and add some PhoneGap-specific stuff to it. The HelloWorld2 application listed next has been updated to include code that recognizes when the PhoneGap application has completed initialization and displays an alert dialog letting you know PhoneGap is ready.
On the iPhone simulator, the application will display the screen shown in Figure 2-2.
Figure 2-2 HelloWorld2 application running on an iOS simulator
Within the <Head> section of the web page are two new entries: meta tags that describe the content type for the application and viewport settings.
The content-type setting is a standard HTML setting and should look the same as it would for any other HTML 5 application.
The viewport settings tell the web browser rendering the content how much of the available screen real estate should be used for the application and how to scale the content on the screen. In this case, the HTML page is configured to use the maximum height and width of the screen (through the width=device-width and height=device-height attributes) and to scale the content at 100% and not allow the user to change that in any way (through the initial-scale=1.0, maximum-scale=1.0, and user-scalable=no attributes).
In the HelloWorld2 application, this notification is accomplished through the addition of an onload event defined in the page’s body section, as shown here:
Within the onBodyLoad function, the code registers an event listener that instructs the application to call the onDeviceReady function when the device is ready, when the PhoneGap application container has finished its initialization routines:
document.addEventListener("deviceready", onDeviceReady, false);
navigator.notification.alert("PhoneGap is ready!")
In production applications, this function could update the user interface (UI) with content created through API calls or do whatever other processing is required by the application. You’ll see an example of this in the next sample application.