Aplicación móvil con jQuery Mobile

Aplicación móvil con jQuery Mobile

Publicado el 19 Nov 2013 en Noticias por Emilio Corujo

jQuery Mobile es un framework desarrollado en javascript perteneciente a jQuery Foundation, el cual nos proporciona una interface compatible y usable para desarrollar aplicaciones móviles para teléfonos y tablets, y que cuenta con un sistema de transición entre paginas mediante tecnología AJAX. Además es compatible con la mayoría de las plataformas móviles y navegadores para dispositivos móviles (iOS, Android, Blackberry, WebOS, Symbian, Windows Phone, etc.).

A continuación veremos una pequeña introducción y un ejemplo de aplicación móvil en jQuery Mobile.

Estructura básica de una Aplicación Móvil JQM

Para empezar a desarrollar nuestra aplicación móvil necesitamos una estructura HTML como la siguiente:

<!--Declaracion del tipo de documento como HTML5-->
<!DOCTYPE html>
<html> 
<head> 
	<title>Título Página</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 

	<!--Llamadas a las librerias JS de jQuery, jQuery Mobile y a su hoja de estilos CSS -->
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head> 
<body> 
	...
</body>
</html>

Como podemos observar, no difiere en nada con una estructura de una página web normal, únicamente hay que declarar el DOCTYPE en HTML5 y añadir las llamadas a las librerías de javascript y CSS dentro del <head>. Podemos incluir los archivos en la propia aplicación o llamar al CDN de jQuery o Google como en el ejemplo (en este caso, para que la aplicación pueda funcionar necesitará de conexión a internet en todo momento).

Contenido por secciones

La estructura de contenidos de cualquier aplicación en jQuery Mobile se basa en el nuevo atributo “data” creado para HTML5. Este atributo sirve para poder guardar datos privados a la aplicación móvil o el sitio web, para los cuales no existe ningún atributo especifico para ello.
Cuando empecemos a desarrollar nuestra aplicación móvil, podremos observar como el atributo “data-role” se repite una y otra vez, el cual define el rol del elemento que lo contiene convirtiéndolo en un elemento del interface.

<div data-role="page"> 
	<div data-role="header">...</div> 
	<div data-role="content">...</div> 
	<div data-role="footer">...</div> 
</div>

Mediante esta declaración, jQuery se encarga de agregar todos los elementos gráficos, clases y animaciones necesarias para generar una interface compatible con dispositivos móviles.

Es muy habitual agregar en la cabecera de una aplicación móvil botones para volver a la pantalla anterior o para mostrar un menú, en este caso haríamos lo siguiente:

<div data-role="header">
	<a href="#" data-role="button" data-icon="home" data-iconpos="notext" data-theme="b" data-iconpos="left" data-inline="true">Inicio</a>
	<a href="#" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="b" data-iconpos="right" data-inline="true">Menú</a>		
</div>
Botones con iconos

Botones con iconos

Con este código hemos añadido 2 botones que muestran únicamente un icono (sin texto) y que se alinearán a la izquierda y a la derecha de la cabecera principal.

Componentes

Listviews

Las “listviews” son elementos HTML del tipo lista que jQuery Mobile mediante el atributo data-role=”listview”, le aplica una serie de estilos necesarios para poderse visualizar correctamente en un dispositivo móvil.

Listviews aplicacion movil

Listviews jQuery Mobile

	<!--Declaramos un filtro de búsqueda en la lista-->
	<ul data-role="listview" data-filter="true">
	<!--Agrupaciones por orden alfabético-->
	<li data-role="list-divider">A</li>
	<!--Efecto de transición entre paginas-->
	<li><a href="#" data-transition="slidedown">A - MENU 1
		<!--Contador de elementos-->
		<span class="ui-li-count">12</span>
	</a></li>
	<li data-role="list-divider">B</li>
	<li><a href="#">
		<!--Elementos de lista con iconos-->
		<img src="images/icn-nosotros.png" class="ui-li-icon">
	B - MENU 2</a></li>
	<li data-role="list-divider">C
		<span class="ui-li-count">2</span>
	</li>
	<li><a href="#">C - MENU 3</a></li>
	<li><a href="#">
		<!--Elementos de lista con imágenes-->
		<img src="images/software.png" />
		<h3>C - MENU 4</h3>
		<!--Descripciones de items-->
		<p>Descripcion menu 4</p>
	</a></li>
</ul>

