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

Iniciando con OWIN, el inicio de algo grande.

Hola que tal?, en esta serie de Post me voy a enfocar de una manera práctica a este nuevo “bicho” que está apareciendo, y que se va a quedar por un buen rato, que es OWIN. Si no sabes lo que es, te recomiendo que leas los siguientes Links antes de seguir:

Bueno, asumo que ya los leíste, si no, voy a hacer un pequeño resumen de por que es necesario una implementación de este tipo, y la justificación no es inventada por mí, si no voy a escribir lo que dice el Team de ASP.NET.

ASP.NET ha estado presente aproximadamente 10 años, y sin duda a permitido la creación de muchas y muy buenas web apps, (Sitios y Servicios). Pero ya las estrategias de desarrollo han evolucionado, y si bien ASP.NET Web API y MVC responden  a esta evolución de excelente manera, hay que dar un paso más en esta evolución, es aquí donde aparece el proyecto Katana, el cual proporciona un conjunto de componente para las aplicaciones ASP.NET que le permite ser flexible, ligero, portátil y proporcionar un mejor rendimiento, todo esto pensado para la nube.

Luego de haber leído los artículos anteriores, se nos viene a la cabeza de inmediato node.js, que llamó la atención de inmediato con la sencillez de este framework para crear y ejecutar un servidor web. Bueno, los objetivos de katana se enmarcan a la luz de Node.js, no hay misterio ni problemas al reconocerlo,resumir que Katana trae mucho de los beneficios de Node.js sin forzarnos a los desarrolladores, tirar todo lo que ya sabemos de las aplicaciones con ASP.NET. Entonces la idea es que empezar con el proyecto Katana debe ser igual de fácil que introducirse en Node.js.

Vamos a comenzar con el código, y verás, al igual que tú , estoy aprendiendo, así que espero que nada resulte a la primera, ya que encuentro de mucha utilidad, aprender de los errores.

 

image

 

Luego debemos instalar el paquete de Microsoft.Owin.Host.SystemWeb, el cual nos proporciona un servidor OWIN que ejecuta las canalizaciones de solicitudes de ASP.NET (si no tienes claro esto, insisto, lee los artículos Sonrisa)

image

Se van a instalar dependencias como la Microsoft.Owin, que provee helpers y métodos para desarrollar aplicaciones OWIN. Podemos utilizar estos helpers para crear rápidamente un servidor que responda “Hola Mundo”. Vamos a crear una clase y se llamará Startup, puedes notar que se instaló un template:

image

Con lo cual nos crea la estructura básica y le vamos agregar un poco más de código:

 

using System;

using System.Threading.Tasks;

using Microsoft.Owin;

using Owin;

 

[assembly: OwinStartup(typeof(Demo1.Startup))]

 

namespace Demo1

{

    public class Startup

    {

        public void Configuration(IAppBuilder app)

        {

            app.Run(context =>

            {

               context.Response.ContentType = "text/html";

               return context.Response.WriteAsync("<h1> Hola Mundo!!</h1>");

            });

        }

    }

}

Al ejecutarlo tendremos el siguiente resultado:

image

Y si, igual de sencillo que Node.js, pero sigamos avanzando. Una de las máximas de OWIN es que exista una des acoplamiento de componentes como el IIS, es decir, al contrario del ejemplo anterior, que ocupamos la canalización de request de ASP.NET, el cual se soporta en System.Web. Esto de todas maneras no es para nada malo, de hecho añade un gran valor, ya que nos permite tener la flexibilidad y composición de pipeline de OWIN combinado con las capacidades de gestión y madurez de IIS.  Pero hay otros escenarios, en donde no es necesario IIS, por ejemplo , es posible que necesitemos que un servicio del SO tenga una puerta escuchando peticiones Web para configuración , y no queremos tener montado un IIS o un apache solo para eso, si no que el mismo servicio sea el host.

Pasar de portar el host desde IIS a una app de linea de comandos, vamos a requerir agregar un nuevo paquete nuget con el servidor y sus dependencias para iniciar el host bajo esta modalidad. Para esto vamos a tener nuestro servidor en un host Katana llamado OwinHost.exe, y utilizaremos un HTTPListener basado en Katana. Paso siguientes entonces en crear una app de consola y agregar los paquetes correspondientes:

image

Agregamos una clase de partida quedando así:

using Microsoft.Owin.Hosting;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

 

namespace KatanaDemo2

{

    class Program

    {

        static void Main(string[] args)

        {

            using (WebApp.Start<Startup>("http://localhost:8888"))

            {

             Console.WriteLine("Presiona una tecla para detener al server");

             Console.ReadKey();

            }

        }

    }

}

Con esto le estamos diciendo, que escuche los requerimientos por el puerto 8888 de servidor, en este caso mi equipo. Como puedes apreciar , no hay ninguna referencia hacia System.Web. La clase startup es exactamente igual que el escenario anterior, lo probamos y listo!

image

Y esto es solo el inicio, vamos a crear ejemplos mucho más sofisticados, como ves es un cambio grande pero necesario en términos de arquitectura. Así que nos iremos paso a paso.

Espero que te sirva!

Nos vemos @chalalo.

Posted: 19/10/2013 6:18 por Gonzalo Perez | con no comments
Archivado en: ,
[Sin olvidar] Web Forms, como detectar y redireccionar usuarios móviles.

Hola que tal?, en este post quería abordar el tema de Mobile y Web Forms, ya hemos visto las facilidades que existe con ASP.NET MVC , o con MVVM, en donde tenemos vistas que, debido a que controlamos todo el código generado, podemos fácilmente incluir algún framework como jqueyrmobile. Pero no hay que olvidar que existe una gran cantidad de sitios que utiliza y seguirá utilizando WebForms, de manera que es siempre necesario revisar el tema de como agregar la posibilidad de detectar los dispositivos móviles con esta tecnología y re direccionar a una vista consistente con un navegador móvil.

Una de las opciones que tenemos en tener un crear una Master Page específica, en donde podemos ocupar los mismos formularios, pero separamos en dos MasterPages, una con la vista normal y la otra con la versión móvil, esto nos permite tener estilos CSS y HTML  de nivel superior,(entiéndase doctype y metas específicos para móviles) , todo esto nos evita duplicar la lógica ya desarrollada

protected void Page_PreInit(object sender, EventArgs e)
{
      if (Request.Browser.IsMobileDevice)
             MasterPageFile = "~/Mobile.Master";
}

Ahora bien, el enfoque anterior, si bien es apropiado para ciertos escenarios, puede no ser adecuado cuando dicha lógica o flujo de trabajo de los formularios no se ajusta a una vista móvil, por ejemplo un carro de compras. En este caso vamos a requerir la creación de un WebForm independiente y exclusivo ara la vista móvil. Lo más usual es que creemos  una carpeta con el nombre “Mobilel” para dejar ahí todas las páginas para móviles ahí. Podemos crear un “segundo” sitio completo, con master pages, css, paginas, etc. Además como se supone una lógica simplificada, no es necesario replicar todo el sitio de escritorio y luego modificarlo, solo lo necesario y pueden compartir la misma lógica de negocio que las paginas de escritorio . Como consejo en esta etapa, te recomiendo tener una capa de negocios consistente ente ambas vistas, además de la utilización de WebServices que puedes acceder mediante jquery en vistas totalmente HTML, mucho más liviano que ocupar webcontrols dentro de un formulario móvil.

Generalmente es conveniente hacer la redirección a la vista móvil solo en la primera solicitud de su sesión de navegación, por las siguientes razones:

  • Facilidad para permitir a los usuarios acceder a la vista normal o de escritorio si así lo desean. Típicamente colocamos un link indicando “Versión de Escritorio”. En este caso, no habría redirección y consulta sobre si es un dispositivo móvil por cada postback.
  • Evita el riesgo de interferir con las solicitudes dinámicas de recursos compartidos entre las dos vistas(móvil y escritorio)

