[Tutorial] Creando una App con JQuery Mobile, WebMatrix y Razor
Hace un par de días atrás se anunció JQuery Mobile, framework para el desarrollo de aplicaciones Web para dispositivos móviles. Aún estamos en un versión Alpha, pero está muy buena!, vamos ver un ejemplo práctico con bases de datos y con el nuevo producto del team de Microsoft ASP.NET: WebMatrix.
Puedes ver mi post anterior para ver un poco más de JQuery Mobile, en este post:
http://geeks.ms/blogs/gperez/archive/2010/10/18/jquery-mobile-1-0-alpha-release.aspx
Nuestro ejemplo tendrá que ver con Mostrar Facultades y las información de las carreras asociadas a ellas. El Resultado Final será:
 |  |  |
| Listado Facultades | Listado Carreras Asociadas | Detalle de la Carrera |
Al final de este tutorial vamos a ver un video de como se “mueve” este ejemplo:
Construcción del Ejemplo
Voy a utilizar WebMatrix para mostrar lo fácil que es desarrollar (además voy a estar hablando de esto en el TechDays 2010- Chile).
WebMatrix
El entorno de desarrollo WebMatrix cuenta con todas las herramientas necesarias para creación de páginas, bases de datos y publicación de nuestra aplicación. En primera instancia, lo que vamos a hacer es ir al menú de creación de bases de datos (recordar que esta base es SQL Server CE, un nuevo producto del Web Stack)
Paso 1: Creación de la base de datos
Luego creamos las dos tablas, Facultades y Carreras.
| Tabla Facultades | Tabla Carreras |
 |  |
Paso 2: Creación y (compresión) de la estructura de la página Facultades (facultares.cshtml)
La estructura de una página que soporte JQuery Mobile, es la de HTML5, de hecho necesitamos el doctype de HTML5. El Tag X-UA.Compatible sirve para forzar a IE para utilizar el renderizado más reciente. Necesitamos referenciar los Script de JQuery Mobile, para esto vamos a utilizar CDN. Si queremos asignar un ícono para que los usuarios puedan agregar la página su dispositivo (IPhone o Android) , agregamos el talg Link con el atributo rel de apple-touch-icon. Luego referenciamos jQuery 1.4.3 y finalmente el script de jQuery Mobile (que está en alpha).
Vamos a agregar la página, el nuevo concepto de ASP.NET Web Pages para esto vamos a la opción :
y Seleccionamos CSHTML:
Y ahora el código, si tienes dudas de la sintaxis de Razor, visita:
http://www.asp.net/webmatrix/tutorials/asp-net-web-pages-api-reference
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>www.chalalo.cl</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<link rel="apple-touch-icon" href="img/condor.jpg" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="b" >
<header data-role="header">
<h2>JQuery Mobile</h2>
</header>
<div data-role="content">
<ul data-role="listview" data-theme="c" data-dividertheme="e">
@{ var mibase =Database.Open("DemoBase");
var facultades =mibase.Query("Select Id,Nombre from Facultades");
}
@foreach (var facultad in facultades){
<li>
<img src="img/icono.png" alt="Mobiletuts+" class="ui-li-icon"/>
<a href=carreras.cshtml?id=@facultad.id
data-transition="flip">@facultad.nombre</a>
</li>
}
<li data-role="list-divider">JQuery Mobile</li>
<li>
<img src="img/icono.png" alt="Mobiletuts+" class="ui-li-icon"/>
<a href=http://www.jquery.com
data-transition="flip">JQuery Mobile</a>
</li>
<li>
<img src="img/icono.png" alt="Mobiletuts+" class="ui-li-icon"/>
<a href=http://www.jquerymobile.com/
data-transition="flip">JQuery WebSite</a>
</li>
</ul>
</div>
<footer data-role="footer">
<h4>www.chalalo.cl </h4>
</footer>
</div>
</body>
</html>
Si revisamos la estructura, veremos este esqueleto:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>www.chalalo.cl</title>
</head>
<body>
<div data-role="page" data-theme="a" >
<header data-role="header">
</header>
<div data-role="content">
</div>
<footer data-role="footer">
</footer>
</div>
</body>
</html>
En donde vemos header con el tag data-role="header"tambien div data-role="content” que representa el contenido de la pagina y por último el footer. Entonces los data-role nos sirven para redenderizar las distintas secciones de la página y tipos de contenido para el dispositivo móvil.
Además JQuery Mobile tiene la capacidad de cambiar el skin de la aplicación con el menor esfuerzo posible, la página que estamos construyendo tiene el tag:
<div data-role="page" data-theme="a" >
Podemos cambiar el tema de la pagina (data-theme) a “b” y “c” para ver los cambios, los colores de los temas se muestran a continuación
Visita:
http://jquerymobile.com/demos/1.0a1/#docs/about/themes.html para detalles de los temas.
De hecho , ahora si le agregamos las referencias a los scripts tendremos y “jugamos” con los temas, tendremos:
 |  |  |  |
