Chalalo Land

[Tutorial] ASP.NET Simular el comportamiento de borrado del IPhone en un Gridview con JQuery

Hola, que tal?. en este post quiero mostrar un efecto/funcionalidad que podemos lograr con jQuery que tiene por finalidad simular el comportamiento del eliminar de un IPhone, en donde al hacer tap sobre el icono este se gire con un efecto de animación y muestre el botón eliminar, obviamente todos los demás deben quedar en su posición original y sin el botón de eliminar  al lado izquiedo:

Un video de como funciona:

Ahora que ya sabemos cual es el funcionamiento, paso a explicar como lo hice

La Base de Datos

Esta es la parte sencilla, simplemente una tabla que tenga la siguiente estructura, obviamente puedes crear la que tu quieras de acuerdo a tus necesidades:

La Grilla

Es un GridView común y corriente con el siguiente, con 3 ItemTemplates, el primero para el la imagen de borrar, otra para el nombre y la última para el botón:

Las propiedades gráficas más relevantes son GridLines=”None”, ShowHeader=”False”, para lograr el efecto de listado más “limpio”.

<asp:GridView ID="GridView1"
             runat="server"
             AutoGenerateColumns="False"
             DataKeyNames="id"

             DataSourceID="SqlDataSource1"
             EmptyDataText="No hay registros de datos para mostrar."

             BorderWidth="0px"
             GridLines="None"
             ShowHeader="False"
             Width="255px">

La imagen es no es un webcontrol image , si no un htmlcontrol ya que utilizamos runat=”server”, pero esto lo hago solamente para que en el render se le vaya creando automáticamente el Id, de esta manera el índice asignado en la generación es el mismo que se le asignará al botón.

<ItemTemplate>
     <img alt="Eliminar"
          src="img/iphone_delete_icon.png"

          runat="server"

          id="imagen"

          class="imgborrar" />

</ItemTemplate>

El Botón es solo un WebControl Button con su CommandName=”Delete” y con la asignación de la clase que le da la gráfica:

<ItemTemplate>
      <asp:Button ID="btEliminar"

                  CommandName="Delete"
                  runat="server"
                  class="botonEliminar"
                  Text="Eliminar" />
</ItemTemplate>

En donde el class botonEliminar es:

<style type="text/css">

    .botonEliminar

        {

            border: 2px solid #808080;

            color: #FFFFFF;

            background-color: #CC0000;

        }

</style>

Los Scripts y plugins

Primero que nada, debemos incluir los script que vamos a utilizar en nuestra página, los cuales son la librería jQuery y el plugin jQueryRotate.

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<script src="Scripts/jQueryRotate.1.7.js" type="text/javascript"></script>

Usa la versión 1.7 de JQueryRotate, ya que las anteriores tienen algunos problemas con FireFox e IE.

El Script es el siguiente:

<script type="text/javascript">

        $(document).ready(function () {

            //Oculto los Botones de Eliminar

            $(".botonEliminar").hide();

            //Agrego el curso de la mano a las imagenes (-)

            $(".imgborrar").css("cursor", "pointer").css("cursor", "hand");

            $(".imgborrar").click(function () {

               //todas las imagenes a su posición original

                $(".imgborrar").rotateAnimation(0);

                //Obtengo el indice de la imagen que se seleccionó

                var indice = $(this).attr("id").substr(17, 1);

                //Se consulta si es que la imagen ya esta rotada,

                //el plugins a veces gira en  89.9 o 90 grados,

                //el plugin no devuelve el angulo actual, por lo que lo

                //veo a partir del style, si es que contiene el angulo.

                if ((String($(this).attr('style')).indexOf("89") > 0) ||

                   (String($(this).attr('style')).indexOf("90") > 0)) {

                    //Si ya estaba rotado, se vuelve a pos original

                    $(this).rotateAnimation(0);

                    //Se oculta el boton que corresponde a la imagen

                    $("#GridView1_btEliminar_" + indice).hide("fast");

                } else {

                    //ahora si no está rotado, se rota a 90 grados

                    $(this).rotateAnimation(-90);

                    //Se oculta cualquier botón eliminar desplegado

                    $(".botonEliminar").hide();

                    //Se muestra solo el botón que corresponde la imagen

                    $("#GridView1_btEliminar_" + indice).show("fast");

                }

            });

        });

    </script>

