Cómo crear un layout básico para un proyecto PhoneGap con jQuery Mobile

En este pequeño tutorial se os muestra un ejemplo básico de layout con jQuery Mobile. Es sencillo, pero no debemos olvidar los dos apartados que debemos tener siempre en cuenta: una buena configuración y una buena comprensión de la arquitectura. En este tutorial abordamos ambas cosas.

jQuery Mobile: configuración

Id a http://jquerymobile.com/download/ y bajaos el código en .zip (a no ser que queráis utilizar Content Distribution Network (CDN), aunque no es recomendable si no estamos seguros de tener siempre internet).

Imagen del download de jQuery Mobile - .zip

Download el -zip de jQuery Mobile si queréis ejemplos de uso

En este zip tenemos archivos de ejemplo, documentación, ayudas, etc. Nosotros sólo instalaremos lo necesario para el proyecto (recordar que el tamaño SÍ importa en móviles), y el resto lo podemos poner como módulo en nuestro directorio principal, para prácticas.

Lo necesario es:
(1) el archivo de jquery.js (que podéis encontrar en \jquery.mobile-1.3.0\demos\js, si os habéis bajado el .zip)
(2) los archivos de jquery.mobile-1.3.0.min.js y jquery.mobile-1.3.0.min.css

y los ponemos en una nueva carpeta dentro del assets el proyecto, por ejemplo \jquerymobile.

Recordad que 1.3.0 es la versión, que probablemente sea diferente en vuestro caso

Imagen del nuevo folder para los sceipts de jQuery Mobile

El nuevo folder para los sceipts de jQuery Mobile

Arquitectura: la página index.html

Creamos un nuevo proyecto y ponemos en el head las referencias necesarias:

<!DOCTYPE HTML>
<html>
<head>
<meta name=”viewport” content=”width=screen.width; user-scalable=no” />
<meta http-equiv=”Content-type” content=”text/html; charset=utf-8″>
<title>jQuery Mobile Layout</title>
<link href=”jquerymobile/jquery.mobile-1.3.0.min.css” rel=”stylesheet” type=”text/css” />
<script src=”jquerymobile/jquery.js” type=”text/javascript”></script>
<script src=”jquerymobile/jquery.mobile-1.3.0.min.js” type=”text/javascript”></script>
<script src=”cordova-2.5.0.js” type=”text/javascript”></script>
</head>

El viewport nos va a permitir que el contenido se ajuste a la resolución del dispositivo (para más información sucinta sobre el viewport, podéis, por ekemplo, ver http://www.htmlcinco.com/etiqueta-meta-viewport-web-movil/ )

Tenemos también el link al css del jQuery Mobile, el link al jQuery (sin el que el jQuery Mobile es inutilizable), el link al jquerymobile y el link al cordova.

Ahora ya podemos añadir código específico. jQueryMobile va a buscar aspectos definidos en el layout de la página con data-role tags: para empezar, tenemos data-role geader, content y footer. Esto creará unas clases que podrán definirse con css.

<body>
<div data-role=”page” id=”home”>
<div data-role=”header”>
<h1>jQuery Mobile Layout</h1>
<a href=”#page2″ data-role=”button” data-icon=”info”>Go to Page #2</a>
</div>
<div data-role=”content”>
<p>Hello world! This is my Page #1</p>
</div>
<div data-role=”footer” data-position=”fixed”>
<h4>&copy; <a href=”http://www.adritah.es” target=”_blank”>adritah.es</a></h4>
</div>
</div>
</body>

Crear un layout multipáginas

En jQueryMobile se trabaja, por definición, en un layout multi-página dentro de un mismo .html (http://jquerymobile.com/demos/1.0rc1/docs/pages/page-anatomy.html )

Fijaos que la página que hemos creado está dentro de un div con data-role page y una id:

<div data-role=”page” id=”home”>

Esta es la primera página, de nombre home.

La segunda página de la web app, por lo tanto, estará también dentro de este fichero y con un div data-role page diferente:

<div data-role=”page” id=”page2″ data-add-back-btn=”true”>
<div data-role=”header”>
<h1>jQuery Mobile Layout</h1>
</div>
<div data-role=”content”>
<p>Howdy! You’re now in Page #2</p>
<p><a href=”#home” data-role=”button”>Go back home</a></p>
</div>
<div data-role=”footer” data-position=”fixed”>
<h4>&copy; <a href=”http://www.adritah.es” target=”_blank”>adritah.es</a></h4>
</div>
</div>

Para navegar entre ellas, debemos añadir links a los anchor points. Aquí lo hemos hecho utilizando el botón de jQuery mobile, añadiendo un botón en la primera ágina (<a href=”#about” data-role=”button” data-icon=”info”>About</a>) y añadiendo uno de vuelta en la segunda (data-add-back-btn=”true”).

Vemos también que cada footer tiene …data-position=”fixed”>. Esto permite que el footer quede siempre enganchado abajo.

¡Y esto es todo! A partir de aquí, simplemente hay que seguir constuyendo sobre esta base.

Este es el código finalizado:

 

Para más información, podéis consultar este artículo en la página oficial de jQuery Mobile

 

 

Leave a Reply