Para lo anterior, lo que debemos hacer, en el archivo Global.asax, es implementar en el método Session_start la siguiente lógica:

void Session_Start(object sender, EventArgs e)
       {
          HttpRequest httpRequest = HttpContext.Current.Request;
           if (httpRequest.Browser.IsMobileDevice)
           {
               string path = httpRequest.Url.PathAndQuery;
               bool isOnMobilePage = path.StartsWith("/Mobile/",
                                                     StringComparison.OrdinalIgnoreCase);
               if (!isOnMobilePage)
               {
                   string redirectTo = "~/Mobile/";
                   HttpContext.Current.Response.Redirect(redirectTo);
               }
           }
       }

Como puedes observar, lo primero que se hace es comprobar la información del httpRequest, de manera de verificar si el usuario  está navegando desde un móvil, luego mediante el path, comprobamos si estamos navegando dentro de nuestra sitio móvil, en el caso de que se cumpla de que estamos desde un móvil, pero no lo estamos en la vista móvil, lo re direccionamos a la vista adecuada.

Otro punto importante es el tema de cache de salida, ya que es posible que un usuario que se hubiese encontrado navegando en una pagina “X Escritorio” cause que se almacene cache para esa página, luego un usuario móvil visita la misma página, va a recibir el cache de salida de la página “X Escritorio” en su vista “X Movil”. Para evitar este problema, le podemos indicar a ASP.NET que varíe el cache de salida según si el usuario es móvil o de escritorio. Para esto agregamos en la declaraciones del webform:

<%@ OutputCache VaryByParam="*" Duration="60" VaryByCustom="isMobileDevice" %>

Con esto estamos indicando que vamos a indicar de manera customizada la variación del refresco del cache de salida en memoria, ahora lo que debemos hacer es agregar el siguiente método en el global.asax:

public override string GetVaryByCustomString(HttpContext context, string custom)
{

  if (string.Equals(custom, "isMobileDevice", 
                                            StringComparison.OrdinalIgnoreCase)) 
       return context.Request.Browser.IsMobileDevice.ToString();

return base.GetVaryByCustomString(context, custom);

}

Eso va a asegurar a los visitantes de nuestro sitio que no van a recibir una salida de cache generada por un usuario de escritorio.

Eso!, ven, no hay que olvidarse de WebForms, aun son muchos los desarrolladores que están con esta tecnología, recordemos también que ahora existe un solo ASP.NET, y tu elijes que condimentos tener en tu sitios.

Posted: 14/10/2013 2:54 por Gonzalo Perez | con no comments
Archivado en:
Ver las tablas creadas con Azure Mobile Services desde un cliente REST

Bueno, el titulo ya dice todo, vamos a ver el tema de como manipular los datos de las tablas desde un cliente REST, para esto, vamos a instalar PostMan para Chrome, puedes utilizar cualquier otro cliente, el que gustes.

image

Luego de instalado revisemos brevemente la REST API de Mobilse Services, esta esta basado en la siguiente estructura:

http://Mobileservice.azure-mobile.net/tables/*

En donde Mobileservice.azure corresponde a tu servicio móvil, luego se hace referencia a la tabla y luego a la tabla en particular. Para este ejemplo, utilizaré https://peliculassinet.azure-mobile.net/

Las acciones que vamos a poder realizar (según los permisos de usuarios ) son las siguientes:

image

Como vez, basados en los verbos HTTP, y la forma de acceder es bastante sencilla. Veamos las tabla Películas de mi servicio móvil en el portal:

image

A esta tabla vamos ejecutar las operaciones, pero primero debemos tener la clave del servicio para poder acceder a la API de MS, para eso vamos a al portal del AMS y pinchamos en:
image

Luego se va a abrir un panel de selección de clave:

image

y copio la clave de la aplicación, luego nos vamos a PostMan y seteamos nuestro entorno para poder generar la comunicación, para esto, debemos escribir la URL y muy importante, agregar en el header el Parámetro X-ZUMO-APPLICATION , que va a tener el valor de la llave, sin esto, no tendremos la autorización para acceder a las tablas. Puedes ver más información acá: http://msdn.microsoft.com/en-us/library/windowsazure/jj677198.aspx

image

El Preview del request generado es:

GET /Tables/Peliculas/ HTTP/1.1
Host: peliculassinet.azure-mobile.net
X-ZUMO-APPLICATION: OUkhVzulGEkkSCtMGpkVoQbEpFVJKt97
Cache-Control: no-cache
Postman-Token: 278e4f45-e557-7516-2fe9-fef34c703763

Ahora ya podemos hacer un POST también, así que vamos a setar la opción en post y agregar el JSON

image

Esto de devuelve el mismo objeto, indicándome el id generado y si voy a mi panel, veremos el registro creado:

image

Esto mismo lo puedes hacer con Javascript, Jquery o el framework que quieras, como puedes ver, es bastante sencillo y nos abre muchas posibilidades y escenarios de uso

Saludos!
@chalalo

Posted: 27/9/2013 16:52 por Gonzalo Perez | con no comments
Archivado en:
Material y temas de la Charla de Windows Azure Mobile Services

image

Hola que tal, les quiero compartir el material de la charla de Azure Mobile Services, se que quedaron varios temas fuera, de los que voy a abordar acá en el Blog , como el tema de los permisos sobre las tablas y Auth. Pero por mientras les copio la URL en donde está el video del WebCast:

Pincha acá para ver el video:https://www150.livemeeting.com/cc/MSEvents/view?cn=guest&id=1032559265&pw=3F8D0830

El Demo visto en la charla lo puedes descargar desde acá:

Los artículos relacionados sobre el demo, los encuentras a continuación:

Parte 1: http://geeks.ms/blogs/gperez/archive/2013/07/31/azure-mobile-services-ejemplo-pr-225-ctico-con-html5-js.aspx

Parte 2: http://geeks.ms/blogs/gperez/archive/2013/08/02/comenzando-azure-mobile-services-ejemplo-pr-225-ctico-con-html5-js-parte-2.aspx

Parte 3:http://geeks.ms/blogs/gperez/archive/2013/08/08/comenzando-azure-mobile-services-ejemplo-pr-225-ctico-con-html5-js-parte-3.aspx

Saludos!,
Chalalo

Posted: 26/9/2013 16:16 por Gonzalo Perez | con no comments
Archivado en:
Del Baúl del Recuerdo: Crear Imágenes con ASP.NET WebForm

Hola, entre tanta característica nueva de ASP.NET, de repente son varias las consultas que me llegan sobre algo en particular, en este caso, fue sobre como crear imágenes con Asp.net Webform, y como tuve que hacer algo parecido, aprovecho de escribirlo.

El problema era el siguiente, tenía que ocupar una impresora térmica de pulseras, e imprimir cierta información, si bien en la impresora se pueden enviar comandos, estoy en un cliente web, por lo que solo tenía acceso a window.print, (no tenía acceso a soluciones como las de Crystal Report que, según configuración, utilizan un activeX para enviar los datos a la impresora local). Además como era de pulsera tenia que imprimir de forma vertical, y si, sin depender de la configuración de la impresora ni utilizar CSS3, ya que debía ser compatible conversiones antiguas de IE, ni ocupar scripts. Debe permitir imprimir y cerrar automáticamente la ventana.

Entonces pensé que lo mejor era crear una imagen con el texto que quería y luego rotarla, luego implementar un poco de javascript para cerrar la ventana, veamos como queda esto:

<body onload="imprimir();">

    <form id="form1" runat="server" >

    <div>

      <img runat="server" id="pulsera" /></div>

   </form>

 

</body>

</html>

<script type="text/javascript">

   function imprimir(){

    window.print();

    setTimeout(function () {

        window.close();

    }, 6000);

   }

</script>

