Desarrollo de aplicaciones móviles con jQuery Mobile, Android SDK y PhoneGap (parte 2)

por Óscar Antón el a las

En el artículo anterior vimos como preparar el entorno para empezar con PhoneGap, en este artículo toca algo sencillo para aprender unas nociones de jQuery Mobile y HTML5.

Si queréis aprender como configurar vuestro entorno de desarrollo antes de empezar con PhoneGap podéis consultar la primera parte del tutorial.

Comenzando con jQuery Mobile

Para los que no lo sepan aun, jQuery Mobile es un framework JavaScript basado en jQuery y HTML5, me hubiese gustado mostraros algo de LungoJS (que para algo es un proyecto patrio), pero aun me tengo que poner las pilas y por lo que me ha dicho Javi Jimenez (desarrollador de LungoJS), la versión 2 va a venir cargada de novedades.

Centrando el tema, hemos elegido este framework por la libertad que permite a la hora de desarrollar aplicaciones HTML5 multi-plataforma (en nuestro caso Android e iOS), vamos a comenzar con lo básico, su descarga: http://jquerymobile.com/download/

Nos bajaremos la versión en zip que viene con todo lo necesario para empezar a trabajar.

Creando un proyecto nuevo en eclipse

Para ello, seleccionamos File->New Project->Static Web Project

Vamos a crear un proyecto llamado TestJQueryMobile

 

Ahora creamos nuestra estructura de carpetas posicionandonos sobre WebContent, boton derecho New->Folder y creamos esta estructura:

La carpeta assets va a contener todos nuestros recursos como hojas de estilo, imágenes y por supuesto Javascript.

Ahora colocamos el contenido del zip dentro de nuestras carpetas assets:

Si os fijáis, vereis que hay una carpeta images que va dentro de css, esto es para respetar las rutas de las hojas de estilo de jQuery Mobile, el resto de imágenes que usemos irán dentro de nuestra carpeta img.

Ahora descargamos jQuery 1.7 y lo incluimos en la carpeta js: http://code.jquery.com/jquery-1.7.2.min.js

Ya tenemos la estructura básica para comenzar con una aplicación para jQuery Mobile.

Creando la primera página

Ahora toca crear nuestra primera página, en el Project Explorer, nos situamos en la carpeta WebContent, botón derecho y File->New->Other y seleccionamos Web->HTML File, después le indicamos que queremos crear nuestro index.html.

La página que creará eclipse por defecto es una página HTML4 típica, pero nosotros queremos una en HTML5, por lo tanto vamos a reemplazar todo el código por una plantilla en HTML5:

<!DOCTYPE html> 
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>Mi primera página</title> 
	<link rel="stylesheet" href="assets/css/jquery.mobile-1.1.0.min.css" />
	<link rel="stylesheet" href="assets/css/jquery.mobile.structure-1.1.0.min.css" />
	<link rel="stylesheet" href="assets/css/jquery.mobile.theme-1.1.0.min.css" />
	<script src="assets/js/jquery-1.7.2.min.js"></script>
	<script src="assets/js/jquery.mobile-1.1.0.min.js"></script>
</head> 

<body> 

<div id="pagina" data-role="page">

	<div data-role="header">
		<h1>Cabecera de la página</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>Este es un ejemplo de como usar jQuery Mobile.</p>		
	</div><!-- /content -->
	
	<div data-role="footer">
		<h4>Pie de página</h4>
	</div><!-- /footer -->
	
</div><!-- /page -->

</body>
</html>

Varias cosas os tengo que contar sobre esta plantilla, por un lado, vereis el meta-tag 'viewport', este meta-tag indica al dispositivo una serie de valores por defecto que corresponden a la ventana del navegador, en nuestro ejemplo vamos a dejar por defecto width=devide-with que significa que el ancho del viewport va a ser el ancho en pixels del dispositivo, initial-scale=1 significa que el viewport va a respetar la resolucion del dispositivo, evitando cualquier tipo de zoom, mas info en https://developer.mozilla.org/en/mobile/viewport_meta_tag  .

Antes de continuar explicando algunos conceptos, vamos a ver el resultado en el navegador, para ello, nos ponemos encima del index.html y con el botón derecho seleccionamos Open With->Other->External Programs y elegimos bien Chrome, Safari o Chromium (como es mi caso). Lo importante es que el navegador elegido use el motor webkit (que es el que usan los que he nombrado y tanto Android como iOS).

 

