Estructura de un proyecto Phonegap - CGastrell/phonegap GitHub Wiki

Cuando se crea un proyecto de Phonegap puede verse esta estructura:

│───.cordova
│───hooks
│───platforms
│───plugins
└───www
    ├───css
    ├───img
    ├───js
    └───index.html

Basicamente los directorios tienen este uso:

• platforms: almacena un directorio por cada plataforma para la cual se compilara la aplicacion (android, ios, wp8, etc).
• plugins: almacena los plugins que se van instalando
• www: contiene la aplicacion. Es la estructura basica de una aplicacion web: /css, /js, /img e index.html

Los archivos a editar se encuentran en la carpeta www. Cualquier cambio que se haga sobre estos archivos se veran reflejados en la aplicacion.

Dentro de la carpeta /js se encuentra el archivo index.js que se encarga de correr codigo al iniciar la pagina (index.html).

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

La secuencia de ejecucion es:

• La aplicacion lee index.html
• index.html importa
  • css/index.css: estilos para la pagina
  • phonegap.js/cordova.js: es la libreria de Phonegap para poder correr la aplicacion
  • js/index.js: ejecuta el codigo para la aplicacion
• index.html ejecuta app.initialize()

Este archivo define un objeto app con metodos:

• app.initialize(): inicializa la aplicacion llamando a this.bindEvents() (en este contexto, this representa a app
• app.bindEvents(): adosa una funcion al evento deviceready, este evento se dispara cuando la aplicacion esta lista para correr (todos los archivos fueron evaluados y cargados).
• app.onDeviceReady(): es la funcion que se adosa al evento deviceready. Nota sobre la nomenclatura de las funciones.
• receivedEvent(event): una funcion que muestra el evento recibido en pantalla.

Basicamente, app.initialize() llama a app.bindEvents(). Esta adosa app.onDeviceReady() como listener al evento deviceready. Y esta ultima ejecuta app.receivedEvent(event).

app.initialize()

    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
      app.initialize(); // <--------------
    </script>

Es importante entender la cadencia de llamadas. Entendiendo la secuencia de funcionamiento podemos inferir que, si quisieramos ejecutar nuestro propio codigo, tendriamos que hacerlo dentro de app.onDeviceReady(), ya que esta funcion solo se ejecutara una vez que la aplicacion esta lista.