Esta es la pantalla que se abre como popup, se que hay mucho mejores formas de hacer esto, pero lo estoy simplificando. Tengo una imagen tiene por id=”pulsera”, y se llama en el onload del body ala función imprimir, la que imprimirá el documento y luego de 6 segundos (pueden bajar el tiempo) va a cerrar la pantalla. El comportamiento ayuda bastamente, se abre la pantalla de impresión y puede que pasen los 6 segundos antes de apretar imprimir, pero debido a que la pantalla de dialogo está abierta, no pagina no se cierra, una vez que pones imprimir, se ejecuta la petición de cerrarla.

Ahora bien, si me preguntan por que no utilicé jquery para esto, respuesta: porque es un despropósito utilizarlo para utilizarlo en un 0,000001%

Veamos el código VB.NET Asociado:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

  If Not Page.IsPostBack Then

    Dim nombre As String = Request("nombre")

    Dim rut As String = Request("rut")

    Dim edad As String = Request("edad")

    Dim estab As String = Request("estab")

    Dim parametros As String = String.Format("?nombre={0}&rut={1}&edad={2}&estab={3}", nombre, rut, edad.Replace(")", "").Replace("(", ""), estab)

    pulsera.Src = "GeneraPulseraIMG.aspx" & parametros

End If

End Sub

Puedes notar que la ruta de la imagen es en realidad una página asp.net a la que se le pasan los parametros necesarios para generar la imagen. Ahora veamos la página generaPulseraIMG.aspx

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        '    Dim texto As String = Request("texto")

 

        Dim nombre As String = Request("nombre")

        Dim rut As String = Request("rut")

        Dim edad As String = Request("edad")

        Dim estab As String = Request("estab")

 

        Dim objLienzo As Bitmap = New Bitmap(800, 70)

        Dim objGraficar As Graphics = Graphics.FromImage(objLienzo)

        Dim objColor As System.Drawing.Color

        objColor = Color.White

        Dim objFont As New Font("Verdana", 12)

        Dim objCoordenadas As New PointF(50, 10)

        Dim objPincelFondo As New SolidBrush(objColor)

        Dim objPincelTexto As New SolidBrush(Color.Black)

        objGraficar.FillRectangle(objPincelFondo, 0, 0, 800, 70)

 

        'TITULO

        objGraficar.DrawString(estab, objFont, objPincelTexto, objCoordenadas)

       

'PACIENTE

        Dim objCoordenadasPaciente As New PointF(50, 26)

        Dim objFontPaciente As New Font("Verdana", 10)

        objGraficar.DrawString("Paciente:" & nombre, objFontPaciente, objPincelTexto, objCoordenadasPaciente)

 

        'TERCERA LINEA

        Dim objCoordenadasTercera As New PointF(50, 40)

        objGraficar.DrawString("Rut:" & rut & " Edad:" & edad & " ", objFontPaciente, objPincelTexto, objCoordenadasTercera)

      

        objLienzo.RotateFlip(RotateFlipType.Rotate270FlipXY)

        Context.Response.ContentType = "image/jpeg"

        objLienzo.Save(Context.Response.OutputStream, ImageFormat.Jpeg)

    End Sub

Puedes ver que esta página es la que genera la imagen utilizando el namespace System.drawing de manera de crear un lienzo,darle dimensiones, y graficar Sonrisa. Grafíco las 3 líneas y luego con RotateFlip, roto la imagen, finalmente el content-type es una imagen, para que pueda ser fuente del objeto imagen de la página anterior y listo (el tema de los tildes solo es codificación):

image

Posted: 13/9/2013 17:46 por Gonzalo Perez | con no comments
Archivado en:
Invitacion a Evento - Webcast MSDN Latam: Aplicaciones Web en la nube con alimentación en Minutos con Windows Azure Mobile Services‏

image

Hola!, los quería invitar a este evento en donde voy a ser speaker, se trata de crear aplicaciones en la nube con Azure Mobile Services, en donde vamos a revisar los conceptos necesarios para comenzar y a a desarrollar una aplicación web móvil que aproveche la potencialidad de esta plataforma. También revisaremos como crear apps con Android y Windows Phone que permitan conectarse a esta plataforma.

Fecha:viernes, septiembre 20, 2013, de 5:00PM a 6:00PM

Los datos para inscribirse!
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032559265&Culture=es-AR&community=0

Nos vemos ahí!

Posted: 12/9/2013 15:40 por Gonzalo Perez | con no comments
Archivado en:
Tips-Utilizar WebServices con JSONP, ejemplo práctico

Hola que tal, acá algo que te puede servir. Cuando queremos hacer una petición por ajax, y estamos en otro dominio, te podrás haber percatado que el server envía un bonito mensaje “Access to restricted URI denied”, y es que por motivos de seguridad parece lógico, cuando todo esto partió, que Ajax no funcione en dominios distintos al que lanza el request, pero sinceramente, hoy en día se hace necesario el poder usar servicios web desde el lado del cliente a dominios diferentes. Para estoy hay varias técnicas, como Cors, XMLHttpRequest Level 2 y JSONP (JavaScript Object Notation with Padding), que básicamente es la llamada mediante JSON a dominios diferentes, en este articulo vamos a ver esta última técnica con un ejemplo sencillo(y por esta vez, sin mucha teoría), personalmente hace un tiempo tuve que implementarlo y fue bastante sencillo.

Utilicé jQuery para la llamada, que debe seguir ciertos patrones:

  • Tu llamada hazla con el verbo http GET
  • Setea crossDomain en true
  • Define la URI con el primer parametro como callback
  • Setea el DataType como “JSONP”

function LlamadaJSONP(param1, param2){

   $.ajax({
          type: "GET",
          crossDomain: true,
          contentType: "application/json; charset=utf-8",
      url: http://otrodominio/myws.asmx/NombreWebmethod?callback=?,
          data: {ID_Param1: param1,ID_Param2: param2 },
      dataType: 'jsonp',
          success: function(msg) { 
                    AjaxOK(msg);
                 },
                 error: AjaxError
            });

            function AjaxOK(result) {
                alert(result.d);
            } 
            function AjaxError(result) { 
                 alert("ERROR " + result.status + ' ' + result.statusText);
             }
}    
        
La variable callback nos sirve para que se devuelva el JSON como una llamada a una función. Esto nos permite el NO hacer una llamada Ajax real , si no incluir el archivo como script (y ahi si se permite las llamadas a otros dominios).

El Webmethod simplemente lo marqué con los siguientes atributos(no quise agregar el cuerpo del webmethod, ya que no influía para el ejemplo)

<ScriptMethod(UseHttpGet:=True,ResponseFormat:=ResponseFormat.JSON)

Puede que te encuentres con el siguiente error: Request format is unrecognized for URL unexpectedly ending in XXXXXX, para esto, lo solucionas agregando en el Web.config

<webServices>
      <protocols>
        <add name="HttpGet"/>
        <add name="HttpPost"/>
      </protocols>
</webServices>

y listo!, funcionando sin problemas Sonrisa, problema del dominio cruzado solucionado.
Espero que te sirva
@chalalo!

Posted: 5/9/2013 7:24 por Gonzalo Perez | con no comments
Archivado en: ,
Grabación de WebCast HTML5 y Apps híbridas.

Hola amigos, les dejo la grabación del WebCast llamado:” Todos a bordo para el Futuro de HTML5 Mobile y Aplicaciones web híbridas para Windows Phone 8 y tabletas de Windows”, Esta sesión fue más bien de tips sobre como enfrentar los desafíos del desarrollo con HTML5 en Dispositivos Móviles.

Espero que les sirva!,

@Chalalo

Invitación a Evento- MSDN - Todos a bordo para el Futuro de HTML5 Mobile y Aplicaciones web híbridas para Windows Phone 8 y tabletas de Windows

Hola!,los quería invitar al siguiente evento :

