ASP.NET 4.0 Client Templates + ADO.NET Data Services, ejemplo básico.

Hace un par de días estaba traduciendo el whitepaper de ASP.NET 4.0 y sin duda postear un ejemplo, va a dejar las cosas mas claras , este va a ser un ejemplo sencillo (creo que lo más sencillo) para que vayamos estudiando esta funcionalidad que me tiene entusiasmado. Para estar a la moda, lo vamos a hacer con VS2010

Vamos a tener un sitio web con la siguiente estructura, en donde tenemos  una base de datos con dos tablas (para este ejemplo ocuparemos solo una). Vamos a utilizar Entity Framework, mapeando las tablas desde la base. Y para exponer como servicios Rest estas tablas, vamos a utilizar ADO.NET Data Service.

Estructura del Sitio Web

image image

Voy a resumir los pasos a seguir, pero si quieres ver en detalle como se genera un ADO.NET Entity Data Model y un ADO.NET Data Service, te recomiendo ver el siguiente articulo de Ibon Landa:
http://geeks.ms/blogs/ilanda/archive/2008/05/19/ado-net-data-services-paso-a-paso-i.aspx

Paso 1

Luego agregamos un ADO.NET Entity Data Model

image

Una vez que lo agregamos, se nos presenta un asistente, en donde vamos a poder seleccionar las tablas que vamos a mapear. Es resultado para este ejemplo, es el siguiente:

image

Una vez mapeadas las tablas vamos a agregar en el proyecto un ADO.NET Data Service, con la finalidad de poder acceder a el contenido de estas tablas mediante un servicio Rest. Para eso agregamos un nuevo ítem

image

 Código Generado por ADO.NET DataService y modificando lo necesario

Este es el código que genera el template de ADO.NET Dataservice, vamos a modificar lo justo para que nuestro ejemplo funciona, acá es muy importante que veas que modifiques el atributo de la interface DataService a tu clase de modelo en entidades, en mi caso es MibaseModel.MibaseEntities1. Tambien puedes configurar reglas de acceso para las distintas entidades mapeadas.

using System;
using System.Data.Services;
using System.Collections.Generic;
using System.Linq;
using System.ServiceModel.Web;  

public class WebDataService : DataService<MibaseModel.MibaseEntities1>
{
    // This method is called only once to initialize service-wide policies.
    public static void InitializeService(IDataServiceConfiguration config)
    {
             config.SetEntitySetAccessRule(“*”, EntitySetRights.AllRead);
      }
}

Probando el Servicio

Para probarlo, primero podemos escribir en la URL del Browser:

http://localhost:8367/mdd/WebDataService.svc/

image

O También
http://localhost:8367/mdd/WebDataService.svc/Personas(1) y el servicio nos devolverá todos los campos del registro Personas cuyo ID sea 1.

image

Client Templates

Una de las ideas principales que tiene Client Templates, como su nombre lo indica es la posibilidad de bindear los datos desde el servidor, pero mediante programación del lado del cliente, de forma de proveer una manera liviana, rápida y eficaz de construir nuestros sitios web, y no solo eso, la integración con jquery es genial, además se utiliza el patrón de diseño observador para proveer la funcionalidad de que cambios en los datos obtenidos desde el origen de datos, sean informados para proveer el binding bidireccional, es decir, registrar en la fuente de datos, que el registro se modificó.

