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

May 2012 - Artículos

[Tutorial]Crear WebService con WebMatrix y consumirlos desde WP7

Hola, debido a varias preguntas que me han hecho sobre el tema, es que vamos a ver un ejemplo de como hacer un WebService que retorne JSON con WebMatrix y que este pueda ser consumido desde una aplicación de Windows Phone 7.

Primero que nada vamos a ver como crear en WebMatrix servicios web que retornen JSON, de manera de poder consumirlos. En nuestro esquema vamos a tener un servicio conectado con una base de datos con productos. Entonces en webmatrix creamos la siguiente tabla que se llamará tabla Productos:

image

Luego debemos crear el código para la consulta a la base y el código para exponer los datos mediante JSON

Vamos por el primero, el código para obtener los datos desde la base para ser expuestos como JSON, para eso voy a crear la página (que va a hacer de librería) WSPrecio.cshtml, como vez, debe estar dentro de App_Code para que pueda ser accesible desde el resto de la aplicación

image

El código de esta página es:

@functions {

 

     public static List<Producto> GetProductos(string precio) {

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

        var selectQueryString = "SELECT Nombre, Precio FROM Productos WHERE Precio > " + @precio;

        var data = db.Query(selectQueryString);

        List<Producto> productos = new List<Producto>();

        foreach (var row in data) {

             Producto producto = new Producto();

            producto.Nombre = @row.Nombre;

            producto.Precio = @row.Precio;

            productos.Add(producto);

 

        } 

 

       return productos;

    }

 

   public class Producto {

        public string Nombre {get; set; }

        public int Precio {get; set; }

    }

 

}

Revisemos un poco este código, tenemos una función estática que nos devuelve una listas de productos desde la base de datos que cumplan con la condición que tener un precio mayor a el parámetro de entrada a la función, el cual es el precio ingresado por el usuario.

Obtenemos los registros y luego recorremos esa colección para crear una colección tipada de objetos Producto, una vez que la recorremos por completo, devolvemos dicha colección.

Luego la pagina WS es la encargada de llamar a esta función, cuyo código es el siguiente:

@{

        var precio = Request.QueryString["precio"];

        if (precio == null || precio == string.Empty) {

            <p>Ingrese un Precio</p>

        }  else {

            var productos = WSPrecio.GetProductos(precio);

            Json.Write(productos, Response.Output);

        }

}

Como puedes ver , primero que nada obtenemos el parámetro obtenido por querystring (este será ingresado por el usuario), luego hacemos una pequeña validación y luego obtenemos la lista de productos desde la función para luego utilizar Json.Write que se encargará de la serialización.

Si probamos está pagina pasando el parámetro precio en 100

image

 

Ahora veamos capturar esta información desde Windows Phone 7, para ello crearemos un proyecto con Visual Studio 2010 para WP7, voy a crear una pantalla muy sencilla, que simplemente permita que el usuario ingrese un precio, y luego en un textbox voy a imprimir los resultados. Puedes ver en las siguientes imágenes el resultado.

image image

Ahora veamos el código del botón buscar, el que permite ir a buscar los valores al servicio que retorna JSON. Primero que nada, el handler del Boton, que simplemente valida que se ingrese un precio y luego instancia el objeto WebClient que se va a encargar de manejar el handler una vez que se haya realizado la conexión, luego llamamos al método GetProductos con el parámetro precio.

private void button1_Click(object sender, RoutedEventArgs e)
{
    if (tx_precio.Text != string.Empty){
       string precio = tx_precio.Text;
       productClient = new WebClient();
       productClient.OpenReadCompleted += new OpenReadCompletedEventHandler
                                         
(productClient_OpenReadCompleted);
       GetProductos(precio);
    }else{
       tx_resultados.Text = "Ingrese un número válido.";
    }
}

El siguiente método se encarga de hacer la petición a la dirección correspondiente (revisa el numero de puerto de tu iis express), pasaremos el parámetro precio por la Url y hacemos la llamada asíncrona( recuerda que en WP7 tiene que ser Asíncrono, no puedes hacerlo de otra forma, esto va en directo beneficio a la experiencia del usuario final)

private void GetProductos(string precio)

{

string requestUri = "http://localhost:60191/DemoWS.cshtml?precio=" + precio;

Uri uri = new Uri(requestUri);

productClient.OpenReadAsync(uri);

}

 

Ahora veamos lo último, en el siguiente método puedes ver que recibimos la respuesta, si es nula, bueno , es que se jodió la comunicación, nada que hacer, enviamos un error y terminamos, en otro caso serializamos el objeto que es una lista de objetos productos, tal como lo indicamos en Razor con WebMatrix. Recorremos la lista de productos que ya está tipada y podemos acceder a sus atributos, con esto es fácil asignarlos a controles de WP7, en mi caso lo hice simple y fue con un textbox.