Como podemos ver en el ejemplo anterior, existen multitud de diferentes atributos con los que podemos personalizar nuestras “listviews”.

Buttons

Los botones se crean a partir del elemento “<a href>” de HTML y jQuery Mobile se encarga de darle un aspecto más visual para aplicaciones móviles. Mediante el atributo “data-role=button” podremos agregar distintas propiedades a nuestros botones (iconos, sombras, alineaciones, plantillas…).

Boton a nSolver

Botón jQuery Mobile

<!--Agregamos un icono y su posición dentro del botón-->
<a target="_blank" href="http://www.nsolver.com" data-role="button" data-theme="b" data-icon="refresh" data-iconpos="right">
	Visitar Página Web
</a>

Además de los atributos del ejemplo, podemos agregar diferentes efectos de transiciones, agrupar varios botones o utilizar únicamente un icono como botón, entre otras cosas.

De inicio, jQuery Mobile nos proporciona a través de sus plantillas los siguientes iconos para poder diseñar diferentes tipos de botones:

Iconos para botones

Elementos de Formulario

Es aconsejable declarar el formulario entre las etiquetas <form> y con sus atributos “method” y “action” correspondientes. Existe una gran variedad de elementos para poder diseñar diferentes formularios, entre los más destacados tenemos:

Text inputs

Los campos de “text” y “textarea” son iguales que en HTML, y automáticamente, jQuery Mobile se encarga de darles un aspecto mas visual para dispositivos móviles. No necesita de ningún atributo especial de “data”.

<label for="basic"/>Text Input:</label>
<input type="text" name="name" id="basic" value=""  />

Slider

Los campos tipo “range” son campos “input” donde nos deberemos de declarar un valor mínimo, máximo y la posición inicial del elemento.

Slider jQuery Mobile

<label for="slider-fill"/>Input slider:</label>
<input type="range" name="slider-fill" id="slider-fill" value="60" min="0" max="100" data-highlight="true" />

Flip toogle switch

Este elemento es como un “interruptor” y es muy común verlo en las pantallas de ajustes de una aplicación móvil para activar/desactivar valores.

Flip

<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider">
	<option value="off">Off</option>
	<option value="on">On</option>
</select>

Radio buttons

Listado de distintos valores donde podremos seleccionar una única opción.

<fieldset data-role="controlgroup">
	<legend>Choose a pet:</legend>
		<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
		<label for="radio-choice-1">Cat</label>

		<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2"  />
		<label for="radio-choice-2">Dog</label>

		<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3"  />
		<label for="radio-choice-3">Hamster</label>
</fieldset>

Checkboxes

Las casillas de verificación se utilizan para proporcionar una lista de valores donde se podrá seleccionar más de una opción.

<label><input type="checkbox" name="checkbox-0" > I agree </label>

Select menus

El menú de selección se basa en un elemento tipo “select”, que se oculta a la vista y se reemplaza por un botón de selección personalizando el estilo para que coincida con la apariencia de una aplicación jQuery Mobile.

Select

<label for="select-choice-0" class="select"/>Shipping method:</label/>
<select name="select-choice-0" id="select-choice-0"/>
   <option value="standard"/>Standard: 7 day</option/>
   <option value="rush"/>Rush: 3 days</option/>
   <option value="express"/>Express: next day</option/>
   <option value="overnight"/>Overnight</option/>
</select/>

APP para dispositivos móviles

Este artículo es una pequeña introducción a la programación de aplicaciones móviles mediante el framework jQuery Mobile. En su página web, http://api.jquerymobile.com, podremos encontrar el listado completo de elementos y atributos con los que poder diseñar una atractiva y funcional aplicación móvil.

Además en http://jquerymobile.com/resources/ podremos encontrar una gran colección de recursos ordenados en distintas categorías: libros, artículos, plantillas, ejemplos de aplicaciones reales, herramientas de guía para el desarrollo de pequeñas o complejas aplicaciones, etc.

Entre los recursos más destacados tenemos:

  • PhoneGap – Herramienta para “envolver” nuestro código jQuery Mobile y que esta pueda funcionar como una aplicación nativa.
  • Viziapps – Entorno tipo “arrastrar y soltar” para construir fácilmente aplicaciones jQuery Mobile.
  • Google Maps – Mapas básicos, geolocalización, búsqueda de rutas, etc.
  • PhotoSwipe – Galerías de imágenes
  • ThemeRoller – Interface para crear plantillas para jQuery Mobile totalmente personalizadas
Volver Arriba