27 de noviembre de 2009

C# 3.0, Propiedades Auto-Implementadas

Las propiedades auto implementadas, son una nueva característica incluida en la versión C# 3.0, que hacen que la declaración de propiedad sea más concisa cuando no se requiere ninguna lógica adicional en los descriptores de acceso de la propiedad.

Pero como de costumbre expliquemos esta característica con el uso de un ejemplo:

Hagamos la declaración de una clase, pero primero veamos un ejemplo de como lo haríamos sin usar propiedades auto implementadas (que es como se hacia antes de C# 3.0); y posteriormente lo haremos usando esta nueva característica (propiedades auto implementadas).

Sin usar Propiedades Auto-Implementadas

    public class Contacto
    {
        private int _IdContacto;
        public int IdContacto
        {
            get { return _IdContacto; }
            set {}
        }
 
        private string _Nombre;
        public string Nombre
        {
            get { return _Nombre; }
            set { _Nombre = value; }
        }
 
        private string _Telefono;
        public string Telefono
        {
            get { return _Telefono; }
            set { _Telefono = value; }
        }
    }

En el código anterior hemos creado la clase Contrato que tiene 3 propiedades y una de ellas es de solo lectura, pero veamos como sería crear esta misma clase usando propiedades auto implementadas.

Usando Propiedades Auto-Implementadas

    public class Contacto
    {
        public int IdContacto { get; private set; }
        public string Nombre { get; set; }
        public string Telefono { get; set; }
    }

Y así de simple, todo mucho mas sencillo y compacto al usar las propiedades auto implementadas (Automatically Implemented Properties).

Artículos Relacionados:

25 de noviembre de 2009

C# Métodos Anónimos o Anonymous Methods.

¿Que son los métodos anónimos? ¿Como usarlos? ¿Donde ver un ejemplo práctico? Si quieres aclarar alguna de estas preguntas, estas en el artículo indicado.  Explicaremos mediante ejemplos simples y prácticos como, donde y cuando usar los métodos anónimos.

Los métodos anónimos (Anonymous Methods) son una de las novedades que se incorporaron en la versión de C# 2.0. Y están concebidos para simplificar la definición de eventos, especialmente cuando son pocas las líneas asociadas a estos eventos.

Pero como siempre veamos un ejemplo de uso de un método anónimo para comprenderlos mejor:

Métodos Anónimos, Ejemplos

El ejemplo que explicaremos a continuación no tiene demasiado sentido pero lo usaremos para poder comprender mejor los métodos anónimos.

En nuestro ejemplo tendremos una pagina web que contendrá 2 botones y un label, asociaremos al evento click de cada botón un método anónimo, pero veamos primero el código aspx:

<div>
  <asp:Button ID="btnMetodoAnonimo1" runat="server" Text="M. Anónimo 1" />
  <asp:Button ID="btnMetodoAnonimo2" runat="server" Text="M. Anónimo 2" />
  <br /><br />
  <asp:Label ID="lblMetodoAnonimo" runat="server"></asp:Label>
</div>

Veamos ahora el código C#, que es donde definiremos los métodos anónimos que es el objetivo de este post:

protected void Page_Load(object sender, EventArgs e)
{
  //Definamos el método anónimo y asociémoslo al evento click
  btnMetodoAnonimo1.Click +=
   delegate { lblMetodoAnonimo.Text = "Hemos hecho click en el botón M.Anónimo 1."; };
 
  //Definamos el método anónimo y asociémoslo al evento click
  btnMetodoAnonimo2.Click +=
   delegate (object objSender, EventArgs evArg) {lblMetodoAnonimo.Text=evArg.ToString(); };
}

En el código expuesto hemos definido un método anónimo que asociamos al delegado del evento click. Otra forma de haber hecho esto mismo sin usar métodos anónimos, seria:

btnMetodoAnonimo1.Click += new System.EventHandler(btnMetodoAnonimo1_Click);
 
private void btnMetodoAnonimo1_Click(object sender, System.EventArgs e)
{
  lblMetodoAnonimo.Text = "Hemos hecho click en el botón M.Anónimo 1.";
}

Al comparar los códigos y las formas de lograr el mismo objetivo, te percataras que es mucho mas simple hacerlo usando métodos anónimos, aunque he de reconocer que es menos comprensible la lectura del código. Pero si los usamos nos evitamos incluir toda la declaración de un método para algo tan simple; y es aquí donde son prácticos los métodos anónimos. La diferencia entre ambas técnicas es que ahora no nos hace falta definir una función, lo hace automáticamente por nosotros el compilador a la hora de crear el ejecutable.

Nota: Un método anónimo nos permite definir una función de manera implícita, sin necesidad de declararla.


Nota: En versiones de C# anteriores a la versión 2.0, la única manera de declarar un delegado era utilizar métodos con nombre. C# 2.0 introdujo los métodos anónimos, mientras que, en C# 3.0 y versiones posteriores, las expresiones lambda reemplazan a los métodos anónimos como la manera preferente de escribir código insertado. No obstante, la información sobre los métodos anónimos de este tema también se aplica a las expresiones lambda.

Artículos Relacionados:

24 de noviembre de 2009

Tipos Anónimos

Son varias las mejores que se incluyeron en C# 3.0, y seguramente la mayor es la inclusión de LINQ pero no vamos a hablar en este momento de LINQ, si no de los Tipos anónimos (Anonymous Types).

Veamos un ejemplo de definición de tipos anónimos y después lo comentaremos:

//Tipos Anónimos
var persona = new { Nombre="María", Apellidos= "García Arias" };

En el ejemplo anterior estamos creando una variable de tipo anónimo con 2 propiedades (Nombre, Apellidos).

Los Tipos Anónimos o Anonymous Types son una característica del lenguaje de programación C# 3.0 que permite crear implícitamente campos con nombre desde el código que lo requiere. Esta es una importante característica para LINQ. Como los tipos anónimos no tiene un tipo de dato con nombre, deben ser almacenados en variables declaradas usando la palabra reservada var, que le indica al compilador que use inferencia de tipos para la variable.

Nota: Las propiedades de tipos anónimos no pueden asignarse después de inicializarse, son siempre de solo lectura, es decir algo como esto NO puede hacerse: ( persona.Nombre="María"; )

Los tipos anónimos no debe ser confundidos con los tipos dinámicos. Mientras los tipos anónimos permiten a los programadores definir campos aparentemente "sobre la marcha", estos son aun entidades estáticas. La verificación de los tipos es hecha durante la compilación, y el intento de acceso a un campo no existente causará un error de compilación. Esto da a los programadores las ventajas de los lenguajes dinámicos, con la seguridad de tipos de un lenguaje estático.

Cerremos el artículo con un ejemplo de uso de tipos anónimos en consultas LINQ:

var personas = from p in lstPersonas
               select new
               {
                  NombreCompleto = p.Nombre + " " + p.Apellidos,
                  TelefonoHogar = p.Telefono
               };

Artículos Relacionados:

23 de noviembre de 2009

AJAX jQuery Load con ASP.NET

jQuery dispone de la función $.load(), con ella es muy simple implementar AJAX en nuestras aplicaciones. La función $.load() inserta el contenido HTML de la respuesta del servidor en el elemento de la página que se indica.

Pero expliquemos con más detalles un ejemplo donde usemos esta técnica.

Método jQuery Load

En días pasados escribí un articulo sobre un ejemplo práctico de como utilizar AJAX jQuery en aplicaciones ASP.Net. En dicho artículo usaba la función $.ajax() y explicaba sus parámetros y como hacer uso de ella en ASP.Net, es esta ocasión intento explicar otra función de jQuery AJAX, en particular $.load:

load(url, [data], [callback])

Argumentos:

  • url: La URL a la que enviaremos la solicitud.
  • data: [opcional] Un objeto en formato JSON que se pasa a la solicitud AJAX. Al usar este argumento la petición se hace utilizando el método POST. Si es omitido se utiliza el método GET.
  • callback: [opcional] Una función que se invocará después de que la solicitud ha sido procesada.

jQuery AJAX Método load, Ejemplo

Nuestro ejemplo será muy simple, crearemos una página aspx que contendrá 2 botones y un div. Con ambos botones lo que haremos será usar la función jQuery AJAX $.load() para cargar, en el div, contenido externo que está en otra página. La diferencia entre ambos botones es que en uno usaremos la forma más simple de uso de jQuery AJAX load, en el segundo lo complicaremos un poco más, pero veras que igualmente es muy simple. Este ejemplo nos servirá para dar una idea sobre el uso de jQuery AJAX load.

Pero veamos el código de ejemplo asociado:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQAjaxLoad.aspx.cs" Inherits="jQuery_Ajax_jQAjax" %>
<html>
  <head id="Head1" runat="server">
    <title>JQuery AJAX, Usando Load, Ejemplo Básico</title>
  
    <script type="text/javascript" src="../Scripts/jquery-1.3.2.min.js" ></script>
  
    <script type = "text/javascript">
        jQuery(document).ready(function() {
            $('#btnAJAXLoadSimple').click(function() {
                 $('#resultado').load('Contenido.htm');
             });
        });
    </script>   
  </head>
  <body>
    <input type="button" id="btnAJAXLoadSimple" value="Probando jQuery AJAX Load Simple" />
    <br /><br />
    <div id="resultado" style="border:solid 1px; padding:10px;"></div>
  </body>
</html>

Comentemos un poco el código mostrado:

En el Head vemos que después de definir el titulo de la página (JQuery AJAX, Usando Load, Ejemplo Básico) lo próximo es hacer referencia al jQuery.js, en nuestro caso (jquery-1.3.2.min.js).

Después encontramos la definición de la función jQuery(document).ready(), que se ejecutará una ves halla finalizado la carga de la página. En ella asociamos al evento click del botón btnAJAXLoadSimple la llamada Ajax usando el método load. En esa línea definimos que el div ‘resultado’ lo que debe hacer es cargar en su interior el HTML que se encuentra en el fichero Contenido.htm.

Ver demo de jQuery AJAX Load Simple.

Pero compliquemos un poco más la llamada al método.

 

jQuery AJAX Método load, Ejemplo Avanzado

Al código anterior agreguémosle el segundo botón donde mostraremos otras opciones de $().load()
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQAjaxLoad.aspx.cs" Inherits="jQuery_Ajax_jQAjax" %>
<html>
  <head id="Head1" runat="server">
    <title>JQuery AJAX, Usando Load, Ejemplo Básico</title>
  
    <script type="text/javascript" src="../Scripts/jquery-1.3.2.min.js" ></script>
  
    <script type = "text/javascript">
        jQuery(document).ready(function() {
            $('#btnAJAXLoadSimple').click(function() {
                 $('#resultado').load('Contenido.htm');
             });
             $('#btnAJAXLoadComplejo').click(function() {
                 $('#resultado').load('ContenidoAjax.aspx?Opcion=1',
                                      { 'Nombres[]': ["José", "María"] },
                                      MostrarAviso());
             });
        });
        function MostrarAviso() {
            alert("Finalizada la petición AJAX.");
        }
    </script>
  
  </head>
  <body>
    <input type="button" id="btnAJAXLoadSimple" value="Probando AJAX Load Simple" />
    <input type="button" id="btnAJAXLoadComplejo" value="Probando AJAX Load Complejo" />
    <br /><br />
    <div id="resultado" style="border:solid 1px; padding:10px;"></div>
  </body>
</html>

En este otro código de ejemplo hemos agregado la funcionalidad del segundo botón (btnAJAXLoadComplejo) del evento click. En este caso al hacer click en el botón cargaremos el contenido que nos devuelva la página 'ContenidoAjax.aspx'.

Además pasaremos por QueryString la variable Opcion=1 ('ContenidoAjax.aspx?Opcion=1'), además pasamos un array de nombre y definimos la función MostrarAviso() que se ejecutará al terminar la petición AJAX.

Veamos ahora el código C# de la página que será llamada ('ContenidoAjax.aspx?Opcion=1')

public partial class jQuery_Ajax_ContenidoAjax : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string result = string.Empty;
        if (Request.QueryString["Opcion"] == null)
            result = "La fecha y hora actual es: " + DateTime.Now.ToString();
        else if (Request.QueryString["Opcion"] == "1")
            result = "1. Se usó la opción 1. La fecha es: " + DateTime.Now.ToString();
        else
            result = "Se ha realizado una petición AJAX.";
        Response.Write(result);
    }
}
Nota: En el ejemplo pasamos en el método load un array de nombres que no estamos usando en la página destino, pero el objetivo era únicamente mostrar que es posible pasar datos con formato JSON.

 

