ASP.NET Ajax Library, Introducción a Datalinker Parte 2: Converters

En el post Anterior (si no lo viste, pincha aquí), hablamos de la nueva característica llamada Datalinker, y teníamos una UI de esta manera:

image

… y todo funciona como es debido, sin embargo no nombre una nueva característica , que tiene que ver con otra propuesta más al team de jQuery , que tiene que ver con los converters .

Los Converters nos permiten convertir, como su nombre lo dice, el valor de una propiedad al momento de hacer el data linker.

Si recordamos la función del post anterior, la modificaremos para agregar el LinkFrom, que nos permite remplazar mediante expresiones regulares, todas los números que se ingresen en el campo de nombre (En esta versión deben ir linkBoth y LinkFrom , quizás más adelante, esto cambie).

image

Entonces al momento de escribir en el campo de texto y por ejemplo Gonzalo 123 y apretar el botón mostrar:

image

Los números fueron eliminados exitosamente Sonrisa

Espero que te sirva!
Saludos,
Gonzalo

ASP.NET Ajax Library, Introducción a Datalinker

Otra de las propuestas que se han enviado a el team de jQuery por parte del team de ASP.NET tiene que ver con los Datalinker. Esta nueva característica permite hacer el “link” desde una propiedad de un objeto a otra propiedad de otro objeto, además que el cambio en el objeto origen, provoque un cambio automático en el objeto con el link. Utilizando en DataLinking podemos sincronizar (y mantener sincronizados)  fácilmente la UI con los objetos en el lado del cliente.

