Phonegap - Create Template Project


En este artículo aprenderás a construir una plantilla base para un proyecto sobre PhoneGap/JQuery Mobile usando el entorno XCode.

A continuación se describen los pasos y la descripción completa se encuentra en el video.


  • Crear el proyecto en XCode usando PhoneGap: En un artículo anterior se describe el proceso Instalando PhoneGap en XCode y realizando mi "Hola Universo".
  • Integrar JQuery Mobile a nuestro proyecto creado: Ubique el directorio jquery.mobile en la carpeta principal www, este directorio corresponde a las fuentes de JQM y puede ser descargado de su sitio oficial http://jquerymobile.com. Adicionalmente se incluye en el índex.html las siguientes referencias:
        <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.3.1.min.css" />
        <script src="jquery.mobile/jquery-1.7.2.min"></script>
        <script src="jquery.mobile/jquery.mobile-1.3.1.min.js"></script>
  • Implementar el archivo principal index.html con la estructura base de un proyecto en base a JQM:


<body>
        <div data-role="page" id="page-home">
            <div data-role="header" data-theme="b">
                <h1>Header</h1>
            </div>
            <div data-role="content" data-theme="b">
                <h1>Body</h1>
            </div>
            <div data-role="footer" data-position="fixed" data-theme="b">
                <h1>Footer</h1>
            </div>
        </div>
</body>
Los proyectos en JQM tienen una estructura sencilla: Header-Body-Footer la cual es definida en un único archivo llamado index.html. En éste archivo se definen todas las páginas o layouts que harán parte de la aplicación. Por ejemplo si necesitara una aplicación con 2 páginas el código anterior sería modificado de la siguiente forma:


<body>
        <div data-role="page" id="page-number-one">
            <div data-role="header" data-theme="b">
                <h1>Header Page 1</h1>
            </div>
            <div data-role="content" data-theme="b">
                <h1>Body Page 1</h1>
            </div>
            <div data-role="footer" data-position="fixed" data-theme="b">
                <h1>Footer Page 1</h1>
            </div>
        </div>


        <div data-role="page" id="page-number-two">
            <div data-role="header" data-theme="b">
                <h1>Header Page 2</h1>
            </div>
            <div data-role="content" data-theme="b">
                <h1>Body Page 2</h1>
            </div>
            <div data-role="footer" data-position="fixed" data-theme="b">
                <h1>Footer Page 2</h1>
            </div>
        </div>
</body>


Fuentes se encuentran disponibles en GitHub:
https://github.com/yaircarreno/TemplateAppPhonegap

El video de como funciona el aplicativo:

Template Project PhoneGap from YairCarreno on Vimeo.
Thanks for your comment