Windows 8 y Windows Phone 8 frente a este desafío mediante la inclusión de Windows Internet Explorer 10 con aceleración por hardware de HTML y los gráficos, compilación JIT JavaScript, seguridad mejorada y un gran soporte para HTML 5. En esta sesión, se muestra Internet Explorer 10 capacidades proporcionadas por el Grupo de Trabajo de Aplicaciones Web W3C incluyendo IndexedDB y almacenamiento Web de datos sin conexión, enchufes Web para la comunicación bi-direccional, Web Workers para roscar y XmlHttpRequest para llamar a los servicios web. Tome sus páginas web sin conexión con caché de la aplicación y hacer que se reconoce la ubicación a través de la API de geolocalización. Te mostramos cómo hacerlo, así como la forma de construir aplicaciones web híbridas Sonrisa

Fecha: 29/08/2013
Hora: 04:00 PM (GMT-05:00 Colombia, Panama). Chile 3:00PM
Si tiene dudas con la conversión de zonas horarias, por favor haga clic aquí

URL de Registro para Asistentes
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032559571&Culture=es-AR&community=0

Comenzando Azure Mobile Services–Ejemplo Práctico con HTML5 + JS [Parte 3]

Vamos a profundizar un poco más en el tema de los Script del servidor para el manejo de las acciones, en el post anterior, vimos como validar en la acción de insertar el tamaño de las entradas del nombre y del tipo.

Ahora vamos a realizar puede que no tenga mucho sentido, pero el tema es mostrar un escenario en donde necesitemos leer de un tabla un registro para insertarlo en otra antes de borrar.  Para esto voy a crear otra tabla que se llame “Papelero” , la idea es que antes de borrar un registro en la tabla Películas, leamos el registro, luego lo insertemos en la tabla “Papelero”, súper simple Sonrisa .Puedes ver en la siguiente imagen que tengo dos tablas, son idénticas entre sí.

image

Luego vamos a Datos y a la pestalla de Script y seleccionamos Eliminar:

image

El script es el siguiente:

function del(id, user, request) {
  var Peliculas = tables.getTable('Peliculas');

    Peliculas
        .where({ id: id})
        .read({ success: CopiaRespaldo });

 

    function CopiaRespaldo(data) {
        if(data.length > 0) {
           var obj = {
                Nombre: data[0].Nombre,
                Votos: data[0].Votos,
                Tipo: data[0].Tipo
            };

             var Papelero = tables.getTable('Papelero');
              Papelero.insert(obj, {
                success: insertComplete,
                error: errorHandler
            });
 

    } else {
            console.log('Error, Registro no encontrado');
           
request.respond(statusCodes.NOT_FOUND, 'Error, Registro no encontrado');

       }

    }

   function insertComplete(){
      //Ahora borramos, cuando el insert esté ok
      request.execute();
  }

   function errorHandler(){
       //En Caso de error de inserción....
       console.log('Error, No se pudo insertar');
       request.respond(statusCodes.ERROR, 'Error, No se pudo insertar');

  }

}

Puedes ver que lo primero que hacemos en hacer referencia hacia la tabla, luego leer de la tabla los registros que coincidan con la condición del Id, una vez que se se hace la llamada la función CopiaRespaldo, que revisa si existe un dato asociado para luego crear un objeto (obj) para ser insertado en la tabla Papelero,con los datos de la lectura de la tabla Películas. Puedes notar que se pasa como argumento una colección, por lo que, en mi caso, la lista devuelve un único elemento, lo accedo mediante su índice.  Para la inserción en la tabla Papelero, primero hacemos referencia a la tabla y realizamos la inserción, una vez que esta ok, hacemos el request.execute, que ejecuta la acción de borrado.

Por ejemplo, ingreso la película Superman y la quiero borrar:

image

Presiono borrar y luego verás el registro almacenado en la tabla Papelero:

image

Bastante sencillo, puedes ver más información de los Script Para Azure Mobile Services en la documentación:
http://msdn.microsoft.com/en-us/library/windowsazure/jj554226.aspx

Luego vemos el tema de los permisos Sonrisa
Saludos,
@chalalo

Comenzando Azure Mobile Services–Ejemplo Práctico con HTML5 + JS [Parte 2]

Hola, que tal, vamos a continuar con este tutorial de iniciación de Azure Mobile Services con HTML y JS,  en el post anterior, vimos como insertar datos y listar la cantidad de registros desde la tabla de AMS. Esta vez vamos a ver como listar, borrar y modificar datos. La vista a crear tiene la siguiente gráfica:

image

Además cuando presionen borrar, vamos a mostrar este tipo de confirmación, como ves, todo hecho con jquerymobile.

image

Hay algunos temas de gráfica que no son relevantes para el tutorial, pero de todos modos voy a incluir los fuentes por si los necesitas.

Veamos el data-role con JQM, es muy sencillo, solo tenemos un listview en donde vamos a agregar los datos que  vamos a recuperar desde AMS, luego tenemos un div data-role dialog, para crear el cuadro de diálogo de confirmación de borrado. Finalmente vamos a incluir los script de MobileServices y el listado.js, que es donde vamos a tener la lógica de procesamiento de la UI.

<div data-role="page">
   <div data-role="header">
    <h1>Listado Peliculas</h1>
    <a href="insertar.html"  data-rel="external" data-ajax="false"
      
data-
theme="b" data-role="button">Agregar</a>
      </div><!-- /header –>
      <div data-role="content">

      <div id="cargado"></div>

      <ul data-role="listview" data-count-theme="c" data-inset="true"

           id="lista_peliculas"></ul>

      <p id="cantidad"></p>

      </div><!-- /content -->

      <div data-role="footer">

             <h4>Chalalo.cl</h4>

      </div><!-- /footer -->

        </div><!-- /page -->

          <!-- /Dialogo -->

          <div data-role="dialog" id="sure" data-title="Esta Seguro?">

            <div data-role="content">

                <h3 class="sure-1">???</h3>

                <p class="sure-2">???</p>

                <a href="#" class="sure-do" data-role="button"
                  
data-theme="r" data-rel="back">Si</a
>

                <a href="#" data-role="button" data-theme="c"
                  
data-rel="back">No</a
>

            </div>

        </div>

        <script src="https://peliculassinet.azure-mobile.net/client/MobileServices.Web-1.0.0.min.js"></script>

        <script src="listado.js"></script>

Veamos ahora el archivo listado.js

$(function () {
    var client = new WindowsAzure
                 .MobileServiceClient('https://peliculassinet.azure-mobile.net/'
,'OUkhVzulGkkdtMGpkVoQbEpFVJKt97'
),
    TablaPeliculas = client.getTable('Peliculas');
 
 
    function ObtenerPeliculas() {
        cargando(true);
        TablaPeliculas.read().then(function (peliculaItems) {
            var votos = 0;
            var listItems = $.map(peliculaItems, function (item) {
                votos = votos + item.Votos;
                return $('<li>').attr('data-votos', item.Votos)
                    .attr('data-id', item.id)
                    .append($('<span>').attr('class', 'ui-li-count')
                                       .text(item.Votos))
                    .append($('<h2>').append(item.Nombre)
                                     .append($('<p>').text("-" + item.Tipo))
                                     .append("<br>")
                                       .append($('<button>')
                                             .attr('class', 'item-borrar')
                                             .attr('data-inline', 'true')
                                             .attr('data-theme', 'r')
                                             .attr('data-icon', 'delete')
                                             .text('Borrar'))
                                     .append($('<button>')
                                             .attr('class', 'item-votar')
                                             .attr('data-inline', 'true')
                                             .attr('data-theme', 'b')
                                             .attr('data-icon', 'star')
                                             .text('Votar')));
            });
 
            $('#lista_peliculas').empty().append(listItems)
                                 .toggle(listItems.length > 0);
            $('#cantidad').html('<strong>' + peliculaItems.length +
                               '</strong> Peliculas(s) - <strong>'
                                 + votos + '</strong> Votos');
            $('#lista_peliculas').listview("refresh");
            $('#lista_peliculas').trigger("create");
            $('.item-votar').button('refresh');
            cargando(false);
        }, handleError);
    }
 
    function handleError(error) {
        var text = error + (error.request ? ' - ' + error.request.status : '');
        alert(text);
    }
 
    function getPeliculaId(formElement) {
        return Number($(formElement).closest('li').attr('data-id'));
    }
 
    function getVotos(formElement) {
        return Number($(formElement).closest('li').attr('data-votos'));
    }
 
    $(document.body).on('click', '.item-votar', function () {
        cargando(true);
        TablaPeliculas.update({ id: getPeliculaId(this),
Votos: getVotos(this) + 1 }).then(ObtenerPeliculas()
,
handleError
);
    });
 
 
    $(document.body).on('click', '.item-borrar', function () {
        cargando(true);
        var idPelicula = getPeliculaId(this);
            confirmacion("Esta Seguro"
                         , "Desea Borrar la Pelicula"
,
"Si"
                         , function () {
            TablaPeliculas.del({ id: idPelicula })
                         .then(ObtenerPeliculas, handleError);
        });
        cargando(false);
    });
 
    function cargando(mode) {
        mode ? $("#cargado")
        .html("<img src='ajax-loader.gif' />") : $("#cargado").html('');
    }
 
    function confirmacion(texto1, texto2, button, callback) {
        $("#sure .sure-1").text(texto1);
        $("#sure .sure-2").text(texto2);
        $("#sure .sure-do").text(button).on("click.sure", function () {
            callback();
            $(this).off("click.sure");
        });
        $.mobile.changePage("#sure");
    }
 
    ObtenerPeliculas();
});

 