Redimensionar un poco el navegador como si fuese la pantalla de un móvil y vereis algo asi:

 

Analizando el código HTML5 y modificando

Si os fijais, jQuery usa los Custom data Attributes de HTML5, es decir attributos data-, estos metadatos permiten al framework asignar roles y otras caracteristicas a vuestro DOM a través de jQuery.

La primera linea importante es el contenedor de la página:

<div data-role="page">

El data-role, define la forma de comportarse de vuestro HTML, en este caso, el div va a contener una página ya que jQuery Mobile genera páginas dentro del documento que posteriormente nos serviran para navegar a través de transiciones (efectos de transición entre páginas).

Dentro de una página se puede definir una cabecera y un pie de página, como vamos a usar HTML5, podemos cambiar esta linea:

<div data-role="header">

por esta otra:

<header data-role="header">

Respetando asi un poco mas el estandar, jQuery Mobile no usa este tipo de tags para mantener retrocompatibilidad con navegadores HTML4, pero nosotros vamos a usar HTML5 puro ya que nuestra aplicación se va a correr en navegadores WebKit (Android e iOS).

vamos a cambiar el pie de página también:

<div data-role="footer">

por esta otra:

<footer data-role="footer">

Si actualizais el navegador, vereis que no cambia nada a simple vista, pero lo importante es introducir algunos contenidos en HTML5.

Ahora vamos ha hacer que tanto la cabecera, como el pie de página sean fijos y se mantengan tanto arriba como abajo del documento:

<header data-role="header" data-position="fixed">
<footer data-role="footer" data-position="fixed">

Si actualizamos el navegador, veremos lo siguiente:

 Ahora si se empieza a parecer a una app, pero aun falta algo de interactividad, para ello vamos a programar un poquillo ¿no?

Vamos a añadir este código dentro de data-role="content" que definirá en contenido de nuestra página actual:

	<div data-role="content">	
    	<input type="text" name="nombre" id="nombre" value="" placeholder="Introduce tu nombre"  />
		<a href="#saludo" data-role="button" data-icon="check">Aceptar</a>     	
    	</div><!-- /content -->

 Actualizamos y voilá:

Cómo veis jQuery Mobile se encarga de todo aplicando un tema por defecto a nuestros controles, como este no pretende ser un tutorial de todas las funcionalidades de jQuery Mobile, voy a comentaros solo un par de cosillas, la primera es referente a los data-role, en este caso hemos aplicado a un enlace el data-role button y por otro lado el data-icon que define un icono para el botón.

El control input tiene la propiedad placeholder que en HTML5 se usa para poner el texto tipo marca de agua en los input.

Es importante resaltar que en el link hemos puesto un enlace a #saludo, esto le indica al motor de páginas que tenemos en el mismo documento otra página (data-role="page") o un cuadro de diálogo (data-role="dialog"), en este caso vamos a crear un cuadro de diálogo en el body:

  <div id="saludo" data-role="dialog">
	
		<div data-role="header">
			<h1>Cabecera del cuadro de diálogo</h1>

		</div>

		<div data-role="content">
			<h1>Hola <span id="mensaje"></span></h1>
			<a href="#" data-role="button" data-rel="back">Cerrar</a>    
		</div>
	</div>

 Actualizamos y pulsamos el botón, entonces, aparece el cuadro de diálogo:

Por último vamos a meter un script en el head del documento HTML5:

<script type="text/javascript">
$( '#saludo' ).live( 'pagebeforeshow',function(event, ui){
  $('#mensaje').text($('#nombre').val());
});
</script>

 Actualizamos y ahora introducimos nuestro nombre en la caja de texto y pulsamos aceptar:

El script es bastante sencillo, pero lo voy a explicar un poco, por un lado generamos enlazamos el evento "pageberforeshow" con en método live al cuadro de díalogo "#saludo" de forma permanente (mas sobre live). Una vez se dispara el evento (cuando jQuery Mobile llama a "#saludo" a través del enlace que creamos antes) se ejecuta la función que contiene:

  $('#mensaje').text($('#nombre').val());

Que simplemente asigna al span con id="#mensaje" que creamos antes, el texto del campo #nombre.

Bueno, con esto doy por finalizado este tutorial, hasta la próxima y a los que venis al workshop de WeLoveJS, nos vemos el día 28  ;)

facebook

twitter