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

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

Posted: 16/5/2012 3:07 por Gonzalo Perez | con 2 comment(s)
Comparte este post:

Comentarios

MVP Factor ha opinado:

Nuestro buen amigo Gonzalo Pérez C. nos comparte su artículo: ListView de JqueryMobile Metro Theme con

# May 22, 2012 11:28 PM

Chalalo Land ha opinado:

Hola, este es un post que quería escribir hace bastante tiempo, pero el ajetreo del día

# October 29, 2012 5:22 PM