Lo primero es importar los script, luego es definir el dataview a utilizar (puedes ver una explicación en http://geeks.ms/blogs/gperez/archive/2009/07/20/ajax-functionality-en-asp-net-4-0-parte-1-5.aspx), luego vamos a definir el proveedor de datos para el dataview, el cual es una clase AdoNetServiceProxy y en su constructor le pasamos como argumento el servicio creado, también especificamos de que objeto vamos traerlos datos,en este caso, Personas,  esto asociado al tag html padre (ul) al cual vamos a ligar los datos que vamos a obtener, en este caso, el Id y Nombre, los cuales son “bindeados” e impresos en la lista mediante el tag {{ campo }}

<script type=”text/javascript”
src=”MicrosoftAjax/MicrosoftAjax.debug.js”></script> 
<script type=”text/javascript” src=”MicrosoftAjax/MicrosoftAjaxTemplates.debug.js”></script> 

<script type=”text/javascript” src=”MicrosoftAjax/MicrosoftAjaxAdoNet.debug.js”> </script>

<body xmlns:sys=”javascript:Sys” xmlns:dataview=”javascript:Sys.UI.DataView”
      sys:activate=”*”>

<ul class=”list sys-template”
   sys:attach=”dataview”
   dataview:autofetch=”true”
   dataview:dataprovider=”{{ new Sys.Data.AdoNetServiceProxy
    (‘WebDataService.svc’) }}”
   dataview:fetchoperation=”Personas”  >
    <li>
            <span class=”name”>{{ Id }}</span>
            <span class=”value”>{{ Nombre }}</span>
    </li>
</ul>

 </body>

aAl Probar nuestra pequeña aplicación, vemos que tenemos nuestra pantalla con los datos impresos, pero sin ocupar algún runat=”server” y sin tener ViewState en la página (yeah!)

image

 Vista de código fuente y repito, sin Viewstate 🙂

image

 Para descarga este ejemplo acá, es posible que tengas que recompilarlo

Espero que te haya servido, voy a tratar de escribir más ejemplos, pero haciendo un CRUD completo.

Saludos,

Gonzalo

[ChalaGauget] Dos Skin de Héctor Pérez, Cool! Bájalos ya!

Otros Skin de la mano de  Héctor Pérez que están muy buenso, llegar y probar en el control(lineal y circular), visita el blog de Héctor para aprender de WPF,  XAML entre otras cosas.

Skin Nitro para Gauget Lineal

image

Para probarlo, cópialo en la carpeta raíz y luego en el archivo GaugeLineal.js cambia la propiedad:

var MODELOXAML = “GaugeNitroLineal.xaml”;

DESCARGA EL SKIN NITRO LINEAL

 

Skin Blueking para Gauget Circular

image

Para probarlo, cópialo en la carpeta raíz y luego en el archivo Gauge.js cambia la propiedad:

var MODELOXAML = “GaugeBlueKing.xaml”;

DESCARGA EL SKIN BLUE KING

Espero que les sirva!

Saludos,
Gonzalo

[ChalaGauge] Disponible Gauge Semi-Circular

image

 

Hola que tal, seguimos en la línea  de los gauges, esta vez con Gauges semi-circulares, espero poder hacer en el corto plazo más skin para este tipo de control.

Si es el primer post que lees de esto, puedes ver los artículos anteriores , que explican en funcionamiento del control.

http://geeks.ms/blogs/gperez/archive/2009/07/20/chalagauget-skin-nitro-de-h-233-ctor-p-233-rez-cool-b-225-jalo-ya.aspx

http://geeks.ms/blogs/gperez/archive/2009/07/13/gauge-mi-control-gauge-silverlight-versi-243-n-beta1-liberada-para-siempre-gratis.aspx

http://geeks.ms/blogs/gperez/archive/2009/07/15/chalagauget-nuevo-skin-para-control-circular.aspx

La Estructura de Carpetas sigue siendo la misma:

image

Descarga

Puedes descargarlo gratis  desde acá.

Espero que te sirva!
Gonzalo

[Off-Topic] Diferencias entre un docente de informática que solo ha hecho clases y uno que también trabaja.

Diferencias entre un docente de informática que solo ha hecho clases:

Muchachos, programemos :
System.out.println("Hola Mundo");
System.out.println("Odien a Microsoft");

Un profe part-time, que trabaja en el área y hace clases:
System.Console.WriteLine("Pongámonos serios, hagamos software");
System.Console.WriteLine("Odien la ignorancia, de preferencia, la propia");

Para terminar la idea, pero “Más docentes que transmitan experiencia del medio empresarial a los alumnos, alumnos mejor preparados, más docentes fundamentalistas que nunca han trabajado en empresas haciendo un software y que enseñan ingeniería de software y proyectos, se traduce en alumnos con conocimientos potencialmente inútiles!”.

Es mi humilde opinión!

PD1: Algunos colegas me deben estar odiando, pero bueno, siempre me odiaron.

PD2: Algo más desalentador para un alumno, en términos de credibilidad hacia los conocimientos  el docente, que dicho docente, venga con un libro “JAVA for Dummies” bajo el brazo?

 

Saludos,
Gonzalo

[ChalaGauge] Bug #1 Compatibilidad con IE7

Hola, se detectó un error en los archivos

  • GaugeLineal.xaml.js – Para Gauget Lineal
  • Gauge.xaml.js – Para Gauget Circular

El Bug trae problemas de compatibilidad solo con IE7, y es imperceptible con los demás navegadores (IE8, FireFox, Opera, Chrome y Safari).

Puedes descargar los archivos acá:

Descargar

Nota: La versión para descargar del control que puedes encontrar en los siguientes links, ya contiene la solución.

Ir a Página de  Gauget Lineal

Ir a Página de Gauget Circular

Saludos,
Gonzalo

[ChalaGauge] Nuevo Control Gauge Lineal Beta

Hola, quiero compartir con ustedes otra versión del Gauge, si este es el primer post que vez sobre estos controles, te invito a revisar los siguientes links:

http://geeks.ms/blogs/gperez/archive/2009/07/20/chalagauget-skin-nitro-de-h-233-ctor-p-233-rez-cool-b-225-jalo-ya.aspx

http://geeks.ms/blogs/gperez/archive/2009/07/13/gauge-mi-control-gauge-silverlight-versi-243-n-beta1-liberada-para-siempre-gratis.aspx

http://geeks.ms/blogs/gperez/archive/2009/07/15/chalagauget-nuevo-skin-para-control-circular.aspx

Si ya sabes de que hablo, bueno , sigamos revisando el nuevo control, básicamente consiste en un Gauge lineal, es decir, que su indicador se mueve horizontalmente.

Esta vez, no implementé archivos de Skin para cada una de las versiones, ya que creo que se ven bien sin modificaciones (o al menos eso creo). A diferencia de los Gauge circulares, se ha incluido funcionalidades adicionales, como ir mostrando el valor máximo alcanzado y el valor mínimo, además de poder resetear estos valores.

En la siguiente imagen podemos ver las características del Gauge

image

Los dos diseños que se incluyen hasta el momento son:

1) GaugeLineal1.xaml:

image

2) GaugeLineal2.xaml:

image

Configuración Básica

En el archivo que está dentro de la carpeta Scripts, GaugeLineal.js podrás editar los principales parámetros de configuración.

//Seleccion del SKIN
var MODELOXAML = "GagueLineal1.xaml";
var MOSTRAR_INDICADORES = "SI";   //SI – NO
var MOSTRAR_RESET_INDICADORES = "SI"; //SI – NO
var FUNCION = "generaAnimacion(aleatorio())";
var INTERVALO = 2000;
//Dimensiones
var ALTO = 105;
var ANCHO = 459;

Como se ve, se puede setear si es que queremos ver los indicadores (máximo y mínimo) y si es que queremos ver el botón reset. Además se pueden cambiar las dimensiones (en el gadget anterior solo teníamos la variable dimensión ya que era un cuadrado), lo demás funciona de manera similar al control gauge circular.

Estructura de Carpetas

Como se ve en la siguiente figura, ya no existen los skins, lo que hace que resulte en un control bastante sencillo de implementar.

image

Probando el Control

Video:

Descarga:

Baja el control ChalaGauge Lineal  ( y cuéntame como te fue, soy un fanático del feedback!)

Espero que te sirva!
Gonzalo

AJAX Functionality en ASP.NET 4.0 – Parte 1/5

Hola que tal? en esta serie de artículos voy a estar “traduciendo” de documento “ASP.NET 4.0 and Visual Studio 2010 Web Development Overview”. Muchos cambios cool vienen para ASP.NET 4.0, voy a partir por algunos que me son más emocionantes (aunque todos lo son!)