Vamos a tener algo parecido al ejemplo del post anterior (http://geeks.ms/blogs/gperez/archive/2010/06/13/asp-net-ajax-library-introducci-243-n-a-las-nuevas-plantillas-client-side.aspx .

La UI será la siguiente:

image

El primer paso es incluir la librería:

image

 

Luego vamos a tener un objeto que tiene los siguientes campos:

image

Los cuales son coincidentes con nuestra UI, luego debemos hacer el link del objeto “ObjetoDocentes” con nuestros objetos Dom de la UI. (Esto es lo bueno!)

image

 

 

Como puedes ver con el método linkBoth lo que hacemos es linkear la el campo nombre, con la propiedad val del objeto txNombre, de esta manera se realiza la sincronización. al momento de ejecutar la pagina:

image

Ahora bien, si modificamos en la UI los valores, se sincronizan automáticamente en el objeto “ObjetosDocente”. Para eso tenemos una función que nos muestra los datos del objeto, la que está atachada al boton mostrar.

image

 

 

Modificamos el Nombre y Apellido (en la onda mundialera) y al momento de hacer click en mostrar, sin ninguna modificación ni código adicional, podemos ver que se sincronizó los datos del objeto con los datos de la UI.

image

Ahora bien, si queremos modificar los datos por código, lo podemos hacer mediante el método attr:

image

Vamos entonces a presionar el botón guardar y de inmediato se sincroniza la UI:

image

Estas funcionalidades todavía están en un estado de propuesta, y es posible que cambien en el futuro. Pero al menos nos da una visión general de como va a funcionar esta característica en el futuro.

Espero que te sirva!
Saludos
Gonzalo!

ASP.NET Ajax Library , Introducción a las nuevas plantillas Client-Side

image

Ya no es noticia que el team de ASP.NET esté trabajando a toda máquina junto al equipo de jQuery, y que buenos productos se vienen a partir de esta sociedad. Uno de estos son los templates propuestos por el team de ASP.NET  al team jQuery, que estan todavía en etapa de revisión, hay mucho feedback que se está recibiendo por parte de la comunidad.

Que son los Client Templates (o plantillas del lado del cliente)

Permiten a los desarrolladores web generar y renderizar HTML UI en el cliente (generalmente esto lo hacemos en el lado del servidor), mediante sintaxis simples permiten programáticamente invocar plantillas en el clienbte y pasar objetos Javascript , como arreglos por ejemplo, a divs específicos enmarcados en los tag propios de la plantilla. Debido a que esto todavía es una propuesta, es posible que la versión final sea diferente de lo que hoy vamos a ver.
Puedes descargar el prototipo en:  
http://github.com/nje/jquery-tmpl

Vamos a ver un ejemplo para mostrar los datos de Docentes y sus asignaturas, agregando algunas características de las plantillas.

La idea es obtener el siguiente resultado:

image  

Y como siempre en este Blog…. 🙂

PASO 1 – Importar las liberías

Debemos importar las librerías jQuery y la librería del template (descarga el prototipo aquí)

<script src="http://code.jquery.com/jquery.js" type="text/javascript"/>
<script src="Scripts/jquery.tmpl.js" type="text/javascript"/>

PASO 2 – Crear la Colección

Esta colección puede venir de un servicio Rest por ejemplo que nos devuelva en notación JSON un o una colección de objetos. En este caso usaremos una colección creada en la misma página:

image

Como puedes ver, es una colección simple que contiene  otra colección de Asignaturas, la cual en el ejemplo de Bernardo, está vacía. (Espero que no se enojen los personajes aludidos :P)

PASO 3 – Crear el Contenedor y la Plantilla

Para esto vamos a crear un contenedor de la Plantilla, pudiendo existir en ella una o más plantillas para renderizar. Ahora viene lo bueno, como ves se utiliza un tag script de tipo texto/html para contener a la plantilla, como se ve n la figura:

image

Luego vemos unas marcas de tipo {{ = atributo_objeto }}, que hacen referencia a los atributos de la colección que se va renderizando mediante iteración, en este caso, hago un href al atributo URL de cada objeto de la colección, luego concateno nombre y apellido para mostrar el nombre completo en la UI.
A continuación vemos unas sentencias que están en el prototipo de la plantilla, existe el IF, y el each (foreach), acá la idea es que si la persona tiene asignaturas, se muestren en una lista, si no, que muestre el mensaje Sin Asignaturas.

image

Otr0 punto es que quiero imprimir la cantidad de Asignaturas, para eso no se imprime {{= asignaturas.length}} directamente, si no que hay que utilizar funciones javascript, en el ejemplo se muestra una llamada a la función getCantidad() , la cual tiene el siguiente código:

image

Obteniendo en cada iteración , mediante el contexto de la llamada (this), el largo de la colección de Asignaturas.

PASO 4 – Agregar el CSS

image

PASO 5 (y último) – Agregar la Colección a la Plantilla

Paso indispensable (y esta para el último, ejjeje) que nos permite hacer el binding de la colección y la plantilla:

image

Con esto estamos indicando que se renderize la colección contra plantillaDocente.

PASO 6 (Opcional) – Descarga el ejemplo

Como te diste cuenta puse imágenes en vez de texto,es bastante más rápido postear de esta manera, pero no se puede copiar el código!, por eso la aplicación la puedes descargar acá

Descarga el ejemplo

Espero que te sirva!, recuerda que esto está sujeto a cambios, pero nos da una buena idea de como van a trabajar las plantillas del lado del Cliente.
Muy buena la alianza Microsoft & jQuery!!

Saludos!
Gonzalo

[Tips] Query – Confirmar cerrado de página.(muy sencillo!)

Hola!, se que es sencillo, pero por experiencia en el blog, me he dado cuenta que estos tips son de gran utilidad para algunos visitantes.

La idea principal es pedir la confirmación por parte del usuario cuando va cerrar la página ( incluso por que se va a cambiar de página por un menú por ejemplo).

Vamos por parte, primero vamos a tener la página:

image

La idea es que cuando escriban algo, o cambien el dato seleccionado en profesión, o pinchen en sexo o notificaciones, se considere una modificación en la página , por lo cual se debe mostrar el mensaje de confirmación, sin embargo, cuando presionen guardar, no muestre el mensaje. De la misma manera, en los links, hay uno que genera confirmación el otro no.

Para esto,  vamos a crear un archivo js, que en mi caso se llama jverificador, con la programación necesaria para lograr lo que queremos, la estructura del sitio de prueba queda de la siguiente manera:

image

El contenido es el siguiente:

var __modificado = 0;
$(document).ready(function () {
    $(".editable").keypress(function () {
       __modificado = 1;
   });

   
$(".clickeable").click(function () {
       __modificado = 1;
    });
   
   
$(".cambiable").change(function () {
        __modificado = 1;
    });

    $(".anulable").click(function () {
        __modificado = 0;
    });
});

window.onbeforeunload = function (e) {
    if (__modificado == 1) {
        return "Ha modificado datos de página, si continua perderá sus             cambios!";
    }
};

La idea es simple, distintos selectores css, para distintos controles, por ejemplo, el selector para editable, lo puedo setear para los texbox:

<asp:TextBox ID="TextBox2" class="editable" runat="server"/>

o clickeable, podemos asignarlo a los checkboxs y radiobuttons, cambiable para el dropdown.

Otro ejemplo:
<asp:DropDownList ID="DropDownList1" class="cambiable" runat="server">

Existe una variable __modificado que asume el valor de 1 cuando los eventos antes mencionados suceden , pero también la clase anulable para sacar la marca y no mostrar el mensaje.

Luego en el método onbeforeunload, pregunto por el valor la variable __modificado, si existió una acción o modificación el dato toma el valor 1, en otro caso, simplemente no hace nada.

El resultado es el siguiente:

image

Puedes ver además que hay una sección que indica:

image

Al igual que el botón guardar del formulario en uno de estos link no debe pedir confirmación, recordemos que el botón guardar realiza un postback, que si no controlamos mediante la variable __modificado=0, nos pediría confirmación.

Nota, obviamente esto puede generar conflictos como en escenarios en donde se utilice controles con autopostack. Sin embargo en escenarios con Microsoft Ajax funciona ya que no se recarga la página.

Eso!, espero que este archivo JS te sea de utilidad.
Saludos,
Gonzalo

[Tutorial]Introducción al nuevo ScriptLoader de ASP.NET AJAX Library

Hola!, yo de nuevo :), hoy quería hablar de un control de la libería de ajax de ASP.NET que se llama ScriptLoader, el cual en breves palabras nos va a servir para reducir la complejidad a la hora de cargar script y resolver sus dependencias. De hecho la librería Microsoft Ajax Client-Side está dividida en múltiples archivos Javascript, permintiéndonos el ScriptLoader descargar solo los que necesitemos.