void productClient_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e){

 
if
(e.Error != null)

{

    tx_resultados.Text = "Ocurrio un error!";

    return;

}

var serializer = new DataContractJsonSerializer(typeof(List<Producto>));

var s = (List<Producto>)serializer.ReadObject(e.Result);

String resultado = "";

foreach (Producto p in s)

{

    resultado = p.Nombre + " " + p.Precio +"\n" + resultado;

  }

if (resultado == null)

  {

    tx_resultados.Text = "No hay productos con un precio mayor o igual " +
    tx_precio.Text;
  }else{

    tx_resultados.Text = resultado;

   }

}

 

 

public class Producto

{

    public string Nombre { get; set; }

    public string Precio { get; set; }

}

 

y listo! con esto ya podemos enviar y recibir datos desde nuestro WP7 a WebServices desarrollados con WebMatrix y devolviendo JSON, que mejor? en serio, esta es la plataforma de desarrollo móvil mas sencilla para programar (desarrollo también para Android e iOS, se lo que digo Sonrisa)

Si quieres descargar el código de WebMatrix y de WP7 lo puedes hacer acá:

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

Espero que te sirva!
Saludos!
@chalalo

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

Material Charla :Desarrollo de Web Apps para WP7 con WebMatrix

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

Y vamos por la Flisol 2012, Concepción- Chile

image

Yes!, el sábado 19 a las 10:00 AM estaré hablando sobre MongoDB y ASP.NET Web API + Jquery, con muchos ejemplos y demos. Recordemos de que ASP.NET Web API es un producto OpenSource al igual MongoDB .

Así que si quieres revisar una de las últimos productos del Team de ASP.NET trabajando junto a una base de datos noSQL y con nuestro archi conocido jQuery, nos vemos allá!

Acá está la URL para mayor información: http://concepcion.flisol.cl/ . Se realizará en la Universidad Andres Bello, Sede Concepción

Saludos!
PD: Voy a subir todo el material al blog.

@chalalo

[WP7 Tips] Parar la música al partir si tu app reproduce media

Bueno, no sabía como llamarle al post, pero es simplemente eso, subí una aplicación al market y fue rechazada, el problema? es que se me debía dar la opción de parar la reproducción de media en el caso que se esté reproduciendo algo, mi app utiliza la reproducción de sonido mediante Microsoft.Xna.Framework.Media, entonces,  en pocas palabras, es requisito que manejemos la reproducción de audio en nuestras apps que también lo ocupan.

Entonces, lo que se puede hacer es consultar si es que se está reproduciendo media y si es así parar la reproducción de media, esto lo voy a hacer en el siguiente código:

public main()

{

   InitializeComponent();

    if (Microsoft.Xna.Framework.Media.MediaPlayer.State ==  Microsoft.Xna.Framework.Media.MediaState.Playing)

  {

     if (MessageBox.Show("Actualmente se esta reprouciendo Media, Desea pausar la reproducción? Haga Click en  \"Aceptar\" para pausar la reproducción en curso, \"Cancelar\" para seguir reproduciendo la música y continuar en Dead Dedo", "Reproducción de Media", MessageBoxButton.OKCancel) == MessageBoxResult.OK)

  {

   try

     {

        FrameworkDispatcher.Update();

        Microsoft.Xna.Framework.Media. MediaPlayer.Pause();

     }catch (Exception ex)

     {

        MessageBox.Show(ex.Message);

     }

   }

    else

      {

        App.Current.EnabledSound = false; 

      }

   }

}

Como vez inicialmente se consulta por que estado del mediaplayer, si esta reproduciendo, consultamos al usuario si es que desea pausar la música y seguir con la aplicación, en otro caso, se continuará con la reproducción de media y voy a parar el sonido de mi aplicación con el App.Current.EnabledSound=false, la cual no es nada más que una propiedad en el App.xaml.cs. Para acceder de manera más sencilla ocupo el siguiente código:

public static new App Current

{

    get { return Application.Current as App; }

}

 

public Boolean EnabledSound { get; set; }

Ahora antes de ejecutar un sonido , siempre consulto sobre el estado de la variable. Sin embargo en en algunos casos tenía atachado mediante código XAML el sonido a cierto comportamiento , como por ejemplo los botones:

 

<i:EventTrigger x:Name="trigger1"  EventName="Click"> 
    <eim:PlaySoundAction Volume="1" x:Name="lazer1" Souce="/sound/laser.mp3" />
</i:EventTrigger>

 

Le agregué al EventTrigger un nombre (x:Name) para que sea accesible fácilmente desde el código y poder deatacharlo:

 

if (!App.Current.EnabledSound)

{

     trigger1.Detach();

}

Bueno, luego de arreglar mi problema de esta manera, la aplicación fue aprobada Sonrisa

Espero que este tip te sea útil.

Saludos!

