Android: Empezando con JQueryMobile + Phonegap

Empezar con algo nuevo es bastante difícil, al menos con alguien que siempre ha sido autodidacta. En este, casi, nuevo mundo del desarrollo móvil, siempre debemos de aprovecharlos, ya que es el boom actual.
Escribo lo siguiente con la finalidad de tener una idea de la oferta que tiene jquery mobile para un desarrollador novel.
Existen muchos Frameworks que dicen trabajar con Phonegap, pero antes de casarnos con uno hay que tomar en cuenta algunas cosas:

Phonegap es "Casi" lo mismo que Cordova, solo que Phonegap es una marca comercial de Adobe y Cordova es un proyecto de la Fundación Apache que trata de generar una API para todas las plataformas. Adobe donó el proyecto(Phonegap) a Apache Fundation para que sea mantenido como Open Source.

Phonegap/Cordova no es un "Frame", Phonegap es un conjunto de librerías  que busca funcionar con la misma API en todas las plataformas(bastración), esto se logra en al menos un 70%. No confundir cordova/phonegap con el servicio Phonegap Build.

Phonegap no está 100% implementado, aunque el estandar HTML5 es un hecho, todavía falta que este llegue a todas partes. Por lo que algunas cosas que funcionen en un Navegador no funcionarán en Phonegap.

Phonegap/Cordova usa una API similar a Web Storage y que por desgracia ya es no es parte del Estandar. dicho esto, hay que tener en cuenta que esta capacidad no es funcional en Windows8 y limitado en iOS (funcional con librería externa). No sabemos hasta cuando esto dejará de estar soportado.

Jquery Mobile (JQM)  es una framework escrito en javascript que funciona en la mayoría de las plataformas con el estándar HTML5, lo notorio de esto... es que JQM no se comporta de igual manera en un Navegador que en Phonegap, que es en lo que vamos a trabajar.

JQM usa la capacidad de HTML5 para extenderse a través del TAG data, como en data-lo_que_se_me_ocurra .
Aunque JQM solo depende directamente de JQuery, es independiente de otras librerías, y en su mayoría no  causa conflictos con otros.

Empecemos:

Hacks básicos:

function onDeviceReady() { //o donde inicie tu sistema
    $.mobile.allowCrossDomainPages     = true;
    $.mobile.defaultPageTransition     = 'none';
    $.mobile.pushStateEnabled          = false
}

Estructura del DOM Inicial de JQM en Phonegap.



JQM en Phonegap tiene una página principal estructurada completamente y a partir de ello, desde el START DOM hasta el END DOM, va inyectando contenido. El contenido de los scripts js declarados en este Archivo inicial serán GLOBALES. todo lo que esté fuera de los divs data-role="page" en los demás archivos no será leídos, incluidos las funciones de Javascript. La página inicial hace las veces de "contenedor", desde esta se debe llamar a las demás páginas, sucede solo en Android.
Usaremos el término DOM para  el contenido entre START DOM y END DOM.
Ejemplo de página DOM básica.


Algo que se debe tener en cuenta es que la ID del DIV data-role="page" debe ser única en todo le programa, si no es así, JQM tiende a confundir elementos del DOM.
También las funciones javascript declaradas en este DOM serán privadas. puedes hacer un vinculo a un archivo javascript pero solo pueden ser usados en este DOM.

Las páginas de cargan con:

$.mobile.changePage("midirectorio/mi_DOM_basico.html", {}, true, true);

Hasta acá, ya tendremos nuestro entono básico de trabajo.

Espero que hagan unas pruebas y comenten los resultados. A mí me ha costado algo de trabajo entenderlo, muchas veces a base de ensayo y error, es por ello que comparto esto, para que no tropiecen con la misma piedra que yó.

Saludos.

@pata_de_jaguar.