Dentro de sus características principales podemos encontrar:

  1. Resolución Automática de dependencias
  2. Carga Perezosa (Lazy loading)
  3. Carga de Script convinados
  4. Carga de Script Personalizados

Veamos con un ejemplo cada Caso:

1) Resolución Automática de dependencias

Vamos a realizar con el siguiente código nuestro análisis:

<html>
<title>ScriptLoader Demo 1</title>
<head>
    <script src=”http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js”  
            type
=”text/javascript”></script>
    <script type=”text/javascript”>
        //Habilitar debugging
        Sys.Debug = true;
       //Resolver Dependencias
        Sys.require([Sys.scripts.DataContext]);
    </script>
</head>
<body>
</body>
</html>

Como  podemos ver la referencia hacia la librería que contiene al ScriptLoader src=http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js , luego utilizamos Sys.require para y especificamos el nombre del componente cliente (o un arreglo de componentes cliente) que queremos cargar. Este control descarga todos los script necesarios en paralelo , permitiendo que la carga sea más rápida que lo normal (normalmente no hay descarga de script en paralelo), evitando bloquear la pagina mientras se renderiza. Cuando están cargados todos los script, se llama al método Sys.onready.

Al ejecutar el ejemplo 1 vamos a ver lo siguiente cuando analicemos el tráfico con Firebug:

image

Como ves, se estan cargando los script y sus correspondientes dependencias y en paralelo 🙂

2) Carga Perezosa de Script

Como no todo hay que cargarlo siempre al inicio, ya que por algún motivo, es posible que debido a la lógica de nuestro front-end. Veamos el Script:

<html>
<title>ScriptLoader Demo 2</title>
<head>
    <script src=http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js
            type=”text/javascript”></script>
    <script type=”text/javascript”>

        Sys.Debug = true;
      
//Carga Demorada
        function doSomething() {
            alert(‘Carga Demorada’);
            Sys.require([Sys.scripts.DataContext]);
        };
    </script>
</head>
<body>
    <input type=”button” onclick=”doSomething()” value=”ClickMe!” />
</body>
</html>

En este caso, al momento de presionar el botón, se van a cargar los archivos :), mostrando el mismo resultado que la foto tomada con FireBug anteriormente.