ahí vamos…

La funcionalidad de AJAX dentro de ASP.NET 4.0 permite nuevos escenarios de programación del lado del cliente para las páginas y componentes desarrollados que permiten interactuar con datos desde el servidor con notación JSON  para ser renderizados como HTML de una manera altamente eficiente. Para habilitar estos escenarios, ASP.NET 4.0 incluye las siguientes características:

  • Plantillas renderizables del lado del cliente
  • Instanciación declarativa de los controles  y comportamientos del lado del cliente
  • Live Data Binding
  • Uso del patrón observador con tipos Javascript
  • Una clase AdoNetServiceProxy para el la interacción con ADO.NET Data Services del lado del Cliente.
  • Un control del lado del cliente llamado DataView para la unión de los datos con los componentes UI
  • Clases DataContext y AdoNetDataContentext para la interacción con Servicios Web.
  • Librerías de ASP.NET AJAX refactorizadas.

Client Templates Rendering.

En un desarrollo basado en el lado del cliente, las plantillas son la forma más manejable para crear la UI. ASP.NET 4.0 incluye un nuevo motor de plantillas para el desarrollo centrado en el cliente que cumple con los siguientes requerimientos:

  • Rendimiento -  El motor debe ser capaz de renderizar un número de ítems típico usando una plantilla razonablemente compleja antes que los usuarios perciban alguna interrupción en su interacción con la aplicación.
  • Simplicidad – La sintaxis a utilizar con las plantillas debe ser legible y debe estar optimizado para la mayoría de los escenarios comunes, llamados one-way/one-time binding.
  • Lenguaje – Las plantillas deben soportar expresiones del lenguaje para ir más allá de los casos mas sencillos. Las expresiones del lenguaje deben ser con sintaxis familiares , idealmente sintaxis Javascript.
  • Código y Marcas  Interceptadas – Debe ser posible realizar renderizado condicional o bucle sobre marcas utilizando el código HTML que lo rodea.
  • Compatible XHTML  – Las plantillas deben ser compatibles con XHTML.
  • Componentes – Cuando se usa la sintaxis de las plantillas, el desarrollador debe poder instanciar los controles del lado del cliente así también como  los comportamientos que se atacharan a los controles HTML en la página o con las plantillas.

Ejemplo de Plantilla

El siguiente ejemplo muestra una plantilla del lado del cliente típica que se puede crear usando ASP.NET 4.0

<ul id="myTemplate" class="sys-template"
    sys:attach="dataview" >
     <li>
        <h3>{{ Name }}</h3>
        <div>{{ Description }}</div>
    </li>
</ul>

El atributo class del atributo ul esta marcado como “sys-template”, el cual es una convención que se utiliza para ocultar la plantilla inicial del usuario. Se debe definir esta clase en el CSS como {display:none;}.

Cuando la plantilla se muestra, tiene un elemento de datos como contexto. Campos o Propiedades pueden ser incluidos en la plantilla de marcas mediante el uso de las marcas {{}}} – por ejemplo, {{Name}}, si es que el elemento de datos tiene un campo Nombre. Estas expresiones pueden estar situadas en cualquier lado en un contexto de texto, o se puede usar como el valor de un atributo. Además de los campos y propiedades, la expresión también puede contener bloques de JavaScript cualquier expresión la cual que puede ser evaluada como una cadena.

Se puede configurar eventos DOM utilizando el método $AddHandler. En el DOM, los atributos de los elementos (como por ejemplo, onclik=method) funcionan con las plantillas.

Instanciar una plantilla mediante el control DataView