Vamos por parte en el código, al igual que el ejemplo del post anterior, debemos agregar la URL y la clave de la aplicación, luego obtenemos la referencia a la table peliculas con:

  TablaPeliculas = client.getTable('Peliculas');

Ahora si revisamos la funcion ObtienePeliculas nos damos cuenta que realizamos una iteración con .map en donde vamos agregando a un listado (listItem), este listItem se compone por elementos li cuyos atributos fui creando mediante jquery. Para que el render de los elementos <li> y el de los botones que en el están contenidos en este elemento, debemos escribir las siguientes líneas de código, que nos permiten generar el render en tiempo de ejecución:

  $('#lista_peliculas').listview("refresh");
  $('#lista_peliculas').trigger("create");
  $('.item-votar').button('refresh');
Utilizo las siguientes funciones para obtener el Id y los Votos desde el lista, puedes notar que
 están
definidos como atributos HTML5 compatibles, y son fáciles de acceder:
 function getPeliculaId(formElement) {
        return Number($(formElement).closest('li').attr('data-id'));
    }
 
 function getVotos(formElement) {
        return Number($(formElement).closest('li').attr('data-votos'));
 }
Ahora veamos las funciones que ocurren cuando se presiona votar y cuando se presiona
 eliminar. La primera función, que permite votar, llama a el método Update, con el parámetro Id,
obtenido de la función getPeliculaId y los votos, a los cuales le sumo + 1, cuando esté todo ok
 llamo a la función ObtenerPeliculas para obtener nuevamente el listado y se vean reflejados
 los cambios, o si hay un error, será manejado por la función handleError.
$(document.body).on('click', '.item-votar', function () {
    cargando(true);
    TablaPeliculas.update({ id: getPeliculaId(this),
Votos: getVotos(this) + 1 }).then(ObtenerPeliculas(), handleError
);
 });
 
Esta función al permite borrar un registro llamando al metodo <del> de la
tabla películas, y obtiene el Id del la función getPeliculaId, la función confirmación solo levanta el
cuadro de dialogo con las opciones , y permite capturar la respuesta del usuario, es por ello que 
si el usuario presionó en la opción SI, entonces ejecutamos el método borrar de la tabla. Hacemos lo
mismo que en el método anterior, si esta todo ok, volvemos a obtener las películas para que se 
reflejen los cambios en la UI.
 
$(document.body).on('click', '.item-borrar', function () {
    cargando(true);
    var idPelicula = getPeliculaId(this);
    confirmacion("Esta Seguro", "Desea Borrar la Pelicula", "Si", function () {
    TablaPeliculas.del({ id: idPelicula }).then(ObtenerPeliculas, handleError);
  });
    cargando(false);
});
 
Para que lo pruebes en mas detalle te, dejo el código:

DESCARGAR EJEMPLO

Recursos:

Post Anterior:
http://geeks.ms/blogs/gperez/archive/2013/07/31/azure-mobile-services-ejemplo-pr-225-ctico-con-html5-js.aspx

Eso, espero que te sirva!, nos vemos en el siguiente tutorial de AMS (me quedan dos pendientes), luego lo haré para Windows Phone, Android e iOS.

Saludos!
@chalalo

Comenzando Azure Mobile Services–Ejemplo Práctico con HTML5 + JS [Parte 1]

Hola que tal?, en este post vamos a ver un pequeño ejemplo de como utilizar Azure Mobile Services con HTML + JS + JQueryMobile. AMS simplemente me parece genial, nos abstrae de la comprejidad de un backend para que nuestras apps puedan, un poco tiempo y con el mínimo esfuerzo, almacenar y acceder a recursos en la nube. Si quieres más información te recomiendo que veas estos excelentes videos del build 2013.

AMS permite en pocos pasos descargar una aplicación de ejemplo para HTML, IOS, Android , WP8 y Windows 8, que nos permitirá apreciar la funcionalidad. En mi caso,voy a hacer una app paso a paso de HTML, para no quedarnos solo con el ejemplo y entender como funciona.

