Chalalo Land : WebMatrix, jquery mobile

ListView de JqueryMobile Metro Theme con WebMatrix

Gonzalo Perez — Wed, 16 May 2012 01:07:41 GMT

Una de las demos que hice en el webcast de “Desarrollando Aplicaciones Web para Windows Phone 7 con ASP.NET WebMatrix” en donde vimos temas de jQueryMobile Metro Theme, fue crear una lista de Productos con el Look&Feel de WP7, desarrollada sobre HTML5.

Si quieres ver el material, Slides y Video del webcast, puedes visitar el siguiente Link:

http://geeks.ms/blogs/gperez/archive/2012/05/16/material-charla-desarrollo-de-web-apps-para-wp7-con-webmatrix.aspx

PD: el video no está editado, así que hay lapsus mentales, jejeje, hay alguna que otro bug, pero se entiende.

Antes de seguir, te recomiendo que revises el siguiente link, donde puedes descargar jQueryMobile Metro Theme: http://sgrebnov.github.com/jqmobile-metro-theme/ en donde vas a poder descargar las librerías necesarias para poder utilizarlo y ver ejemplos muy buenos sobre su uso.

También puedes ver un Demo Live en el sitio de GitHub :
https://github.com/sgrebnov/jqmobile-metro-theme

Algunos Screenshot (cool!)

Ahora veamos primero los datos a mostrar, para eso examinemos la estructura de la tabla:

y a continuación los datos que vamos a mostrar por en el dispositivo:

Página Layout2.cshtml

Esta página CSHTML ocupa el concepto de Layout, muy similar a la de las master pages de ASP.NET webforms, esta vez, preparada para un dispositivo móvil(recuerda los tips del screencast, el agregar name= Viewport para tener un tamaño adecuado de la página en un dispositivo de esta naturaleza), en donde tenemos una página principal que tiene las referencias a las librerías de jQueryMobile Metro Theme y las referencias para hacer el render de Title, MainTitle y RenderBody ( en el cual se dibuja el contenido)

<!DOCTYPE html>

<html>

<head>

<title>Demo Chalalo</title>

href="DemoJQM/css/metro/jquery.mobile.metro.theme.css"/>

</head>

<body>

<span class="ui-app-title">@Page.Title</span>

<h1>@Page.MainTitle</h1>

</div><!-- /header –>
@RenderBody()
</body>

</div>

</html>

Página DemoBD1.cshtml

En esta página, primero que nada configuramos el layout a utilizar(Layout2) , luego el title y maintile, para luego hacer la consulta sobre la base de datos. A continuación veremos que los divs tienen el atributo data-role, que corresponde al atributo que identifica JQM para aplicar los estilos correspondientes. Uno de estos estilos es el que asigna para el listview, dejándolo con un Look And Feel muy cool, similar al nativo de WP7.

Luego verificamos la letra con la que comienza el el producto, para ir agregando el separador correspondiente, puedes ver esto en el if del siguiente código, solo cuando hay cambio de letra , agregamos un separador, lo que va a dar un efecto muy cool y similar a la experiencia con una lista de WP7.

Layout="/_Layout2.cshtml";

Page.Title ="DEMO";

Page.MainTitle="Productos";

var db = Database.Open("Demo");

var sql = "SELECT Id,Nombre, Precio FROM Productos order by Nombre";

var data = db.Query(sql);

var letra="";

}