La forma más conveniente de usar plantillas de cliente en ASP.NET 4.0 es a través del control DataView. El contenido del control DataView es usado  como una plantilla para renderizar los items de datos (registros) que provee el control. Si se establece la propiedad del  control de datos del DataView como  un array, la plantilla es redenrizada una vez por cada ítem en el arreglo. El control DataView se une a datos en vivo (live Binding), lo que significa que el control se actualiza automáticamente cuando se modifica la información en el origen, sin la necesidad de hacer rebind. Esto proporciona una dinámica impulsada por datos de la interfaz de usuario en el navegador. El siguiente ejemplo muestra el de manera declarativa de un control DataView que se une a un conjunto llamado imagesArray.

<body xmlns:sys="javascript:Sys"
  xmlns:dataview="javascript:Sys.UI.DataView"
    sys:activate="*">

    <ul sys:attach="dataview" class="sys-template"
        dataview:data="{{ imagesArray }}"    >
        <li>
            <h3>{{ Name }}</h3>
            <div>{{ Description }}</div>
        </li>
    </ul>
</body>

Instanciar Plantillas mediante código

Además, se puede crear plantillas compiladas desde código usando la clase Sys.UI.Template, como se muestra en el siguiente ejemplo:

var t = new Sys.UI.Template($get("myTemplate"));

El constructor toma el elemento de la plantilla como argumento. A continuación, se puede hacer una plantilla compilada en el DOM, llamando su método instantiateIn HTML y especificando un contenedor y un ítem de datos (data ítem)  como contexto. El siguiente ejemplo muestra cómo hacer esto.

t.instantiateIn(
    $get("targetContainer"), 
    {
        Name: "Name",
        Description: "Description"
    }
);

Usando las Pseudo-columnas en las Plantillas

Además de proporcionar acceso a los campos y las propiedades de los ítems de datos, el motor de renderizado de la plantilla también proporciona acceso a los  pre-definidos "pseudo-columnas", como el $index y $dataItem. Estas pseudo-columnas le dan acceso a los valores desde motor de renderizado en tiempo real. Puede utilizar las pseudo-columnas  de la forma que se  utiliza cualquier variable de JavaScript en la plantilla instanciada. El primer ejemplo aplica un css diferente al elemento div para marcar los elementos alternativos que son dibujados por el control Dataview. El segundo ejemplo pasa la pseudo-columna $dataItem, el cual representa los datos del registro actual, a una función llamada nameConvert para ser procesada.

<div class:alternateitem=”{{$index%2 == 1}}”>

<span>{{nameConvert($dataItem)}}</span>

Incorporando Código dentro de las Plantillas para usar los atributos code:if, code:before, y code:after

Se puede agregar los nuevos atributos declarativos code:if, code:before, y code:after para cualquier elemento DOM dentro de una plantilla con el fin de que el elemento condicional (code:if) o para renderizar según el código antes (code:before) o después (code:after) el elemento. El siguiente ejemplo muestra como usar el atributo  code:if para renderizar un elemento hr como un separador entre ítems. El atributo code:if usa el valor de la pseudo-columna para asegurarse que el elemento hr es renderizado solo entre ítems, y no antes  del primero o después del último elemento.

<ul id="myTemplate" class="sys-template">
     <li>
        <hr code:if="$index!==0" />
        <h3>{{ Name }}</h3>
        <div>{{ Description }}</div>
    </li>
</ul>

Instanciando Comportamientos y controles declarativamente

ASP.NET 4.0 introduce una forma declarativa para crear una instancia del control y comportamientos del lado del cliente  y adjuntarlos a los elementos HTML. Las marcas declarativas se logra sin añadir nuevos elementos HTML, simplemente por la inclusión de nuevos atributos namespaced los cuales son compatibles con XHTML.

Continua con la siguiente entrega… (mañana)

Saludos,
Gonzalo

[ChalaGauget] Skin Nitro de Héctor Pérez, Cool! Bájalo ya!

Otro Skin de la mano de  Héctor Pérez que está muy bueno, llegar y probar en el control, visita el blog de Héctor para aprender de WPF,  XAML entre otras cosas.

image

Para probarlo, cópialo en la carpeta raíz y luego en el archivo Gauge.js cambia la propiedad:

var MODELOXAML = "GaugeNitro.xaml";

DESCARGA EL SKIN

Espero que les sirva!