jQuery AJAX, Otros Métodos

Además de la función $.ajax() genérica, existen varias funciones relacionadas que son versiones simplificadas y especializadas de esa función. Así, las funciones $.get() y $.post() se utilizan para realizar de forma sencilla peticiones GET y POST:

He de destacar que la función genérica de uso de jQuery AJAX es $.ajax(). Acá hemos explicado $.load() que es una versión simplificada y especializada de hacer peticiones Ajax. Existen otras formas simplificadas de hacer peticiones AJAX con jQuery que aunque no explicaremos aquí, haremos referencias para que conozcas de su existencia:

Nota: En ocasiones resulta conveniente que el método $.load() recupere un HTML pero que no lo pinte todo en nuestra página, sino solo una parte en concreto, en ese caso podemos utilizar una nueva característica del método .load(), se trata de especificar junto con la url un selector jQuery que filtre el resultado, por ejemplo: $('#resultado').load('Contenido.htm .MyClass'); esto nos devolverá de la página Contenido.html solo los elementos que tengan como ClassName el valor .MyClass.


Artículos Relacionados:

20 de noviembre de 2009

C#, Inicializadores de Objeto y de Colección

Los inicializadores de objeto permiten asignar valores a los campos o propiedades de un objeto en el momento de la creación sin tener que invocar explícitamente un constructor.

