CONDICIONES DE ACCESO - MARKET RESEARCH - NUCLEO INTEGRADOR VIII SEMESTRE PLANEACION PARA EL DE

5. MARKET RESEARCH

5.9. CONDICIONES DE ACCESO

As with any self-respecting developer book, we’re going to start with the default HelloWorld application, then build on it to highlight different aspects of a Cordova application. The following HTML content (Listing 5.1) describes a simple web page that displays some text on a page.

Listing 5.1 HelloWorld1 Application

<!DOCTYPE HTML> <html> <head> <title>HelloWorld1</title> </head> <body> <h1>Hello World</h1>

<p>This is a sample Cordova application</p> </body>

ptg11524036 If you package that page into a Cordova application and run it on a smartphone device or device

emulator (in this case, an Android emulator), the app will display a simple splash screen, and then you will see something similar to what is shown in Figure 5.1.

FFiigguurree 55..11 HelloWorld1 Application Running on an Android Emulator

This is technically a Cordova application because it’s a web application running within 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 just needs a way to be deployed through a smartphone’s native app store, then using Cordova is one way to accomplish that goal.

C

Coorrddoovvaa IInniittiiaalliizzaattiioonn

Now let’s take the previous example application and add some Cordova-specific stuff to it. The HellowWorld2 application, shown in Listing 5.2, has been updated to include code that recognizes when the Cordova application has completed initialization and displays an alert dialog letting you know Cordova is ready.

ptg11524036

Listing 5.2 HelloWorld2 application

<!DOCTYPE html> <html>

<head>

<p>This is a sample Cordova application.</p> </body>

</html>

Waarrnniinngg

If you copy the code from any of the listings in this chapter and try it in your own Cordova applications, you may notice that there are some extra carriage returns in the middle of some of the HTML. This was done to make the code render cleanly in the printed edition of the book. To download clean versions of all of the projects in this book, access the Code section of the book’s website at www.cordovaprogramming.com or download it from Github at

https://github.com/johnwargo/cordova-programming-code.

ptg11524036 On the iPhone simulator, the application will display the screen shown in Figure 5.2.

FFiigguurree 55..22 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 HTML5 application.

The following viewport settings tell the embedded 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:

ptg11524036 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 setting in any way (through the initial-scale=1, maximum- scale=1, and user-scalable=no attributes).

N Noottee

The viewport and associated attributes are not required. If they’re omitted, the browser will revert to its default behavior, which may (or may not, who knows?) result in the application’s content either consuming less of the screen area available to it or else zooming beyond it. Because there’s not much content in the HelloWorld2 application, it could, for example, consume only the upper half of the screen on some devices. You may also find that on some platforms, the settings have no effect—all the more reason to test your Cordova applications on a variety of mobile devices before release.

There’s also a new script tag in the code that loads the Cordova JavaScript library:

This script tag loads the core Cordova API library and makes any core Cordova capabilities available to the program. Remember, though, that with Cordova 3, the core APIs have all been migrated to plugins. The cordova.js file contains some basic housekeeping functions.

The JavaScript code in a Cordova application does not have immediate access to the Cordova APIs after the web application has loaded. The native Cordova application container must complete its initialization process before it can respond to calls JavaScript made using the Cordova APIs. To accommodate this delay in API availability, a web developer building Cordova applications must instruct the container to notify the web application when the Cordova APIs have completed

initialization. Any application processing that requires the use of the APIs should be executed by the application only after it has received its notification that the APIs are available.

In the HelloWorld2 application, this notification is accomplished through the addition of an onload

event defined in the page’s body section:

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 Cordova application container has finished its initialization routines and fired its deviceready event:

document.addEventListener("deviceready", onDeviceReady, false);

In this example application, the onDeviceReady function simply displays a Cordova alert dialog (which is different than a JavaScript alert dialog; I show you the difference in Chapter 12.) letting the user know everything’s okay:

navigator.notification.alert("Cordova is ready!")

In production applications, this function could update the UI with content created through API calls or do whatever other processing is required by the application. You’ll see an example in Listing 5.3. Remember, most of the Cordova APIs have been removed from the container and implemented as plugins. So, to utilize the Cordova alert method, you must add the dialogs plugin to your application by opening a terminal window to your Cordova project folder and issuing the following command:

ptg11524036

TThhee CCoorrddoovvaa NNaavviiggaattoorr

Many of the APIs implemented by Cordova are instantiated from the Navigator object. Unfortunately, it’s not consistent: some do and some do not. Be sure to check the API documentation before calling an API.

In document NUCLEO INTEGRADOR VIII SEMESTRE PLANEACION PARA EL DESARROLLO INTERNACIONAL DE EXPORTACIONES DE SILLAS DE RUEDAS DE LA EMPRESA ORTHOSANDER (página 33-48)