Como es un ejemplo , hay cosas que quizás no te parezcan las más lógicas, pero es solo para mostrar algunas funcionalidades, entre las cuales tenemos:

  • Crear el servicio móvil (parte 1)
  • Listar los registros  (parte
  • Validar entradas en el servidor mediante javascript, que los campos nombre y tipo no sean menores, en su largo a 3, caracteres. (parte 1)
  • Modificar registros
  • Eliminar Registros

Gráficamente lo que realizaré será lo siguiente

image image[64]

Básicamente un listado, en donde se muestre una lista de películas, en donde podamos votar por ella o borrarla, además de un formulario de ingreso, como puedes ver, las dos páginas creadas con jQueryMobile.

Entonces, nos vamos con el tutorial Sonrisa

Azure Mobile Services.

Una vez que tengas tu cuenta, vas a poder a la opción de AMS, en mi caso, primero cree la base de datos PeliculasSinet_db:

image

Luego, con la opción Administrar cree la tabla que necesitaba para el ejemplo:

image

Luego seleccioné la opción de crear un nuevo servicio móvil:

image

Si no has creado la base de datos, vas a tener la oportunidad de crearla

image

y luego seleccioné la base de datos que había creado (seleccioné la opción gratis de 20mb)

image

Y listo, tenemos ya el servicio móvil, puedes ver que al lado del nombre hay una flecha, con la cual podremos entrar a las opciones del servicio movil.

image

En esta parte verás que se ofrece soporte para crear una nueva aplicación o conectar una aplicación existente en distintas plataformas, esto tiene como resultado que descargar una app totalmente funcional apuntando a una base de prueba (ToDo-List).

image

Luego podemos ir a la vista panel para revisar el dashboard muy completo de la utilización de este servicio móvil (en mi caso ya había hecho unas pruebas, por eso la gráfica de estas características)

image

Si vamos a la vista de Datos, podremos explorar los datos, ver las columnas de la tabla, intervenir los script de inserción, modificación, eliminación y selección de la tabla (esto lo veremos más adelante en el post) , además podemos establecer los permisos sobre la misma. (esto lo veremos en otro post)

image

Con esto estamos Ok, ahora veamos el desarrollo del cliente

Cliente HTML + JS

Como ya habíamos visto al inicio, el ejemplo tendrá dos vistas, la de inserción y la de listado-modificación-eliminación, primero veremos la vista de inserción. Para el desarrollo de este cliente utilice mi editor favorito, WebMatrix Sonrisa

Pagina de Inserción:

Como ya dije anteriormente, voy a utilizar jQueryMobile, para simplificar la explicación, me voy a concentrar solamente en el tema de la funcionalidad y no el diseño de JQM

image

Voy a incluir dos referencias a archivos JS, uno que permite la conexión a AMS y es obligatorio si deseas ocupar esta tecnología, el otro es la lógica de la pantalla y que vamos a pasar a revisar:

<script src="https://peliculassinet.azure-mobile.net/client/MobileServices.Web-1.0.0.min.js"></script>

<script src="insertar.js"></script>

Veamos el archivo insertar.js para entender como se trabaja desde JS con AMS.

$(function () {
    var client = new WindowsAzure
                   .MobileServiceClient('https://peliculassinet.azure-mobile.net/'
                   ,'OUkhVzulGEkkSCtMGpkVoQbEpFVJK337'),
                    TablaPeliculas = client.getTable('Peliculas');
 
    function manejaError(error) {
        var text = error + (error.request ? ' - ' + error.request.responseText : '');
        alert(text);
    }
 
    function cuentaRegistros() {
        $("#sp_total").html("<img src='ajax-loader.gif' />");
        TablaPeliculas.take(0).includeTotalCount()
                              .read().then(function (results) {
            $("#sp_total").text(results.totalCount);
        });
    }
 
    $('#agregar-pelicula').submit(function (evt) {
        TablaPeliculas.insert({
            Nombre: $('#tx_pelicula').val(),
            Tipo: $('#tx_tipo').val(),
            Votos: $('#rn_votos').val()
        }).then(cuentaRegistros, manejaError);
 
        evt.preventDefault();
 
    });
    cuentaRegistros();
});

 

Puedes ver al inicio del script que se hace la llamada al AMS propiamente tal, mediante el método MobileServiceClient con la URL y la clave de la aplicación. Esta clave de la aplicación la puedes obtener en el panel del AMS en la opción:

image

Luego obtengo la tabla Peliculas, en esta parte puedes crear jqueries para filtrar los registros que vas a obtener (esto lo veremos en un próximo post), en mi caso, estoy recuperando toda la tabla.

Agregamos handler para cuando se presione el botón “Guardar Pelicula” del formulario. Puedes notar que simplemente se hace un insert con los valores, muy parecido a Linq, y es que la referencia a la biblioteca de Azure nos permite esta facilidad. Luego ocupamos los deferred de jquery , en este caso then para llamar a la función cuentaRegistros o manejaError en el caso que algo no saliera según lo previsto.

La función ManejaError es muy simple, solo recibe el objeto error y lo muestra al usuario,  la función cuentaRegistros obtiene el total de contar todos los registros de la tabla, solo trae el resultado, no la lista completa.

Ahora bien, necesitamos que nos valide que no se ingresen valores con menos de 3 caracteres:

image

Esto lo vamos a hacer en el servicio móvil, así que vamos a la opción Datos, y luego Script , en la operación Insert voy a escribir el siguiente código:

image

Como vez es JavaScript , esto trabaja por debajo con Node.js, asi que era natural que los script se definieran de esta forma. Una vez detectado el error, lo que hacemos es responder con un statusCode. BAD REQUEST, puedes ver que en la captura del error.

Ok, sigo en los próximos días entregando la segunda y tercera parte de este post. Les dejo también un par de link para recursos:

Recursos:

http://www.windowsazure.com/en-us/develop/mobile/how-to-guides/work-with-server-scripts/?fb=es-es#register-table-scripts

http://www.windowsazure.com/en-us/develop/mobile/resources/?fb=es-es#header-3

[Tips] Gráficos con Ajax Control Toolkit–Release de Junio 2013

Hola que tal? si bien ya no es tan famosa como antes, debido a que tenemos una gran cantidad de plugins de jquery disponible, la suite de controles Ajax Control Tookit se sigue actualizando, con nuevos y mejorados controles. Uno que me llamó la atención por la facilidad de uso es el nuevo control Bar Chart, el cual permite crear gráficos de barra de una manera bastante sencilla.

Para el ejemplo voy a crear una App ASP.NET WebForm, y luego incluir la biblioteca de controles con NuGet (aunque recuerda que hoy en día, con el nuevo Visual Studio 2013 y ASP.NET 4.5 el concepto de ASP.NET en uno solo)

image

Luego agregamos los controles con Nuget

image

Una vez agregadas todas las referencias, voy a agregar en mi formulario un ToolkitScriptManager y el control BarChart

<ajaxToolkit:BarChart ID="BarChart1" runat="server"

   ChartHeight="300" ChartWidth="450" ChartType="Column"

   ChartTitle="Venta de Telefonos Lumia - Julio (Miles)"

   CategoriesAxis="620,720,820,920"

   ChartTitleColor="#0E426C" CategoryAxisLineColor="#D08AD9"

   ValueAxisLineColor="#D08AD9" BaseLineColor="#A156AB">

   <Series>

    <ajaxToolkit:BarChartSeries Name="EEUU" BarColor="#0404B4"

                 Data="110, 189, 255, 95" />

    <ajaxToolkit:BarChartSeries Name="Europa" BarColor="#FF8000"

                 Data="49, 77, 95, 68" />

   </Series>

</ajaxToolkit:BarChart>

Y el resultado (los datos son de prueba, los inventé):

image

Las Propiedades del Barchar son las siguientes

  • ChartHeight: Permite customizar el alto del gráfico.
  • ChartWidth: Permite customizar el ancho del gráfico.
  • ChartTitle: Setea el titulo del gráfico.
  • CategoryAxis: [Requerido] . Set de valores para setear los valores del eje de categorias para crear el gráfico de barras.
  • ChartType: Permite seleccionar entre diferentes tipos de gráficos de barra (Column, StackedColumn, Bar y StackedBar.)
  • Theme : Permite controlar la apariencia del gráfico mediante un archivo CSS.
  • ValueAxisLines: Esta propiedad le permite establecer el tamaño del intervalo de la línea de eje.
  • ChartTitleColor: Esta propiedad permite setear el color de la fuente del titulo del gráfico.
  • CategoryAxisLineColor:   Esta propiedad permite setear el color del la línea del eje de categorías.
  • ValueAxisLineColor: Este propiedad permite setear el color de las líneas del eje de los valores.
  • BaseLineColor: Este propiedad permite setear el color de las líneas  base del gráfico.

Propiedades de BarChartSeries:

  • Name – El nombre de la serie (requerida)
  • Data : Corresponde a la data  (Arreglo de decimales) de la serie.
  • BarColor : Permite setear el color del la barra de la serie.

En el ejemplo anterior vemos que utilizamos dos BarChartSeries, ahora vamos a probar algo sencillo de pero de manera programática. Para esto voy quitar las series y la propiedad CategoryAxis del código declarativo, luego , la declaración del control queda de la siguiente manera:

<ajaxToolkit:BarChart ID="Grafico" runat="server"

   ChartHeight="300" ChartWidth="450" ChartType="Bar"

   ChartTitleColor="#0E426C" CategoryAxisLineColor="#D08AD9"

    ValueAxisLineColor="#D08AD9" BaseLineColor="#A156AB">

</ajaxToolkit:BarChart>

Y el código programático para definir las series y configurar el gráfico:

protected void Button1_Click(object sender, EventArgs e)

{

   //Definimos el arreglo de Decimales

   decimal[] Datos1 = { 40m, 55m, 67m, 64.7m };

   decimal[] Datos2 = { 45m, 75m, 47m, 44.7m };

   Grafico.ChartTitle = "Total Ventas";

   Grafico.CategoriesAxis = "Limones, Naranjas, Platanos, Uvas";

 

   //Setear la Serie 1

   AjaxControlToolkit.BarChartSeries serie1 = new
                                       AjaxControlToolkit.BarChartSeries
();

   serie1.Name = "Market 1";

   serie1.Data = Datos1;

   serie1.BarColor = "#999999";

  

   //Setear la Serie 2

    AjaxControlToolkit.BarChartSeries serie2 = new
                                       AjaxControlToolkit.
BarChartSeries
();

    serie2.Name = "Market 2";

    serie2.Data = Datos2;

    serie2.BarColor = "#33FFFF";

   

    //Agregamos las series al gráfico

    Grafico.Series.Add(serie1);

    Grafico.Series.Add(serie2);

  

    //Hacermos el Binding

    Grafico.DataBind();

}

Luego al ejecutar el código y al presionar al botón veremos nuestro gráfico:

image

Como vez, bastante fácil y gratis Sonrisa, espero que te sirva!
Links:

@chalalo

Grabación del WebCast ASP.NET MVC 4 para móviles

Hola que tal, se me estaba pasando el tiempo y no había subido la grabación de la presentación de MVC para móviles. Te la dejo acá para que puedas verla

Si quieres velo directamente de youtube, esta en buena calidad Sonrisa

Saludos!
@chalalo

Posted: 9/7/2013 5:17 por Gonzalo Perez | con 1 comment(s)
Archivado en: ,
[Tip] Nueva característica en la barra de desplazamiento de Visual Studio 2013

Sin duda cada vez que hay un nuevo release de visual studio nos encontramos con nuevas características, esta vez una que encuentro muy Cool, que tiene que ver con la barra de desplazamiento en la vista de código, puedes llegar al menú mediante opciones o presionar botón derecho sobre la barra de desplazamiento, este es la ventana de opciones de Visual Studio 2013:

image

En la sección de comportamiento vamos a seleccionar “Usar el modo Mapa para la barra de desplazamiento Vertical”

Y ahora veremos en la barra el siguiente mapa, que al pasar el mouse sobre él nos dará una vista ampliada del código que ahi se encuentra Sonrisa

image

Si bien existían plugin para esto, nunca están demás las ayuditas que se nos entregan en los IDE, mientras más productivos , mejor Sonrisa.
Saludos,
@chalalo

Posted: 1/7/2013 0:52 por Gonzalo Perez | con no comments
Archivado en:
Nuevo y mejorado, el concepto UN solo ASP.NET.

Hola que tal, ha sido una semana llena de excelentes anuncios en el //build/ , realmente increíbles las novedades con un solido Windows 8.1 que me ha dejado asombrado, además de un Internet Explorer 11, cada vez mejorando la experiencia de usuario, Visual Studio 2013 y  muchísimas cosas más, realmente abrumador. En esta oportunidad quiero referirme al nuevo enfoque, y necesario a mi gusto, de ASP.NET, ahora existe el concepto de un 1 solo ASP.NET y indiferenciando si vas a utilizar WebForms, Web Pages, SPA, MVC, Web API o SignalR. Quizás los desarrolladores de WebForms erán los que  de alguna manera , se sentían más excluidos a las nuevas características, pero esta vez, es todo lo contrario, hay motivo para celebrar, ya que los desarrollos hechos con WebForms van a permitir incluir las librerías de MVC y Web API de una manera muy sencilla.  Es así como tu aplicación webform podrá tener, por ejemplo la misma cara de siempre, con WebControls y por otro lado aprovechar las ventajas de Web API para servicios Rest Ful, y esto es, entre otras cosas, utilizar controladores dentro de tu app WebForm.

Veamos un poco el esquema del concepto:

image

Algunos preguntarán , donde quedó WebServices que no lo veo en Services!, y calma, esta todo bien,  WebServices sigue firme en lo que es WebForms, y lo podrás seguir utilizando para conectarse desde tecnología del cliente o del servidor.

Ahora vamos a crear un proyecto, basado en la charla de Scott Hanselman del Build, asi que si ya la viste, este ejemplo te será familiar, la idea es crear una aplicación ASP.NET WebForms para luego  utilizar Scaffolding de una clase , este Scaffolding o “Andamiaje”creará todo lo necesario para que podamos hacer un CRUD.

Lo primero que vamos a hacer es crear un nuevo proyecto con Visual Studio 2013 Preview.

PD: Si no lo tienes, puedes descargarlo por acá.

Ahora verás que existe la opción “Aplicación Web ASP.NET” que ya nos da luces sobre el nuevo esquema “un solo ASP.NET”, de todos modos, vas a ver un submenú que dice “Visual Studio 2012” en donde vas a encontrar la organización separada de los proyectos tal cual vs2012.

image

Ahora podemos elegir que es lo que queremos integrar en nuestra aplicación de ASP.NET, por ejemplo yo voy a elegir Web Foms y voy a incluir las referencias y carpetas de MVC y Web API:

image

Luego en nuestro proyecto, en la carpeta Models vamos agregar una nueva Clase, en este caso es la Clase Persona:image

El código de la clase Persona va a ser el siguiente:

  public class Persona

    {

        [ScaffoldColumn(false)]

        public int PersonaId { get; set; }

        public string Nombre { get; set; }

        public string Apellido { get; set; }

        public int Edad { get; set; }

 

    }

Para utilizar el atributo de columna ScaffoldColum debes agregar la referencia, esto es simplemente para que no se haga el

image

Ahora vamos agregar el “Andamiaje…” en la carpeta de Controladores:

image

Visual Studio 2013 nos ofrece a través del administrador de Paquetes NuGet el Scaffold, vamos a seleccionar:image

Esto nos permitirá contar con las operaciones clásicas de un CRUD. Luego se nos consultará por el nuevo contexto de datos:

image

Luego se nos consultará sobre la clase asociada, el contexto, en este caso es un nuevo contexto, en mi caso, seleccioné la posibilidad de contar con vistas móviles y las de escritorio:

image

y ahora ya me ha creado las páginas aspx e incluyendo la vista móvil que seleccioné anteriormente:

image

Ahora al ejecutar la pagina (/Personas/Insert) tenemos las siguientes vistas para móvil (que utiliza jquerymobile) y la vista de escritorio (que también utiliza CSS3 media queries por defecto):

imageimage

Otro punto interesante es que por defecto se utiliza FriendyURL de manera que la integración Webform , MVC y Web Api sea aún más natural.

El concepto de ModelBinding que teníamos en MVC ahora también está en WebForms, Scott Hanselman remarcó en su charla, que el concepto de ModelBinding ahora es único para todo ASP.NET, independiente de la tecnología Sonrisa

Ahora pasaremos a punto 2 en donde vamos a integrar ASP.NET Web APi, para eso vamos a los controladores y agregamos nuevamente un Andamiaje:

image

Esta vez seleccionaremos Controlador de Web API 5 con acciones de L/E que utilizan EF, de manera tener esta API con las acciones necesarias para un CRUD.

image

Luego se nos consulta como se llamará el controlador , cual es el modelo de dato y el contexto asociado:

image

Veremos a continuación que ya se nos generó el controlador y estamos listos para utilizarlo:image

Ahora simplemente hacemos referencia a Api/Persona y tenemos los datos que ingresamos por el formulario WebForm:

image

Como puedes ver, la integración es total, me parece muy acertado el concepto de un solo ASP.NET, esto permitirá una nueva etapa en la que podremos expandir las posibilidades de nuestros desarrollos fácilmente Sonrisa.

Si quieres ver la charla de Shanselman, está acá:
http://channel9.msdn.com/Events/Build/2013/2-546

Más adelante comentaré otros nuevas características, Enjoy!!!

Saludos,
@chalalo

[Tips]Crear PDF con ASP.NET MVC y RazorPDF

Hola, hace poco escribí un articulo sobre una consulta recurrente de como crear PDF en ASP.NET, y es que es algo que utilizamos bastante en el día día. Ahora es la oportunidad de MVC, ya que también llegan varias preguntas de ello. Para esto vamos a utilizar un package de Nuget que se llama RazorPDF, que internamente utilizada iTextSharp, puedes ver documentación de esta librería acá: https://www.nuget.org/packages/RazorPDF

Ahora veamos un ejemplo simple paso a paso, relacionado con el ejemplo del articulo anterior, la idea es generar lo mismo, pero ahora con MVC, asi que vamos por parte.

Primero vamos a crear el proyecto MVC, voy a crear una aplicación básica:

image

Luego instalamos el paquete Nuget:

image

Si todo salió bien, veremos que se instalaron todas las dependencias:

image

La vista

image

 

Esta vista la he creado con el siguiente código, como no estoy usando un modelo tipado, no voy a utilizar los helpers para ese propósito, así que simplemente es un formulario, en donde indico cuales son los campos:

@{

    Layout = "~/Views/Shared/_Layout.cshtml";

}

<!DOCTYPE html>

<html>

<head>

    <title>RazorPDF Demo </title>

</head>

<body>

    <h2>Ejemplo de creación de PDF con RazorPDF </h2>

    <div>

        @using (Html.BeginForm("Ejemplo", "PDF",

           FormMethod.Post, new { id = "formulario" }))

        {

            <p>

                <label for="tx_nombre">Nombre</label>

                <input type="text" id="tx_nombre" name="tx_nombre" required />

            </p>

            <p>

                <label for="tx_apellido">Apellido</label>

                <input type="text" id="tx_apellido" name="tx_apellido" required />

            </p>

            <p>

                <label for="tx_edad">Edad</label>

                <input type="number" id="tx_edad" name="tx_edad" required />

            </p>

            <input type="submit" value="Generar PDF" />

          

        }

    </div>

</body>

</html>

El controlador

Ahora veremos el código, vamos a crear un controlador que se llame PDFController:

public class PDFController : Controller

{

   public ActionResult Index()

   {

      return View();

   }

    

[AcceptVerbs("POST")]

public object Ejemplo(string tx_nombre, string tx_apellido, string tx_edad)

  {

    var pdf = new RazorPDF.PdfResult(null, "EjemploPdf");

    pdf.ViewBag.Title = "Titulo del Reporte";

    pdf.ViewBag.Nombre = tx_nombre;

    pdf.ViewBag.Apellido = tx_apellido;

    pdf.ViewBag.Edad = tx_edad;

    return pdf;

  }

}

 

Como puedes ver, tenemos un controlador que recibe desde un formulario (POST) un parámetro nombre, apellido y edad, esto lo hice para que tengas la guía de cuando quieras crear un informe en pdf con parámetros de búsqueda. Se instancia un objeto PdfResult, el primero parámetro es el objeto que puedes pasarle como argumento como no estoy utilizando ninguna, queda en null, el segundo parámetro es el nombre de la vista que tiene el informe. Además Le asigno al viewbag de este PdfResult para luego mostrarlo en el informe y se retorna el objeto pdf.

Ahora corresponde revisar la vista EjemploPDF, que va  a contener la estructura del informe PDF.

Archivo EjeploPdf

Este código XML define la estructura del PDF a generar, como vez, agrego los datos desde el controlador mediante el objeto ViewBag, además podemos setear la fuente y agregar una imagen:

 

<itext creationdate="@DateTime.Now.ToString()" producer="RazorPDF">

<paragraph style="font-family: Helvetica; font-size: 18; font-style: italic;">

       <chunk red="255" green="0" blue="0">@ViewBag.Title</chunk>

</paragraph>

<paragraph>

    <chunk style="font-family:Times;font-weight:bold;">Fecha Reporte: </chunk>

    <chunk style="font-family:Times;">@DateTime.Now.ToString("MM/dd/yyyy")</chunk>

</paragraph>

<paragraph>

    <chunk style="font-family:Times;font-weight:bold;">Nombre: </chunk>

    <chunk style="font-family:Times;">@ViewBag.Nombre</chunk>

</paragraph>

<paragraph>

    <chunk style="font-family:Times;font-weight:bold;">Apellido: </chunk>

    <chunk style="font-family:Times;">@ViewBag.Apellido</chunk>

</paragraph>

<paragraph>

    <chunk style="font-family:Times;font-weight:bold;">Edad: </chunk>

    <chunk style="font-family:Times;">@ViewBag.Edad</chunk>

</paragraph>

<newline />

<image url="@Context.Server.MapPath("~/Content/imagen.jpg")"/>

<paragraph style="font-family: Helvetica; font-size: 18; font-style: italic;">

       <chunk red="255" green="0" blue="0">By @@Chalalo</chunk>

</paragraph>

</itext>

Ahora al momento de ejecutarlo, ingresar datos al formulario y luego presionar sobre el botón “Genera PDF”, logramos el siguiente PDF.

image

Como puedes ver, bastante sencillo y útil.
Nos vemos en un próximo post!
Saludos,
@chalalo

Posted: 20/6/2013 5:53 por Gonzalo Perez | con no comments
Archivado en: ,
[WebCast] ASP.NET Desarrollo para móviles y Tablet's

Hola!, te quería invitar a este nuevo evento (de todas maneras lo voy a grabar y a publicar), pero no hay como verlo en vivo, ya que podemos hacer consultas, establecer discusión, etc.

El tráfico móvil en la web está explotando. ¿Estás listo? Microsoft ASP.NET MVC 4 incluye nuevas plantillas para dispositivos móviles, un enfoque en el diseño de response desing El orador muestra lo que puedes hacer hoy y mañana para hacer su sitio amigable en un dispositivo móvil. ¿Cuándo debería su sitio móvil convertido en una aplicación móvil? ¿Debe usar CSS3 media querys?, o ir "all in" y el uso de jQuery móvil u otro marco móvil?

Fecha: 27/06/2013 (dd/mm/yyyy).
Hora: 04:00 PM (GMT-05:00 Colombia, Panamá).
Si tiene dudas con la conversión de zonas horarias, por favor haga clic aquí

Inscríbete acá:
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032551084&Culture=es-AR&community=0

image

Material de Charla– Utilizando IE10 para Windows 8 y para WP8

image Hola, hace poco tuve que dar la charla de desarrollo web enfocado a Internet Explorer 10 e Internet Explorer 10 para Windows Phone, agradezco a todos los que fueron. Les dejo las Slides y el material que fue proporcionado y por el gran Jorge Peraza, puedes ver su presentación (en la cual basé parte de la mía) acá:
http://channel9.msdn.com/Events/Build/2012/2-015

Acá están mis slides:

Charla ie from Gonzalo C.

y puedes descargar desde acá los códigos que revisamos sobre

  • Preparar los sitios para Windows 8 (pinned sites, budget, asociar a la tienda, habilitar “compartir”
  • Ejemplos de HTML5 (De Jorge Peraza)
  • Los códigos cool del desarrollo de HTML5 apps para Windows Phone e IE10.

DESCARGA
https://dl.dropboxusercontent.com/u/1303802/IE10Test.zip

Voy a escribir en unos próximos post, en detalle el tema de como preparar nuestros sitios para aprovechar las ventajas de Windows 8.

Muchas gracias por los buenos comentarios de la charla Sonrisa, lo pasamos bastaste bien.

Nos vemos!!!
Saludos!

Posted: 15/6/2013 16:10 por Gonzalo Perez | con no comments
Archivado en:
Invitación a Evento– Las potencialidades de IE10

Hola!, los quería invitar al siguiente evento en el que vamos a hablar de las potencialidades de Internet Explorer 10 SonrisaSortearemos una Xbox 360 entre los asistentes!!!

image

El link de registro es el siguiente!, aprovecha esta oportunidad! Sonrisa, nos vemos allá!!

https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032555640&Culture=es-CL&community=0

Saludos!!
@chalalo

Posted: 4/6/2013 2:43 por Gonzalo Perez | con no comments
Archivado en: ,
Más artículos < Página anterior - Página siguiente >