C# 3.0, Nueva Característica

Esta característica fue incorporada a partir de la versión C# 3.0 y sigue el camino de la simplificación de código, al igual que otras características que iré comentando en sucesivos artículos. Pero en fin, veamos un ejemplo que nos deje el concepto del todo claro:

namespace Pruebas
{
    class Program
    {
        static void Main(string[] args)
        {
            // Inicializador de Objeto
            Contacto objContacto =
                new Contacto { IdContacto=3, Nombre="Pedro", Telefono = "601 01 01 01" };
           
            //Inicializador de Colección
            List<Contacto> lstContactos = new List<Contacto>
            {
                new Contacto { IdContacto=1, Nombre="Pedro", Telefono="601 01 01 01" },
                new Contacto { IdContacto=2, Nombre="Maria", Telefono="601 01 01 02" },
                objContacto,
                new Contacto { IdContacto=4, Nombre="Juana", Telefono="601 01 01 03" }
            };
            //Inicializador de Array – Variante 1
            var arrContactos1 = new[]
            {
                new Contacto { IdContacto=11, Nombre="Pedro", Telefono="601 01 01 01" },
                new Contacto { IdContacto=12, Nombre="Maria", Telefono="601 01 01 02" },
                new Contacto { IdContacto=13, Nombre="Juana", Telefono="601 01 01 03" }
            };
            //Inicializador de Array – Variante 2
            Contacto[] arrContactos2 =
            {
                new Contacto { IdContacto=14, Nombre="Pedro", Telefono="601 01 01 01" },
                new Contacto { IdContacto=15, Nombre="Maria", Telefono="601 01 01 02" },
                new Contacto { IdContacto=16, Nombre="Juana", Telefono="601 01 01 03" }
            };
 
        }
    }
 