Aunque el código está con comentarios, quiero explicar el por que el indexOf(89) o indexOf(90), y es porque el plugin aleatoriamente puede llegar a girar en 89.9 grados la imagen o a 90 grados (Generalmente a 89.9, pero he probado varias veces en un pequeño porcentaje devuelve realmente los 90), pero esta información no es retornada en un atributo numérico, si no que en el estilo, por ejemplo
En IE:

en Chrome:

En Safari (noten el 89.6)

En FireFox, NO FUNCIONA!,más que nada es el plugIn jQueryRotate el que no es compatible 100% con firefox (aunque en la documentación dice otra cosa). Entonces no nos queda más remedio que modificar el código para evitar la utilización del plugin en FireFox. Esto es, tener dos imágenes, una rotada y otra en posición original, e ir modificando estos factores.

Para determinar que es Firefox, vamos a tener que preguntar si NO es Firefox, ya que dos navegadores retornan Nescape como información.

<script type="text/javascript"> 

   $(document).ready(function () {

     //Oculto los Botones de Eliminar

     $(".botonEliminar").hide();

     //Agrego el curso de la mano a las imagenes (-)

     $(".imgborrar").css("cursor", "pointer").css("cursor", "hand");

     $(".imgborrar").click(function () {

     //Obtengo el indice de la imagen que se seleccionó

     var indice = $(this).attr("id").substr(17, 1);

      //Si es FireFox, Cambiar la Imagen en vez de rotarla

     //preguntamos por los demás browsers, ya que en javascript

     //Chrome y Firefox contienen la palabra Netscape

     var navegador = navigator.appName + " " + navigator.appVersion;

     if ((navegador.indexOf("Chrome") == -1) &&

       (navegador.indexOf("Safari") == -1) &&

       (navegador.indexOf("Microsoft") == -1)) {

       if (String($(this).attr("src")) == "img/iphone_delete_icon_on.png") {

        //todas las imagenes a su posición original

         $(".imgborrar").attr("src", "img/iphone_delete_icon.png");

        //volvemos a la imagen original

         $(this).attr("src", "img/iphone_delete_icon.png");

         $("#GridView1_btEliminar_" + indice).hide("fast");

       } else {

        //todas las imagenes a su posición original

        $(".imgborrar").attr("src", "img/iphone_delete_icon.png");

        //ahora si no está rotado, cambiamos la imagen

        $(this).attr("src", "img/iphone_delete_icon_on.png");

        $(".botonEliminar").hide();

        //Se muestra solo el botón que corresponde la imagen

        $("#GridView1_btEliminar_" + indice).show("fast");

      }

   } else {

     //AHORA con el Plugin de Rotate

     $(this).rotateAnimation(-90);

     //todas las imagenes a su posición original

     $(".imgborrar").rotateAnimation(0);

     //Se consulta si es que la imagen ya esta rotada,

     //el plugins a veces gira en  89.99~ o 90 grados,

    //el plugin no devuelve el angulo actual, por lo que lo

    //veo a partir del style, si es que contiene el angulo.

     if ((String($(this).attr('style')).indexOf("89") > 0) ||

        (String($(this).attr('style')).indexOf("90") > 0)) {

        //Si ya estaba rotado, se vuelve a pos original

        $(this).rotateAnimation(0);

        //Se oculta el boton que corresponde a la imagen

        $("#GridView1_btEliminar_" + indice).hide("fast");

     } else {

         //ahora si no está rotado, se rota a 90 grados

         $(this).rotateAnimation(-90);

         //Se oculta cualquier botón eliminar desplegado

         $(".botonEliminar").hide();

         //Se muestra solo el botón que corresponde la imagen

         $("#GridView1_btEliminar_" + indice).show("fast");

      }

}

});

});

</script>

Ahora veamos un pequeño video en los distintos Browser

Como vez, un poco más de código pero funciona en todos los browser, obviamente se puede seguir depurando, pero es para que te des una idea de como hacerlo e implementarlo en tus desarrollos.

Descarga el ejemplo!:

Espero que haya sido de tu interés, nos vemos!!
Chauu!

[Tips] Desactivar EnablePartialRendering en ScriptManager cuando no utilices UpdatePanels (WebForm no Dead)

Hola que tal?, si bien hay personas que se han puesto una bandera de lucha en contra de los webforms (no comparto esta postura, luego escribiré sobre eso), existen muchas aplicaciones construidas bajo la modalidad de WebForms que utilizan ASP.NET Ajax, y sin duda, se seguirán creando.

Uno de los elementos que utilizamos cuando ocupamos ASP.NET Ajax es el ScriptManager, que muchos desarrolladores lo utilizan sin mayor configuración. Es aquí en donde quiero detenerme un momento, y es que si no estas ocupando un UpdatePanel en la página, y tienes un ScriptManager en la página, ahorras generación y carga de Scripts seteando la propiedad EnablePartialRedering en false.

Ahora bien, por mail me preguntaron, “de que sirve un ScriptManager sin un UpdatePanel!”, y la respuesta es “de mucho”, por ejemplo, podemos utilizar algunos controles del Ajax Control Toolkit que no necesitan un UpdatePanel, sin ir más lejos el control Color Picker junto a un ToolkitScripManager (que hereda de Script Manager)

Caso Ejemplo 1

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

<br />

Color:<br />

  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

   <asp:ColorPickerExtender
        ID="TextBox1_ColorPickerExtender" 
        runat="server" Enabled="True"
        TargetControlID="TextBox1">

   </asp:ColorPickerExtender>

Lo que resulta en:

Caso Ejemplo 2

Como vez, sin UpdatePanel, otro escenario es por ejemplo la llamada asíncrona a un Webservice o a un WebMethod mediante el ScriptManager y Javascript, para el ejemplo veremos el primer caso:

Vamos a tener un WebService que se exponga un WebMethod que se llame cuadrado, que simplemente y para efectos del demo, calculará  y devolverá el cuadrado de un número.

Public Class wsmartes

    Inherits System.Web.Services.WebService

    <WebMethod()> _

    Public Function Cuadrado(numero As Integer) As Integer

        Return numero * numero

    End Function

End Class

Luego desde una página haremos la llamada, primero a configurar el ScriptManager para que pueda acceder al servicio:

    <asp:ScriptManager ID="ScriptManager1" runat="server">

      <Services>

           <asp:ServiceReference Path="~/wsmartes.asmx" />

      </Services>

    </asp:ScriptManager>

Luego el javascript para la llamada Async al Servicio Web.

<script type="text/javascript">

        function Calcula() {

            demo1.wsmartes.Cuadrado(document.getElementById("Text1").value, ResultoBien, Falla);

        }

        function ResultoBien(args) {

            alert("El Cuadrado es: " + args);

        }

        function Falla(error) {

            alert("Error:" + error.get_message());

        }

    </script>

En la página tengo solo un un input text y un boton html, al momento de ejecutar:

Pero que pasa si no tenemos desactivada la propiedad EnablePartialRedering:

Tenemos aprox 464KB descargados a la página por la generación de Script (obviamente no contamos el WebForm1.aspx, que es la pagina propiamente tal) desde el ScriptManager, sin embargo si desactivamos la propiedad en cuestión:

Ahora tenemos 349Kb , es decir 115Kb aprox menos en la carga de pagina sin contar que no tenemos la propiedad ScriptMode en Release.

Ahora si agregamos esta propiedad, ScriptMode en Release:

Ahora disminuimos a 85kb aprox, es decir, logramos reducir el tamaño de los Script Considerablemente!

Como vez, con pequeños cambios podemos lograr optimizar nuestras aplicaciones existentes , espero que te sirva!.
Saludos,
Gonzalo

[Opinión] Cursos Web CampusMVP

Hola, hace un par de días me contactaron de Campus MVP para dar mi opinión sobre los cursos de Desarrollo Web que se ofrecen, para ser más específicos los cursos de ASP.NET

Preparación de la certificación 70-515 Web Applications Development Whit Microsoft .Net Fx 4, Aprende ASP.NET Ajax con Visual Studio 2008 y 2010 y jQuery paso a paso para programadores ASP.NET.

Quiero dejar en claro que para estos temas siempre soy bastante crítico, ya que me he encontrado anteriormente, ya sea como evaluador o asistente, con cursos que realmente dejan mucho que desear. Sin embargo, este no fue el caso, si no todo lo contrario.

Sin embargo, he quedado sorprendido por la calidad de los cursos, primero que nada todos los instructores que han confeccionado el curso, son altamente calificados, cuentan con varias certificaciones en los temas y además son MVP de Microsoft, galardón que entrega Microsoft a los profesionales de la informática que se destacan por su conocimiento y por sus ganas de compartirlo. Luego comencé a revisar el curso propiamente tal, y me llamó la atención algo que es importante y no he visto antes en los cursos online, y es que existe una real transferencia de experiencia, y no solo de contenido, esto es, Tips importantes que no los vas a ver en la mayoría de los demás cursos, con videos de apoyo, que se enfocan a los temas más relevantes que te van a servir para seguirlos paso a paso y entender de mejor manera el concepto que se desea explicar.

Los cursos orientados a Web son excelentes y cubren distintas áreas, desde configuración de IIS, Ajax, jQuery, MVC y Silverlight. Pero ojo, un factor importante a decidir cuándo seleccionas un curso, es lo actualizado que estos deben estar en relación con las nuevas tecnologías, y justamente los cursos de CampusMVP están actualizados a la última versión de los productos que abarcan, y si sumas a esto que están en un lenguaje muy claro y fácil de entender, tenemos un producto educativo al que podemos acceder que nos va a ayudar en nuestras carreras profesionales.

Otra punto importante, están orientados a la productividad, esto es, los temas y como están presentados guían al alumno a ponerlos en práctica rápidamente, obviamente primero se nos introduce en el marco teórico de lo que vamos a revisar, y luego , manos a la obra!, este punto , dentro de los otros mencionados, deberíamos tomar en cuenta al momento de evaluar un curso, de hecho yo lo revisé y quedé entusiasmado para implementar algunas tips en mis desarrollos!.

Todo esto va a apoyado de una excelente plataforma de E-Learning, en donde puedes interactuar con el instructor, revisar documentación adicional, rendir exámenes entre otros, que completan una experiencia superior en capacitación Online.

Así que si andas buscando como capacitarte efectivamente o en tu empresa necesitan capacitación, revisa http://shop.campusmvp.com/ , con toda responsabilidad te digo que son 100% recomendables, aprendes de los expertos, no corres el riesgo que el instructor no tenga las competencias necesarias, te aseguras que tu dinero está muy bien invertido!

Saludos!
Gonzalo

Tutorial Rápido - IE9 RC una nueva forma de anclar los sitios.

Vuelvo a retomar el blog, estuve de vacaciones entonces deje un poco de lado el trabajo diario de buscar temas para postear. Como para que el golpe de término de vacaciones, vengo algo soft.  Existe una nueva manera de anclar los sitios en IE9, ahora con simplemente agregar el atributo class="msPinSite" a la imagen en la cual podemos hacer drag a la barra de tareas.

Anteriormente, en la versión beta de IE9, teníamos la posibilidad de  arrastrar desde el favicon de la barra de direcciones, pero con esta funcionalidad podemos tener el cualquier parte de una imagen que nos brinde esta funcionalidad. Es buena idea agregar en el style de la imagen el cursor, un archivo cur que puede ser una mano o algo representativo.

Para revisar otros características de IE9 puedes ver mis anteriores post (suena egocéntrico eso de “mira lo que yo hago”, pero bueno… no es la intención)

Thumbnails icons (me cuesta pronunciar esta palabra, ejejej)http://geeks.ms/blogs/gperez/archive/2010/11/16/tutorial-r-225-pido-crea-tus-propios-thumbnails-icons-en-ie9.aspx

Promocionar tus sitios con IE9
http://geeks.ms/blogs/gperez/archive/2010/11/23/tutorial-r-225-pido-promocionar-tus-sitios-que-utilizan-ie9.aspx

Overlays Icons con IE9
http://geeks.ms/blogs/gperez/archive/2010/11/17/tutorial-r-225-pido-utilizar-overlays-icons-en-tu-p-225-gina-con-ie9.aspx

Puedes revisar la documentación de MSDN:
http://msdn.microsoft.com/en-us/ie/dd797411

Revisa el ejemplo de MSDN:
http://ie.microsoft.com/testdrive/Browser/Radio/Default.html

Eso !+ y ahora a recargar pilas!!
Saludos,
Gonzalo

Gran Maratón de WebCast MSDN y TechNet, 23 y 24 de Febrero!

Hola!, se va a realizar una gran maratón de WebCast en Febrero, en donde participaré como orador, (Febrero 24 a las 15:00 Bogotá), los días son 23 y 24 de febrero, la agenda es la siguiente y espero que puedan asistir

Febrero 23

Febrero 24

Nos vemos!!!
Saludos,
Gonzalo

Opinión- Llegada de nuevos Frameworks “Web Móviles”

Hola, generalmente no escribo mis “pensamientos” , pero esta vez quiero explayarme un poco y entrar en la discusión sobre los Framework de desarrollo Web para móviles.

Últimamente y silenciosamente , esto es, sin tanta parafernalia en los lanzamientos a surgido una serie de framework, que no permiten desarrollar para plataformas móviles,como SmartPhones y tablets, teniendo como característica fundamental, el ser multiplaforma, es decir, la posibilidad de que nuestro desarrollo funcione sin modificaciones para Symbian, Windows Phone 7, IOS (IPad, IPod, IPhone), Android, Blackberry entre otros. Si bien esto es parcialmente cierto (algunas plataformas todavía no soportan la totalidad de css3, ni menos, html5).

No deja de ser interesante para nosotros, los desarrolladores web, tener estas herramientas a nuestra disposición, ya que podemos aprovechar el conocimiento adquirido en JS, AJAX, JQuery, DHMTL, HTML , CSS para desarrollar ahora aplicaciones para móviles, sin tener que aprender nuevas tecnologías (aunque lo de aprender, siempre es bueno!).

Otro punto a favor, es que no debemos pagar por inscripción por el SDK, o algún programa de enrolamiento, y si alguien tiene “jailbreak” puede seguir testeando la aplicación que construye. 

Ahora bien, estamos hablando de desarrollos orientados a sistemas de información, no a juegos (aunque algunos Fx permiten aproximaciones) , con lo que quiero decir, que no vamos a poder crear todavía un juego tipo Angry Birds y hacernos millonario, si no que podemos utilizar estos recursos para hacer las versiones móviles,  de nuestro sistemas, para así entregar más valor agregado a nuestro trabajo aprovechando conocimientos ya adquiridos, emulando los desarrollos nativo con los SDK correspondientes.

Veamos algunos ejemplos de estos Framewoks…

JQuery Mobile

Es un framework desarrollado  por el Team jQuery, esta en aun en etapa de desarrollo (Alpha 3, liberado el día de hoy). Permite  desarrollar fácilmente UI orientadas a equipos móviles, es totalmente OpenSource, lo he probado y es bastante bueno, aunque adolece todavía de algunos controles que se asemejen a los que estamos acostumbrados a ver en aplicaciones nativas de los SmartPhones. Sigue la filosofía jQuery , permite utilizar Ajax fácilmente, así como también llama la atención el manejo simplificado de la transición de páginas y la utilización de Themas, que con solo cambiar una letra (véanlo y me entenderán), pueden cambiar el tema de los elementos generados con CSS3.

Su grilla de compatibilidad es:

En donde los colores indican:

• A Alta Compatibilidad
• B Mediana Compatibilidad
• C Baja Compatibilidad

http://jquerymobile.com/

Las UI que se pueden llegar a lograr son bastante interesantes, y muy fáciles de implementar:

Personalmente he realizado un par te tutoriales, que puedes ver acá.

Sencha Touch

http://www.sencha.com/products/touch/

Framework construido sobre HTML5, permite desarrollar aplicaciones web móviles con un look & feel muy similar a las aplicaciones nativas de IPhone y Android. Construido sobre estándares , HTML5 (aunque para mi, todavía no está listo como estándar), CSS3 y Javascript, provee funcionalidades como audio y video,  Local Storage para almacenamiento Offline, lo que es muy bueno por si no tenemos conexión en algún momento. Además soporta los muy bien los eventos Touch, como tap, doble tap, el clásico “peñizco”, rotar, etc.

En lo que es integración de datos, Sencha provee librerías para la utilización de AJAX, JSONP o YQL, de modo que podamos bindear los datos con controles,plantillas o incluso con nuestro Local Storage Offline.

Sencha se ofrece bajo dos modalidades, la versión OpenSource, bajo licencia GPLv3 para proyectos de la misma naturaleza, y la versión comercial ($299 dólares)

Te recomiendo ver los demos , son espectaculares, en donde el manejo del touch, las animaciones y la gráfica no tienen nada que enviar a las aplicaciones nativas:
http://www.sencha.com/products/touch/demos/

DHTMLX Touch

Este framework está en su versión Alpha, esta basado en HTML5 y es compatible con la mayoría de las browser de los dispositivo móviles. Cuenta con un impresionante  diseñador visual, con el que vas a poder diseñar la UI de tu aplicación. Este framework promete bastante, esta muy bien logrado y dentro de las características futuras podremos contar con: Completo diseñador Visual Server-Side Integration Global Storage Componentes tipo carrusel Agregar nuevas animaciones Más dispositivos compatibles Documentación detallada Soporte para Local Storage

Este framework debería estar listo para el primer cuarto del 2011, por lo pronto lo podemos descargar para probarlo, jugar un poco, ver sus potencialidades.  La calidad de las UI son bastante buenas, existen varios demos , orientados a Tablets y SmartPhones.

Al igual que la mayoría de los demás framework, corre muy bien sobre navegadores basados en WebKit.
Su licenciamiento es similar al de Sencha, en donde existe una versión bajo licencia OpenSource, y otra de pago.

jQTouch

http://www.jqtouch.com/preview/demos/main/

A mi parecer, uno de los primeros Fx que apareció, va en su versión beta2 , funciona como plugin de JQuery, cuenta con efectos de transición y elementos de formulario, quizás es el que más deja que desear en su WebSite y documentación pero que esto no nos engañe, puedes ver los videos que muestran en Vimeo.

En video en Vimeo:

Es totalmente es OpenSource, disponible totalmente para la descarga.

Conclusión

Estos frameworks, que están en constante desarrollo se acercan cada vez más a las aplicaciones de nativas de los dispositivos móviles, en mi humilde opinión, ya están preparados para proveer todo lo necesario al desarrollar versiones móviles de aplicaciones web. Es importante seguir la evolución de estos productos para determinar cual de todos es el que tienen todas las funcionalidades que deseamos y cual es la matriz de compatibilidad, cada uno  tiene funcionalidades que se destacan y modos de licenciamiento.

En el futuro veremos más de estos Fx con nuevas capacidades, que aprovecharán las también nuevas capacidades de los Tablets y Smartphones, los cuales tienen cada vez más y mejores características de conectividad, lo que permite aún más la utilización de estos componentes.

Seguramente deje fuera algunos framerworks, consideré que estos son los más representativos.

Saludos,
Gonzalo