ListView de JqueryMobile Metro Theme con WebMatrix

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

image

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

image

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

image

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>

  <meta content="text/html; charset=utf-8"/>

  <meta name="viewport" content="width=device-width, initial-scale=1"/>

  <title>Demo Chalalo</title>

  <link rel="stylesheet"    

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

  <script src="DemoJQM/js/jquery.js" type="text/javascript"></script>

  <script src="DemoJQM/js/jquery.mobile.js" type="text/javascript"></script>

  <script src="DemoJQM/css/metro/jquery.mobile.metro.theme.init.js"
          type
="text/javascript"></script
>

  <script src="DemoJQM/js/jquery.globalstylesheet.js"
          type
="text/javascript"></script
>

  <script src="DemoJQM/js/jquery.mobile.themeswitcher.js"
          type
="text/javascript"></script
>

</head>

<body>

   <div data-role="page" class="type-interior" data-theme="a">

      <div data-role="header" data-theme="a">

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

            <h1>@Page.MainTitle</h1>          

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

</div><!–/page–>

</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="";

}

<div data-role="content" data-theme="a">

<div data-role="fieldcontain">

   <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><!– /page –>

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

imageimage

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 Sonrisa
@chalalo

2 comentarios en “ListView de JqueryMobile Metro Theme con WebMatrix”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *