Chalalo Land

Tecnologías ASP.NET y un poco Más

Contacto


 Si quierer cooperar, yo feliz, muy agradecido :)

De donde me Visitan?

Locations of visitors to this page

Generic Content

Si te gustaron los articulos, y te animas te estaría muy agradecido!


Recent Posts

Tags

Community

Blogs de MVP

Amigos Geeks

Blogs Imperdibles

GODS

Archives

Email Notifications

[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á:

image image image

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

image

Luego creamos las dos tablas, Facultades y Carreras.

Tabla Facultades

Tabla Carreras

image image

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

y Seleccionamos CSHTML:

image

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

image

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:

image image image image

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>

image

Su skin va a estar definido por el data-dividertheme del que hablamos anteriormente,   los  resultados son espectaculares:

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

image

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:

image

 

Ahora el Video! Nada de mal ah? y recuerda que estamos en un Alpha!

EN IPHONE

image

Ejemplo en IPhone

En Blackberry:
image

Ejemplo en Blackberry 6.0

image

Ejemplo en Android 2.2
Ojo es son solo emuladores, por lo que el comportamiento puede variar al del dispositivo físico
image

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.

image

Y podemos hacer el Deploy de nuestra aplicación una vez que nos inscribamos en un servicio de webhosting.

image

Luego al hacer deploy con los datos seleccionamos todos los archivos más la BD.

image

image

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

image

Espero que te sirva!, pronto se viene el tutorial de formularios con JQuery Mobile, hasta pronto! nos vemos en el TechDay!

Saludos,
Chalalo

Posted: 22/10/2010 1:18 por Gonzalo Perez | con 13 comment(s)
Comparte este post:

Comentarios

Pablo Hormazabal ha opinado:

esta muy buena la herramienta, nos vemos mañana te paso a buscar después del techday yo por motivos de trabajo no puedo ir pero estoy seguro que tu charla será a toda raja compadre

# October 25, 2010 3:49 PM

Chalalo Land ha opinado:

Como ya algunos conocen WebMatrix, de hecho me correspondió hablar sobre esta herramienta para

# November 11, 2010 8:35 PM

Chalalo Land ha opinado:

Ya se acaba el año, y quería hacer un resumen, no están todos los artículos, si no los que más rescato

# December 31, 2010 2:15 AM

OMoreno ha opinado:

Saludos.

Tengo el siguiente problema con la instrucciónes RAZOR para MySQL(Websecurity.InitializeDatabaseConnection)

Lo que he probado en la opción para crear bases de datos es:

1-Primera prueba, cree una base "Prueba.SDF" y utilice la instrucción

Websecurity.InitializeDatabaseConnection("Prueba","Usuario","UsuarioID","Nombre",true)

y en esta todo salió correcto cuando ejecute la página se crearon las tablas de control  automáticamente.

2-Segunda prueba cree una conexión "Conexion_SQLExpress2005" a una base de datos existente en SQL SERVER 2005 y utilice la instrucción Websecurity.InitializeDatabaseConnection("Conexion_SQLExpress2005","UsuarioID","Nombre",true)

en esta todo salió correcto cuando ejecute la página se crearon las tablas de control automáticamente.

El Problema es con MySQL 5.1:

3-Tercera prueba cree una conexión "Conexion_MySQL_5.1" a una base de datos existente en MYSQL 5.1 y utilice la instrucción

Websecurity.InitializeDatabaseConnection("Conexion_MySQL_5.1","UsuarioID","Nombre",true)

y en esta genero el siguiente mensaje de error:

"Unable to find the requested .Net Framework Data Provider.  It may not be installed"

En las pruebas 1 y 2 WEBMATRIX me dejo crear, editar , eliminar registros de las tablas con codigo de RAZOR y con el IDE de WEBMATRIX, pero con la prueba 3 "MYSQL" solo me dejo con el IDE de WEBMATRIX ya que con las instrucciones de RAZOR genera el error arriba descrito, y ya tengo instalado el MySQL Connector NET 6.2.3.

Agradecería alguna sugerencia.

# March 21, 2011 10:38 PM

Gonzalo Perez ha opinado:

OMoreno,

Voy a revisar lo que comentas, y hablamos por msn si quieres.

Saludos!

# March 24, 2011 1:42 PM

carlos ha opinado:

Hla como haces para que cuando lo pongas en la pantalla de inicio del iphone te salga un logo y desaparezca las barras de navegación pareciendo asi una auténtica aplicación nativa como ocurre con sencha o jqtouch por ejemplo, es que he visto que este tutortial no lo pones

# March 25, 2011 2:48 PM

Gonzalo Perez ha opinado:

Esta aplicación tiene un icono asociado en el "escritorio" del IPhone con

5.<link href="iphone/apple-touch-icon.png" rel="apple-touch-icon"/>

Al abrirla se va a presentar en pantalla completa,sin embargo si llegas al inicio de todas maneras podrás ver la barra.

Eso es?

# March 25, 2011 4:44 PM

jhon ha opinado:

Saludos. Por alguna razon he tratado de insertar codigo javascript(<script> var nombre='algo';document.write(nombre); </script>, pero no muestra nada, tampoco algun error o algo....a que se debe? PD:la prueba la hice en la pagina carreras.cshtml...gracias

# August 17, 2011 10:45 PM

Gonzalo Perez ha opinado:

hola jhon, dale completo es decir <script type=".... no solo script

# August 17, 2011 11:24 PM

jhon ha opinado:

Gracias por responder, si YA LO HIZE,pero nada,sabes...si la pagina la ejecuto escribiendo directamente su url(carreras.cshtml) se ejecuta bien(html,javascript y una llamada a una libreria jquery tipo cycle), pero si la pagina es llamada desde otra (Inicio.cshtml), ES AHI donde se da el error.

# August 18, 2011 12:06 AM

Gonzalo Perez ha opinado:

Prueba colocando el en link que llama a la página los atributos  rel="external" o data-ajax="false".

Saludos,

# August 18, 2011 3:14 AM

jhon ha opinado:

Hola de nuevo,gonzalo...ya solucione ese problema que tuve. Ahora otra pregunta era como puedo volver mi aplicacion(html,javascript,css) en un archivo ejecutable(.exe) para que se pueda instalar en un mobile y no parezca una app web....saludos.

# August 25, 2011 6:25 PM

Gonzalo Perez ha opinado:

Viste https://build.phonegap.com/ ??? revisalo! :)

# August 31, 2011 1:54 PM