| Tema a | Tema b | Tema c | Tema e |
Un punto importante, es que yo no tengo IPhone (si alguien me regala uno, por mi perfecto), entonces pruebo la aplicación con:http://www.testiphone.com/ desde safari o chrome.
Ahora volvamos a nuestro código, el competo en donde vamos a aprovechar la sintaxis resumida de Razor para crear la conexión:
@{ var mibase =Database.Open("DemoBase");
var facultades =mibase.Query("Select Id,Nombre from Facultades");
}
Para luego hacer la consulta a la base, y dejar el resultado (en este caso un conjunto de registros) en la variable facultades. Utilizamos un for each en razor para ir generando los LI dentro de UL que van a permitirnos tener el efecto de la lista de facultades. La lista tiene un tag especial data-role que indica que es un listview. ( si no le agregas el data-role, se ven como simples links)
<ul data-role="listview" data-theme="c" data-dividertheme="e">
(Visita http://jquerymobile.com/demos/1.0a1/#docs/lists/index.html para más información)
También puedes jugar con los temas, hay un punto interesante acá, que es el el tema del data-dividertheme, que son los separadores de lista. Luego voy a agregar el resultado que se consigue cambiando estos estilos. Una vez definido del listview, iteramos sobre la colección agregando una imagen y un link a las carreras asociadas a la facultad. el Link va asocuado a un tag que se llama data-transition que permite crear una animación en la transición de una página a otra, los tipos de animación son:
- slide
- slideup
- slidedown
- pop
- flip
- fade
Puedes visitar
http://jquerymobile.com/demos/1.0a1/#docs/pages/docs-transitions.html
para ver todos los estilos de animación de transición de páginas disponibles.
@foreach (var facultad in facultades){
<li>
<img src="img/icono.png" alt="Ver Carreras" class="ui-li-icon"/>
<a href=carreras.cshtml?id=@facultad.id
data-transition="flip">@facultad.nombre</a>
</li>
}
Un separador de Lista, tiene la siguiente estructura:
<li data-role="list-divider">JQuery Mobile</li>
Su skin va a estar definido por el data-dividertheme del que hablamos anteriormente, los resultados son espectaculares:
 |  |  |  |
data-theme="c"
data-dividertheme="e" | data-theme="a"
data-dividertheme="b" | data-theme = "e"
data-dividertheme="c" | data-theme="b"
data-dividertheme="d" |
Paso 3 : Página de Carreras (carreras.cshtml)
Esta página debe recibir el parámetro que viene de la página anterior (Facultades) para luego, mostrar la lista de carreras asociadas a dicha facultad.
En la nueva página (Carreras) JQuery Mobile automáticamente va agregar el botón Back en la parte superior, si te das cuenta se ha cargado la página en un div, vemos la url que sigue siendo inicio cshtml.
El código de la página sigue la misma estructura que la anterior. Veamos el código de la página:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>www.chalalo.cl</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<link rel="apple-touch-icon" href="img/condor.jpg" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page">
<header data-role="header">
<h2>JQuery Mobile</h2>
</header>
<div data-role="content">
<ul data-role="listview" data-theme="c">
@{ var mibase =Database.Open("DemoBase");
var id = Request["id"];
var carreras = mibase.Query("SELECT Id,Nombre FROM carreras where IdFacultad=@0",id);
}
@foreach (var carrera in carreras){
<li>
<img src="img/icono.png" alt="Carrera @carrera.Id" class="ui-li-icon"/>
<a href=detcarrera.cshtml?id=@carrera.Id
data-transition="pop">@carrera.Nombre</a>
</li>
}
</ul>
</div>
<footer data-role="footer">
<h4>www.chalalo.cl </h4>
</footer>
</div>
</body>
</html>
Ves que no hay mucha diferencia, solo el despliegue de las carreras a partir de un parámetro recibido por la URL:
var id = Request["id"];
Luego recorrer la colección e ir agregando los li a la lista, el resultado:
Paso 4 : Página de Carreras (detcarreras.cshtml)
Esta página muestra el detalle de la carrera seleccionada, es bastante simple y si vemos el código veremos:
@{ var mibase =Database.Open("DemoBase");
var id = Request["id"];
var carrera = mibase.QuerySingle ("SELECT Id,Nombre,Semestres,Descripcion FROM carreras where Id=@0",id);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>www.chalalo.cl</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<link rel="apple-touch-icon" href="img/condor.jpg" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page">
<header data-role="header">
<h2>JQuery Mobile</h2>
</header>
<div data-role="content" >
<h3>@carrera.Nombre</h3>
<div>@carrera.Descripcion</div>
</br>
Semestres:@carrera.Semestres
</br>
</div>
<footer data-role="footer" >
<h4 data-icon="forward">www.chalalo.cl </h4>
</footer>
</div>
</body>
</html>
El resultado de es sencillo, mostramos el nombre,la descripción y el semestre, en un formulario simple. Como se puede observar al principio de la página agrego la consulta a la base de datos para obtener la información asociada a cada carrera.
El Resultado:
Ahora el Video! Nada de mal ah? y recuerda que estamos en un Alpha!
EN IPHONE
En Blackberry:
Ejemplo en Blackberry 6.0
Ojo es son solo emuladores, por lo que el comportamiento puede variar al del dispositivo físico
Este ejemplo es con un Tablet con Android , que me costó 104 dólares, por lo que el procesador es ….. lento, muy lento, pero de todas maneras funciona, con algunos problemas en los temas, pero nada que un cambio de tema solucione. Acá está el video:
Paso 5 (Opcional) Subir el proyecto
Webmatrix integra las opciones de subida del proyecto a un hosting, también te muestra una lista con hosting en donde puedes subir tu aplicación.
Y podemos hacer el Deploy de nuestra aplicación una vez que nos inscribamos en un servicio de webhosting.
Luego al hacer deploy con los datos seleccionamos todos los archivos más la BD.
Y listo, estamos ok para probar nuestra aplicación en el hosting.En mi caso, está en
http://20377xhov4.adhostbeta.com/DemoJQM/inicio.cshtml
Pruébalo con el visor de IPhone (o navégala desde tu dispositivo)
Conclusiones
JQuery Mobile nos permite crear aplicaciones de alto impacto y con muy poco esfuerzo para dispositivos móviles, no solo IPhone, si no , por lo menos en esta versión Alpha, con los siguientes dispositivos:
- Apple iOS: iPhone, iPod Touch, iPad (all versions)
- Android: all devices (all versions)
- Blackberry Torch (version 6)
- Palm WebOS Pre, Pixi
- Nokia N900
Existen una gran cantidad de recursos visuales para formularios, búsquedas, ventanas modales, etc ( de los cuales voy a estar escribiendo próximamente) que podemos utilizar en nuestros desarrollos, los cuales puedes observar en :
http://jquerymobile.com/demos/1.0a1/#docs/forms/forms-themes.html
Esta ves hice el ejemplo con WebMatrix, pero se puede hacer perfectamente en PHP y MySQL, para que no creas que esto esta solo ligado al código que presente.
A mi parecer este Framerwork promete mucho y esta cumpliendo en versiones tempranas con bastante, aún se está trabajando para el soporte de nuevos dispositivos, de manera que al crear una app, no nos preocupe el como de va a desplegar en un smartphone que no sea en el cual probamos durante el desarrollo, acá la idea es programar una vez y ocupar en la mayor cantidad de dispositivos.
Recursos:
Descarga la Aplicación
Espero que te sirva!, pronto se viene el tutorial de formularios con JQuery Mobile, hasta pronto! nos vemos en el TechDay!
Saludos,
Chalalo