3) Carga de Script Combinados

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <script src=http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js
            type
=”text/javascript”></script>
    <script type=”text/javascript”>
        Sys.Debug = true;
        //Carga normal 
        function cargaNormal() {
            Sys.require([Sys.scripts.Core]);
            Sys.require([Sys.scripts.ComponentModel]);
            Sys.require([Sys.scripts.Network]);
            Sys.require([Sys.scripts.Serialization]);
            Sys.require([Sys.scripts.History]);
            Sys.require([Sys.scripts.Globalization]);
            Sys.require([Sys.scripts.WebServices]);
        };        //Script Combinados
        function cargaCombinado() {
            Sys.require([
              Sys.scripts.Core,
              Sys.scripts.ComponentModel,
              Sys.scripts.Network,
              Sys.scripts.Serialization,
              Sys.scripts.History,
             
Sys.scripts.Globalization,
              Sys.scripts.WebServices
       ]);
    };
    </script>
</head>
<body>
  <input type=”button” onclick=”cargaNormal()” value=”cargaNormal” />
  <br />
  <input type=”button” onclick=”cargaCombinado()” value=”cargaCombinado” />
</body>
</html> Podemos darnos cuenta de la diferencia de la sentencia, en el primer caso son Sys.require independientes , en el segundo caso, que sería el de Script Combinados es solo un Sys.require que recibe una colección de componentes clientes.

 Veamos la diferencia con FireBug:
Opción carga normal:
image

Opción Scripts Combinados
image

En este caso hay una pequeña reducción de tiempo (medio segundo), la mayoría de este tiempo es parte de resolver al servidor y obtener los archivos individuales.

4) Carga de Script Personalizados

Muchas aplicaciones basadas en Ajax tienen comportamientos que no se ejecutan al iniciar la página, por lo que no es necesario cargar todos los script de la página en un inicio, solo cuando se necesita, evitando el retrazo del render hasta que se carguen todos los scripts.

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <title>ScriptLoader Demo CustomScript</title>
   <script src=http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js
           type
=”text/javascript”></script>
    <script type=”text/javascript”>
        function Saludar() {
            Sys.loadScripts([“MyScripts/Script1.js”,
                             “MyScripts/Script2.js”,
                             “MyScripts/Script3.js”], 
                    function () {
                             Saludo1();
           
                 Saludo2();
            
                Saludo3();
            });
        }
    </script>
</head>
<body>
 <input type=”button” onclick=”Saludar()” value=”Saludar” />
 <br />
</body>
</html>

 

En este caso tengo 3 Script que tienen una función que se llama Saludo1, Saludo2 y Saludo3 respectivamente, por ejemplo el código del Script1

image

function Saludo1() {
    alert(“Hola desde Script1.js!”);
}

 

Ahora ejecutamos , presionamos el botón saludar y revisamos nuevamente en FireBug:

image

Existe la posiblidad tambien, que veremos más adelante, podemos especificar las dependecias de nuestros propios script, pero eso lo vamos a ver en otro post 🙂

Saludos!
Gonzalo

[Charlas] “Técnicas Ninja de Optimización de Web & ASP.NET AJAX” –Instituto Virginio Gómez

Hola!, te quiero invitar, a una charla en el Instituto Virginio Gómez, sede Concepción, el Viernes a las 11 de Junio , a las 17:00 horas. El tema será:

Titulo:
“Técnicas Ninja de Optimización de Web & ASP.NET AJAX”

Resumen:
En esta sesión revisaremos algunas reglas de Oro dentro de la Optimización Web /ASP.NET AJAX todo esto acompañado de muchas demos para examinar y discutir las mejoras conseguidas. Compresión HTTP, CSS Sprites , Script Combinados, el uso de CDN, Minificación de Script y CSS, así como también tips para optimización de Microsoft AJAX , todas técnicas que puedes poner en práctica para hacer volar tu Sitio Web

Será una buena oportunidad para compartir experiencias sobre optimización de los front-end y revisar el camino a seguir para  utilizar buenas prácticas en el tema.

PD:Como siempre y quieres charlas en tu Universidad o lugar de trabajo, con gusto voy  :), solo nos ponemos de acuerdo.

Saludos,
Gonzalo