Posted: 7/5/2012 0:07 por Gonzalo Perez | con no comments
Archivado en:
[WebCast] Cómo desarrollar aplicaciones Web en Windows Phone 7 con WebMatrix

Hola, te quiero invitar al siguiente WebCast que voy a dictar Sonrisa

image

Windows Phone 7 ha llegado con un nuevo navegador Web de gran alcance para ayudarle a competir en el mercado de teléfonos inteligentes. Para los desarrolladores que les gusta codificar a mano su HTML, CSS, JavaScript y ASP.NET para crear páginas Web para móviles livianos, WebMatrix es la respuesta. En esta sesión usted aprenderá cómo utilizar WebMatix, la nueva sintaxis de Razor, IIS Express y SQL Server Compact 4.0 para crear aplicaciones Web móviles.

Al mismo tiempo, usted aprenderá importantes prácticas en Web Móvil de W3C, y cómo implementar estándares como XHTML Basic, ECMAScript Mobile Profile y CSS Mobile Profile, con lo que podrá apuntar a cualquier navegador de su teléfono inteligente con su contenido de la Web.

Veremos además como crear Servicios Web con WebMatrix y como consumirlos desde WP7.

Fecha:15/05/2012 Hora 14:00PM Bogotá – 15:00PM Chile

Inscríbete en:
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032513010&Culture=es-AR

Saludos!
@chalalo

Posted: 5/5/2012 5:27 por Gonzalo Perez | con no comments
Archivado en: ,,
ASP.NET WebForm–Creando un User Control para video HTML5

Hola, hace poco tuve la oportunidad de dar una charla en las oficinas de Microsoft Chile, junto a Pablo Berton, en donde estuvimos hablando de HTML5 sobre nuestros sitios web sin perder la compatibilidad, obviamente Modernizr salió en el juego. Entre las demos, me pareció muy interesante  la de crear Controles de usuario con retro compatibilidad, el ejemplo que vamos a revisar tiene que ver con crear un control para mostrar video, y dependiendo de las capacidades del navegador , vamos a presentar el formato correspondiente, esto último, no lo haremos con Modernizr, si no con la propia detección que provee el tag video.
Vamos a crear entonces, un proyecto de WebForm en la cual voy a agregar un nuevo user control al que llamaremos VideoUserControl.
En el código del control vamos a agregar las propiedades públicas para que podamos modificar  desde el código declarativo estas propiedades del html.


Public Class VideoUserControl

    Inherits System.Web.UI.UserControl

    <BrowsableAttribute(True)> Public Property Width As Integer

    <BrowsableAttribute(True)> Public Property Height As Integer

    <BrowsableAttribute(True)> Public Property Src As String

End Class

Si vemos el código declarativo, se nos aclara el panorama de lo que queremos hacer:

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="VideoUserControl.ascx.vb" Inherits="WebFormDemoHTML5Video.VideoUserControl" %>

<video autoplay="autoplay"
       height="<%=Height %>"
       preload="auto" 
       width="<%=Width %>
">

    <source src="media/<%=Src %>.mp4" type="video/mp4" />

    <source src="media/<%=Src %>.webm" type="video/webm" />

    <source src="media/<%=Src %>.ogv" type="video/ogg" />

    <object data="media/<%=Src %>.swf" 
       height="<%=Height %>" type
="application/x-shockwave-flash"

       width="<%=Width %>">

          <param name="allowfullscreen" value="false">

          <param name="allowscriptaccess" value="always">

          <param name="flashvars" value="file=media/<%=Src %>.swf">

          <!--[if IE]>

             <param name="movie" value="media/<%=Src %>.swf">

          <![endif]-->

        <img alt="Advertisement" 
            height="<%=Height %>"
            src="media/<%=Src %>.jpg"
            width="<%=Width %>"
/>

    </object>

</video>

Podemos apreciar que las propiedades se ocupan justamente para dar formato y elegir la fuente del video, tenemos mp4,webm, ogv , luego en el caso que ninguno de estos formatos se soporten vamos por flash, y si flash no está instalado o está deshabilitado, agregamos una imagen.

Obviamente tenemos estos formatos en nuestra solución:

image_thumb1

Ahora vamos a utilizar y probar nuestro control.Vemos con con opera, esta reproduciendo el video webm( es difícil verlo en una foto, pero créeme)

image_thumb3

Ahora vamos a probar con IE9 con modo de explorador  internet explorer 7

image

Vemos que esta reproduciendo el Flash, y por último, si desactivamos el plugin de flash en nuestro explorador:

image_thumb7

Veremos lo siguiente:

image_thumb9

No hay mucha diferencia verdad, pero esta vez, es una imagen, entonces el objetivo se logra al mostrar la publicidad en distintos formatos, utilizando video html5 y los correspondientes fallback para ofrecen compatibilidad.

Espero que te sirva!
Saludos!
@chalalo