    public class Contacto
    {
        public int IdContacto {get; set;}
        public string Nombre { get; set; }
        public string Telefono { get; set; }
    }
}

Y así de simple es crearnos un objeto o una colección de objetos e inicializarlos en la misma línea.

Nota: En el ejemplo, hemos usado la clase Contacto y en ella hemos usado otra nueva característica de C# 3.0, se trata de las propiedades auto implementadas. Para obtener más información, consulte Propiedades auto implementadas.

 

Inicializador de Objeto Avanzado

El ejemplo anterior es bastante útil y frecuente, pero en determinadas ocasiones pudiéramos encontrarnos con la necesidad de inicializar objetos que poseen propiedades de solo lectura, que solo son seteados a través de constructores, veamos el ejemplo:

namespace Pruebas
{
   class Program
   {
     static void Main(string[] args)
     {
       Contacto objContacto = new Contacto { Nombre="Pedro", Telefono = "601010101" };
           
       var ctoEspecial1 =
              new ContactoEspecial(1) { Nombre="Mario", Telefono="622010101" };
 
       ContactoEspecial ctoEspecial2 =
              new ContactoEspecial(1) { Nombre="Paloma", Telefono="622010102" };
     }
   }
   public class Contacto
   {
        public string Nombre { get; set; }
        public string Telefono { get; set; }
   }
   public class ContactoEspecial : Contacto
   {
        public int TipoContacto { get; private set; }
        public ContactoEspecial(int tipo)
        {
            TipoContacto = tipo;
        }
   }
}

En el código anterior, hemos creado 2 clases “Contacto” y “ContactoEspecial”, esta ultima hereda de la clase contrato y adiciona una nueva propiedad “TipoContacto” que podemos leer pero no escribir, es de solo lectura (fíjate en el modificador “private”).

Al ser “TipoContacto” de solo lectura, no podemos inicializar esta propiedad de forma directa como hicimos en el primer ejemplo de código, para ello fue necesario llamar al constructor de la clase y luego continuar la inicialización:

var ctoEspecial1 =  new ContactoEspecial(1) { Nombre="Mario", Telefono="622010101" };
ContactoEspecial ctoEspecial2 = new ContactoEspecial(1) { Nombre="Paloma", Telefono="622010102" };
 
Estas dos líneas anteriores son muy similares en cuanto al resultado obtenido, ambas inicializan un objeto de tipo ContactoEspecial, solo la he empleado para poner un ejemplo de inferencia de tipo, de esto hablaré mas en otro momento.

Artículos Relacionados:

18 de noviembre de 2009

jQuery Tools – Overlay, Mostrar un dialogo Cargando…

jQuery Tools Overlay

Implementando un cuadro de dialogo modal, usando jQuery Tools Overlay.

jQuery Tools es una moderna colección de componentes de interfaces de usuarios. Hoy comentaremos uno de los componentes de esta colección, me refiero al control Overlay.

 

jQuery Tools, Overlay

Pero como siempre veamos el control jQuery Tools Overlay a través de un ejemplo. Imaginemos que estamos desarrollando una pagina web en la cual después de captar una ciudad de origen,  destino y una fecha, buscaremos los vuelos disponibles.

Es de suponer que el proceso de búsqueda de vuelos, tarde un poco, y por ende seria interesante mostrar una ventana modal de cargando datos…, que además de no impacientar al usuario, también nos asegura que este no haga clic más de una vez en el botón de búsqueda.

El resultado de la ventana modal con jQuery Tools Overlay sería algo así:

jQuery Tools Overlay Cargando

En el código de solución que está mas abajo veremos lo siguiente:

1. Lo primero será hacer referencia a la hoja de estilo css y a los js (jQuery y jQuery Tools)

2. Definir el componente Overlay de jQuery Tools.

3. Definir el botón que abrirá la ventana de dialogo modal y el contenido a mostrar.

 

 

 

 

jQuery Tools Overlay, ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowOverlayCargando.aspx.cs" Inherits="jQueryUI_ShowDialog" %>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Página Ejemplo Overlay Cargando...</title>
    <link rel="stylesheet" type="text/css"  
          href="http://static.flowplayer.org/tools/css/overlay-minimal.css"/>
    <script type="text/javascript"
          src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript"
          src="http://cdn.jquerytools.org/1.0.2/jquery.tools.min.js"></script>             
    <script type="text/javascript">
        $(document).ready(function(){
          $("#btnTest").overlay({
            expose: '#6096D4',
            closeOnClick: false,
            onLoad: function() {
                window.location = 'ShowOverlayCargando.aspx?Time=5000';
            },
            onBeforeClose: function() { return false }          
        });
      });
    </script>
</head>
<body>
    <form id="form1" runat="server">
      <div>
        <asp:Button ID="btnTest" rel="#overlay" Text="Buscar Vuelos"
             runat="server" />               

        <div class="overlay" style="height:200px; width:450px;" id="overlay">
            <h2 style="margin:10px 0">Cargando Datos</h2>
            <p style="float: left; margin:0px 20px 0 0;">
                <img alt="" src="http://static.flowplayer.org/img/title/eye192.png" />
            </p>
            <p>Cargando los datos, por favor espere...</p>
        </div>       
      </div>
    </form>
</body>
</html>

Debemos tener en cuenta que en el evento onLoad del componente Overlay, lo que hacemos es recargar la página pasándole como parámetro (en este ejemplo Time=5000, 5 segundos) en un caso real deberíamos pasarle las ciudades y fechas para la búsqueda de los vuelos.

 

jQuery Tools Overlay, C#


En este punto solo nos queda el código del codebehind, que es donde deberíamos hacer la búsqueda de los vuelos, en nuestro caso solo haremos una espera de 5 segundos para simular la demora.

public partial class jQueryUI_ShowDialog : Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            if (Request["Time"] != null)
                BuscarVuelos(Convert.ToInt32(Request["Time"].ToString()));
        }
    }
 
    private void BuscarVuelos(int timeOut)
    {
        Thread.Sleep(timeOut);
    }
}

Hasta aquí el ejemplo de uso de jQuery Tools Overlay. Espero te halla servido para iniciarte en esta interesante biblioteca de componentes.

Puedes ver además como resolver un ejemplo similar utilizando JQuery UI – Dialog, Mostrar un dialogo modal.

 

Artículos Relacionados: