jQuery mobile es un framework dependiente de jQuery. A la fecha se encuentra en la versión “RC1″ como se puede ver en el blog oficial. Aunque aún es un proyecto que está en etapa de crecimiento, promete mucha facilidad para el desarrollo de aplicaciones Web orientadas a dispositivos móviles por lo que me gustaría hacer una pequeña introducción al mismo creando un proyecto que nos permita ver algunas de sus características principales.
Si quieres ver una comparativa con Sencha Touch y un resumen de sus características puedes leer el artículo jQuery mobile vs Sencha Touch para dispositivos móviles.
Lo interesante de jQuery mobile, es que no se escriben largas líneas de programación sino que usas etiquetas HTML con atributos definidos por el framework y al momento de mostrar la página, esto es leído por jQuery y lo toma como metadatos para crear la interfaz del usuario, algo muy útil si tu especialidad no es el diseño.
Creemos nuestra primera página con jQuery mobile
Lo primero que tendremos que hacer es escribir el código básico de nuestra página. Para esto veamos cual es la estructura inicial necesaria y vayamos discutiéndola.
<!DOCTYPE html>
<html>
<head>
<title>blog.micayael.com</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
</head>
<body>
</body>
</html>
En un inicio tenemos un HTML bastante sencillo de entender así que hablemos solamente de los puntos interesantes. En la línea 1 vemos el <!DOCTYPE html> correspondiente a HTML5, y en las líneas 6 , 7 y 8 vemos la importación del archivo CSS para los estilos del framework, el archivo JavaScript correspondiente al CORE de jQuery y por último el jquery.mobile-1.0b1.min.js que corresponde al framework para móviles. Hay que tener en cuenta que estos archivos también los puedo descargar de la página oficial y agregarlos dentro de mi carpeta haciendo referencia a la importación local de los mismos. Con esto ya tenemos nuestra estructura básica. Hasta ahora no hay nada que corresponda a jQuery mobile excepto por la importación de archivos.
A este mismo archivo le agregaremos una etiqueta meta en el <head> para decirle a la página que se adapte a la pantalla del dispositivo móvil y se vea la página completa. También agregaremos un div dentro del body con el que le diremos que es una página a ser mostrada.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>blog.micayael.com</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
</div>
</body>
</html>
Si volvemos a abrir esta página veremos que la página se pone gris tomando ya el tema (estilo) por defecto asociado al framework y si revisamos el código con el Firebug del Firefox veremos que el jQuery mobile obtuvo información en runtime de los datos y agregó atributos al body creando también unos divs dinámicamente. Esta es justamente la dinámica que propone jQuery mobile, usa información que escribimos en etiquetas y crea HTML dinámicamente para mostrar las pantallas.
Podemos ver en la línea 14 que agregamos dos atributos a nuestro DIV, uno muy importante llamado data-role que indica como debe ser tratado ese DIV, en este caso como una página independiente dentro de nuestro archivo index.html y el segundo es una identificación para esa página.
Con jQuery mobile, debemos hacer una diferenciación entre la página Web que corresponde al archivo donde programamos y la página que vemos en el navegador con el framework. Esto ya que en un mismo archivo podemos crear varias páginas agregando dentro del body varios DIVs con data-role="page" y con ids diferentes. Al momento de hacer los links los llamaríamos por el ID así <a href=”#idpagina”>. En caso que usáramos archivos diferentes para cada página, tendríamos la misma estructura básica inicial y los links los utilizaríamos apuntando a los archivos <a href=”nombre_pagina.html”>.
En el caso de que las páginas se encuentren en el mismo archivo, éstas se cargan todas al momento de ingresar al archivo index.html y por medio de los links simplemente saltamos de una a otra como si fueran links locales. Cuando usamos archivos separados, jQuery se encarga de cargar esas páginas al momento de hacer click sobre el enlace en forma asíncrona usando Ajax, y las escribe dentro del DOM de la actual para luego proceder a la transición.
Dentro de una página, un div con data-role=page, podemos crear tres secciones: una cabecera, un cuerpo y un pie de página. esto simplemente con tres nuevos divs que tengan data-role="header", data-role="content" y data-role="footer"
<div data-role="page" id="home">
<div data-role="header">
header
</div>
<div data-role="content">
content
</div>
<div data-role="footer">
footer
</div>
</div>
Estas secciones no son obligatorias pero las utilizaremos en nuestro ejemplo ya que son bastante interesantes.
Caso de ejemplo
Iremos viendo de a poco, a través de ejemplos, la forma de uso creando cuatro páginas. Las dos primeras dentro del mismo archivo index.html y la siguientes en archivos diferentes para tenerlo como referencia. Las páginas serán las siguientes con sus respectivos objetivos entre paréntesis:
- Home: Donde veremos un simple Lorem Ipsum (HTML embebido en las páginas)
- Productos: Veremos una lista de artículos con el nombre y un enlace para ver el detalle del producto (Listas con contadores)
-
Detalle del producto: Una página, por el momento estática, que mostrará los datos del producto (Página de tipo diálogo – popup)
-
Contacto: Una página de contacto estática (Formularios)
Para todas estas páginas tendremos una cabecera y un pie de página las cuales se crean con los siguientes objetivos
- Cabecera: Mostrará el título de la página, un botón atrás y un botón para volver al home (títulos, botones e iconos)
-
Pie de página: Mostrará una barra de navegación a la página de productos y a la de contacto (barra de navegación)
Comenzaremos con la cabecera y el pie de páginas ya que estarán presentes en todas las páginas del ejemplo
Cabecera
Para la cabecera usaremos dentro del div con data-role header el siguiente código
<div data-role="header">
<h1>Productos</h1>
<a href="#home" data-icon="home" data-iconpos="notext" class="ui-btn-right">Home</a>
</div>
Para mostrar el título principal dentro de la cabecera simplemente usemos la etiqueta h1. En realidad cualquiera de las 6 etiquetas de tipo “h” son mostradas con el mismo estilo pero a mi opinión debería ser la h1 ya que se trata del título principal.
Vemos que en el href del link apuntamos a #home ya que como la página inicial ya está cargada desde el inicio podemos simplemente volver a mostrar esa sección del DOM.
Con relación a los botones es realmente muy sencillo. Cualquier enlace “a” puede ser representado como un botón usando o no iconos. Solamente tenemos que configurarlo con los siguientes atributos:
- data-icon: indica uno de los íconos que vienen por defecto con el framework. En este caso usaremos “home”
-
data-iconpos: este atributo nos permite decirle al icono que agregamos la posición con relación al texto pudiendo usar los valores: top, bottom, left, right y en caso de no querer mostrar el texto usamos “notext”
-
class: estas son clases definidas por jQuery mobile. Cuando ponemos los links dentro del header automáticamente son posicionados de izquierda a derecha. La idea es hacer que el botón de “Atrás” aparezca en el lado izquierdo de forma automática entonces posicionamos nuestro botón de inicio a la derecha por medio de la clase ui-btn-right, por defecto es ui-btn-left.
Pie de página
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="productos.html">Productos</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</div>
</div>
Al div principal que ya vimos solo agregamos el atributo data-position=”fixed” que hace el pie de página siempre se mantenga visible en la misma posición bien abajo. Pueden probar quitándolo y verán que la posición cambiará de acuerdo al contenido de la página.
Para crear la barra de navegación lo único que tenemos que tener en cuenta aquí es que debemos tener un div con data-role=”navbar” y dentro una lista no ordenada con las opciones que queremos que se vean. Muy simple verdad?
Vemos que la primera opción nos lleva a un archivo externo “productos.html” mientras que el segundo a la página que también configuraremos dentro del index.html
Página Principal
Esta página la programaremos en el archivo index.html agregando la cabecera y pie de página vistos más arriba quedando de la siguiente forma:
<div data-role="page" id="home">
<div data-role="header">
<h1>Mi Tienda</h1>
<a href="#home" data-icon="home" data-iconpos="notext" class="ui-btn-right">Home</a>
</div>
<!-- end /header -->
<div data-role="content">
<p>Lorem ipsum dolor sit amet, <strong>consectetur adipisicing elit</strong>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit</p>
<h2>Listas ordenadas</h2>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
<h2>Listas no ordenadas</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<h2>Datos tabulares</h2>
<table>
<caption>Listado de personas</caption>
<thead>
<tr>
<th scope="col">Nombre</th>
<th scope="col">Apellido</th>
<th scope="col">Edad</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>35</td>
</tr>
<tr>
<td>Peter</td>
<td>Clember</td>
<td>40</td>
</tr>
<tr>
<td>Alan</td>
<td>Morden</td>
<td>25</td>
</tr>
</tbody>
</table>
</div>
<!-- end /content -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="productos.html">Productos</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</div>
</div>
<!-- end /footer -->
</div>
<!-- end #home -->
Lo único que hicimos aquí es agregar las secciones que ya vimos y en el #content agregamos contenido HTML para mostrar como quedan ya formateados con los estilos propios del framework.
Página de Contacto
Esta página también la vamos a programar dentro del archivo index.html, por lo que directamente después del final de la página #home escribiremos lo siguiente:
<!-- end #home -->
<div data-role="page" id="contacto" data-add-back-btn="true" data-back-btn-text="Atr&aacute;s">
<div data-role="header">
<h1>Contacto</h1>
<a href="#home" data-icon="home" data-iconpos="notext" class="ui-btn-right">Home</a>
</div>
<!-- end /header -->
<div data-role="content">
<form id="mesa_ayuda_form" action="index.html" method="post">
<fieldset>
<div data-role="fieldcontain">
<label for="mesa_ayuda_form_nombre">Nombre:</label>
<input type="text" name="mesa_ayuda_form[nombre]" id="mesa_ayuda_form_nombre" required />
</div>
<div data-role="fieldcontain">
<label for="mesa_ayuda_form_email">Email:</label>
<input type="email" name="mesa_ayuda_form[email]" id="mesa_ayuda_form_email" required />
</div>
<div data-role="fieldcontain">
<label for="mesa_ayuda_form_asunto">Asunto:</label>
<input type="text" name="mesa_ayuda_form[asunto]" id="mesa_ayuda_form_asunto" required />
</div>
<div data-role="fieldcontain">
<label for="mesa_ayuda_form_comentario">Comentario:</label>
<textarea cols="40" rows="10" name="mesa_ayuda_form[comentario]" id="mesa_ayuda_form_comentario" required></textarea>
</div>
<div data-role="controlgroup" data-type="horizontal">
<input type="reset" value="Limpiar" data-icon="delete" />
<input type="submit" value="Enviar" data-icon="arrow-r" data-iconpos="right" data-theme="b" />
</div>
</fieldset>
</form>
</div>
<!-- end /content -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="productos.html">Productos</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</div>
</div>
<!-- end /footer -->
</div>
<!-- end #contacto -->
El primer punto interesante se encuentra en la línea 3 donde a nuestro div contenedor de la página agregamos los atributos data-add-back-btn="true" y data-back-btn-text="Atrás" para que automáticamente agregue el botón de atrás cuando entramos en esta página.
Para el formulario, vemos que simplemente dentro de nuestro #content agregamos un formulario y para cada grupo de label-input un div con el atributo data-role="fieldcontain" que se encargará de formatear los campos de acuerdo a la pantalla del dispositivo poniendo el label al lado izquierdo del input o sobre el mismo.
La otra novedad es que podemos usar los nuevos tipos de input de HTML5 como por ejemplo el type="email" que usamos en la línea 22. También tenemos: type="url" para direcciónes web, type="tel" para números de telefonos y type="number" para solo números. Estos tipos controlaran el teclado del dispositivo para mostrar los caracteres.
Finalmente vemos la opción de agrupar botones con el data-role="controlgroup" de la línea 35 y data-type="horizontal" para mostrar un botón pegado al otro, también pudiendo usar “vertical”. Vemos que para los botones es lo mismo que con los links pudiendo usar los data-icon y data-iconpos.
Página de Productos
Para esta página vamos a mostrar una lista de productos y por cada producto vamos a mostrar la cantidad en stock por medio de un “buble” que es simplemente una porción de la lista que nos permite mostrar un número.
Empezaremos también diciéndole al div contenedor de la página que muestre el botón “Atrás”.
<div data-role="page" id="productos" data-add-back-btn="true" data-back-btn-text="Atr&aacute;s">
<div data-role="header">
<h1>Productos</h1>
<a href="#home" data-icon="home" data-iconpos="notext" class="ui-btn-right">Home</a>
</div>
<!-- end /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="texto a buscar">
<li data-role="list-divider">Categor&iacute;a 1</li>
<li>
<a href="">
Producto 1
<span class="ui-li-count">10</span>
</a>
<a href="producto.html" data-rel="dialog" data-transition="pop"></a>
</li>
<li>
<a href="">
Producto 2
<span class="ui-li-count">12</span>
</a>
<a href="producto.html" data-rel="dialog" data-transition="pop"></a>
</li>
<li>
<a href="">
Producto 3
<span class="ui-li-count">5</span>
</a>
<a href="producto.html" data-rel="dialog" data-transition="pop"></a>
</li>
<li data-role="list-divider">Categor&iacute;a 2</li>
<li>
<a href="">
Producto 4
<span class="ui-li-count">23</span>
</a>
<a href="producto.html" data-rel="dialog" data-transition="pop"></a>
</li>
<li>
<a href="">
Producto 5
<span class="ui-li-count">4</span>
</a>
<a href="producto.html" data-rel="dialog" data-transition="pop"></a>
</li>
<li>
<a href="">
Producto 6
<span class="ui-li-count">54</span>
</a>
<a href="producto.html" data-rel="dialog" data-transition="pop"></a>
</li>
</ul>
</div>
<!-- end /content -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="productos.html">Productos</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</div>
</div>
<!-- end /footer -->
</div>
<!-- end #productos -->
Para crear listas tenemos muchas posibilidades como se muestra en los ejemplos oficiales pero todas se desprenden de la misma idea explicada aquí. Dependiendo si queremos una lista numerada o no usamos <ol> o <ul> pero agregando el atributo data-role=”listview” que agrega el diseño a la lista HTML para mostrarse con el estilo del framework y, data-inset=”true” que da un pequeño margen entre los costados para aparentar un panel flotante (pueden probar quitando el atributo para ver el efecto). Esto lo vemos en la línea 10. También podemos agregar dos atributos muy útiles para listas largas: data-filter=”true” y data-filter-placeholder=”texto a buscar” que automáticamente por arte de magia crea un buscador en el cliente para filtrar por textos contenidos dentro de los <li>. El segundo permite escribir un texto por default para ser mostrado en el input de filtros.
A partir de este momento, con el simple hecho de usar el “listview” simplemente poniendo etiquetas <li> dentro ya tendremos una lista muy vistosa. Si queremos dividir algunos <li> de otros podemos usar un separador como en la línea 12; un simple <li> pero con el atributo data-role=”list-divider”.
En las líneas 14 a 20 podemos ver que para cada opción de la lista simplemente tenemos que poner un <li> con contenido. Siempre para formatear bien debemos poner un link y si no queremos que nos lleve a algún lado lo dejamos con href=”” pero si agregamos un segundo link como vemos en la línea 19, corta verticalmente esa sección y agregará un botón para darle click y llevarnos al link definido.
Para mostrar la cantidad de productos podemos usar un <span> con un class=”ui-li-count” con el número.
Podemos notar también que en el link de la línea 19 hay un atributo data-rel=”dialog”. Esto hace que la página abierta por medio de este link se abra como un popup y data-transition=”pop” hace que en lugar se ejecutarse el efecto de transición tipo slide que venimos viendo lo haga como pop para simular el popup.
Existen realmente muchas posibilidades con las listas y así como las que vimos son muy sencillas de implementar, pero todas giran en torno a una etiqueta de lista con data-role=”listview”. Les animo a jugar agregando y quitando los atributos.
Página de Detalle del producto
La idea es que esta página sea un popup por lo que no contendrá la misma cabecera y pie de página que los demás ni tampoco se definirá que muestre el botón de Atrás ya que automáticamente al mostrarse aparecerá arriba un botón para cerrar la ventana.
<div data-role="page" id="producto">
<div data-role="header">
<h1>Detalle del Producto</h1>
</div>
<!-- end /header -->
<div data-role="content">
<h2 class="ui-li-heading">Producto x</h2>
<p class="ui-li-desc"><strong>Precio:</strong> U$S 999</p>
<p class="ui-li-desc"><strong>Cantidad:</strong> 10</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- end /content -->
</div>
<!-- end #producto -->
Lo primero que vemos es que el div #header no contiene nada raro sino simplemente un título y que no le agregamos pie de página.
Las dos únicas otras cosas diferentes son que usamos dos clases definidas por el framework, class=”ui-li-heading” en la línea 10 y class=”ui-li-desc” en las líneas 12 y 13 que sirven para definir cuales textos son de tipo título y cuales son de tipo descripción.
Palabras finales
Bueno esto es todo para finalizar este ejemplo. A modo de ejemplo, he creado una pequeña aplicación móvil para leer los comentarios de este blog y lo he puesto en http://m.micayael.com. A medida que el framework vaya evolucionando ire agregando nuevas funcionalidades para tener la versión móvil del blog.
Los archivos de este artículos los puedes descargar aquí.
