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.
ConversionConversion EmoticonEmoticon