<label for="list-view-1">Listado</label><br/>

   <ul id="list-view-1" name="list-view-1" data-role="listview" data-inset="true">
    @{
    foreach(var row in data){

var PrimeraLetra= Convert.ToString(@row.Nombre[0]);

if (letra!=PrimeraLetra){

letra=PrimeraLetra;

<text><li class="ui-index"
data-role="list-divider">@letra</li></text>

}

<li><a href="index.html"><img src="demoJQM/images/empty.png" class="ui-li-icon" />@row.Nombre - @row.Precio</a></li>

}

</ul>

</div>

</div>

Y Listo! ya tenemos nuestra lista con un look & feel demasiado cool!!

Como ven el efecto es interesante, si quieres descargar el código puedes hacerlo acá:

Descarga

https://www.dropbox.com/s/v9yy4zoqmkm8u03/DemoWP7Web.zip

Espero que te haya servido, nos vemos en un próximo Post
@chalalo

Material Charla :Desarrollo de Web Apps para WP7 con WebMatrix

Gonzalo Perez — Wed, 16 May 2012 00:57:19 GMT

Hola!, acá les quiero dejar el material, de la charla de Desarrollo de Aplicaciones para WP7:

View more presentations from Gonzalo C..

Les comparto también el código usado en la presentación de la presentación.
https://www.dropbox.com/s/v9yy4zoqmkm8u03/DemoWP7Web.zip

Y la grabación del video!
PD: No está editado, disculpen las lagunas mentales, jejeje (ese día no tomé desayuno)

Recomiendo verlo en HD (O directamente de Youtube)

Espero que te sirva (el video mientras escribo este post, aun se está procesando en youtube, por lo que es posible que tengas que esperar)

Saludos!
@chalalo

[WebCast] A Fondo con JQueryMobile y WebMatrix

Gonzalo Perez — Tue, 19 Jul 2011 12:53:37 GMT

WebMatrix es el nuevo IDE de Microsoft para el desarrollo de aplicaciones Web, veremos en esta oportunidad, el como utilizarlo junto a jQueryMobile para el desarrollo de aplicaciones móviles, veremos como utilizar helpers JSON para realizar tareas asyncronamente y tips sobre el desarrollo de JQueryMobile que harán tu aplicación más cercana a las app nativas. Veremos también como utilizar PhoneGap para crear un ejecutable con nuestra app web en un dispositivo móvil.

Duración: 1hora
Fecha: Viernes 22 de Julio
Hora:16 horas Bogota //17:00 horas Chile
Orador: Gonzalo "chalalo" Pérez

Registro:
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032490317&Culture=es-AR

Nos vemos!
Saludos,

[WebCast] Conoce lo nuevo de ASP.NET WebMatrix & Razor y lo nuevo de JQuery : JQueryMobile

Gonzalo Perez — Mon, 03 Jan 2011 17:26:59 GMT

Mi buen amigo Jesús Boch (@jboschaiguade) me ha invitado a hacer este WebCast:

Conoce lo nuevo de ASP.NET WebMatrix & Razor y lo nuevo de JQuery . JQueryMobile

Descripción:
En esta charla revisaremos el nuevo producto de ASP.NET WebMatrix , revisaremos la nueva sintaxis de Razor, NuPack y veremos el nuevo producto del Team JQuery : JQueryMobile , que nos permitirá crear aplicaciones para distintos dispositivos móviles de manera fácil y con gran compatibilidad entre los Smartphone actuales.
Ponente: Yo
Fecha: Miércoles 19 de Enero - 15:00 horas chile (gmt-4), 19:00 Madrid (gmt +1)

REGISTRATE AQUI

Saludos!
Gonzalo

JQueryMobile & WebMatrix– Formularios para Ingreso de Datos

Gonzalo Perez — Mon, 01 Nov 2010 00:17:01 GMT

Hola, en este post vamos a continuar trabajando sobre el ejemplo de JQueryMobile, para revisar más sobre JQueryMobile, puedes ver:

http://geeks.ms/blogs/gperez/archive/2010/10/18/jquery-mobile-1-0-alpha-release.aspx

Y el tutorial en donde veníamos haciendo el ejemplo:
http://geeks.ms/blogs/gperez/archive/2010/10/22/tutorial-creando-una-app-con-jquery-mobile-webmatrix-y-razor.aspx

Ahora vamos a realizar la inserción de datos mediante formularios bajo JM. El Resultado final que buscamos en la aplicación es el siguiente:

JQueryMobile nos ofrece en esta versión beta un conjunto de “controles” o mejor dicho, “estilos automáticos de controles” , podemos ver una descripción de estos en la siguiente página:
http://jquerymobile.com/demos/1.0a1/#docs/forms/index.html

En nuestro caso los elementos que utilizaremos son:

Tal como dice la documentación hay controles, como el Slider que en realidad es un elemento Select, lo mismo que en la selección de la facultad.

Esta página de ingreso la vamos a llamar de la página de carreras agregando un botón en el footer, otra de las características de JQueryMobile, como vemos en la siguiente figura:

Esto se logra modificando el Footer:

<h4>www.chalalo.cl </h4>

<a href="AddCarrera.cshtml" data-role="button" data-icon="plus">Agregar</a>

</div>

Ahora veamos el código de la página del Ingreso de Carreras:

<!DOCTYPE html>

<html>

<head>

<title>www.chalalo.cl</title>

</head>

<body>

<h1>Ingresar</h1>

</div>

<label for="nombre">Nombre:</label>

<option value="0">Seleccione Facultad</option>

@{ var mibase =Database.Open("DemoBase");

var facultades = mibase.Query("SELECT Id,Nombre FROM
Facultades");

}

@foreach (var facultad in facultades){

<option value="@facultad.Id">@facultad.Nombre</option>

}

</select>

<label for="descripcion">Descripcion:</label>

<option value="0">Inactivo</option>

<option value="1">Activo</option>

</select>

</div>

</form>

</div>

<h4>www.chalalo.cl </h4>

</div>

</body>

</html>

Esta página tiene un formulario que su acción es la página validar.cshtml, en donde vamos a validar los datos y si todo esta bien (con una paupérrima validación), vamos a grabar los datos en la base, mostrando los posibles mensajes:

El código asociado a la página

@{ var mibase =Database.Open("DemoBase");

bool ok=false;

if (IsPost) {

var nombre = Request["nombre"];

var semestres = Request["semestres"];

var descripcion =Request["descripcion"];

var facultad = Request["selfacultad"];

var activacion = Request["activacion"];

if (nombre.IsEmpty()||semestres=="0"||descripcion.IsEmpty()
||facultad=="0"){

ok=false;

} else{

var SqlInsertar = "INSERT INTO carreras (Nombre,
Semestres,Descripcion, IdFacultad,Estado) VALUES (@0, @1,@2,@3,@4)";

mibase.Execute(SqlInsertar, nombre, semestres, descripcion,
facultad,activacion);

ok=true;

}

<!DOCTYPE html>

<html>

<head>

<title>www.chalalo.cl</title>

</head>

<body>

<h1>Listado Carreras</h1>

</div>

@if (ok) {

<h2>Registro Almacenado</h2>

<a href="inicio.cshtml" data-role="button">Aceptar</a>

}else{

<h2>Error</h2>

<h3>Debe ingresar todos los Datos</h3>

           <a href="AddCarrera.cshtml" data-role="button">
              Volver a Ingresar Carrera
           </a>

}

</div>

<h4>www.chalalo.cl </h4>

</div>

</body>

</html>

En este caso, recibimos los parámetros de la página anterior y según el resultado de la validación vamos a mostrar el mensaje de inserción o fallo.

Veamos el video entonces del resultado (pronto subo uno desde un fono).

Descarga la aplicación desde acá:

[Tutorial] Creando una App con JQuery Mobile, WebMatrix y Razor

Gonzalo Perez — Thu, 21 Oct 2010 23:18:54 GMT

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>

<title>www.chalalo.cl</title>

</head>

<body>

<h2>JQuery Mobile</h2>

</header>

@{ var mibase =Database.Open("DemoBase");

var facultades =mibase.Query("Select Id,Nombre from Facultades");

}

@foreach (var facultad in facultades){

<li>

<a href=carreras.cshtml?id=@facultad.id
data-transition="flip">@facultad.nombre</a>

</li>

}

<li data-role="list-divider">JQuery Mobile</li>

<li>

<a href=http://www.jquery.com
data-transition="flip">JQuery Mobile</a>

</li>

<li>

<a href=http://www.jquerymobile.com/
data-transition="flip">JQuery WebSite</a>

</li>

</ul>

</div>

<h4>www.chalalo.cl </h4>

</footer>

</div>

</body>

</html>

Si revisamos la estructura, veremos este esqueleto:

<!DOCTYPE html>

<html>

<head>

<title>www.chalalo.cl</title>

</head>

<body>

</header>

</div>

</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:

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)

(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>

<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>

<title>www.chalalo.cl</title>

</head>

<body>

<h2>JQuery Mobile</h2>

</header>

@{ 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>

<a href=detcarrera.cshtml?id=@carrera.Id
data-transition="pop">@carrera.Nombre</a>

</li>

}

</ul>

</div>

<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>

<title>www.chalalo.cl</title>

</head>

<body>

<h2>JQuery Mobile</h2>

</header>

<h3>@carrera.Nombre</h3>

<div>@carrera.Descripcion</div>

</br>

Semestres:@carrera.Semestres

</br>

</div>

<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

Ejemplo en IPhone

En Blackberry:

Ejemplo en Blackberry 6.0

Ejemplo en Android 2.2

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:

Desde mi Tablet Chino

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